@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel#blankStarterQuickPanel.pro-professional-collapsed {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }
}

:root {
  color-scheme: light;
  --bg: #f4f5f2;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-strong: #ffffff;
  --text: #1f2421;
  --ink: #111512;
  --muted: rgba(31, 36, 33, 0.58);
  --line: rgba(31, 36, 33, 0.11);
  --accent: #2f6f5e;
  --accent-2: #8a5a3b;
  --accent-soft: rgba(47, 111, 94, 0.1);
  --warm-soft: rgba(138, 90, 59, 0.09);
  --shadow: 0 18px 42px rgba(31, 36, 33, 0.09);
}

/* Trust sprint v103 final authority tail sentinel. */

/* Trust sprint v104: clean workbench shows decisions first, detailed controls on demand. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-toolbar > div {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box:focus-within .prompt-toolbar > div {
    display: flex !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls.collapsed {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls:not(.collapsed) {
    display: grid !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Trust sprint v104 final authority tail sentinel. */

/* Trust sprint v105 final authority: quiet default desktop create and denser professional templates. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .create-skin-row {
    width: min(420px, 34vw) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .starter-quick-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .starter-quick-tabs button:nth-child(n+4) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick:not(.hidden) {
    grid-template-rows: 40px 30px 148px 32px !important;
    gap: 6px !important;
    height: 274px !important;
    max-height: 274px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    height: 148px !important;
    max-height: 148px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    height: 100px !important;
    max-height: 100px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants button:nth-child(n+3) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status {
    min-height: 62px !important;
    max-height: 68px !important;
    gap: 4px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template {
    min-height: 0 !important;
    padding: 10px !important;
    gap: 8px !important;
    grid-template-rows: 58px auto auto auto !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template .template-visual-preview {
    min-height: 54px !important;
    max-height: 58px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template small,
  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .template-card-handoff small {
    -webkit-line-clamp: 2 !important;
  }
}

/* Trust sprint v105 final authority tail sentinel. */

/* Trust sprint v106 final authority: desktop skins are different workbenches, not recolors. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row {
    grid-column: 1 / -1 !important;
    min-height: 46px !important;
    height: 48px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 168px minmax(720px, 1fr) 268px !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    grid-column: 3 !important;
    width: 100% !important;
    max-width: 268px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    grid-template-rows: auto 184px auto !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    width: 100% !important;
    position: sticky !important;
    top: 92px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 176px !important;
    height: 184px !important;
    max-height: 184px !important;
    position: static !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    height: 100% !important;
    min-height: 140px !important;
    max-height: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #deliveryOrderPanel {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .settings-summary,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .price-hint {
    grid-column: 2 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 520px !important;
    height: 560px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick:not(.hidden) {
    height: 252px !important;
    max-height: 252px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 220px minmax(620px, 1fr) 360px !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    grid-column: 1 !important;
    width: 100% !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    display: grid !important;
    grid-row: 3 !important;
    min-height: 300px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    grid-column: 3 !important;
    width: 100% !important;
    max-width: 360px !important;
    min-height: 720px !important;
  }
}

/* Trust sprint v106 final authority tail sentinel. */

/* Trust sprint v107 final authority tail append: calmer clean desktop and earlier professional template signals. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    grid-template-rows: 34px 24px 118px 30px !important;
    gap: 4px !important;
    height: 220px !important;
    max-height: 220px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    height: 118px !important;
    max-height: 118px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    min-height: 28px !important;
    height: 30px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    min-height: 28px !important;
    height: 30px !important;
  }
}

/* Trust sprint v107 final authority tail sentinel. */

/* Trust sprint v109 final authority tail append: desktop information budget wins last. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview {
    gap: 6px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-proof,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-diff,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-echo,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-professional,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-missing,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: 82px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-main,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-decision,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-summary {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview {
    grid-template-columns: 176px minmax(0, 1fr) !important;
    max-height: 108px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-main {
    grid-column: 1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-gap-strip,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-signature {
    grid-column: 2 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-decision,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-summary {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: 112px !important;
    border-color: rgba(56, 189, 248, 0.34) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-main {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-signature,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-decision {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision-card,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card {
    min-height: 34px !important;
    padding: 6px 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision-card small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip em {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .settings-summary,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .price-hint {
    min-height: 38px !important;
    max-height: 46px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .settings-summary small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .price-hint small {
    display: none !important;
  }
}

/* Trust sprint v109 final authority tail sentinel. */

/* Trust sprint v108 legacy duplicate desktop budget removed; v109 and v0038 own this surface. */

/* Trust sprint v108 final authority tail append: empty prompt evidence and quieter desktop rail. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.is-empty {
    min-height: 72px !important;
    max-height: 96px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.is-empty .prompt-live-main {
    min-height: 0 !important;
    gap: 2px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.is-empty .prompt-live-main em,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.is-empty .prompt-live-main small {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.is-empty .prompt-live-gap-strip {
    min-height: 34px !important;
    height: 36px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.is-empty .prompt-live-gap-strip span {
    min-width: 0 !important;
    padding: 6px 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.is-empty .prompt-live-gap-strip b,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.is-empty .prompt-live-gap-strip em {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    max-height: 380px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small {
    display: none !important;
  }
}

@media (max-width: 760px) {
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.is-empty {
    display: grid !important;
    min-height: 92px !important;
    padding: 10px !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.is-empty .prompt-live-gap-strip {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* Trust sprint v108 final authority tail sentinel. */

/* Trust sprint v107 final authority: calmer clean desktop and earlier professional template signals. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    grid-template-rows: 34px 24px 118px 30px !important;
    gap: 4px !important;
    height: 220px !important;
    max-height: 220px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    height: 118px !important;
    max-height: 118px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    min-height: 28px !important;
    height: 30px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    min-height: 28px !important;
    height: 30px !important;
  }
}

/* Trust sprint v107 final authority tail sentinel. */

/* Trust sprint v106 final authority: desktop skins are different workbenches, not recolors. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row {
    grid-column: 1 / -1 !important;
    min-height: 46px !important;
    height: 48px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 168px minmax(720px, 1fr) 268px !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    grid-column: 3 !important;
    width: 100% !important;
    max-width: 268px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    grid-template-rows: auto 184px auto !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    width: 100% !important;
    position: sticky !important;
    top: 92px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 176px !important;
    height: 184px !important;
    max-height: 184px !important;
    position: static !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    height: 100% !important;
    min-height: 140px !important;
    max-height: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #deliveryOrderPanel {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .settings-summary,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .price-hint {
    grid-column: 2 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 520px !important;
    height: 560px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick:not(.hidden) {
    height: 252px !important;
    max-height: 252px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 220px minmax(620px, 1fr) 360px !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    grid-column: 1 !important;
    width: 100% !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    display: grid !important;
    grid-row: 3 !important;
    min-height: 300px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    grid-column: 3 !important;
    width: 100% !important;
    max-width: 360px !important;
    min-height: 720px !important;
  }
}

/* Trust sprint v106 final authority tail sentinel. */

/* Trust sprint v105: make the default desktop create screen quieter and more trustworthy. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .create-skin-row {
    width: min(420px, 34vw) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .starter-quick-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .starter-quick-tabs button:nth-child(n+4) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick:not(.hidden) {
    grid-template-rows: 40px 30px 148px 32px !important;
    gap: 6px !important;
    height: 274px !important;
    max-height: 274px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    height: 148px !important;
    max-height: 148px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    height: 100px !important;
    max-height: 100px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants button:nth-child(n+3) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status {
    min-height: 62px !important;
    max-height: 68px !important;
    gap: 4px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template {
    min-height: 0 !important;
    padding: 10px !important;
    gap: 8px !important;
    grid-template-rows: 58px auto auto auto !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template .template-visual-preview {
    min-height: 54px !important;
    max-height: 58px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template small,
  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .template-card-handoff small {
    -webkit-line-clamp: 2 !important;
  }
}

/* Trust sprint v105 final authority tail sentinel. */

/* Trust sprint v104: clean workbench shows decisions first, detailed controls on demand. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-toolbar > div {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box:focus-within .prompt-toolbar > div {
    display: flex !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls.collapsed {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls:not(.collapsed) {
    display: grid !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Trust sprint v104 final authority tail sentinel. */

@media (max-width: 760px) {
  html,
  body,
  .app-shell,
  .panel.composer {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .panel.composer,
  .panel.composer .prompt-box,
  .panel.composer .delivery-stack,
  .panel.composer .blank-starter-quick,
  .panel.composer .starter-action-board,
  .panel.composer .starter-style-panel,
  .panel.composer .starter-field-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    transform: translateY(-6px) !important;
  }

  .panel.composer #generateBtn {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .prompt-live-preview {
    max-height: none !important;
    overflow: visible !important;
  }

  .prompt-live-mobile {
    display: grid;
    gap: 8px;
  }

  .prompt-live-mobile-head {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(20, 184, 166, 0.14);
  }

  .prompt-live-mobile-head span,
  .prompt-live-mobile-head small,
  .prompt-live-mobile-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .prompt-live-mobile .prompt-live-gap-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .prompt-live-mobile .prompt-live-professional {
    display: block !important;
    max-height: none !important;
  }

  .prompt-live-mobile > button {
    display: grid !important;
    place-items: center;
    min-height: 38px;
    border-radius: 12px;
  }
}

/* Commercial MVP create workbench v88: generation readiness and prompt evidence. */
.delivery-node-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 10px;
  background: rgba(240, 253, 250, 0.86);
  color: #0f172a;
}

.delivery-node-status div,
.delivery-node-status span,
.delivery-node-status strong,
.delivery-node-status small,
.delivery-node-status b {
  min-width: 0;
}

.delivery-node-status span {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 900;
  color: rgba(15, 118, 110, 0.82);
}

.delivery-node-status strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.delivery-node-status small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(15, 23, 42, 0.66);
}

.delivery-node-status > b {
  justify-self: end;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
  font-size: 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.delivery-node-status.ok {
  border-color: rgba(16, 185, 129, 0.32);
  background: rgba(236, 253, 245, 0.94);
}

.delivery-node-status.warn {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(255, 251, 235, 0.96);
}

.delivery-node-status.warn span,
.delivery-node-status.warn > b {
  color: #b45309;
}

.delivery-node-status.preview,
.delivery-node-status.checking {
  border-color: rgba(59, 130, 246, 0.24);
  background: rgba(239, 246, 255, 0.94);
}

.delivery-node-status.preview span,
.delivery-node-status.preview > b,
.delivery-node-status.checking span,
.delivery-node-status.checking > b {
  color: #2563eb;
}

.delivery-node-status.danger {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(254, 242, 242, 0.96);
}

.delivery-node-status.danger span,
.delivery-node-status.danger > b {
  color: #b91c1c;
}

.prompt-live-gap-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

.prompt-live-gap-strip span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.78);
}

.prompt-live-gap-strip b {
  font-size: 10px;
  color: rgba(15, 118, 110, 0.84);
  white-space: nowrap;
}

.prompt-live-gap-strip em {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: rgba(15, 23, 42, 0.72);
  font-size: 11px;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status {
    order: -18 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    max-height: 116px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip span {
    padding: 6px 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status {
    grid-column: 1 !important;
    min-height: 48px !important;
    padding: 7px 9px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    max-height: 118px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status {
    border-color: rgba(56, 189, 248, 0.24) !important;
    background: rgba(8, 47, 73, 0.78) !important;
    color: #e0f2fe !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small {
    color: rgba(186, 230, 253, 0.68) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status > b {
    background: rgba(14, 165, 233, 0.16) !important;
    color: #7dd3fc !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    max-height: 138px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip span {
    border-color: rgba(56, 189, 248, 0.18) !important;
    background: rgba(8, 47, 73, 0.68) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip b {
    color: #7dd3fc !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip em {
    color: rgba(226, 244, 255, 0.82) !important;
  }
}

@media (max-width: 760px) {
  .delivery-node-status {
    padding: 9px 10px;
  }

  .delivery-node-status small {
    display: none;
  }

  .prompt-live-gap-strip {
    grid-template-columns: 1fr;
  }
}

/* Desktop create command desk v84: keep the working surface calm on wide screens. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell {
    column-gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer {
    align-items: start !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    gap: 7px !important;
    padding: 9px !important;
    max-height: 540px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 64px !important;
    max-height: 88px !important;
    padding: 11px 13px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main {
    min-height: 48px !important;
    padding: 7px 9px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    min-height: 36px !important;
    gap: 5px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article {
    min-height: 31px !important;
    padding: 4px 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .settings-summary small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .price-hint small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .settings-summary {
    min-height: 38px !important;
    padding: 6px 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls {
    max-height: 148px !important;
    overflow: hidden !important;
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls button,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls label {
    min-height: 36px !important;
    padding: 6px 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .price-hint {
    min-height: 28px !important;
    padding: 5px 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    min-height: 500px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick {
    max-height: 204px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board {
    max-height: 128px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    max-height: 148px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    max-height: 560px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-preflight:not(.hidden) {
    max-height: 136px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell .template-workbench-panel {
    gap: 10px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell .template-workbench-block {
    padding: 10px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell .template-choice-row button {
    min-height: 56px !important;
    padding: 8px 9px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell #templateBriefPanel {
    max-height: 268px !important;
    overflow: hidden !important;
  }
}

/* Result demo trust patch v85: keep the demo badge compact after longer wording. */
.placeholder-viewer .viewer-delivery-hero.placeholder {
  align-items: start !important;
}

.placeholder-viewer .viewer-delivery-hero.placeholder .viewer-delivery-score {
  align-self: start !important;
  min-height: 72px !important;
  height: 76px !important;
  max-height: 82px !important;
  padding: 7px 6px !important;
  overflow: hidden !important;
}

/* Desktop workbench v48: commercial-density pass for the create console. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer {
    align-items: start !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .creation-mode-panel {
    min-height: 94px !important;
    align-content: start !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .creation-mode-panel button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .mode-row button {
    min-height: 38px !important;
    letter-spacing: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-panel {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 37px !important;
    align-content: start !important;
    overflow: hidden !important;
    padding: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-card {
    min-height: 37px !important;
    height: 37px !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-card strong {
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .blank-starter-quick:not(.hidden),
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    gap: 7px !important;
    padding: 8px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
      var(--panel) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-head {
    min-height: 36px !important;
    padding: 7px 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-head small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-style-title small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-panel small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-open small {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-tabs button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-variants button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-chips button {
    min-height: 29px !important;
    height: 29px !important;
    padding: 0 9px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-style-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-panel {
    min-height: 78px !important;
    padding: 8px !important;
    align-content: start !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-next-actions button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-open {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer #generateBtn {
    min-height: 62px !important;
    font-size: 15px !important;
    box-shadow: 0 14px 32px rgba(6, 182, 212, 0.18) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-main {
    min-height: 76px !important;
    padding: 11px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-main small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-grid article:nth-child(n+4) {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-preflight:not(.hidden) {
    min-height: 58px !important;
    max-height: 72px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-preflight .preflight-head span,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-preflight .preflight-summary small {
    display: none !important;
  }
}

/* Template mobile density v29: keep visual previews as desktop affordances, not mobile entry clutter. */
@media (max-width: 720px) {
  :root[data-active-page="templates"] .template-choice-row button .template-visual-preview,
  :root[data-active-page="templates"] .professional-template .template-visual-preview,
  :root[data-active-page="templates"] .workflow .template-visual-preview {
    display: none !important;
  }

  :root[data-active-page="templates"] .template-choice-row button {
    min-height: 52px !important;
    max-height: 62px !important;
    padding: 8px 9px !important;
    align-content: center !important;
    gap: 3px !important;
  }

  :root[data-active-page="templates"] .template-choice-row button strong,
  :root[data-active-page="templates"] .template-choice-row button small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root[data-active-page="templates"] .template-choice-row button strong {
    white-space: nowrap !important;
  }

  :root[data-active-page="templates"] .template-choice-row button small {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    line-height: 1.28 !important;
  }
}

/* Trust sprint v119: unify the right rail as one generation confirmation console. */
.delivery-stack[data-confirm-console="true"] {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.66)),
    var(--panel);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.delivery-stack[data-confirm-console="true"]::before {
  content: "生成确认";
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.delivery-confirm-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.delivery-confirm-summary article {
  display: grid;
  min-width: 0;
  min-height: 42px;
  align-content: center;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.72);
}

.delivery-confirm-summary b,
.delivery-confirm-summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-confirm-summary b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.delivery-confirm-summary span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

@media (min-width: 1100px) {
  html:root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] {
    gap: 7px !important;
    padding: 10px !important;
  }

  html:root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-stack[data-confirm-console="true"]::before {
    margin-bottom: 2px !important;
  }

  html:root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-confirm-summary {
    order: -17 !important;
  }

  html:root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-confirm-summary article {
    min-height: 36px !important;
    padding: 5px 6px !important;
  }
}

:root[data-skin="cute"] .delivery-stack[data-confirm-console="true"] {
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.9), rgba(255, 255, 255, 0.72)),
    var(--panel);
}

:root[data-skin="pro"] .delivery-stack[data-confirm-console="true"] {
  border-color: rgba(56, 189, 248, 0.24);
  background:
    linear-gradient(180deg, rgba(8, 47, 73, 0.72), rgba(2, 8, 23, 0.74)),
    rgba(2, 8, 23, 0.9);
  box-shadow: 0 18px 48px rgba(8, 47, 73, 0.28);
}

:root[data-skin="pro"] .delivery-stack[data-confirm-console="true"]::before {
  color: rgba(186, 230, 253, 0.72);
}

:root[data-skin="pro"] .delivery-confirm-summary article {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(15, 23, 42, 0.72);
}

:root[data-skin="pro"] .delivery-confirm-summary b {
  color: rgba(125, 211, 252, 0.78);
}

:root[data-skin="pro"] .delivery-confirm-summary span {
  color: #e0f2fe;
}

/* Professional create v55: higher-specificity desktop pro cockpit overrides. */
@media (min-width: 1100px) {
  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: 258px minmax(660px, 1fr) 326px !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px !important;
    padding: 12px !important;
    background:
      linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(20, 184, 166, 0.035) 34%, transparent 62%),
      rgba(2, 8, 23, 0.86) !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .mode-row {
    display: none !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    grid-row: 2 / span 2 !important;
    max-height: 430px !important;
    padding: 9px !important;
    gap: 8px !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head small,
  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid small {
    display: none !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps,
  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps span {
    min-height: 62px !important;
    padding: 9px !important;
    align-content: start !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid button {
    min-height: 38px !important;
    height: 38px !important;
    justify-content: center !important;
    padding: 0 9px !important;
    text-align: center !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box {
    grid-row: 1 / span 2 !important;
    padding: 12px !important;
    gap: 11px !important;
    min-height: 326px !important;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96)),
      var(--panel) !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    min-height: 126px !important;
    max-height: 142px !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-live-preview {
    min-height: 96px !important;
    max-height: 104px !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-preflight:not(.hidden) {
    grid-row: 3 !important;
    min-height: 62px !important;
    max-height: 66px !important;
    margin-top: 0 !important;
    border-radius: 14px !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .delivery-stack {
    grid-row: 1 / span 3 !important;
    gap: 9px !important;
    padding: 12px !important;
  }

  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .delivery-order-grid,
  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .template-delivery-sheet,
  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .pricing-controls,
  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .generation-settings-panel,
  html:root:root:root[data-active-page="create"][data-skin][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .price-hint {
    display: none !important;
  }
}

/* Professional create v54: EOF placement so the pro cockpit wins over earlier generic rules. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .topbar .avatar {
    width: auto !important;
    min-width: 44px !important;
    max-width: 92px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: 258px minmax(660px, 1fr) 326px !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px !important;
    padding: 12px !important;
    background:
      linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(20, 184, 166, 0.035) 34%, transparent 62%),
      rgba(2, 8, 23, 0.86) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel {
    min-height: 84px !important;
    padding: 7px !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel button {
    min-height: 34px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .mode-row {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    grid-row: 2 / span 2 !important;
    max-height: 430px !important;
    padding: 9px !important;
    gap: 8px !important;
    scrollbar-width: thin !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid small {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-actions {
    display: grid !important;
    grid-template-columns: 1fr 0.72fr !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-actions button {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps span {
    min-height: 62px !important;
    padding: 9px !important;
    align-content: start !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid button {
    min-height: 38px !important;
    height: 38px !important;
    justify-content: center !important;
    padding: 0 9px !important;
    text-align: center !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid strong {
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-box {
    grid-row: 1 / span 2 !important;
    padding: 12px !important;
    gap: 11px !important;
    min-height: 326px !important;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96)),
      var(--panel) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    min-height: 126px !important;
    max-height: 142px !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-preview {
    min-height: 96px !important;
    max-height: 104px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-main {
    grid-template-columns: 136px minmax(0, 1fr) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-main strong,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-main small {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-preflight:not(.hidden) {
    grid-row: 3 !important;
    min-height: 62px !important;
    max-height: 66px !important;
    margin-top: 0 !important;
    border-radius: 14px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack {
    grid-row: 1 / span 3 !important;
    gap: 9px !important;
    padding: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-order-main {
    min-height: 82px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-order-grid,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .template-delivery-sheet,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .pricing-controls,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .generation-settings-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .price-hint {
    display: none !important;
  }
}

/* Professional create v53: final desktop rules must win after the generic density stack. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .topbar .avatar {
    width: auto !important;
    min-width: 44px !important;
    max-width: 92px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: 258px minmax(660px, 1fr) 326px !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px !important;
    padding: 12px !important;
    background:
      linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(20, 184, 166, 0.035) 34%, transparent 62%),
      rgba(2, 8, 23, 0.86) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel {
    min-height: 84px !important;
    padding: 7px !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel button {
    min-height: 34px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .mode-row {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    grid-row: 2 / span 2 !important;
    max-height: 430px !important;
    padding: 9px !important;
    gap: 8px !important;
    scrollbar-width: thin !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid small {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-actions {
    display: grid !important;
    grid-template-columns: 1fr 0.72fr !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-actions button {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps span {
    min-height: 62px !important;
    padding: 9px !important;
    align-content: start !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid button {
    min-height: 38px !important;
    height: 38px !important;
    justify-content: center !important;
    padding: 0 9px !important;
    text-align: center !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid strong {
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-box {
    grid-row: 1 / span 2 !important;
    padding: 12px !important;
    gap: 11px !important;
    min-height: 326px !important;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96)),
      var(--panel) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    min-height: 126px !important;
    max-height: 142px !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-preview {
    min-height: 96px !important;
    max-height: 104px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-main {
    grid-template-columns: 136px minmax(0, 1fr) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-main strong,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-main small {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-preflight:not(.hidden) {
    grid-row: 3 !important;
    min-height: 62px !important;
    max-height: 66px !important;
    margin-top: 0 !important;
    border-radius: 14px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack {
    grid-row: 1 / span 3 !important;
    gap: 9px !important;
    padding: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-order-main {
    min-height: 82px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-order-grid,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .template-delivery-sheet,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .pricing-controls,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .generation-settings-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .price-hint {
    display: none !important;
  }
}

/* Professional create v52: turn desktop pro mode into a compact delivery cockpit. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .topbar .avatar {
    width: auto !important;
    min-width: 44px !important;
    max-width: 92px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: 258px minmax(660px, 1fr) 326px !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px !important;
    padding: 12px !important;
    background:
      linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(20, 184, 166, 0.035) 34%, transparent 62%),
      rgba(2, 8, 23, 0.86) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel {
    min-height: 84px !important;
    padding: 7px !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .mode-row button {
    min-height: 34px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .mode-row {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    grid-row: 2 / span 2 !important;
    max-height: 430px !important;
    padding: 9px !important;
    gap: 8px !important;
    scrollbar-width: thin !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid small {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-actions {
    display: grid !important;
    grid-template-columns: 1fr 0.72fr !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-actions button {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps span {
    min-height: 62px !important;
    padding: 9px !important;
    align-content: start !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps b {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid button {
    min-height: 38px !important;
    height: 38px !important;
    justify-content: center !important;
    padding: 0 9px !important;
    text-align: center !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid strong {
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-expert-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-focus,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-grid {
    margin-top: 2px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-box {
    grid-row: 1 / span 2 !important;
    padding: 12px !important;
    gap: 11px !important;
    min-height: 326px !important;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96)),
      var(--panel) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    min-height: 126px !important;
    max-height: 142px !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-preview {
    min-height: 96px !important;
    max-height: 104px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-main {
    grid-template-columns: 136px minmax(0, 1fr) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-main strong,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-main small {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-preflight:not(.hidden) {
    grid-row: 3 !important;
    min-height: 62px !important;
    max-height: 66px !important;
    margin-top: 0 !important;
    border-radius: 14px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack {
    grid-row: 1 / span 3 !important;
    gap: 9px !important;
    padding: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-order-main {
    min-height: 82px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-order-grid,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .template-delivery-sheet,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .pricing-controls,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .generation-settings-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .price-hint {
    display: none !important;
  }
}

/* Template workbench v50: pro skin keeps the library dark, tight, and scannable. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-workbench-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    align-content: start !important;
    grid-template-columns: 176px minmax(0, 1fr) 292px !important;
    gap: 12px !important;
    padding: 12px !important;
    background: rgba(8, 21, 38, 0.82) !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-view-switch {
    width: 100% !important;
    padding: 8px !important;
    gap: 8px !important;
    background: rgba(2, 8, 23, 0.42) !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-view-switch button {
    min-height: 38px !important;
    color: rgba(226, 244, 255, 0.88) !important;
    background: rgba(15, 23, 42, 0.78) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-view-switch button.active {
    background: linear-gradient(135deg, #38bdf8, #14b8a6) !important;
    color: #03101d !important;
    border-color: rgba(125, 211, 252, 0.56) !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-workbench-grid {
    align-self: start !important;
    min-height: 0 !important;
    height: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-workbench-block {
    min-height: 156px !important;
    padding: 12px !important;
    background: rgba(6, 18, 34, 0.68) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-choice-row {
    gap: 8px !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-choice-row button,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .professional-template,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .workflow,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-case-card,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .deliverable-grid article {
    color: rgba(226, 244, 255, 0.92) !important;
    background: linear-gradient(180deg, rgba(14, 35, 58, 0.92), rgba(7, 17, 32, 0.92)) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    box-shadow: none !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-choice-row button strong,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .professional-template strong,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .workflow strong,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-case-card strong,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .deliverable-grid article strong {
    color: #f8fbff !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-choice-row button small,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .professional-template small,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .workflow small,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-case-card small,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .deliverable-grid article small {
    color: rgba(186, 230, 253, 0.72) !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell #templateBriefPanel.template-brief-panel {
    height: auto !important;
    max-height: 356px !important;
    overflow: hidden !important;
    background: rgba(5, 16, 31, 0.82) !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-launch {
    background: rgba(14, 165, 233, 0.11) !important;
    color: rgba(226, 244, 255, 0.92) !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-launch button {
    background: linear-gradient(135deg, #38bdf8, #14b8a6) !important;
    color: #03101d !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-value,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-flow article {
    background: rgba(15, 23, 42, 0.7) !important;
    border-color: rgba(56, 189, 248, 0.16) !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-value,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-flow article,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-primary,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-launch {
    padding: 8px !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-flow {
    gap: 6px !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-flow article {
    min-height: 38px !important;
    grid-template-columns: 24px 54px minmax(0, 1fr) !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-flow small,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-value strong,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-brief-launch small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-filter-panel,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-case-panel,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .professional-template-panel,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .package-panel,
  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell [data-template-library="workflows"] {
    background: rgba(8, 21, 38, 0.84) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-tabs button {
    color: rgba(226, 244, 255, 0.86) !important;
    background: rgba(15, 23, 42, 0.86) !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
  }

  :root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell .template-tabs button.active {
    color: #03101d !important;
    background: linear-gradient(135deg, #38bdf8, #14b8a6) !important;
  }
}

/* Professional create v51: keep high-value delivery mode focused on fields, prompt, and approval. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active),
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active):not(:has([data-creation-mode="blank"].active)) {
    grid-template-columns: 220px minmax(720px, 1fr) 330px !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 14px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    align-items: start !important;
    overflow: visible !important;
    position: static !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 94px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .mode-row {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    grid-column: 1 !important;
    grid-row: 3 / span 2 !important;
    min-height: 0 !important;
    max-height: 454px !important;
    overflow: auto !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-expert-panel article,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid button {
    border-radius: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-box {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    grid-column: 1 !important;
    min-height: 134px !important;
    max-height: 156px !important;
    width: 100% !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-preview {
    grid-column: 1 !important;
    min-height: 92px !important;
    max-height: 118px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .blank-starter-quick:not(.hidden),
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .prompt-preflight:not(.hidden) {
    grid-column: 2 !important;
    grid-row: 4 !important;
    align-self: start !important;
    min-height: 58px !important;
    max-height: 78px !important;
    margin-top: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 4 !important;
    position: sticky !important;
    top: 84px !important;
    max-height: calc(100vh - 118px) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) .track-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) #trackGuide,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:has([data-creation-mode="professional"].active) #blankStarterPanel {
    display: none !important;
  }
}

/* Desktop create workbench polish v36: denser center, calmer queue, clearer pro skin. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .app-shell,
  :root[data-active-page="create"][data-skin="clean"] .app-shell,
  :root[data-active-page="create"][data-skin="cute"] .app-shell,
  :root[data-active-page="create"][data-skin="pro"] .app-shell {
    width: min(calc(100vw - 72px), 1480px) !important;
    max-width: 1480px !important;
  }

  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 224px minmax(620px, 1fr) 338px !important;
    gap: 14px !important;
    width: min(calc(100vw - 72px), 1480px) !important;
    max-width: 1480px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box {
    display: grid !important;
    grid-template-rows: auto auto minmax(124px, auto) auto auto !important;
    gap: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer textarea#prompt {
    min-height: 112px !important;
    max-height: 132px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 12px !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 6px !important;
    padding: 10px !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    border-radius: 12px !important;
    background: rgba(8, 21, 38, 0.34) !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head strong {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-action-board,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-action-board,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-action-board,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-action-board,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-direction-card,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-direction-card,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-direction-card,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-direction-card {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"] .panel.composer .starter-field-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-field-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-field-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-field-panel {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel {
    grid-row: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-panel {
    grid-row: 2 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-variants,
  :root[data-active-page="create"] .panel.composer .starter-field-chips,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-style-panel .starter-quick-variants,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-style-panel .starter-quick-variants,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-style-panel .starter-quick-variants {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs button,
  :root[data-active-page="create"] .panel.composer .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer .starter-field-chips button {
    min-height: 34px !important;
    padding: 0 10px !important;
    text-align: center !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-next-actions,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-next-actions,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-next-actions,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-next-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-open {
    grid-column: 1 / -1 !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    max-height: 154px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-main {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-diff {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-diff em {
    min-width: 0 !important;
    max-width: 24% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-proof,
  :root[data-active-page="create"] .panel.composer .prompt-live-echo,
  :root[data-active-page="create"] .panel.composer .prompt-live-professional,
  :root[data-active-page="create"] .panel.composer .prompt-live-missing,
  :root[data-active-page="create"] .panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary-card {
    min-height: 44px !important;
    padding: 7px 8px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary-card small,
  :root[data-active-page="create"] .panel.composer .prompt-live-main em {
    -webkit-line-clamp: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack {
    align-content: start !important;
    max-height: 660px !important;
    overflow: hidden auto !important;
    padding-right: 2px !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-order-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight {
    max-height: 166px !important;
  }

  :root[data-active-page="create"] .queue,
  :root[data-active-page="create"][data-skin="clean"] .queue,
  :root[data-active-page="create"][data-skin="cute"] .queue,
  :root[data-active-page="create"][data-skin="pro"] .queue {
    width: min(calc(100vw - 72px), 1480px) !important;
    max-width: 1480px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
  }

  :root[data-active-page="create"] .queue-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  :root[data-active-page="create"] .queue-toolbar button,
  :root[data-active-page="create"] .queue-copy {
    min-height: 36px !important;
    border-radius: 10px !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
    background: rgba(8, 21, 38, 0.72) !important;
    color: rgba(226, 244, 255, 0.9) !important;
    box-shadow: none !important;
  }

  :root[data-active-page="create"] .queue-toolbar button:first-child,
  :root[data-active-page="create"] .queue-copy:not(.secondary) {
    background: linear-gradient(135deg, #16b8d8, #18d2a8) !important;
    color: #042033 !important;
  }

  :root[data-active-page="create"] .empty-queue {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border-style: solid !important;
    background: rgba(8, 21, 38, 0.56) !important;
  }

  :root[data-active-page="create"] .empty-queue strong {
    font-size: 13px !important;
  }

  :root[data-active-page="create"] .empty-queue small {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  :root[data-active-page="create"] .queue-empty-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .queue-empty-steps span {
    padding: 7px 8px !important;
    border-radius: 10px !important;
    background: rgba(14, 165, 233, 0.1) !important;
    color: rgba(226, 244, 255, 0.82) !important;
  }

  :root[data-active-page="create"] .empty-queue .queue-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    min-width: 168px !important;
  }
}

@media (min-width: 1100px) and (max-width: 1320px) {
  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 206px minmax(560px, 1fr) 308px !important;
    width: min(calc(100vw - 40px), 1260px) !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick:not(.hidden) {
    grid-template-columns: 150px minmax(0, 1fr) !important;
  }
}

/* Desktop workbench cleanup v34: turn the PC create page into a real three-rail workspace. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .app-shell,
  :root[data-active-page="create"][data-skin="clean"] .app-shell,
  :root[data-active-page="create"][data-skin="cute"] .app-shell,
  :root[data-active-page="create"][data-skin="pro"] .app-shell {
    width: min(calc(100vw - 96px), 1400px) !important;
    max-width: 1400px !important;
  }

  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 214px minmax(0, 1fr) 322px !important;
    grid-template-rows: auto auto auto 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 224px minmax(0, 1fr) 328px !important;
    gap: 13px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 226px minmax(0, 1fr) 330px !important;
    gap: 13px !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 7px !important;
    align-self: start !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel button {
    min-height: 38px !important;
    padding: 0 12px !important;
    justify-content: start !important;
    text-align: left !important;
    border-radius: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .mode-row {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  :root[data-active-page="create"] .panel.composer .mode-row button {
    min-height: 38px !important;
    padding: 0 12px !important;
    justify-content: start !important;
    text-align: left !important;
    border-radius: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .track-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    grid-column: 1 !important;
    grid-row: 3 / span 2 !important;
    width: 100% !important;
    max-height: none !important;
    margin-top: 0 !important;
    align-self: start !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-column: 2 !important;
    grid-row: 1 / span 4 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
    align-content: start !important;
    min-height: 0 !important;
    height: auto !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    min-height: 0 !important;
    background:
      linear-gradient(180deg, rgba(2, 6, 23, 0.04), rgba(2, 6, 23, 0.01)),
      var(--panel) !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head small,
  :root[data-active-page="create"] .panel.composer .starter-direction-card small,
  :root[data-active-page="create"] .panel.composer .starter-style-title small,
  :root[data-active-page="create"] .panel.composer .starter-field-panel small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs button,
  :root[data-active-page="create"] .panel.composer .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer .starter-field-chips button {
    min-height: 32px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-action-board {
    display: grid !important;
    grid-template-columns: 154px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-direction-card {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    min-height: 0 !important;
    padding: 10px !important;
    align-content: center !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    gap: 7px !important;
    padding: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-panel {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
    gap: 7px !important;
    padding: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-variants,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-style-panel .starter-quick-variants,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-style-panel .starter-quick-variants,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-style-panel .starter-quick-variants {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-chips {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-next-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-open {
    min-height: 40px !important;
    padding: 8px 12px !important;
  }

  :root[data-active-page="create"] .panel.composer textarea#prompt {
    min-height: 96px !important;
    max-height: 118px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(128px, 0.23fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    max-height: 204px !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-main,
  :root[data-active-page="create"] .panel.composer .prompt-live-summary,
  :root[data-active-page="create"] .panel.composer .prompt-live-proof,
  :root[data-active-page="create"] .panel.composer .prompt-live-echo,
  :root[data-active-page="create"] .panel.composer .prompt-live-diff,
  :root[data-active-page="create"] .panel.composer .prompt-live-professional,
  :root[data-active-page="create"] .panel.composer .prompt-live-missing {
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary-card,
  :root[data-active-page="create"] .panel.composer .prompt-live-proof-card {
    min-height: 42px !important;
    padding: 7px 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary-card small,
  :root[data-active-page="create"] .panel.composer .prompt-live-proof-card small,
  :root[data-active-page="create"] .panel.composer .prompt-live-main em,
  :root[data-active-page="create"] .panel.composer .prompt-live-echo p,
  :root[data-active-page="create"] .panel.composer .prompt-live-professional p,
  :root[data-active-page="create"] .panel.composer .prompt-live-missing em {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-proof,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-diff,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-professional,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-missing {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-proof,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-professional {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(126px, 0.2fr) minmax(0, 1fr) !important;
    max-height: 218px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-diff,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-professional,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-missing {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 4 !important;
    gap: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer #generateBtn {
    min-height: 56px !important;
    order: -3 !important;
  }

  :root[data-active-page="create"] .panel.composer #deliveryOrderPanel {
    order: -2 !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    grid-column: auto !important;
    grid-row: auto !important;
    order: -1 !important;
    max-height: 230px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-decision-board,
  :root[data-active-page="create"] .panel.composer .delivery-order-grid {
    gap: 6px !important;
  }

  :root[data-active-page="create"] .queue {
    width: min(calc(100vw - 96px), 1400px) !important;
    max-width: 1400px !important;
    margin-inline: auto !important;
  }
}

/* Desktop create workbench polish v36-final: must stay after legacy rescue blocks. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .app-shell,
  :root[data-active-page="create"][data-skin="clean"] .app-shell,
  :root[data-active-page="create"][data-skin="cute"] .app-shell,
  :root[data-active-page="create"][data-skin="pro"] .app-shell {
    width: min(calc(100vw - 72px), 1480px) !important;
    max-width: 1480px !important;
  }

  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 224px minmax(620px, 1fr) 338px !important;
    gap: 14px !important;
    width: min(calc(100vw - 72px), 1480px) !important;
    max-width: 1480px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box {
    display: grid !important;
    grid-template-rows: auto auto minmax(124px, auto) auto auto !important;
    gap: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer textarea#prompt {
    min-height: 112px !important;
    max-height: 132px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 12px !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 6px !important;
    padding: 10px !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    border-radius: 12px !important;
    background: rgba(8, 21, 38, 0.34) !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-action-board,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-action-board,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-action-board,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-action-board,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-direction-card,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-direction-card,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-direction-card,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-direction-card {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"] .panel.composer .starter-field-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-field-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-field-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-field-panel {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel {
    grid-row: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-panel {
    grid-row: 2 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-variants,
  :root[data-active-page="create"] .panel.composer .starter-field-chips,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-style-panel .starter-quick-variants,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-style-panel .starter-quick-variants,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-style-panel .starter-quick-variants {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs button,
  :root[data-active-page="create"] .panel.composer .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer .starter-field-chips button {
    min-height: 34px !important;
    padding: 0 10px !important;
    text-align: center !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-next-actions,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-next-actions,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-next-actions,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-next-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-open {
    grid-column: 1 / -1 !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    max-height: 154px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-main {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-diff {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-diff em {
    min-width: 0 !important;
    max-width: 24% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-proof,
  :root[data-active-page="create"] .panel.composer .prompt-live-echo,
  :root[data-active-page="create"] .panel.composer .prompt-live-professional,
  :root[data-active-page="create"] .panel.composer .prompt-live-missing,
  :root[data-active-page="create"] .panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary-card {
    min-height: 44px !important;
    padding: 7px 8px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary-card small,
  :root[data-active-page="create"] .panel.composer .prompt-live-main em {
    -webkit-line-clamp: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack {
    align-content: start !important;
    max-height: 660px !important;
    overflow: hidden auto !important;
    padding-right: 2px !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-order-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight {
    max-height: 166px !important;
  }

  :root[data-active-page="create"] .queue,
  :root[data-active-page="create"][data-skin="clean"] .queue,
  :root[data-active-page="create"][data-skin="cute"] .queue,
  :root[data-active-page="create"][data-skin="pro"] .queue {
    width: min(calc(100vw - 72px), 1480px) !important;
    max-width: 1480px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
  }

  :root[data-active-page="create"] .queue-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  :root[data-active-page="create"] .queue-toolbar button,
  :root[data-active-page="create"] .queue-copy {
    min-height: 36px !important;
    border-radius: 10px !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
    background: rgba(8, 21, 38, 0.72) !important;
    color: rgba(226, 244, 255, 0.9) !important;
    box-shadow: none !important;
  }

  :root[data-active-page="create"] .queue-toolbar button:first-child,
  :root[data-active-page="create"] .queue-copy:not(.secondary) {
    background: linear-gradient(135deg, #16b8d8, #18d2a8) !important;
    color: #042033 !important;
  }

  :root[data-active-page="create"] .empty-queue {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border-style: solid !important;
    background: rgba(8, 21, 38, 0.56) !important;
  }

  :root[data-active-page="create"] .empty-queue strong {
    font-size: 13px !important;
  }

  :root[data-active-page="create"] .empty-queue small {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  :root[data-active-page="create"] .queue-empty-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .queue-empty-steps span {
    padding: 7px 8px !important;
    border-radius: 10px !important;
    background: rgba(14, 165, 233, 0.1) !important;
    color: rgba(226, 244, 255, 0.82) !important;
  }

  :root[data-active-page="create"] .empty-queue .queue-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    min-width: 168px !important;
  }
}

@media (min-width: 1100px) and (max-width: 1320px) {
  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 206px minmax(560px, 1fr) 308px !important;
    width: min(calc(100vw - 40px), 1260px) !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick:not(.hidden) {
    grid-template-columns: 150px minmax(0, 1fr) !important;
  }
}

/* Desktop workbench cleanup v37: final placement override. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel {
    grid-column-start: 1 !important;
    grid-column-end: 2 !important;
    grid-row-start: 1 !important;
    grid-row-end: 2 !important;
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
  }

  :root[data-active-page="create"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .mode-row,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row {
    grid-column-start: 1 !important;
    grid-column-end: 2 !important;
    grid-row-start: 2 !important;
    grid-row-end: 3 !important;
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
  }
}

/* Desktop workbench cleanup v36: beat older high-specificity skin placement rules. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 7px !important;
    align-self: start !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .mode-row {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel {
    grid-column-start: 1 !important;
    grid-column-end: 2 !important;
    grid-row-start: 1 !important;
    grid-row-end: 2 !important;
  }

  :root[data-active-page="create"] .panel.composer .mode-row {
    grid-column-start: 1 !important;
    grid-column-end: 2 !important;
    grid-row-start: 2 !important;
    grid-row-end: 3 !important;
  }
}

/* Desktop layout rescue v9: remove blank canvases and make PC workbench scanable. */
@media (min-width: 1100px) {
  :root[data-active-page="templates"] .template-workbench-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    align-content: start !important;
    align-items: start !important;
    grid-template-columns: 232px minmax(0, 1fr) 360px !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
    padding: 14px !important;
    padding-bottom: 20px !important;
    overflow: visible !important;
  }

  :root[data-active-page="templates"] .template-view-switch {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  :root[data-active-page="templates"] .template-view-switch button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
  }

  :root[data-active-page="templates"] .template-workbench-grid {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="templates"] #templateBriefPanel {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    position: static !important;
    max-height: 430px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer {
    align-content: start !important;
    min-height: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: minmax(244px, 0.22fr) minmax(600px, 1fr) minmax(300px, 0.32fr) !important;
    grid-template-rows: 46px minmax(0, auto) !important;
    gap: 12px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 46px !important;
    max-height: 46px !important;
    padding: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .mode-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: auto !important;
    max-height: 520px !important;
    padding: 10px !important;
    gap: 8px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head {
    min-height: 0 !important;
    padding: 8px !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-actions button,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps {
    gap: 5px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps span {
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-expert-panel {
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-expert-panel article {
    padding: 7px 8px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid button {
    min-height: 34px !important;
    padding: 6px 8px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 !important;
    max-height: 520px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    max-height: 112px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    position: sticky !important;
    top: 14px !important;
    right: auto !important;
    width: 100% !important;
    max-height: calc(100vh - 128px) !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) #deliveryOrderPanel {
    max-height: 244px !important;
    overflow: auto !important;
  }
}

/* Desktop template height hard stop v10: beat skin-specific tall-panel rules. */
@media (min-width: 1100px) {
  :root[data-active-page="templates"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    align-content: start !important;
    padding-bottom: 20px !important;
  }

  :root[data-active-page="templates"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="clean"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="cute"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="pro"] .template-view-switch {
    position: static !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Desktop workbench contract: commercial layout, not a stacked mobile form. */
@media (min-width: 1100px) {
  :root[data-skin="clean"] .app-shell,
  :root[data-skin="cute"] .app-shell,
  :root[data-skin="pro"] .app-shell {
    width: min(100%, 1320px) !important;
    padding-inline: 24px !important;
  }

  :root[data-skin="clean"] .composer,
  :root[data-skin="cute"] .composer,
  :root[data-skin="pro"] .composer {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) 330px !important;
    gap: 14px !important;
    align-items: start !important;
    padding: 16px !important;
  }

  :root[data-skin="clean"] .composer .section-title,
  :root[data-skin="cute"] .composer .section-title,
  :root[data-skin="pro"] .composer .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-height: 34px;
    margin: 0 !important;
  }

  :root[data-skin="clean"] .composer .creation-mode-panel,
  :root[data-skin="cute"] .composer .creation-mode-panel,
  :root[data-skin="pro"] .composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-self: start;
    padding: 10px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-skin="clean"] .composer .creation-mode-panel button,
  :root[data-skin="cute"] .composer .creation-mode-panel button,
  :root[data-skin="pro"] .composer .creation-mode-panel button {
    justify-content: flex-start;
    min-height: 48px !important;
    padding: 10px 11px !important;
    text-align: left;
  }

  :root[data-skin="clean"] .composer .creation-mode-panel small,
  :root[data-skin="cute"] .composer .creation-mode-panel small,
  :root[data-skin="pro"] .composer .creation-mode-panel small {
    display: block !important;
    margin-top: 2px;
  }

  :root[data-skin="clean"] .composer .track-panel,
  :root[data-skin="cute"] .composer .track-panel,
  :root[data-skin="pro"] .composer .track-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: start;
  }

  :root[data-skin="clean"] .composer .track-card,
  :root[data-skin="cute"] .composer .track-card,
  :root[data-skin="pro"] .composer .track-card {
    min-height: 44px !important;
    padding: 9px 10px !important;
  }

  :root[data-skin="clean"] .composer .track-card small,
  :root[data-skin="cute"] .composer .track-card small,
  :root[data-skin="pro"] .composer .track-card small {
    display: block !important;
    margin-top: 3px;
    line-height: 1.25;
  }

  :root[data-skin="clean"] .composer .prompt-box,
  :root[data-skin="cute"] .composer .prompt-box,
  :root[data-skin="pro"] .composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 0;
    padding: 14px !important;
  }

  :root[data-skin="clean"] .composer textarea,
  :root[data-skin="cute"] .composer textarea,
  :root[data-skin="pro"] .composer textarea {
    min-height: 178px !important;
  }

  :root[data-skin="clean"] .composer .blank-starter-quick,
  :root[data-skin="cute"] .composer .blank-starter-quick,
  :root[data-skin="pro"] .composer .blank-starter-quick {
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-skin="clean"] .composer .prompt-preflight,
  :root[data-skin="cute"] .composer .prompt-preflight,
  :root[data-skin="pro"] .composer .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin: 0 !important;
  }

  :root[data-skin="clean"] .composer .delivery-stack,
  :root[data-skin="cute"] .composer .delivery-stack,
  :root[data-skin="pro"] .composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 4 !important;
    position: sticky !important;
    top: 16px;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-self: start;
    padding: 12px !important;
  }

  :root[data-skin="clean"] .composer .delivery-stack > *,
  :root[data-skin="cute"] .composer .delivery-stack > *,
  :root[data-skin="pro"] .composer .delivery-stack > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  :root[data-skin="clean"] .composer #generateBtn,
  :root[data-skin="cute"] .composer #generateBtn,
  :root[data-skin="pro"] .composer #generateBtn {
    width: 100%;
    min-height: 58px !important;
  }

  :root[data-skin="clean"] .composer .generation-settings-panel,
  :root[data-skin="clean"] .composer .pricing-controls,
  :root[data-skin="clean"] .composer .price-hint {
    display: none !important;
  }

  :root[data-skin="cute"] .composer {
    grid-template-columns: 240px minmax(0, 1fr) 340px !important;
  }

  :root[data-skin="cute"] .composer .starter-style-panel .starter-quick-variants {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-skin="pro"] .composer {
    grid-template-columns: 250px minmax(0, 1fr) 360px !important;
  }

  :root[data-skin="pro"] .composer .section-title {
    grid-column: 1 / 3 !important;
  }

  :root[data-skin="pro"] .composer .delivery-stack {
    border: 1px solid rgba(56, 189, 248, 0.18);
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.48), rgba(2, 6, 23, 0.82)),
      rgba(2, 6, 23, 0.86);
  }
}

:root[data-skin="clean"] {
  --bg: #f7f8f6;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-strong: #ffffff;
  --text: #202522;
  --ink: #111512;
  --muted: rgba(32, 37, 34, 0.6);
  --line: rgba(32, 37, 34, 0.1);
  --accent: #256f5d;
  --accent-2: #64748b;
  --accent-soft: rgba(37, 111, 93, 0.09);
  --warm-soft: rgba(100, 116, 139, 0.08);
  --shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

:root[data-skin="cute"] {
  --bg: #fff7fb;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-strong: #ffffff;
  --text: #352331;
  --ink: #24141f;
  --muted: rgba(53, 35, 49, 0.58);
  --line: rgba(219, 39, 119, 0.13);
  --accent: #db2777;
  --accent-2: #f59e0b;
  --accent-soft: rgba(244, 114, 182, 0.14);
  --warm-soft: rgba(251, 191, 36, 0.12);
  --shadow: 0 20px 46px rgba(219, 39, 119, 0.13);
}

:root[data-skin="pro"] {
  color-scheme: dark;
  --bg: #070b12;
  --surface: rgba(12, 18, 30, 0.88);
  --surface-strong: #111827;
  --text: #dbeafe;
  --ink: #f8fafc;
  --muted: rgba(219, 234, 254, 0.66);
  --line: rgba(56, 189, 248, 0.22);
  --accent: #38bdf8;
  --accent-2: #22d3ee;
  --accent-soft: rgba(56, 189, 248, 0.16);
  --warm-soft: rgba(34, 211, 238, 0.12);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

:root[data-skin="cute"] body {
  background:
    radial-gradient(circle at 14% 8%, rgba(244, 114, 182, 0.18), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(251, 191, 36, 0.16), transparent 26%),
    var(--bg);
}

:root[data-skin="pro"] body {
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.16), transparent 34%),
    linear-gradient(180deg, #05070c, #0b1120 48%, #020617);
}

:root[data-skin="clean"] .app-shell {
  padding-inline: 18px;
}

:root[data-skin="cute"] .app-shell {
  width: min(100%, 500px);
  padding-inline: 15px;
}

:root[data-skin="pro"] .app-shell {
  width: min(100%, 520px);
  padding-inline: 12px;
}

button,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

button:active {
  transform: translateY(1px);
}

.app-shell {
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px 112px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 16px;
}

.eyebrow,
.hero-kicker {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 21px;
  letter-spacing: 0;
  font-weight: 900;
}

.avatar {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 14px;
  background: var(--surface-strong);
  color: var(--accent);
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(18, 28, 24, 0.08);
}

:root[data-skin="cute"] .avatar,
:root[data-skin="cute"] .panel,
:root[data-skin="cute"] .home-card,
:root[data-skin="cute"] .quick-actions button,
:root[data-skin="cute"] .creation-mode-panel button,
:root[data-skin="cute"] .track-card,
:root[data-skin="cute"] .workflow,
:root[data-skin="cute"] .professional-template,
:root[data-skin="cute"] .template-case-card {
  border-radius: 22px;
}

:root[data-skin="pro"] .avatar,
:root[data-skin="pro"] .panel,
:root[data-skin="pro"] .home-card,
:root[data-skin="pro"] .quick-actions button,
:root[data-skin="pro"] .creation-mode-panel button,
:root[data-skin="pro"] .track-card,
:root[data-skin="pro"] .workflow,
:root[data-skin="pro"] .professional-template,
:root[data-skin="pro"] .template-case-card {
  border-radius: 8px;
}

.account-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(31, 36, 33, 0.04);
}

.account-strip div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0;
}

.status-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.account-strip strong {
  font-size: 13px;
}

.account-strip small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
}

.account-strip button {
  min-width: 76px;
  height: 34px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.guide-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 12px;
}

.guide-row button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.announcement-panel {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(31, 36, 33, 0.04);
}

.announcement-panel.hidden {
  display: none;
}

[data-page][hidden],
.generate-btn.hidden {
  display: none;
}

:root[data-active-page="create"] .generate-btn.hidden {
  display: inline-grid;
}

.announcement-list {
  display: grid;
  gap: 6px;
}

.announcement-item {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.announcement-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.announcement-title-row span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(47, 111, 94, 0.1);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.announcement-item strong,
.announcement-item > small,
.announcement-original small {
  display: block;
}

.announcement-item strong {
  font-size: 14px;
}

.announcement-headline,
.announcement-original small {
  margin-top: 5px;
  white-space: pre-wrap;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.announcement-digest {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.announcement-digest-shell,
.announcement-original {
  margin-top: 7px;
}

.announcement-digest-shell summary,
.announcement-original summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.announcement-digest section {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(31, 36, 33, 0.08);
  border-radius: 10px;
  background: rgba(247, 248, 245, 0.78);
}

.announcement-digest b,
.announcement-digest span,
.announcement-digest small {
  display: block;
}

.announcement-digest b {
  color: var(--accent);
  font-size: 12px;
}

.announcement-digest span {
  margin-top: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.announcement-digest small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.announcement-item.warning {
  border-color: rgba(217, 119, 6, 0.24);
  background: rgba(255, 247, 237, 0.8);
}

.announcement-item.success {
  border-color: rgba(0, 168, 120, 0.22);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 116px;
  gap: 14px;
  overflow: hidden;
  min-height: 184px;
  padding: 18px;
  border: 1px solid rgba(31, 36, 33, 0.1);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 248, 245, 0.94)),
    linear-gradient(90deg, rgba(47, 111, 94, 0.1), rgba(138, 90, 59, 0.07));
  box-shadow: var(--shadow);
}

:root[data-skin="clean"] .hero,
:root[data-skin="clean"] .panel,
:root[data-skin="clean"] .home-card,
:root[data-skin="clean"] .quick-actions button {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

:root[data-skin="clean"] .creation-mode-summary,
:root[data-skin="clean"] .delivery-order-grid,
:root[data-skin="clean"] .delivery-order-actions,
:root[data-skin="clean"] .track-guide,
:root[data-skin="clean"] .mobile-flow {
  display: none;
}

:root[data-skin="clean"] .composer {
  gap: 9px;
}

:root[data-skin="clean"] .blank-starter-panel {
  border-style: dashed;
}

:root[data-skin="clean"] .composer .prompt-box {
  order: 5;
}

:root[data-skin="clean"] .composer .blank-starter-panel {
  order: 6;
}

:root[data-skin="pro"] .assist {
  max-height: 180px;
  border-style: solid;
}

:root[data-skin="clean"] .hero-copy p:not(.hero-kicker),
:root[data-skin="clean"] .quick-actions-head small,
:root[data-skin="clean"] .scenario-note,
:root[data-skin="clean"] .home-card small {
  display: none;
}

:root[data-skin="clean"] .home-grid {
  grid-template-columns: minmax(0, 1fr) 220px;
}

:root[data-skin="clean"] .quick-actions button {
  min-height: 58px;
}

:root[data-skin="cute"] .hero {
  border-color: rgba(219, 39, 119, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(253, 242, 248, 0.92)),
    linear-gradient(90deg, rgba(244, 114, 182, 0.16), rgba(251, 191, 36, 0.12));
}

:root[data-skin="pro"] .hero {
  border-color: rgba(56, 189, 248, 0.28);
  background:
    repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.08) 0 1px, transparent 1px 44px),
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(8, 47, 73, 0.82));
}

:root[data-skin="pro"] .hero::after {
  border-radius: 4px;
  background:
    repeating-linear-gradient(0deg, rgba(56, 189, 248, 0.28) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(34, 211, 238, 0.18) 0 1px, transparent 1px 10px);
}

:root[data-skin="pro"] .home-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:root[data-skin="pro"] .quick-actions {
  grid-template-columns: 1.1fr repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

:root[data-skin="pro"] .quick-actions-head {
  grid-column: auto;
  align-items: start;
  flex-direction: column;
  justify-content: center;
}

:root[data-skin="pro"] .quick-actions-head small,
:root[data-skin="pro"] .scenario-note,
:root[data-skin="pro"] .home-card small {
  display: none;
}

:root[data-skin="cute"] .creation-mode-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:root[data-skin="cute"] .creation-mode-panel button {
  min-height: 88px;
  padding: 14px;
}

:root[data-skin="cute"] .creation-mode-panel small,
:root[data-skin="cute"] .quick-actions small {
  display: block;
}

:root[data-skin="pro"] .creation-mode-summary {
  grid-template-columns: minmax(0, 1fr);
}

:root[data-skin="pro"] .creation-mode-summary small,
:root[data-skin="pro"] .delivery-order-grid,
:root[data-skin="pro"] .blank-starter-head small {
  display: none;
}

:root[data-skin="clean"] .composer .section-title {
  margin-bottom: 4px;
}

:root[data-skin="clean"] .composer .track-panel,
:root[data-skin="clean"] .composer .professional-brief {
  display: none;
}

:root[data-skin="clean"] .blank-starter-quick {
  padding: 8px;
  border-radius: 10px;
}

:root[data-skin="clean"] .starter-quick-head small,
:root[data-skin="clean"] .starter-question-row small,
:root[data-skin="clean"] .starter-question-row em {
  display: none;
}

:root[data-skin="clean"] .starter-question-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:root[data-skin="clean"] .starter-diagnosis-card {
  padding: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

:root[data-skin="clean"] .starter-diagnosis-card small {
  display: none;
}

:root[data-skin="clean"] .starter-question-row button {
  min-height: 34px;
  padding: 6px 8px;
  text-align: center;
}

:root[data-skin="clean"] .composer .mode-row {
  order: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:root[data-skin="clean"] .composer .creation-mode-panel {
  order: 3;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:root[data-skin="clean"] .composer .prompt-box {
  order: 4;
}

:root[data-skin="clean"] .composer .prompt-preflight {
  order: 5;
}

:root[data-skin="clean"] .composer .delivery-stack {
  order: 6;
}

:root[data-skin="cute"] .composer {
  gap: 13px;
}

:root[data-skin="cute"] .composer .section-title {
  align-items: flex-start;
  padding: 4px 3px 0;
}

:root[data-skin="cute"] .composer .mode-row {
  order: 2;
  grid-template-columns: 1fr;
}

:root[data-skin="cute"] .composer .mode-row button {
  min-height: 42px;
  border-radius: 18px;
}

:root[data-skin="cute"] .composer .creation-mode-panel {
  order: 3;
}

:root[data-skin="cute"] .composer .prompt-box {
  order: 4;
  padding: 12px;
  border: 1px solid rgba(219, 39, 119, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
}

:root[data-skin="cute"] .composer .delivery-stack {
  order: 5;
}

:root[data-skin="cute"] .composer .track-panel {
  order: 6;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:root[data-skin="cute"] .blank-starter-quick {
  gap: 10px;
  padding: 12px;
}

:root[data-skin="cute"] .starter-quick-tabs button,
:root[data-skin="cute"] .starter-quick-variants button {
  min-height: 38px;
  padding-inline: 13px;
}

:root[data-skin="cute"] .starter-question-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:root[data-skin="cute"] .starter-question-row button {
  min-height: 72px;
  border-radius: 16px;
}

:root[data-skin="cute"] .composer .prompt-preflight {
  order: 7;
}

:root[data-skin="pro"] .composer {
  border-color: rgba(56, 189, 248, 0.22);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.86)),
    var(--surface);
}

:root[data-skin="pro"] .composer .section-title {
  margin-bottom: 2px;
}

:root[data-skin="pro"] .composer .section-title h3::after {
  content: " / CONTROL";
  color: #38bdf8;
  font-size: 11px;
  font-weight: 900;
}

:root[data-skin="pro"] .composer .mode-row {
  order: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:root[data-skin="pro"] .composer .track-panel {
  order: 3;
  grid-template-columns: 1fr;
  align-content: start;
}

:root[data-skin="pro"] .composer .creation-mode-panel {
  order: 4;
  grid-template-columns: 1fr;
  align-content: start;
}

:root[data-skin="pro"] .composer .prompt-box {
  order: 5;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.36);
}

:root[data-skin="pro"] .composer .prompt-preflight {
  order: 6;
  min-width: 0;
}

:root[data-skin="pro"] .composer .delivery-stack {
  order: 7;
  align-self: start;
}

:root[data-skin="pro"] .composer .track-guide {
  order: 8;
}

:root[data-skin="pro"] .composer .professional-brief {
  order: 9;
}

:root[data-skin="pro"] .blank-starter-quick {
  gap: 8px;
  border-radius: 8px;
}

:root[data-skin="pro"] .starter-quick-head {
  align-items: start;
}

:root[data-skin="pro"] .starter-quick-head small {
  display: none;
}

:root[data-skin="pro"] .starter-quick-tabs,
:root[data-skin="pro"] .starter-quick-variants {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:root[data-skin="pro"] .starter-quick-tabs button,
:root[data-skin="pro"] .starter-quick-variants button {
  min-height: 32px;
  border-radius: 6px;
  padding-inline: 6px;
}

:root[data-skin="pro"] .starter-question-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:root[data-skin="pro"] .starter-question-row button {
  min-height: 66px;
  border-radius: 6px;
}

.home-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 10px;
  margin-top: 10px;
}

.home-grid-legacy {
  display: none;
}

.home-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 124px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(31, 36, 33, 0.04);
}

.home-card.strong {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 247, 0.9)),
    linear-gradient(90deg, var(--accent-soft), transparent);
}

.home-card span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.home-card strong {
  font-size: 17px;
  line-height: 1.28;
}

.home-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.home-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-audience b {
  padding: 5px 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.home-card button {
  justify-self: start;
  height: 34px;
  border-radius: 12px;
  padding: 0 12px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.hero::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 92px;
  height: 92px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(47, 111, 94, 0.13) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(138, 90, 59, 0.1) 0 1px, transparent 1px 14px);
  opacity: 0.75;
}

.hero-copy,
.credit-card {
  position: relative;
  z-index: 1;
}

.hero h2 {
  max-width: 260px;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 950;
}

.hero p:last-child {
  max-width: 226px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.credit-card {
  align-self: end;
  display: flex;
  min-height: 128px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.credit-card span,
.credit-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.credit-card strong {
  font-size: 28px;
}

.credit-card button {
  width: 100%;
  height: 34px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 8px;
}

.quick-actions-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.quick-actions-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.quick-actions-head small {
  max-width: 330px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.quick-actions button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-content: center;
  min-height: 62px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  box-shadow: 0 8px 20px rgba(31, 36, 33, 0.04);
}

.quick-actions button.secondary {
  opacity: 0.78;
}

.quick-actions button:hover,
.workflow:hover,
.scenario-scroll button:hover,
.home-card button:hover,
.plan-card button:hover {
  border-color: rgba(15, 118, 110, 0.22);
  box-shadow: 0 14px 30px rgba(18, 28, 24, 0.09);
}

.quick-actions span {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 25px;
  grid-row: 1 / 3;
  align-self: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf7;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.quick-actions strong,
.quick-actions small {
  display: block;
  min-width: 0;
}

.quick-actions strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.quick-actions small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.scenario-strip {
  padding-right: 0;
}

.home-hero {
  min-height: 104px;
  padding: 12px;
}

.home-hero .credit-card {
  min-height: 82px;
}

.home-hero h2 {
  max-width: 440px;
  font-size: 23px;
}

.home-hero p:last-child {
  max-width: 460px;
  margin-top: 5px;
  font-size: 12px;
}

.scenario-note {
  margin: -4px 15px 11px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.scenario-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-right: 15px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.scenario-scroll::-webkit-scrollbar {
  display: none;
}

.scenario-scroll button {
  flex: 0 0 172px;
  min-height: 94px;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 249, 246, 0.9));
  color: var(--text);
  text-align: left;
}

.scenario-scroll button[hidden] {
  display: none;
}

.scenario-scroll strong,
.scenario-scroll small {
  display: block;
}

.scenario-scroll strong {
  font-size: 14px;
}

.scenario-scroll small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.panel {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(31, 36, 33, 0.05);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title h3 {
  font-size: 16px;
}

.section-title button,
.section-title a,
.section-title span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.prompt-box {
  display: block;
}

.composer .section-title {
  order: 1;
}

.composer .creation-mode-panel {
  order: 2;
}

.composer .creation-mode-summary {
  order: 3;
}

.composer .mode-row {
  order: 4;
}

.composer .blank-starter-panel {
  order: 5;
}

.composer .prompt-box {
  order: 6;
}

.composer .delivery-stack {
  order: 7;
}

.composer .mobile-flow {
  order: 8;
}

.composer .track-panel {
  order: 9;
}

.composer .track-guide {
  order: 10;
}

.composer .professional-brief {
  order: 11;
}

.composer .prompt-preflight {
  order: 12;
}

.prompt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.prompt-toolbar span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.prompt-toolbar div {
  display: flex;
  gap: 6px;
}

.prompt-toolbar button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.track-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.track-card {
  min-width: 0;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  text-align: left;
  box-shadow: var(--soft-shadow);
}

.track-card strong,
.track-card small {
  display: block;
}

.track-card strong {
  margin-bottom: 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.track-card small {
  color: rgba(32, 52, 45, 0.66);
  font-size: 11px;
  line-height: 1.4;
}

.track-card.active {
  border-color: rgba(15, 118, 110, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(230, 244, 238, 0.78)),
    var(--accent-soft);
  box-shadow: 0 10px 26px rgba(15, 118, 110, 0.08);
}

textarea {
  width: 100%;
  min-height: 116px;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  padding: 14px;
  background: #fff;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

textarea:focus {
  border-color: rgba(0, 168, 120, 0.34);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.assist {
  margin-top: 9px;
  padding: 11px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  max-height: 330px;
  overflow: auto;
}

.assist.hidden {
  display: none;
}

.assist span {
  color: var(--accent);
  font-weight: 800;
}

.assist-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.assist-list .assist-option:nth-of-type(n + 4) {
  display: none;
}

.assist-insight {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 12px;
  background: #fff;
}

.assist-insight strong,
.assist-insight small,
.assist-insight p {
  display: block;
}

.assist-insight strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.assist-insight small,
.assist-insight p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.assist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.assist-chips em {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.08);
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.assist-option {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
}

.assist-option strong {
  display: block;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 11px;
}

.assist-option small {
  display: block;
  margin-bottom: 3px;
  color: rgba(32, 52, 45, 0.62);
  font-size: 11px;
  font-weight: 800;
}

.assist-option span {
  display: block;
  line-height: 1.55;
  display: -webkit-box;
  max-height: 1.6em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.prompt-live-preview {
  display: grid;
  grid-template-columns: minmax(130px, 0.28fr) minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  margin: 7px 0 0;
  padding: 6px;
  border: 1px solid rgba(15, 118, 110, 0.13);
  border-radius: 10px;
  background: rgba(240, 253, 250, 0.82);
}

.prompt-live-preview.hidden {
  display: none;
}

.prompt-live-preview div,
.prompt-live-preview span,
.prompt-live-preview strong,
.prompt-live-preview small,
.prompt-live-preview p,
.prompt-live-preview em,
.prompt-live-preview button {
  min-width: 0;
}

.prompt-live-main,
.prompt-live-summary,
.prompt-live-plan,
.prompt-live-proof,
.prompt-live-professional,
.prompt-live-diff,
.prompt-live-missing {
  display: grid;
  gap: 2px;
}

.prompt-live-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.prompt-live-summary-card {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
}

.prompt-live-summary-card b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.prompt-live-summary-card small {
  display: -webkit-box;
  max-height: 1.35em;
  overflow: hidden;
  color: var(--ink);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.prompt-live-proof {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.prompt-live-proof-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}

.prompt-live-proof-card b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.prompt-live-proof-card small {
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-live-preview span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.prompt-live-preview strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.prompt-live-plan b,
.prompt-live-professional b,
.prompt-live-missing b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.prompt-live-preview small,
.prompt-live-preview p,
.prompt-live-preview em {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.prompt-live-preview p {
  display: -webkit-box;
  max-height: 1.45em;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.prompt-live-professional {
  grid-column: 1 / -1;
  padding: 0;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.prompt-live-professional summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 5px 8px;
  cursor: pointer;
}

.prompt-live-professional summary::-webkit-details-marker {
  display: none;
}

.prompt-live-professional summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.prompt-live-professional p {
  max-height: 6.4em;
  margin: 0;
  padding: 0 9px 8px;
  -webkit-line-clamp: 4;
}

.prompt-live-submit-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 0 8px 8px;
}

.prompt-live-submit-card {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 42px;
  padding: 6px 7px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
}

.prompt-live-submit-card b {
  overflow: hidden;
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-live-submit-card small {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-live-preview small {
  display: -webkit-box;
  max-height: 1.45em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.prompt-live-diff {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.prompt-live-preview em {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.08);
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.prompt-live-main em {
  display: -webkit-box;
  max-height: 1.45em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-align: left;
}

.prompt-live-missing {
  display: none;
}

.prompt-live-preview button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

:root[data-skin="cute"] .prompt-live-preview {
  border-color: rgba(219, 39, 119, 0.13);
  border-radius: 18px;
  background: rgba(253, 242, 248, 0.86);
}

:root[data-skin="cute"] .prompt-live-summary-card {
  border-color: rgba(219, 39, 119, 0.1);
  background: rgba(255, 255, 255, 0.7);
}

:root[data-skin="pro"] .prompt-live-preview {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(2, 6, 23, 0.5);
}

:root[data-skin="pro"] .prompt-live-summary-card {
  border-color: rgba(56, 189, 248, 0.16);
  background: rgba(8, 47, 73, 0.46);
}

:root[data-skin="pro"] .prompt-live-proof-card {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(2, 6, 23, 0.52);
}

:root[data-skin="pro"] .prompt-live-proof-card small {
  color: rgba(224, 242, 254, 0.9);
}

:root[data-skin="pro"] .prompt-live-preview em {
  background: rgba(56, 189, 248, 0.14);
}

.blank-starter-quick {
  display: grid;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 14px;
  background: rgba(248, 255, 253, 0.82);
}

.blank-starter-quick.hidden {
  display: none;
}

.starter-quick-head,
.starter-quick-tabs,
.starter-quick-variants {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.starter-quick-head {
  justify-content: space-between;
}

.starter-quick-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.starter-quick-head span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.starter-quick-head strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.starter-quick-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  max-height: 2.7em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.starter-quick-head > button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.starter-quick-tabs,
.starter-quick-variants {
  flex-wrap: wrap;
}

.starter-workflow-strip,
.starter-field-chips {
  display: grid;
  gap: 7px;
}

.starter-workflow-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.starter-workflow-step {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.starter-workflow-step b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.starter-workflow-step span {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

.starter-workflow-step small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}

.starter-workflow-step.active {
  background: rgba(240, 253, 250, 0.92);
}

.starter-action-board {
  display: grid;
  grid-template-columns: minmax(140px, 0.75fr) minmax(0, 1.4fr);
  gap: 8px;
  align-items: stretch;
}

.starter-direction-card,
.starter-style-panel,
.starter-field-panel {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.starter-direction-card {
  display: grid;
  align-content: center;
  gap: 4px;
}

.starter-direction-card span,
.starter-field-panel span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.starter-direction-card strong,
.starter-field-panel strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.starter-direction-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.starter-style-panel {
  display: grid;
  gap: 8px;
}

.starter-field-panel {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
}

.starter-field-panel > div:first-child {
  display: grid;
  gap: 2px;
}

.starter-field-panel small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.starter-next-actions {
  grid-column: 1 / -1;
}

.starter-quick-tabs button,
.starter-quick-variants button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.starter-quick-tabs button.active,
.starter-quick-variants button:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.starter-question-row,
.blank-question-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.starter-field-chips {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.starter-field-chips button {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.starter-field-chips button:hover {
  border-color: var(--accent);
  background: rgba(240, 253, 250, 0.96);
}

.starter-field-open {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px dashed rgba(15, 118, 110, 0.24);
  border-radius: 12px;
  background: rgba(240, 253, 250, 0.72);
  color: var(--ink);
  text-align: left;
}

.starter-field-open span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.starter-field-open strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 950;
}

.starter-field-open small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.starter-field-open:hover {
  border-style: solid;
  border-color: var(--accent);
  background: rgba(204, 251, 241, 0.82);
}

.starter-diagnosis-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}

.starter-diagnosis-card div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.starter-diagnosis-card span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.starter-diagnosis-card strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.starter-diagnosis-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  max-height: 2.7em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.starter-diagnosis-card button,
.starter-skeleton-btn {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.starter-skeleton-btn {
  width: 100%;
  margin-top: 8px;
}

.starter-question-row button,
.blank-question-list button {
  min-width: 0;
  min-height: 64px;
  padding: 7px 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  text-align: left;
}

.starter-question-row button:hover,
.blank-question-list button:hover {
  border-color: var(--accent);
  background: rgba(240, 253, 250, 0.96);
  transform: translateY(-1px);
}

.starter-question-row b,
.starter-question-row small,
.starter-question-row em,
.blank-question-list b,
.blank-question-list small,
.blank-question-list em {
  display: block;
}

.starter-question-row b,
.blank-question-list b {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.starter-question-row small,
.blank-question-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.starter-question-row em,
.blank-question-list em {
  margin-top: 5px;
  color: var(--ink);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.starter-field-sheet {
  display: grid;
  gap: 12px;
}

.starter-field-sheet header {
  display: grid;
  gap: 4px;
}

.starter-field-sheet header span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.starter-field-sheet header strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.starter-field-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.starter-field-status article {
  display: grid;
  gap: 3px;
  min-height: 70px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, #fff);
}

.starter-field-status article.done {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.starter-field-status b {
  color: var(--ink);
  font-size: 12px;
}

.starter-field-status small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.starter-field-status span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
}

.starter-field-sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.starter-field-sheet-grid button {
  min-height: 72px;
}

.starter-field-sheet-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.starter-field-sheet-actions .primary {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 950;
}

.starter-field-sheet-actions small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

:root[data-skin="cute"] .blank-starter-quick {
  border-color: rgba(219, 39, 119, 0.13);
  border-radius: 22px;
  background: rgba(253, 242, 248, 0.82);
}

:root[data-skin="cute"] .starter-quick-tabs button,
:root[data-skin="cute"] .starter-quick-variants button {
  border-radius: 18px;
}

:root[data-skin="pro"] .blank-starter-quick {
  border-color: rgba(56, 189, 248, 0.2);
  background: rgba(2, 6, 23, 0.52);
}

:root[data-skin="pro"] .starter-quick-tabs button,
:root[data-skin="pro"] .starter-quick-variants button {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
}

:root[data-skin="pro"] .starter-diagnosis-card,
:root[data-skin="pro"] .starter-question-row button,
:root[data-skin="pro"] .blank-question-list button {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(15, 23, 42, 0.68);
}

:root[data-skin="pro"] .starter-diagnosis-card strong,
:root[data-skin="pro"] .starter-question-row em,
:root[data-skin="pro"] .blank-question-list em {
  color: var(--text);
}

:root[data-skin="pro"] .starter-quick-tabs button.active,
:root[data-skin="pro"] .starter-quick-variants button:hover {
  background: var(--accent);
  color: #00111c;
}

.prompt-preflight {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.prompt-preflight.hidden {
  display: none;
}

.prompt-understanding {
  display: grid;
  gap: 7px;
  margin: 10px 0;
  padding: 9px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.92), rgba(255, 255, 255, 0.94)),
    var(--surface);
}

.prompt-understanding-main {
  display: grid;
  gap: 3px;
}

.prompt-understanding-main span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.prompt-understanding-main strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.prompt-understanding-main small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  display: -webkit-box;
  max-height: 2.7em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.prompt-understanding-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prompt-understanding-strip span {
  padding: 5px 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.prompt-understanding-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.prompt-compare {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 7px;
}

.prompt-compare div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.66);
}

.prompt-compare b,
.prompt-compare small {
  display: block;
}

.prompt-compare b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.prompt-compare small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
  display: -webkit-box;
  max-height: 2.9em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.prompt-compare.expanded small {
  max-height: none;
  -webkit-line-clamp: initial;
}

.prompt-understanding:not(.expanded) .prompt-understanding-grid {
  grid-template-columns: minmax(0, 1fr);
}

.prompt-understanding:not(.expanded) .prompt-understanding-grid article:nth-child(n+2) {
  display: none;
}

.prompt-understanding-grid article {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.prompt-understanding-grid b,
.prompt-understanding-grid small {
  display: block;
}

.prompt-understanding-grid b {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.prompt-understanding-grid small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  display: -webkit-box;
  max-height: 2.7em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.prompt-understanding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prompt-understanding-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.prompt-understanding-actions button:first-child {
  background: var(--accent);
  color: #fff;
}

.prompt-understanding-actions button.secondary {
  opacity: 0.72;
}

:root[data-skin="cute"] .prompt-understanding {
  border-color: rgba(219, 39, 119, 0.14);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(253, 242, 248, 0.95), rgba(255, 255, 255, 0.9));
}

:root[data-skin="pro"] .prompt-understanding {
  border-color: rgba(56, 189, 248, 0.2);
  background:
    linear-gradient(135deg, rgba(8, 47, 73, 0.5), rgba(15, 23, 42, 0.88)),
    rgba(2, 6, 23, 0.48);
}

:root[data-skin="pro"] .prompt-understanding-grid article {
  border-color: rgba(56, 189, 248, 0.16);
  background: rgba(2, 6, 23, 0.42);
}

:root[data-skin="pro"] .prompt-understanding-strip span {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(15, 23, 42, 0.72);
  color: #bae6fd;
}

:root[data-skin="pro"] .prompt-compare div {
  border-color: rgba(56, 189, 248, 0.16);
  background: rgba(2, 6, 23, 0.42);
}

:root[data-skin="pro"] .prompt-understanding-actions button,
:root[data-skin="pro"] .starter-question-row button,
:root[data-skin="pro"] .blank-question-list button {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(2, 6, 23, 0.46);
  color: #bae6fd;
}

:root[data-skin="pro"] .prompt-understanding-actions button:first-child,
:root[data-skin="pro"] .prompt-live-preview button,
:root[data-skin="pro"] .starter-quick-head > button {
  border-color: rgba(56, 189, 248, 0.36);
  background: #0284c7;
  color: #fff;
}

.professional-brief {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 13px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.88), rgba(255, 255, 255, 0.94)),
    var(--surface);
  container-type: inline-size;
}

.professional-brief.hidden {
  display: none;
}

.professional-brief-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.professional-brief-head span,
.professional-brief-head strong,
.professional-brief-head small,
.professional-brief li {
  display: block;
}

.professional-brief-head span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.professional-brief-head strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.professional-brief-head small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.professional-brief-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.professional-brief-head button {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.professional-brief-head button[data-professional-brief-toggle] {
  border: 1px solid rgba(15, 118, 110, 0.16);
  background: rgba(255, 255, 255, 0.78);
  color: var(--accent);
}

.professional-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.professional-type-grid button {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(15, 118, 110, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--text);
  text-align: left;
}

.professional-type-grid button:hover,
.professional-type-grid button.active {
  border-color: rgba(15, 118, 110, 0.32);
  background: var(--accent);
  color: #fff;
}

.professional-type-grid strong,
.professional-type-grid small {
  display: block;
  min-width: 0;
}

.professional-type-grid strong {
  font-size: 12px;
  font-weight: 950;
}

.professional-type-grid small {
  color: currentColor;
  font-size: 10px;
  line-height: 1.35;
  opacity: 0.78;
}

.professional-brief-focus {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.professional-brief-focus span {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.professional-brief-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) repeat(2, minmax(160px, 0.85fr));
  gap: 9px;
}

.professional-brief.collapsed .professional-brief-grid {
  display: none;
}

.professional-brief article {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.professional-brief article strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.professional-brief ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.professional-brief li {
  position: relative;
  padding-left: 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@container (max-width: 520px) {
  .professional-brief-head,
  .professional-type-grid,
  .professional-brief-focus,
  .professional-brief-grid {
    grid-template-columns: 1fr;
  }

  .professional-brief-actions,
  .professional-brief-head button {
    width: 100%;
  }
}

.professional-brief li::before {
  position: absolute;
  left: 0;
  content: "•";
  color: var(--accent);
  font-weight: 950;
}

.professional-brief li.done {
  color: var(--accent);
  font-weight: 900;
}

:root[data-skin="pro"] .professional-brief {
  border-color: rgba(56, 189, 248, 0.2);
  background: rgba(15, 23, 42, 0.74);
}

:root[data-skin="pro"] .professional-brief article {
  border-color: rgba(56, 189, 248, 0.14);
  background: rgba(2, 6, 23, 0.42);
}

:root[data-skin="pro"] .professional-brief-focus span {
  border-color: rgba(56, 189, 248, 0.16);
  background: rgba(2, 6, 23, 0.42);
  color: #7dd3fc;
}

:root[data-skin="pro"] .professional-type-grid button {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(2, 6, 23, 0.48);
  color: #bae6fd;
}

:root[data-skin="pro"] .professional-type-grid button:hover,
:root[data-skin="pro"] .professional-type-grid button.active {
  background: #38bdf8;
  color: #00111c;
}

:root[data-skin="pro"] .professional-brief-head button {
  color: #00111c;
}

:root[data-skin="pro"] .professional-brief-head button[data-professional-brief-toggle] {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(2, 6, 23, 0.42);
  color: #7dd3fc;
}

.preflight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.preflight-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.preflight-head span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.preflight-summary {
  display: grid;
  grid-template-columns: minmax(120px, 0.62fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 12px;
  background: rgba(240, 253, 250, 0.76);
}

.preflight-compact-label {
  display: none;
}

.preflight-summary.warn {
  border-color: rgba(194, 106, 44, 0.2);
  background: rgba(255, 247, 237, 0.86);
}

.preflight-summary.danger {
  border-color: rgba(190, 18, 60, 0.22);
  background: rgba(255, 241, 242, 0.86);
}

.preflight-summary strong,
.preflight-summary small {
  display: block;
}

.preflight-summary strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}

.preflight-summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.preflight-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.preflight-summary-grid span {
  max-width: 130px;
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid rgba(15, 118, 110, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preflight-summary-grid span.warn {
  border-color: rgba(194, 106, 44, 0.22);
  color: #a65316;
}

.preflight-detail-toggle {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.preflight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.preflight-grid.collapsed {
  display: none;
}

.preflight-item {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
}

.preflight-item.wide {
  grid-column: 1 / -1;
}

.preflight-item strong,
.preflight-item small {
  display: block;
}

.preflight-item strong {
  margin-bottom: 4px;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.preflight-item small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.preflight-item.info {
  border-color: rgba(37, 99, 235, 0.18);
  background: rgba(239, 246, 255, 0.76);
}

.preflight-score {
  height: 6px;
  margin: 2px 0 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(16, 24, 40, 0.08);
}

.preflight-score span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #22c55e);
}

.preflight-item.warn .preflight-score span,
.preflight-item.info .preflight-score span {
  background: linear-gradient(90deg, #c26a2c, #f2b84b);
}

.preflight-item button {
  margin-top: 7px;
  width: 100%;
  min-height: 28px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.preflight-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.preflight-options button {
  width: auto;
  min-height: 28px;
  margin-top: 0;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  white-space: nowrap;
}

.preflight-options button.active {
  border-color: rgba(15, 118, 110, 0.28);
  background: var(--accent);
  color: #fff;
}

.app-toast {
  position: fixed;
  left: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 70;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.preflight-item.ok {
  border-color: rgba(15, 118, 110, 0.16);
  background: rgba(15, 118, 110, 0.06);
}

.preflight-item.warn,
.preflight-item.info {
  border-color: rgba(194, 106, 44, 0.2);
  background: var(--warm-soft);
}

.preflight-item.danger {
  border-color: rgba(190, 18, 60, 0.24);
  background: rgba(190, 18, 60, 0.07);
}

.photo-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.photo-preview.hidden {
  display: none;
}

.photo-preview img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  object-fit: cover;
}

.photo-preview strong,
.photo-preview small {
  display: block;
}

.photo-preview strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-preview small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.photo-preview button {
  margin-top: 7px;
  height: 30px;
  border-radius: 12px;
  padding: 0 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.reference-head {
  display: grid;
  gap: 3px;
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.reference-chip {
  min-width: 0;
  margin: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.reference-chip figcaption {
  min-width: 0;
  margin-top: 5px;
}

.reference-chip select {
  width: 100%;
  height: 30px;
  margin-top: 7px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 10px;
  background: #fff;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.reference-chip button {
  width: 100%;
}

.reference-role-hint {
  padding: 8px 10px;
  border: 1px solid rgba(15, 118, 110, 0.13);
  border-radius: 12px;
  background: rgba(15, 118, 110, 0.06);
  color: var(--accent) !important;
  font-weight: 800;
}

.network-reference {
  display: grid;
  gap: 6px;
}

.network-reference span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.network-reference input {
  min-width: 0;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 0 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.mode-row,
.skin-row {
  display: flex;
  gap: 8px;
  margin-top: 11px;
  overflow-x: auto;
}

.mode-row button,
.skin {
  flex: 1;
  min-width: max-content;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.mode-row .active,
.skin.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.generation-settings-panel {
  margin-top: 11px;
}

.settings-summary {
  position: relative;
  display: grid;
  width: 100%;
  gap: 3px;
  min-height: 62px;
  padding: 11px 42px 11px 13px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 250, 0.76));
  color: var(--text);
  text-align: left;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.settings-summary::after {
  content: "展开";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.settings-summary.active::after {
  content: "收起";
}

.settings-summary span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.settings-summary strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.3;
}

.settings-summary small {
  color: var(--muted);
  font-size: 11px;
}

:root[data-skin="pro"] .settings-summary {
  border-color: rgba(56, 189, 248, 0.2);
  background: rgba(15, 23, 42, 0.76);
}

.skin-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.skin {
  display: grid;
  gap: 5px;
  align-content: start;
  min-width: 0;
  height: auto;
  min-height: 96px;
  padding: 12px;
  text-align: left;
}

.skin strong,
.skin small,
.skin em {
  display: block;
}

.skin strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.skin small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.skin em {
  margin-top: 2px;
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.skin.active strong,
.skin.active small,
.skin.active em {
  color: #fff;
}

:root[data-skin="pro"] .skin.active strong,
:root[data-skin="pro"] .skin.active small,
:root[data-skin="pro"] .skin.active em {
  color: #00111c;
}

:root[data-skin="pro"] .skin.active {
  background: var(--accent);
  color: #00111c;
}

.mobile-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.mobile-flow.ready {
  padding-bottom: 8px;
}

.mobile-flow button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 6px;
  align-items: center;
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
  text-align: left;
}

.mobile-flow strong {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.1);
  color: var(--accent);
  font-size: 12px;
}

.mobile-flow span,
.mobile-flow small {
  display: block;
  min-width: 0;
}

.mobile-flow span {
  font-size: 12px;
  font-weight: 950;
}

.mobile-flow small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}

.mobile-flow .done {
  border-color: rgba(15, 118, 110, 0.22);
  background: rgba(238, 250, 247, 0.9);
}

.mobile-flow .done strong {
  background: var(--accent);
  color: #fff;
}

.mobile-flow-ready {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 12px;
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

.mobile-flow-ready[hidden] {
  display: none;
}

.pricing-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 10px;
}

.pricing-controls.collapsed {
  display: none !important;
}

.generation-settings-panel[hidden],
.pricing-controls[hidden],
.price-hint[hidden] {
  display: none !important;
}

.track-guide {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 14px;
  background: rgba(238, 250, 247, 0.76);
}

.track-guide:empty {
  display: none;
}

.track-guide div {
  display: grid;
  gap: 4px;
}

.track-guide strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.track-guide small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.track-guide ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.track-guide li {
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.track-guide li.done {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

.track-guide button {
  min-height: 36px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 950;
}

.pricing-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.pricing-controls select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.pricing-controls input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.price-hint {
  margin-top: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.creation-mode-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 8px;
}

.creation-mode-panel button {
  min-height: 64px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.creation-mode-panel button:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 118, 110, 0.26);
}

.creation-mode-panel button.active {
  border-color: rgba(15, 118, 110, 0.36);
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 14px 28px rgba(15, 118, 110, 0.12);
}

:root[data-skin="cute"] .creation-mode-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:root[data-skin="cute"] .creation-mode-panel button {
  min-height: 96px;
  border-color: rgba(219, 39, 119, 0.14);
  background: rgba(255, 255, 255, 0.9);
}

:root[data-skin="cute"] .creation-mode-panel button.active {
  background: linear-gradient(135deg, rgba(253, 242, 248, 0.98), rgba(255, 251, 235, 0.92));
  box-shadow: 0 16px 30px rgba(219, 39, 119, 0.14);
}

:root[data-skin="pro"] .creation-mode-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

:root[data-skin="pro"] .creation-mode-panel button {
  min-height: 74px;
  border-color: rgba(56, 189, 248, 0.22);
  background: rgba(15, 23, 42, 0.82);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.06);
}

:root[data-skin="pro"] .creation-mode-panel button.active {
  background: linear-gradient(180deg, rgba(8, 47, 73, 0.9), rgba(15, 23, 42, 0.94));
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.24), 0 16px 40px rgba(56, 189, 248, 0.12);
}

.creation-mode-panel strong,
.creation-mode-panel small {
  display: block;
}

.creation-mode-panel strong {
  font-size: 13px;
  font-weight: 950;
}

.creation-mode-panel small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.creation-mode-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(150px, 0.7fr) minmax(150px, 0.8fr);
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.78), rgba(255, 255, 255, 0.92));
}

.creation-mode-summary div,
.creation-mode-summary p {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.creation-mode-summary span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.creation-mode-summary strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.creation-mode-summary small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.creation-mode-summary ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.creation-mode-summary li {
  padding: 6px 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.blank-starter-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.blank-starter-panel.hidden {
  display: none;
}

.blank-starter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.blank-starter-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.blank-starter-head span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.blank-starter-head strong {
  color: var(--ink);
  font-size: 15px;
}

.blank-starter-head small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.blank-starter-head button {
  min-width: 74px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 10px;
  background: rgba(240, 253, 250, 0.88);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.blank-starter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.blank-starter-grid button {
  min-height: 54px;
  padding: 9px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(247, 248, 245, 0.8);
  color: var(--ink);
  text-align: left;
}

.blank-starter-grid button:hover {
  border-color: rgba(15, 118, 110, 0.22);
  background: rgba(240, 253, 250, 0.84);
}

.blank-starter-grid button.active {
  border-color: rgba(15, 118, 110, 0.34);
  background: rgba(240, 253, 250, 0.98);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

.blank-starter-grid b,
.blank-starter-grid span {
  display: block;
}

.blank-starter-grid b {
  font-size: 12px;
}

.blank-starter-grid span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.blank-variant-panel {
  display: grid;
  grid-template-columns: minmax(140px, 0.36fr) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
}

.blank-variant-panel strong,
.blank-variant-panel small {
  display: block;
}

.blank-variant-panel strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.blank-variant-panel small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.blank-variant-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.blank-variant-grid button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.82);
  color: var(--accent);
  font-weight: 900;
}

.blank-variant-grid button:hover {
  border-color: rgba(15, 118, 110, 0.32);
  background: var(--accent);
  color: #fff;
}

.blank-next-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  grid-column: 1 / -1;
}

.blank-next-steps b {
  margin-right: 2px;
  color: var(--ink);
  font-size: 12px;
}

.blank-next-steps span {
  padding: 5px 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

:root[data-skin="cute"] .creation-mode-summary {
  border-color: rgba(219, 39, 119, 0.13);
  background: linear-gradient(135deg, rgba(253, 242, 248, 0.94), rgba(255, 255, 255, 0.88));
}

:root[data-skin="cute"] .blank-starter-panel {
  border-color: rgba(219, 39, 119, 0.12);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(253, 242, 248, 0.86));
}

:root[data-skin="pro"] .creation-mode-summary {
  border-color: rgba(56, 189, 248, 0.22);
  background: rgba(15, 23, 42, 0.76);
}

:root[data-skin="pro"] .blank-starter-panel,
:root[data-skin="pro"] .blank-starter-grid button,
:root[data-skin="pro"] .blank-variant-panel {
  border-color: rgba(56, 189, 248, 0.2);
  background: rgba(15, 23, 42, 0.72);
}

:root[data-skin="pro"] .blank-variant-grid button {
  border-color: rgba(56, 189, 248, 0.22);
  background: rgba(2, 6, 23, 0.56);
  color: #7dd3fc;
}

:root[data-skin="pro"] .blank-next-steps span {
  border-color: rgba(56, 189, 248, 0.16);
  background: rgba(2, 6, 23, 0.48);
  color: #bae6fd;
}

:root[data-skin="pro"] .creation-mode-summary li {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(2, 6, 23, 0.48);
}

@media (max-width: 900px) {
  .prompt-live-preview {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .prompt-live-preview button {
    width: 100%;
  }

  .starter-question-row,
  .blank-question-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.delivery-order-panel {
  display: grid;
  gap: 9px;
  margin: 0 0 12px;
}

.delivery-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-self: start;
}

.delivery-stack #generateBtn {
  order: 1;
}

.delivery-stack #deliveryOrderPanel {
  order: 2;
}

.delivery-stack .generation-settings-panel {
  order: 3;
}

.delivery-stack .pricing-controls {
  order: 4;
}

.delivery-stack .price-hint {
  order: 5;
}

.delivery-stack .delivery-order-panel,
.delivery-stack .generate-btn,
.delivery-stack .generation-settings-panel,
.delivery-stack .pricing-controls,
.delivery-stack .price-hint {
  grid-column: 1;
  width: 100%;
}

.delivery-order-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
}

.delivery-stack #generateBtn + .generation-settings-panel,
.delivery-stack #generateBtn {
  position: relative;
}

.delivery-order-main span,
.delivery-order-main strong,
.delivery-order-main small,
.delivery-order-grid strong,
.delivery-order-grid small {
  display: block;
}

.delivery-order-main span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.delivery-order-main strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.delivery-order-main small,
.delivery-order-grid small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.delivery-order-main.ok {
  border-color: rgba(15, 159, 110, 0.18);
  background: #f3fbf7;
}

.delivery-order-main.warn {
  border-color: rgba(217, 119, 6, 0.22);
  background: #fff8ed;
}

.delivery-order-main.danger {
  border-color: rgba(220, 38, 38, 0.18);
  background: #fff5f3;
}

.delivery-order-score {
  display: grid;
  place-items: center;
  min-height: 62px;
  border-radius: 12px;
  background: #fff;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.1);
}

.delivery-order-score b {
  color: var(--accent);
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.delivery-order-score small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.delivery-order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.delivery-decision-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.delivery-decision-board article {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.delivery-decision-board b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.delivery-decision-board span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.delivery-order-grid article:not(.priority) {
  display: none;
}

.delivery-order-grid article {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.delivery-order-grid strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.delivery-order-actions {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 8px;
}

.delivery-order-actions button {
  min-height: 38px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.delivery-order-actions button:first-child {
  background: var(--accent);
  color: #fff;
}

.template-delivery-sheet {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 12px;
  background: rgba(248, 255, 253, 0.82);
}

.template-sheet-head,
.template-sheet-fields article,
.template-sheet-checks article {
  display: grid;
  gap: 3px;
}

.template-sheet-head span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.template-sheet-head strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.template-sheet-head small,
.template-sheet-fields small,
.template-sheet-checks small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.template-sheet-fields,
.template-sheet-checks {
  display: grid;
  gap: 7px;
}

.template-sheet-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.template-sheet-fields article,
.template-sheet-checks article {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.template-sheet-fields article.done {
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(240, 253, 244, 0.82);
}

.template-sheet-fields article.pending {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(255, 251, 235, 0.84);
}

.template-sheet-fields b,
.template-sheet-checks strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

:root[data-skin="cute"] .delivery-order-main,
:root[data-skin="cute"] .delivery-order-grid article,
:root[data-skin="cute"] .delivery-order-actions button,
:root[data-skin="cute"] .template-delivery-sheet,
:root[data-skin="cute"] .template-sheet-fields article,
:root[data-skin="cute"] .template-sheet-checks article {
  border-radius: 20px;
}

:root[data-skin="cute"] .delivery-order-main {
  border-color: rgba(219, 39, 119, 0.14);
  background: linear-gradient(135deg, rgba(253, 242, 248, 0.94), rgba(255, 255, 255, 0.9));
}

:root[data-skin="cute"] .delivery-decision-board article {
  border-color: rgba(219, 39, 119, 0.12);
  background: rgba(255, 255, 255, 0.76);
}

:root[data-skin="pro"] .delivery-order-main,
:root[data-skin="pro"] .delivery-decision-board article,
:root[data-skin="pro"] .delivery-order-grid article,
:root[data-skin="pro"] .template-delivery-sheet,
:root[data-skin="pro"] .template-sheet-fields article,
:root[data-skin="pro"] .template-sheet-checks article {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(15, 23, 42, 0.76);
}

:root[data-skin="pro"] .delivery-order-score {
  background: rgba(2, 6, 23, 0.5);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.18);
}

:root[data-skin="pro"] .delivery-order-actions button:first-child {
  color: #00111c;
}

.template-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.58fr);
  gap: 16px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.96), rgba(255, 255, 255, 0.88)),
    var(--surface);
}

.template-hero-panel span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.template-hero-panel h3 {
  margin-top: 5px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}

.template-hero-panel p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.template-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.template-hero-tags b {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.template-hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.template-hero-actions button {
  min-height: 42px;
  border-radius: 12px;
  background: #fff;
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

.template-hero-actions button:first-child {
  background: var(--accent);
  color: #fff;
}

:root[data-skin="cute"] .template-hero-panel {
  grid-template-columns: 1fr;
  background:
    linear-gradient(135deg, rgba(253, 242, 248, 0.96), rgba(255, 255, 255, 0.9)),
    var(--surface);
}

:root[data-skin="cute"] .template-hero-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:root[data-skin="pro"] .template-hero-panel {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
  border-color: rgba(56, 189, 248, 0.24);
  background:
    linear-gradient(135deg, rgba(8, 47, 73, 0.64), rgba(15, 23, 42, 0.92)),
    var(--surface);
}

:root[data-skin="pro"] .template-hero-actions button {
  border: 1px solid rgba(56, 189, 248, 0.2);
  background: rgba(15, 23, 42, 0.88);
  color: var(--text);
}

:root[data-skin="pro"] .template-hero-actions button:first-child {
  background: var(--accent);
  color: #00111c;
}

:root[data-skin="pro"] .template-hero-tags b,
:root[data-skin="pro"] .template-goal-strip button {
  border-color: rgba(56, 189, 248, 0.16);
  background: rgba(2, 6, 23, 0.42);
}

:root[data-skin="pro"] .template-goal-strip button.active {
  border-color: rgba(56, 189, 248, 0.32);
  background: rgba(8, 47, 73, 0.72);
}

.template-workbench-panel {
  display: grid;
  gap: 10px;
}

.template-workbench-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.template-workbench-panel > .section-title {
  margin-bottom: -2px;
}

.template-goal-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.template-goal-strip button {
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  text-align: left;
}

.template-goal-strip strong,
.template-goal-strip small {
  display: block;
}

.template-goal-strip strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.template-goal-strip small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.template-goal-strip button.active {
  border-color: rgba(15, 118, 110, 0.32);
  background: var(--accent-soft);
}

.template-view-switch {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.template-workbench-block[hidden],
[data-template-library][hidden] {
  display: none !important;
}

.template-view-switch button {
  min-height: 38px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.template-view-switch button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

:root[data-skin="cute"] .template-view-switch button {
  border-radius: 18px;
}

:root[data-skin="pro"] .template-view-switch button {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(2, 6, 23, 0.46);
  color: var(--muted);
}

:root[data-skin="pro"] .template-view-switch button.active {
  background: var(--accent);
  color: #00111c;
}

.template-workbench-block {
  display: grid;
  gap: 10px;
  min-height: 148px;
  padding: 14px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
}

.template-workbench-block.strong {
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(255, 255, 255, 0.96)),
    #fff;
}

.template-workbench-block span,
.template-brief-panel span {
  width: fit-content;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.template-workbench-block strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
}

.template-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  align-self: end;
}

.template-choice-row button {
  min-height: 34px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.template-choice-row button:hover,
.template-choice-row button.active {
  border-color: rgba(15, 118, 110, 0.36);
  background: var(--accent);
  color: #fff;
}

.template-brief-panel {
  display: grid;
  grid-template-columns: 1.2fr minmax(0, 1.8fr) auto;
  gap: 10px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 14px;
  background: #f8fffd;
}

.template-goal-strip,
.template-view-switch {
  order: 3;
}

.template-workbench-grid {
  order: 4;
}

.template-brief-panel {
  order: 2;
}

.template-brief-panel > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.template-brief-primary small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.template-brief-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.template-brief-metrics span {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 54px;
  padding: 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.template-brief-metrics b {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 11px;
}

.template-brief-panel strong,
.template-brief-panel small,
.template-brief-panel li {
  color: var(--ink);
  line-height: 1.4;
}

.template-brief-panel strong {
  font-size: 14px;
  font-weight: 950;
}

.template-brief-panel small,
.template-brief-panel li {
  color: var(--muted);
  font-size: 12px;
}

.template-brief-panel ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.template-brief-panel li {
  position: relative;
  padding-left: 11px;
}

.template-brief-panel li::before {
  position: absolute;
  left: 0;
  content: "•";
  color: var(--accent);
  font-weight: 950;
}

.template-brief-panel button {
  align-self: center;
  min-height: 42px;
  min-width: 112px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.template-brief-guardrail {
  grid-column: 1 / -1;
  align-self: end;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(240, 253, 250, 0.86), rgba(255, 255, 255, 0.74));
}

.template-brief-guardrail span,
.template-brief-guardrail small {
  display: block;
}

.template-brief-guardrail span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.template-brief-guardrail small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .template-brief-guardrail {
    display: none;
  }
}

:root[data-skin="cute"] .template-workbench-block,
:root[data-skin="cute"] .template-brief-panel {
  border-color: rgba(219, 39, 119, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(253, 242, 248, 0.9));
}

:root[data-skin="pro"] .template-workbench-block,
:root[data-skin="pro"] .template-brief-panel {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(15, 23, 42, 0.72);
}

:root[data-skin="pro"] .template-brief-metrics span {
  border-color: rgba(56, 189, 248, 0.14);
  background: rgba(2, 6, 23, 0.4);
}

:root[data-skin="pro"] .template-brief-guardrail {
  border-color: rgba(56, 189, 248, 0.14);
  background: rgba(2, 6, 23, 0.36);
}

:root[data-skin="pro"] .template-choice-row button {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(8, 18, 38, 0.92);
  color: #eaf8ff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

:root[data-skin="pro"] .template-brief-panel button,
:root[data-skin="pro"] .template-choice-row button:hover,
:root[data-skin="pro"] .template-choice-row button.active {
  color: #00111c;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.professional-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.professional-template {
  min-height: 82px;
  padding: 13px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 250, 0.9));
  color: var(--ink);
  text-align: left;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.professional-template:hover {
  border-color: rgba(15, 118, 110, 0.32);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
}

.professional-template.active {
  border-color: rgba(15, 118, 110, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(222, 247, 238, 0.92)),
    var(--accent-soft);
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.14);
}

.professional-template strong,
.professional-template small,
.professional-template em {
  display: block;
}

.professional-template strong {
  font-size: 14px;
  font-weight: 950;
}

.professional-template small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.professional-template.active small::after {
  content: " · 已套用";
  color: #0f766e;
  font-weight: 900;
}

.professional-template em {
  width: fit-content;
  margin-top: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.08);
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.template-case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.template-case-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 14px;
  background: #fff;
}

.template-case-card > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.template-case-card strong,
.template-case-card small,
.template-case-card em {
  display: block;
}

.template-case-card small,
.template-case-card p,
.template-case-card li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.template-case-card p,
.template-case-card ul {
  margin: 0;
}

.template-case-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.template-case-card li {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.07);
  color: #0f766e;
  font-weight: 900;
}

.template-business-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-business-row span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
}

.template-case-commerce {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.template-case-commerce span {
  display: grid;
  gap: 3px;
  min-height: 52px;
  padding: 8px 9px;
  border: 1px solid rgba(15, 118, 110, 0.13);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.88), rgba(255, 255, 255, 0.96));
}

.template-case-commerce b {
  color: #0f766e;
  font-size: 11px;
  line-height: 1.1;
}

.template-case-commerce small {
  display: -webkit-box;
  overflow: hidden;
  color: #334155;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.template-case-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.template-case-proof span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.96);
  color: #334155;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}

.template-case-proof b {
  color: var(--accent);
  font-size: 10px;
  line-height: 1;
}

.template-case-proof em {
  grid-column: 1 / -1;
  display: -webkit-box;
  overflow: hidden;
  min-height: 32px;
  color: var(--ink);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.template-case-details {
  border-top: 1px solid rgba(15, 118, 110, 0.1);
  padding-top: 7px;
}

.template-case-details summary {
  width: fit-content;
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  list-style-position: inside;
}

.template-case-details p,
.template-case-details small {
  display: block;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.template-plan {
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff8ed;
  color: #9a5a12 !important;
  font-weight: 900;
}

.template-case-card em {
  color: var(--ink);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.template-case-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.template-case-card button {
  min-height: 38px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 12px;
  background: #eefaf7;
  color: var(--accent);
  font-weight: 950;
}

.template-visual-preview {
  --visual-a: #38bdf8;
  --visual-b: #14b8a6;
  --visual-c: #f8fafc;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34%;
  gap: 8px;
  min-height: 72px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--visual-a) 26%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(2, 8, 23, 0.96));
}

.template-visual-preview::after {
  content: "";
  position: absolute;
  inset: auto -18% -42% 28%;
  height: 70%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--visual-b) 22%, transparent), transparent);
  transform: rotate(-10deg);
}

.template-visual-frame,
.template-visual-lines {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
}

.template-visual-frame {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: 56px;
}

.template-visual-frame i,
.template-visual-lines b {
  display: block;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.template-visual-frame i {
  min-height: 22px;
}

.template-visual-frame i:first-child {
  grid-row: span 2;
  background: linear-gradient(145deg, var(--visual-a), var(--visual-b));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--visual-a) 28%, transparent);
}

.template-visual-lines {
  align-content: center;
}

.template-visual-lines b {
  height: 7px;
}

.template-visual-lines b:first-child {
  height: 18px;
  background: var(--visual-c);
}

.template-visual-figure {
  --visual-a: #38bdf8;
  --visual-b: #818cf8;
  --visual-c: #e0f2fe;
  background:
    radial-gradient(circle at 22% 34%, #e0f2fe 0 7px, transparent 8px),
    radial-gradient(circle at 52% 58%, #38bdf8 0 7px, transparent 8px),
    radial-gradient(circle at 78% 30%, #818cf8 0 7px, transparent 8px),
    linear-gradient(28deg, transparent 20%, rgba(56, 189, 248, 0.42) 21% 23%, transparent 24%),
    linear-gradient(150deg, transparent 29%, rgba(129, 140, 248, 0.44) 30% 32%, transparent 33%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 8, 23, 0.98)) !important;
}

.template-visual-system {
  --visual-a: #22d3ee;
  --visual-b: #f59e0b;
  --visual-c: #cffafe;
  background:
    linear-gradient(90deg, rgba(34, 211, 238, 0.62) 0 18%, transparent 18% 23%, rgba(245, 158, 11, 0.58) 23% 46%, transparent 46% 51%, rgba(34, 211, 238, 0.42) 51% 78%, transparent 78%),
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(255, 255, 255, 0.1) 17px 18px),
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 8, 23, 0.98)) !important;
}

.template-visual-product {
  --visual-a: #14b8a6;
  --visual-b: #f97316;
  --visual-c: #ccfbf1;
  background:
    radial-gradient(ellipse at 42% 54%, rgba(20, 184, 166, 0.88) 0 22%, transparent 23%),
    linear-gradient(90deg, transparent 0 62%, rgba(249, 115, 22, 0.58) 62% 66%, transparent 66%),
    linear-gradient(0deg, transparent 0 70%, rgba(204, 251, 241, 0.32) 70% 76%, transparent 76%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 8, 23, 0.98)) !important;
}

.template-visual-cover {
  --visual-a: #fb7185;
  --visual-b: #a78bfa;
  --visual-c: #ffe4e6;
  background:
    radial-gradient(circle at 24% 34%, rgba(255, 228, 230, 0.92) 0 16px, transparent 17px),
    linear-gradient(90deg, transparent 0 48%, rgba(251, 113, 133, 0.56) 48% 86%, transparent 86%),
    linear-gradient(0deg, transparent 0 68%, rgba(167, 139, 250, 0.52) 68% 76%, transparent 76%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 8, 23, 0.98)) !important;
}

.template-visual-place {
  --visual-a: #facc15;
  --visual-b: #38bdf8;
  --visual-c: #fef9c3;
  background:
    linear-gradient(135deg, transparent 0 38%, rgba(250, 204, 21, 0.58) 39% 56%, transparent 57%),
    linear-gradient(45deg, transparent 0 52%, rgba(56, 189, 248, 0.5) 53% 66%, transparent 67%),
    radial-gradient(circle at 78% 26%, rgba(254, 249, 195, 0.7) 0 10px, transparent 11px),
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 8, 23, 0.98)) !important;
}

.template-visual-series {
  --visual-a: #60a5fa;
  --visual-b: #34d399;
  --visual-c: #dbeafe;
  background:
    linear-gradient(90deg, rgba(96, 165, 250, 0.68) 0 26%, transparent 26% 34%, rgba(52, 211, 153, 0.58) 34% 60%, transparent 60% 68%, rgba(219, 234, 254, 0.48) 68% 92%, transparent 92%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 8, 23, 0.98)) !important;
}

.template-visual-figure .template-visual-frame {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.template-visual-figure .template-visual-frame i {
  min-height: 20px;
  border-radius: 999px;
}

.template-visual-figure .template-visual-frame i:first-child {
  grid-row: auto;
}

.template-visual-system .template-visual-frame {
  grid-template-columns: 1.3fr 0.75fr;
}

.template-visual-system .template-visual-frame i {
  border-radius: 6px;
}

.template-visual-product .template-visual-frame i:first-child {
  border-radius: 999px 999px 14px 14px;
}

.template-visual-cover .template-visual-frame i:first-child {
  border-radius: 50% 50% 16px 16px;
}

.template-visual-place .template-visual-frame {
  grid-template-columns: 1fr 1.4fr;
}

.template-visual-series .template-visual-frame {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.template-visual-series .template-visual-frame i:first-child {
  grid-row: auto;
}

.template-case-actions button:first-child {
  background: var(--accent);
  color: #fff;
}

@media (min-width: 1100px) {
  html:root:root[data-active-page="templates"] .template-choice-row button:has(.template-visual-preview),
  html:root:root[data-active-page="templates"] .professional-template:has(.template-visual-preview),
  html:root:root[data-active-page="templates"] .workflow:has(.template-visual-preview) {
    display: grid !important;
    grid-template-rows: 76px auto auto !important;
    gap: 8px !important;
    min-height: 132px !important;
    align-content: start !important;
    text-align: left !important;
  }

  html:root:root[data-active-page="templates"] .template-choice-row button:has(.template-visual-preview) .template-visual-preview,
  html:root:root[data-active-page="templates"] .professional-template:has(.template-visual-preview) .template-visual-preview,
  html:root:root[data-active-page="templates"] .workflow:has(.template-visual-preview) .template-visual-preview {
    width: 100% !important;
    min-height: 76px !important;
  }

  html:root:root[data-active-page="templates"] .template-case-card .template-visual-preview {
    min-height: 118px !important;
  }

  html:root:root[data-active-page="templates"][data-skin="pro"] .template-visual-preview {
    border-color: rgba(56, 189, 248, 0.24) !important;
  }
}

.template-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.template-tabs button {
  flex: 0 0 auto;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.template-tabs .active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.section-toggle {
  height: 32px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

:root[data-skin="pro"] .section-toggle {
  border-color: rgba(56, 189, 248, 0.2);
  background: rgba(2, 6, 23, 0.5);
  color: var(--text);
}

.workflow {
  min-height: 108px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  box-shadow: 0 8px 20px rgba(31, 36, 33, 0.04);
}

.workflow.active {
  border-color: rgba(47, 111, 94, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 247, 0.92)),
    var(--accent-soft);
}

.workflow span {
  display: grid;
  width: 40px;
  height: 26px;
  margin-bottom: 10px;
  place-items: center;
  border: 1px solid rgba(47, 111, 94, 0.16);
  border-radius: 8px;
  background: #f8faf7;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.workflow strong,
.workflow small,
.workflow em {
  display: block;
}

.workflow strong {
  font-size: 14px;
}

.workflow small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.workflow em {
  margin-top: 9px;
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.package-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62)),
    var(--accent-soft);
}

.deliverable-grid {
  display: grid;
  gap: 9px;
}

.deliverable-grid article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
}

.deliverable-grid strong {
  font-size: 14px;
}

.deliverable-grid small {
  grid-column: 1;
  color: var(--muted);
  font-size: 11px;
}

.deliverable-grid em {
  grid-row: 1 / span 2;
  grid-column: 2;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.mine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mine-summary {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.62)),
    var(--accent-soft);
}

.mine-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mine-stats article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
}

.mine-stats strong,
.mine-stats small {
  display: block;
}

.mine-stats strong {
  color: var(--accent);
  font-size: 26px;
}

.mine-stats small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.mine-action-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.mine-action-rail button {
  min-height: 44px;
  padding: 8px 7px;
  border: 1px solid rgba(37, 111, 93, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.mine-action-rail button:first-child {
  background: var(--accent);
  color: white;
}

.mine-action-rail button:hover {
  border-color: rgba(37, 111, 93, 0.28);
  transform: translateY(-1px);
}

@media (max-width: 520px) {
  .mine-action-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mine-grid button {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.mine-grid .danger-action {
  grid-column: 1 / -1;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.support-desk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.support-desk article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
}

.support-desk article.ok {
  border-color: rgba(15, 159, 110, 0.16);
  background: rgba(240, 253, 250, 0.72);
}

.support-desk article.warn {
  border-color: rgba(217, 119, 6, 0.2);
  background: rgba(255, 251, 235, 0.72);
}

.support-desk-wide {
  grid-column: 1 / -1;
}

.support-desk strong,
.support-desk small {
  display: block;
}

.support-desk strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.support-desk small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.support-desk button {
  justify-self: start;
  min-height: 32px;
  border-radius: 10px;
  padding: 0 11px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.support-desk article:first-child button,
.support-desk-wide button {
  background: var(--accent);
  color: #fff;
}

:root[data-skin="cute"] .support-desk article,
:root[data-skin="cute"] .support-desk button {
  border-radius: 20px;
}

:root[data-skin="pro"] .support-desk article {
  border-color: rgba(56, 189, 248, 0.16);
  background: rgba(15, 23, 42, 0.7);
}

:root[data-skin="pro"] .support-desk article:first-child button,
:root[data-skin="pro"] .support-desk-wide button {
  color: #00111c;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.result-card {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.result-card img,
.result {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  object-fit: cover;
}

.result-card strong,
.result-card small,
.result-card span,
.result-card em {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-card strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.result-card span {
  margin-top: 2px;
}

.result-card em {
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-style: normal;
  font-weight: 950;
}

.result-card.placeholder-result img {
  border: 2px dashed rgba(245, 158, 11, 0.55);
  filter: saturate(0.76);
}

.result-card.placeholder-result em {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.empty-result-card {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 16px;
  background: rgba(240, 253, 250, 0.68);
}

.empty-result-card strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.empty-result-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.empty-result-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.empty-result-flow span {
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid rgba(15, 118, 110, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.empty-result-card button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}

.image-viewer.hidden {
  display: none;
}

.image-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 15, 24, 0.86);
  backdrop-filter: blur(14px);
}

.image-viewer-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, 100%);
  max-height: min(92vh, 880px);
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.image-viewer-top {
  display: grid;
  grid-template-columns: 92px minmax(90px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.image-viewer-top button,
.viewer-actions button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.image-viewer-top button:hover,
.viewer-actions button:hover {
  border-color: rgba(0, 168, 120, 0.28);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.viewer-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(66px, 1fr));
  gap: 8px;
}

.viewer-actions button {
  padding: 0 10px;
}

#viewerRefine {
  border-color: rgba(0, 168, 120, 0.28);
  background: var(--accent-soft);
  color: var(--accent);
}

.image-viewer-top span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.image-viewer-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: 14px;
  min-height: 0;
}

.image-viewer-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.72);
}

.image-viewer-stage img {
  max-width: 100%;
  max-height: calc(92vh - 96px);
  border-radius: 14px;
  object-fit: contain;
  background: #f8fafc;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.viewer-side-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.viewer-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 64px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font-size: 36px;
  font-weight: 900;
  transform: translateY(-50%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}

.viewer-nav:disabled {
  opacity: 0.28;
}

.viewer-nav.prev {
  left: 10px;
}

.viewer-nav.next {
  right: 10px;
}

#viewerPrompt {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

.viewer-workflow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-start;
  margin: 0;
}

.viewer-workflow span {
  padding: 5px 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.78);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.viewer-delivery {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

.viewer-delivery-quick {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 0.78fr 0.9fr 1.12fr;
  gap: 8px;
}

.viewer-delivery-quick button {
  min-height: 40px;
  border: 1px solid rgba(0, 168, 120, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.viewer-delivery-quick button:first-child {
  background: var(--accent);
  color: #fff;
}

.viewer-delivery-quick button:nth-child(3) {
  border-color: rgba(245, 158, 11, 0.28);
  background: #f59e0b;
  color: #fff;
}

.viewer-delivery-quick button:nth-child(4) {
  background: #17201c;
  color: #fff;
}

.viewer-delivery-score {
  display: grid;
  place-items: center;
  min-height: 76px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  text-align: center;
}

.viewer-delivery-score strong {
  display: block;
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
}

.viewer-delivery-score span {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 900;
}

.viewer-delivery-copy {
  display: grid;
  gap: 5px;
  align-content: center;
  min-width: 0;
}

.viewer-delivery-copy b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.viewer-delivery-copy span,
.viewer-delivery-refine {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.viewer-next-plan {
  grid-column: 1 / -1;
}

.viewer-next-plan > div {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.viewer-next-plan article {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.viewer-next-plan b,
.viewer-next-plan span {
  display: block;
  min-width: 0;
}

.viewer-next-plan b {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.viewer-next-plan span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.viewer-delivery-package {
  grid-column: 1 / -1;
  padding: 9px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 12px;
  background: rgba(240, 253, 250, 0.72);
}

.viewer-delivery-package summary,
.viewer-next-plan summary {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.viewer-delivery-package ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
}

.viewer-delivery-package li {
  list-style: none;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.viewer-delivery-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.viewer-delivery-actions button {
  min-height: 38px;
  border: 1px solid rgba(0, 168, 120, 0.18);
  border-radius: 12px;
  background: #fff;
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.viewer-delivery-actions button:first-child {
  background: var(--accent);
  color: #fff;
}

.viewer-delivery-actions button:nth-child(3) {
  background: #17201c;
  color: #fff;
}

.viewer-refine-presets {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.viewer-refine-presets button {
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 11px;
  background: #fff;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.viewer-refine-presets button:hover {
  border-color: rgba(15, 118, 110, 0.32);
  background: var(--accent-soft);
  color: var(--accent);
}

.viewer-feedback {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 0;
}

.viewer-feedback button {
  height: 36px;
  border-radius: 12px;
  padding: 0 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.viewer-feedback button.active {
  background: var(--accent);
  color: #fff;
}

.viewer-feedback input {
  grid-column: 1 / -1;
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 11px;
  background: rgba(255, 255, 255, 0.78);
}

/* Delivery viewer uses its own contrast contract across all skins. */
.image-viewer-panel {
  border: 1px solid rgba(203, 213, 225, 0.92);
  background:
    linear-gradient(180deg, #ffffff, #f8fafc);
  color: #0f172a;
}

.image-viewer-top button,
.viewer-actions button {
  border-color: rgba(148, 163, 184, 0.54);
  background: #ffffff;
  color: #0f172a;
}

.image-viewer-top span {
  color: #334155;
}

#viewerRefine {
  border-color: rgba(15, 118, 110, 0.35);
  background: #ccfbf1;
  color: #0f766e;
}

.image-viewer-stage {
  background:
    linear-gradient(180deg, #eef7f5, #f8fafc);
}

.viewer-side-panel {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
}

#viewerPrompt {
  color: #334155;
}

.viewer-workflow span {
  border-color: rgba(15, 118, 110, 0.22);
  background: #e6fffb;
  color: #0f766e;
}

.viewer-delivery {
  padding: 10px;
  border-color: rgba(148, 163, 184, 0.32);
  background: #f8fafc;
}

.viewer-delivery-quick button,
.viewer-delivery-actions button {
  border-color: rgba(15, 118, 110, 0.28);
  background: #ffffff;
  color: #0f766e;
}

.viewer-delivery-quick button:first-child,
.viewer-delivery-actions button:first-child {
  background: #0f766e;
  color: #ffffff;
}

.viewer-delivery-quick button:nth-child(3),
.viewer-delivery-actions button:nth-child(3) {
  background: #f59e0b;
  color: #ffffff;
}

.viewer-delivery-quick button:nth-child(4) {
  background: #111827;
  color: #ffffff;
}

.viewer-delivery-score {
  background: #e0f2fe;
  color: #0369a1;
}

.viewer-delivery-copy b,
.viewer-delivery-package summary,
.viewer-next-plan summary {
  color: #0f172a;
}

.viewer-delivery-copy span,
.viewer-delivery-refine,
.viewer-next-plan span {
  color: #475569;
}

.viewer-next-plan article,
.viewer-delivery-package {
  border-color: rgba(15, 118, 110, 0.2);
  background: #ffffff;
}

.viewer-delivery-package li {
  background: #ecfeff;
  color: #0e7490;
}

.viewer-refine-presets button {
  border-color: rgba(148, 163, 184, 0.34);
  background: #ffffff;
  color: #1f2937;
}

@media (max-width: 720px) {
  .image-viewer-panel {
    max-height: 94vh;
    background: #ffffff;
  }

  .image-viewer-stage img {
    max-height: 50vh;
  }

  .viewer-side-panel {
    max-height: 38vh;
    overflow: auto;
    padding: 10px;
  }

  .viewer-delivery {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .viewer-delivery-score {
    min-height: 62px;
  }

  .viewer-delivery-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .viewer-delivery-copy,
  .viewer-next-plan,
  .viewer-delivery-package,
  .viewer-refine-presets {
    display: none;
  }
}

.download-status {
  display: grid;
  gap: 7px;
  margin: 12px 4px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
}

.download-status.hidden {
  display: none;
}

.download-status strong {
  color: var(--ink);
  font-size: 12px;
}

.download-status span {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.download-status i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.18s ease;
}

.download-status.indeterminate i {
  min-width: 72px;
  animation: download-indeterminate 1.15s ease-in-out infinite;
}

.download-status small {
  color: var(--muted);
  font-size: 11px;
}

.download-status button {
  width: fit-content;
  min-height: 30px;
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 900;
}

.download-status.done {
  border-color: rgba(22, 163, 74, 0.24);
  background: rgba(240, 253, 244, 0.96);
}

.download-status.failed {
  border-color: rgba(220, 38, 38, 0.24);
  background: rgba(254, 242, 242, 0.96);
}

.download-status.failed strong,
.download-status.failed small {
  color: #b91c1c;
}

.download-status.failed i {
  background: #ef4444;
}

@keyframes download-indeterminate {
  0% {
    transform: translateX(-40%);
  }
  50% {
    transform: translateX(180%);
  }
  100% {
    transform: translateX(-40%);
  }
}

body.viewer-open {
  overflow: hidden;
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.queue-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.queue-toolbar button {
  min-height: 34px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.queue-toolbar button:first-child {
  background: var(--accent);
  color: #fff;
}

.queue-toolbar button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.queue-safety-note {
  margin: -2px 0 10px;
  padding: 9px 10px;
  border: 1px solid rgba(15, 118, 110, 0.13);
  border-radius: 12px;
  background: rgba(240, 253, 250, 0.72);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}

.empty-queue {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px dashed rgba(15, 118, 110, 0.22);
  border-radius: 16px;
  background: rgba(238, 250, 247, 0.58);
  color: var(--muted);
  font-size: 12px;
}

.empty-queue strong,
.empty-queue small {
  display: block;
  min-width: 0;
}

.empty-queue strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.empty-queue small {
  line-height: 1.55;
}

.queue-empty-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.queue-empty-steps span {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.queue-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

.queue-summary span,
.queue-summary strong {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 12px;
  background: rgba(238, 250, 247, 0.72);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.queue-summary strong {
  grid-column: 1 / -1;
  color: var(--accent);
  background: rgba(15, 118, 110, 0.08);
}

.queue-summary small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.queue-summary[hidden] {
  display: none;
}

.queue-item {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
}

.queue-thumb {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), transparent),
    linear-gradient(145deg, var(--accent-soft), rgba(255, 255, 255, 0.86));
}

.queue-thumb span {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

.queue-item.running {
  border-color: rgba(0, 168, 120, 0.3);
  background: rgba(240, 253, 250, 0.82);
}

.queue-item.failed {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(254, 242, 242, 0.82);
}

.queue-item.failed .queue-price {
  color: #dc2626;
}

.queue-item.partial {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(255, 251, 235, 0.86);
}

.queue-item.partial .queue-price {
  color: #b45309;
}

.queue-item.status-lost {
  border-color: rgba(14, 165, 233, 0.28);
  background: rgba(240, 249, 255, 0.88);
}

.queue-item.status-lost .queue-price {
  color: #0369a1;
}

.generate-btn:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.queue-item strong {
  display: block;
  font-size: 13px;
}

.queue-item small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.queue-safe-hint {
  color: var(--accent) !important;
  font-weight: 900;
}

.risk-profile-card {
  display: grid;
  gap: 7px;
  width: min(100%, 440px);
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 13px;
  background: rgba(240, 249, 255, 0.78);
}

.risk-profile-card.warn {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.82);
}

.risk-profile-card.danger {
  border-color: rgba(220, 38, 38, 0.24);
  background: rgba(254, 242, 242, 0.84);
}

.risk-profile-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  justify-content: space-between;
}

.risk-profile-head strong {
  color: var(--ink);
  font-size: 12px;
}

.risk-profile-head small {
  color: var(--accent);
  font-weight: 900;
}

.risk-profile-card.warn .risk-profile-head small {
  color: #b45309;
}

.risk-profile-card.danger .risk-profile-head small {
  color: #dc2626;
}

.risk-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.risk-profile-grid span {
  min-width: 0;
  padding: 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.risk-profile-grid b {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 11px;
}

.task-progress {
  position: relative;
  width: min(100%, 360px);
  height: 8px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.task-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 8px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #14b8a6);
  transition: width 0.45s ease;
}

.task-progress.running i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  animation: progress-shine 1.35s linear infinite;
}

.task-progress.done i {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}

.task-progress.partial i {
  background: linear-gradient(90deg, #d97706, #f59e0b);
}

.task-progress.failed i {
  background: linear-gradient(90deg, #dc2626, #f87171);
}

.task-progress-text {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--accent) !important;
  font-weight: 900;
}

.task-progress-text b {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: var(--accent);
  font-size: 10px;
}

.task-progress-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 360px);
  gap: 5px;
  margin: 5px 0 2px;
}

.task-progress-stages span {
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.task-progress-stages span.active {
  border-color: rgba(15, 118, 110, 0.22);
  background: rgba(15, 118, 110, 0.1);
  color: var(--accent);
}

.failure-review-card {
  display: grid;
  gap: 8px;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 14px;
  background: rgba(255, 251, 235, 0.82);
}

.failure-review-card.danger {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(254, 242, 242, 0.86);
}

.failure-review-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  justify-content: space-between;
}

.failure-review-head strong {
  color: var(--ink);
  font-size: 12px;
}

.failure-review-head small {
  color: #b45309;
  font-weight: 900;
}

.failure-review-card.danger .failure-review-head small {
  color: #dc2626;
}

.failure-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.failure-review-grid span {
  min-width: 0;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.failure-review-grid b {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 11px;
}

.failure-resolution-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
  width: min(100%, 760px);
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 12px;
  background: rgba(240, 249, 255, 0.72);
}

.failure-resolution-card.failed {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(254, 242, 242, 0.82);
}

.failure-resolution-card.partial,
.failure-resolution-card.status_lost,
.failure-resolution-card.status-lost {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 251, 235, 0.82);
}

.failure-resolution-card span {
  min-width: 0;
  padding: 7px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.42;
}

.failure-resolution-card b {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 11px;
}

@media (max-width: 720px) {
  .failure-resolution-card {
    grid-template-columns: 1fr;
  }
}

@keyframes progress-shine {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.queue-copy {
  width: fit-content;
  min-height: 28px;
  margin-top: 7px;
  border-radius: 11px;
  padding: 0 10px;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  font-size: 11px;
  font-weight: 900;
}

.queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.queue-copy.secondary {
  background: rgba(15, 118, 110, 0.1);
  color: var(--accent);
}

.queue-price {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.result {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.46), transparent),
    linear-gradient(145deg, var(--accent-soft), rgba(255, 255, 255, 0.86));
}

.r2 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent),
    linear-gradient(145deg, rgba(246, 165, 190, 0.28), rgba(255, 255, 255, 0.88));
}

.r3 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent),
    linear-gradient(145deg, rgba(99, 102, 241, 0.23), rgba(255, 255, 255, 0.88));
}

.r4 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent),
    linear-gradient(145deg, rgba(15, 118, 110, 0.24), rgba(255, 255, 255, 0.88));
}

.generate-btn {
  width: 100%;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), #0d9488);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 18px 38px rgba(15, 118, 110, 0.24);
}

@media (max-width: 899px) {
  .generate-btn {
    position: fixed;
    left: 50%;
    bottom: 72px;
    z-index: 10;
    width: min(calc(100% - 32px), 448px);
    transform: translateX(-50%);
  }
}

.tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 9;
  display: grid;
  width: min(100%, 480px);
  grid-template-columns: repeat(4, 1fr);
  padding: 9px 12px max(9px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  border-top: 1px solid rgba(23, 28, 27, 0.08);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
  box-shadow: 0 -10px 30px rgba(18, 28, 24, 0.08);
}

.tabbar button {
  height: 42px;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.tabbar .active {
  background: linear-gradient(135deg, var(--accent-soft), rgba(194, 106, 44, 0.08));
  color: var(--accent);
}

:root[data-skin="cute"] .tabbar {
  border-radius: 26px 26px 0 0;
  background: rgba(255, 255, 255, 0.92);
}

:root[data-skin="cute"] .tabbar button {
  border-radius: 18px;
}

:root[data-skin="pro"] .tabbar {
  border-top: 1px solid rgba(56, 189, 248, 0.22);
  background: rgba(2, 6, 23, 0.94);
  box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.28);
}

:root[data-skin="pro"] .tabbar button {
  border-radius: 6px;
}

:root[data-skin="pro"] .tabbar .active {
  background: rgba(56, 189, 248, 0.16);
}

:root[data-skin="pro"] .panel,
:root[data-skin="pro"] .home-card,
:root[data-skin="pro"] .quick-actions button,
:root[data-skin="pro"] .account-strip,
:root[data-skin="pro"] .announcement-panel,
:root[data-skin="pro"] .credit-card,
:root[data-skin="pro"] .prompt-box,
:root[data-skin="pro"] .photo-preview,
:root[data-skin="pro"] .queue-item,
:root[data-skin="pro"] .template-hero-actions button,
:root[data-skin="pro"] .skin,
:root[data-skin="pro"] .mode-row button {
  background-color: rgba(15, 23, 42, 0.86);
}

:root[data-skin="pro"] textarea,
:root[data-skin="pro"] input,
:root[data-skin="pro"] select {
  background-color: rgba(2, 6, 23, 0.72);
  color: var(--text);
  border-color: rgba(56, 189, 248, 0.22);
}

:root[data-skin="pro"] .generate-btn,
:root[data-skin="pro"] .home-card button,
:root[data-skin="pro"] .credit-card button {
  color: #00111c;
}

:root[data-skin="pro"] .home-audience b {
  border-color: rgba(56, 189, 248, 0.16);
  background: rgba(2, 6, 23, 0.42);
  color: #7dd3fc;
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
}

.sheet.hidden {
  display: none;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 20, 16, 0.22);
  backdrop-filter: blur(8px);
}

.sheet-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%, 480px);
  max-height: 78vh;
  overflow-y: auto;
  transform: translateX(-50%);
  padding: 10px 16px max(22px, env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -20px 60px rgba(20, 30, 26, 0.18);
}

.sheet-handle {
  width: 42px;
  height: 5px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(23, 32, 28, 0.16);
}

.plan-list {
  display: grid;
  gap: 10px;
}

.buy-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.buy-flow article {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--accent-soft);
  text-align: center;
}

.buy-flow strong,
.buy-flow small {
  display: block;
}

.buy-flow strong {
  width: 26px;
  height: 26px;
  margin: 0 auto 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  line-height: 26px;
}

.buy-flow small {
  color: var(--text);
  font-size: 11px;
  line-height: 1.35;
}

.buy-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.buy-actions .secondary {
  background: var(--surface-strong);
  color: var(--accent);
}

.redeem-preview {
  display: block;
  margin-top: -2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.plan-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-strong);
}

.plan-card strong {
  display: block;
  font-size: 15px;
}

.channel-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.channel-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.64);
}

.channel-option input {
  margin-top: 3px;
}

.channel-option strong,
.channel-option small {
  display: block;
}

.channel-option strong {
  font-size: 13px;
}

.channel-option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.guide-content {
  display: grid;
  gap: 10px;
}

.guide-content article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
}

.guide-content strong,
.guide-content small {
  display: block;
}

.guide-content small {
  margin-top: 6px;
  white-space: pre-wrap;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.generate-confirm-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
}

.generate-confirm {
  color: #0f172a;
}

.generate-confirm-guard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 14px;
  background: rgba(240, 253, 250, 0.86);
}

.generate-confirm-guard b {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.generate-confirm-guard span {
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.generate-confirm-safe-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.generate-confirm-safe-strip span {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  text-align: center;
}

.generate-confirm-decision {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 8px;
}

.generate-confirm-decision article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.78));
}

.generate-confirm-decision article:first-child {
  border-color: rgba(15, 118, 110, 0.3);
  background: #ecfdf5;
}

.generate-confirm-decision b {
  color: #0f766e;
  font-size: 10px;
  font-weight: 950;
}

.generate-confirm-decision strong {
  display: -webkit-box;
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.generate-confirm-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.generate-confirm-summary article {
  padding: 9px;
}

.generate-confirm-summary small {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.38;
}

.generate-confirm-risk {
  display: grid;
  grid-template-columns: auto minmax(0, 0.6fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(217, 119, 6, 0.34);
  border-radius: 12px;
  border-color: rgba(217, 119, 6, 0.34);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(254, 243, 199, 0.66));
}

.generate-confirm-risk strong {
  color: #92400e;
  font-size: 12px;
  white-space: nowrap;
}

.generate-confirm-risk span {
  overflow: hidden;
  color: #a16207;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generate-confirm-risk small {
  overflow: hidden;
  color: #78350f;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generate-confirm-light {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: 10px;
  background: #fff7ed;
  color: #92400e;
  cursor: pointer;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.generate-confirm-light:focus-visible,
.generate-confirm-light:hover {
  border-color: rgba(180, 83, 9, 0.42);
  background: #ffedd5;
}

.generate-confirm-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.generate-confirm-proof article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 12px;
  background: rgba(240, 253, 250, 0.72);
}

.generate-confirm-proof b,
.generate-confirm-proof span {
  min-width: 0;
}

.generate-confirm-proof b {
  color: #0f766e;
  font-size: 10px;
  font-weight: 950;
}

.generate-confirm-proof span {
  display: -webkit-box;
  max-height: 2.9em;
  overflow: hidden;
  color: #0f172a;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.generate-confirm-details {
  overflow: hidden;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.8);
}

.generate-confirm-details summary {
  cursor: pointer;
  padding: 10px 11px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
}

.generate-confirm-details article {
  margin: 0 10px 10px;
}

.generate-confirm-pending {
  border-color: rgba(245, 158, 11, 0.32) !important;
  background: rgba(255, 251, 235, 0.92) !important;
}

.generate-confirm-actual-prompt {
  border-color: rgba(15, 118, 110, 0.24) !important;
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.94), rgba(255, 255, 255, 0.92)) !important;
}

.generate-confirm-actual-prompt small {
  display: -webkit-box;
  max-height: 108px;
  overflow: hidden;
  color: #334155;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.generate-confirm-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 12px;
  background: rgba(255, 251, 235, 0.92);
  color: #78350f;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.generate-confirm-check input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
}

.generate-confirm-actions button {
  width: 100%;
  min-height: 44px;
}

.generate-confirm-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

@media (max-width: 560px) {
  .generate-confirm-decision,
  .generate-confirm-safe-strip,
  .generate-confirm-summary,
  .generate-confirm-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .generate-confirm-risk {
    grid-template-columns: 1fr;
  }

  .generate-confirm-risk span,
  .generate-confirm-risk small {
    white-space: normal;
  }
}

.failure-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.failure-action {
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 14px;
  background: rgba(238, 250, 247, 0.82);
  color: var(--text);
  text-align: left;
}

.failure-action strong,
.failure-action small {
  display: block;
}

.failure-action strong {
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
}

.failure-action small {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.plan-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.plan-card button {
  min-width: 72px;
  height: 38px;
  border-radius: 15px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.login-form {
  display: grid;
  gap: 10px;
}

.login-form input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 16px;
  outline: none;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--text);
}

.login-form button {
  height: 46px;
  border-radius: 17px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
}

.ghost-btn,
.account-sheet button,
.success-box button {
  height: 44px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
}

.account-sheet,
.success-box {
  display: grid;
  gap: 10px;
}

.account-sheet strong,
.success-box strong {
  font-size: 18px;
}

.account-sheet small,
.success-box small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.caption-tools {
  display: grid;
  gap: 12px;
}

.caption-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.caption-actions button {
  min-height: 40px;
  padding: 0 8px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.caption-actions button.secondary {
  background: var(--accent-soft);
  color: var(--accent);
}

.caption-actions button:nth-child(4) {
  background: #17201c;
  color: #fff;
}

.caption-kit-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.caption-kit-strip span {
  padding: 5px 8px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.07);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.caption-brief {
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 14px;
  background: rgba(15, 118, 110, 0.06);
}

.caption-brief strong,
.caption-brief small {
  display: block;
}

.caption-brief strong {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.caption-brief small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.caption-wide-action {
  min-height: 38px;
  border-radius: 14px;
  background: #eef2ef;
  color: var(--muted);
  font-weight: 900;
}

.caption-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.caption-card:nth-last-child(-n + 4) {
  border-color: rgba(15, 118, 110, 0.18);
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.92), #fff);
}

.caption-card:nth-last-child(-n + 4) strong::before {
  content: "交付 · ";
  color: var(--accent);
}

.caption-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.caption-card strong {
  color: var(--ink);
  font-size: 14px;
}

.caption-card button {
  min-width: 64px;
  min-height: 34px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
}

.caption-card textarea {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  border: 1px solid rgba(24, 40, 34, 0.1);
  border-radius: 12px;
  background: #f8faf8;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
}

.ledger-list {
  display: grid;
  gap: 9px;
}

.task-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.task-stats article {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--accent-soft);
  text-align: center;
}

.task-stats strong,
.task-stats small {
  display: block;
}

.task-stats strong {
  color: var(--accent);
  font-size: 18px;
}

.task-stats small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.task-filters {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-bottom: 10px;
  padding-bottom: 2px;
}

.task-filters button {
  flex: 0 0 auto;
  height: 32px;
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.task-filters .active {
  background: var(--accent);
  color: #fff;
}

.task-health-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 18px;
  background: rgba(240, 253, 250, 0.82);
}

.task-health-card.failed {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(254, 242, 242, 0.86);
}

.task-health-card.partial,
.task-health-card.running {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.88);
}

.task-stuck-card {
  display: block;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 14px;
  background: rgba(255, 251, 235, 0.9);
}

.task-stuck-card strong,
.task-stuck-card small {
  display: block;
}

.task-stuck-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.task-health-card strong,
.task-health-card small {
  display: block;
}

.task-health-card strong {
  font-size: 14px;
}

.task-health-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.task-health-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.task-health-actions button {
  height: 32px;
  border-radius: 12px;
  padding: 0 10px;
  background: #fff;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.wallet-summary {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--accent-soft);
}

.wallet-summary strong,
.wallet-summary small {
  display: block;
}

.wallet-summary strong {
  color: var(--accent);
  font-size: 24px;
}

.wallet-summary small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.ledger-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
}

.project-item {
  cursor: pointer;
}

.project-item {
  grid-template-columns: 1fr auto auto auto;
}

.task-center-item {
  grid-template-columns: 1fr auto auto auto;
}

.task-center-item .task-progress {
  width: min(100%, 420px);
}

.task-center-item.running {
  border-color: rgba(205, 137, 38, 0.28);
  background: #fffaf2;
}

.task-center-item.failed {
  border-color: rgba(220, 38, 38, 0.18);
}

.task-delivery-hint {
  display: block;
  margin-top: 5px;
  color: var(--accent) !important;
  font-weight: 900;
}

.project-item button,
.task-center-item button {
  height: 32px;
  border-radius: 12px;
  padding: 0 10px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.danger-text {
  color: #dc2626 !important;
}

.warn-text {
  color: #b45309 !important;
  font-weight: 900;
}

.ledger-item strong,
.ledger-item small {
  display: block;
}

.ledger-item strong {
  font-size: 14px;
}

.ledger-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.ledger-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.ledger-item .plus {
  color: var(--accent);
}

.ledger-item .minus {
  color: #dc2626;
}

@media (max-width: 360px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .credit-card {
    min-height: auto;
  }

  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .pricing-controls {
    grid-template-columns: 1fr;
  }

  .preflight-grid {
    grid-template-columns: 1fr;
  }

  .preflight-summary {
    grid-template-columns: 1fr;
  }

  .preflight-summary-grid {
    justify-content: flex-start;
  }

  .reference-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .composer {
    padding-top: 14px;
  }

  :root[data-skin="clean"] .hero-copy p:not(.hero-kicker),
  :root[data-skin="clean"] .home-card small,
  :root[data-skin="clean"] .quick-actions-head small,
  :root[data-skin="clean"] .scenario-note,
  :root[data-skin="pro"] .hero-copy p:not(.hero-kicker),
  :root[data-skin="pro"] .home-card small,
  :root[data-skin="pro"] .quick-actions-head small,
  :root[data-skin="pro"] .scenario-note {
    display: none;
  }

  :root[data-skin="clean"] .home-grid,
  :root[data-skin="pro"] .home-grid {
    grid-template-columns: 1fr;
  }

  :root[data-skin="pro"] .quick-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :root[data-skin="pro"] .quick-actions-head {
    grid-column: 1 / -1;
  }

  .mobile-flow {
    position: sticky;
    top: 8px;
    z-index: 5;
    margin-inline: -2px;
    padding: 6px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: rgba(248, 252, 250, 0.96);
    backdrop-filter: blur(12px);
  }

  .mobile-flow button {
    min-height: 52px;
    padding: 7px;
  }

  .mobile-flow strong {
    width: 22px;
    height: 22px;
  }

  .mobile-flow span {
    font-size: 11px;
  }

  .mobile-flow small {
    font-size: 9px;
  }

  .viewer-delivery {
    grid-template-columns: 1fr;
  }

  .viewer-delivery-score {
    min-height: 68px;
  }

  .creation-mode-panel,
  .creation-mode-summary,
  .blank-starter-grid,
  .delivery-order-main,
  .delivery-order-grid,
  .delivery-order-actions,
  .announcement-digest,
  .template-hero-panel,
  .template-hero-actions,
  .template-workbench-grid,
  .template-goal-strip,
  .template-brief-panel,
  .professional-brief-head,
  .professional-brief-focus,
  .professional-brief-grid {
    grid-template-columns: 1fr;
  }

  .template-workbench-block {
    min-height: auto;
  }

  .template-hero-panel {
    gap: 8px;
    padding: 8px 10px;
  }

  .template-hero-panel h3 {
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.22;
  }

  .template-hero-panel p,
  .template-hero-tags {
    display: none;
  }

  .template-hero-actions {
    display: none;
  }

  .template-hero-actions button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    white-space: nowrap;
  }

  .template-workbench-panel {
    gap: 8px;
    padding: 10px;
  }

  .template-workbench-panel > .section-title {
    display: none;
  }

  .template-brief-panel {
    gap: 7px;
    padding: 9px;
    border-radius: 12px;
  }

  .template-brief-primary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 8px;
    align-items: baseline;
  }

  .template-brief-primary span {
    grid-row: 1 / span 2;
  }

  .template-brief-primary strong {
    font-size: 14px;
    line-height: 1.25;
  }

  .template-brief-primary small,
  .template-brief-cta-copy small,
  .template-goal-strip small,
  .template-workbench-block span {
    display: none;
  }

  .template-brief-cta-copy {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .template-brief-panel button[data-template-brief-apply] {
    min-height: 38px;
    border-radius: 10px;
  }

  .template-goal-strip {
    display: none;
  }

  .template-goal-strip button {
    min-height: 40px;
    padding: 7px;
  }

  .template-goal-strip strong {
    font-size: 12px;
    text-align: center;
  }

  .template-view-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .template-view-switch button {
    min-height: 32px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 11px;
  }

  .template-workbench-grid {
    gap: 7px;
  }

  .template-workbench-block {
    padding: 10px;
    gap: 7px;
  }

  .template-workbench-block strong {
    font-size: 13px;
  }

  .template-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .template-brief-panel button {
    width: 100%;
  }

  .template-brief-metrics {
    grid-template-columns: 1fr;
  }

  .professional-brief-head button {
    width: 100%;
  }

  .professional-brief-actions {
    width: 100%;
  }

  .creation-mode-panel {
    gap: 8px;
  }

  .blank-starter-head {
    align-items: stretch;
    flex-direction: column;
  }

  .blank-starter-head button {
    width: 100%;
  }

  .creation-mode-panel button {
    min-height: 68px;
  }

  :root[data-skin="clean"] .creation-mode-summary,
  :root[data-skin="clean"] .delivery-order-panel,
  :root[data-skin="clean"] .track-panel,
  :root[data-skin="clean"] .track-guide,
  :root[data-skin="clean"] .mobile-flow,
  :root[data-skin="clean"] .prompt-preflight {
    display: none;
  }

  :root[data-skin="clean"] .creation-mode-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  :root[data-skin="clean"] .creation-mode-panel button {
    min-height: 52px;
    padding: 8px 6px;
    text-align: center;
  }

  :root[data-skin="clean"] .creation-mode-panel small {
    display: none;
  }

  :root[data-skin="clean"] .blank-starter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-skin="cute"] .creation-mode-panel,
  :root[data-skin="cute"] .blank-starter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-skin="cute"] .creation-mode-panel button {
    min-height: 92px;
    padding: 13px;
  }

  :root[data-skin="cute"] .track-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-skin="pro"] .composer {
    padding-top: 8px;
  }

  :root[data-skin="pro"] .creation-mode-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  :root[data-skin="pro"] .creation-mode-panel button {
    min-height: 48px;
    padding: 7px 5px;
    border-radius: 6px;
    text-align: center;
  }

  :root[data-skin="pro"] .creation-mode-panel small,
  :root[data-skin="pro"] .creation-mode-summary small,
  :root[data-skin="pro"] .blank-starter-head small,
  :root[data-skin="pro"] .delivery-order-grid {
    display: none;
  }

  :root[data-skin="pro"] .track-panel,
  :root[data-skin="pro"] .blank-starter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .failure-review-grid {
    grid-template-columns: 1fr;
  }

  .risk-profile-grid {
    grid-template-columns: 1fr;
  }

  .viewer-delivery-actions {
    grid-template-columns: 1fr;
  }

  .viewer-delivery-quick {
    grid-template-columns: 1fr;
  }

  .support-desk {
    grid-template-columns: 1fr;
  }

  .support-desk-wide {
    grid-column: 1;
  }

  .caption-actions {
    grid-template-columns: 1fr;
  }

  .task-health-card {
    grid-template-columns: 1fr;
  }

  .task-health-actions {
    justify-content: flex-start;
  }

  .task-center-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .task-center-item span {
    justify-self: start;
  }

  .task-center-item button {
    width: fit-content;
  }
}

@media (max-width: 899px) {
  .prompt-live-preview {
    grid-template-columns: 1fr;
  }

  .prompt-understanding-grid {
    grid-template-columns: 1fr;
  }

  .prompt-compare {
    grid-template-columns: 1fr;
  }

  .reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .image-viewer {
    padding: 10px;
  }

  .image-viewer-panel {
    max-height: 94vh;
    padding: 10px;
    border-radius: 20px;
  }

  .image-viewer-body {
    grid-template-columns: 1fr;
    gap: 10px;
    overflow: auto;
  }

  .image-viewer-top {
    grid-template-columns: 60px 1fr auto;
    gap: 6px;
  }

  .viewer-actions {
    gap: 5px;
  }

  .viewer-actions button {
    padding: 0 7px;
    font-size: 12px;
  }

  .image-viewer-stage img {
    max-height: 58vh;
  }

  .viewer-nav {
    width: 38px;
    height: 54px;
    font-size: 30px;
  }

  .viewer-side-panel {
    max-height: none;
    overflow: visible;
  }
}

@media (min-width: 900px) {
  body {
    background:
      linear-gradient(145deg, #f7faf8, #fff 58%, var(--accent-soft));
  }

  .app-shell {
    width: min(100% - 64px, 1180px);
    padding: 28px 0 96px;
  }

  :root[data-skin="clean"] .app-shell {
    width: min(100% - 96px, 1060px);
  }

  :root[data-skin="cute"] .app-shell {
    width: min(100% - 56px, 1120px);
  }

  :root[data-skin="pro"] .app-shell {
    width: min(100% - 40px, 1280px);
  }

  .topbar {
    padding-bottom: 18px;
  }

  .topbar h1 {
    font-size: 30px;
  }

  .announcement-panel[data-page="home"] {
    display: none;
  }

  .account-strip,
  .guide-row,
  .announcement-panel,
  .hero,
  .quick-actions,
  .scenario-strip,
  .composer,
  .workflow-grid,
  .package-panel,
  .results,
  .queue {
    max-width: none;
  }

  .account-strip {
    margin-bottom: 16px;
    border-radius: 18px;
  }

  .guide-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero {
    min-height: 168px;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: stretch;
    border-radius: 24px;
  }

  .hero h2 {
    max-width: 520px;
    font-size: 34px;
  }

  .hero p:last-child {
    max-width: 560px;
    font-size: 15px;
  }

  .credit-card {
    min-height: 122px;
    border-radius: 18px;
  }

  .credit-card strong {
    font-size: 32px;
  }

  .home-hero {
    min-height: 118px;
    align-items: center;
  }

  .home-hero .credit-card {
    min-height: 92px;
  }

  .home-hero h2 {
    font-size: 26px;
  }

  .home-hero p:last-child {
    max-width: 480px;
    font-size: 12px;
  }

  .quick-actions {
    grid-template-columns: 0.82fr repeat(3, 1fr);
  }

  .quick-actions-head {
    grid-column: auto;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .quick-actions-head small {
    max-width: 520px;
  }

  .quick-actions button {
    min-height: 64px;
  }

  .scenario-strip {
    max-height: 132px;
    overflow: auto;
  }

  .template-workbench-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .template-view-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .template-workbench-block {
    min-height: 132px;
    padding: 12px;
  }

  .template-brief-panel {
    grid-template-columns: 1.1fr minmax(0, 1.7fr) 138px;
  }

  .template-hero-panel {
    min-height: 112px;
    padding-block: 14px;
  }

  .template-hero-panel p,
  .template-hero-tags {
    display: none;
  }

  .track-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .quick-actions button,
  .panel,
  .workflow,
  .plan-card,
  .ledger-item {
    border-radius: 12px;
  }

  .composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.42fr);
    gap: 14px;
    align-items: start;
  }

  :root[data-skin="clean"] .composer {
    grid-template-columns: minmax(0, 1fr);
  }

  :root[data-skin="cute"] .composer {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.5fr);
  }

  :root[data-skin="pro"] .composer {
    grid-template-columns: 228px minmax(0, 1fr) 360px;
    gap: 10px;
  }

  .composer .section-title,
  .composer .creation-mode-panel,
  .composer .creation-mode-summary,
  .composer .mode-row,
  .composer .blank-starter-panel,
  .composer .track-panel,
  .composer .professional-brief,
  .composer .prompt-box,
  .composer .prompt-preflight {
    grid-column: 1;
  }

  .composer .delivery-order-panel,
  .composer .delivery-stack,
  .composer > .generation-settings-panel,
  .composer > .pricing-controls,
  .composer > .price-hint {
    grid-column: 2;
  }

  :root[data-skin="clean"] .composer .delivery-stack,
  :root[data-skin="clean"] .composer .delivery-order-panel,
  :root[data-skin="clean"] .composer > .generation-settings-panel,
  :root[data-skin="clean"] .composer > .pricing-controls,
  :root[data-skin="clean"] .composer > .price-hint {
    grid-column: 1;
  }

  :root[data-skin="pro"] .composer .creation-mode-panel,
  :root[data-skin="pro"] .composer .track-panel {
    grid-column: 1;
  }

  :root[data-skin="pro"] .composer .section-title,
  :root[data-skin="pro"] .composer .creation-mode-summary,
  :root[data-skin="pro"] .composer .mode-row,
  :root[data-skin="pro"] .composer .blank-starter-panel,
  :root[data-skin="pro"] .composer .professional-brief,
  :root[data-skin="pro"] .composer .prompt-box,
  :root[data-skin="pro"] .composer .prompt-preflight {
    grid-column: 2;
  }

  :root[data-skin="pro"] .composer .delivery-stack,
  :root[data-skin="pro"] .composer .delivery-order-panel,
  :root[data-skin="pro"] .composer > .generation-settings-panel,
  :root[data-skin="pro"] .composer > .pricing-controls,
  :root[data-skin="pro"] .composer > .price-hint {
    grid-column: 3;
  }

  :root[data-skin="cute"] .composer .section-title,
  :root[data-skin="cute"] .composer .creation-mode-panel,
  :root[data-skin="cute"] .composer .creation-mode-summary,
  :root[data-skin="cute"] .composer .blank-starter-panel,
  :root[data-skin="cute"] .composer .track-panel,
  :root[data-skin="cute"] .composer .prompt-box,
  :root[data-skin="cute"] .composer .prompt-preflight,
  :root[data-skin="cute"] .composer .mode-row,
  :root[data-skin="cute"] .composer > .generation-settings-panel,
  :root[data-skin="cute"] .composer > .pricing-controls,
  :root[data-skin="cute"] .composer > .price-hint {
    grid-column: 1;
  }

  :root[data-skin="cute"] .composer .delivery-stack {
    grid-column: 2;
  }

  .composer textarea {
    min-height: 188px;
  }

  .mode-row {
    margin: 0 0 10px;
    flex-direction: row;
    overflow: visible;
  }

  .mode-row button {
    min-width: 0;
  }

  .creation-mode-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :root[data-skin="clean"] .composer {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  :root[data-skin="clean"] .composer .delivery-order-panel,
  :root[data-skin="clean"] .composer .delivery-stack,
  :root[data-skin="clean"] .composer > .generation-settings-panel,
  :root[data-skin="clean"] .composer > .pricing-controls,
  :root[data-skin="clean"] .composer > .price-hint {
    grid-column: 1;
  }

  :root[data-skin="clean"] .composer .prompt-box {
    grid-column: 1;
    grid-row: 2;
  }

  :root[data-skin="clean"] .composer .mode-row {
    grid-row: 3;
  }

  :root[data-skin="clean"] .composer .creation-mode-panel {
    grid-row: 4;
  }

  :root[data-skin="clean"] .composer .blank-starter-panel {
    grid-row: 5;
  }

  :root[data-skin="clean"] .composer .delivery-stack {
    grid-row: 6;
    position: static;
  }

  :root[data-skin="clean"] .blank-starter-quick {
    display: grid;
    grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
    align-items: start;
    max-height: 142px;
    overflow: auto;
  }

  :root[data-skin="clean"] .starter-quick-head {
    display: grid;
    align-content: start;
  }

  :root[data-skin="clean"] .starter-quick-tabs,
  :root[data-skin="clean"] .starter-quick-variants,
  :root[data-skin="clean"] .starter-diagnosis-card,
  :root[data-skin="clean"] .starter-question-row {
    grid-column: 2;
  }

  :root[data-skin="clean"] .composer textarea {
    min-height: 180px;
  }

  :root[data-skin="clean"] .blank-starter-panel {
    gap: 7px;
    padding: 8px;
  }

  :root[data-skin="clean"] .blank-starter-head small,
  :root[data-skin="clean"] .blank-next-steps {
    display: none;
  }

  :root[data-skin="clean"] .blank-starter-grid button {
    min-height: 44px;
    padding: 7px;
  }

  :root[data-skin="clean"] .blank-starter-grid span {
    display: none;
  }

  :root[data-skin="clean"] .blank-variant-panel {
    grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
  }

  :root[data-skin="clean"] .blank-variant-panel small {
    display: none;
  }

  :root[data-skin="clean"] .blank-variant-grid button {
    min-height: 30px;
    padding: 0 10px;
  }

  :root[data-skin="cute"] .creation-mode-panel,
  :root[data-skin="cute"] .blank-starter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-skin="cute"] .composer {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.56fr);
    gap: 16px;
  }

  :root[data-skin="cute"] .composer .section-title,
  :root[data-skin="cute"] .composer .mode-row,
  :root[data-skin="cute"] .composer .prompt-box {
    grid-column: 1;
  }

  :root[data-skin="cute"] .composer .creation-mode-panel,
  :root[data-skin="cute"] .composer .delivery-stack {
    grid-column: 2;
  }

  :root[data-skin="cute"] .composer .track-panel {
    grid-column: 1 / -1;
  }

  :root[data-skin="cute"] .composer > .generation-settings-panel,
  :root[data-skin="cute"] .composer > .pricing-controls,
  :root[data-skin="cute"] .composer > .price-hint {
    grid-column: 2;
  }

  :root[data-skin="cute"] .delivery-order-grid {
    grid-template-columns: 1fr;
  }

  :root[data-skin="cute"] .delivery-order-actions {
    grid-template-columns: 1fr;
  }

  :root[data-skin="cute"] .composer textarea {
    min-height: 154px;
  }

  :root[data-skin="cute"] .blank-starter-quick {
    max-height: 188px;
    overflow: auto;
  }

  :root[data-skin="pro"] .composer {
    grid-template-columns: 236px minmax(0, 1fr) 380px;
    gap: 10px;
  }

  :root[data-skin="pro"] .composer .section-title {
    grid-column: 1 / -1;
  }

  :root[data-skin="pro"] .composer .creation-mode-panel,
  :root[data-skin="pro"] .composer .track-panel,
  :root[data-skin="pro"] .composer .mobile-flow {
    grid-column: 1;
  }

  :root[data-skin="pro"] .composer .creation-mode-summary,
  :root[data-skin="pro"] .composer .blank-starter-panel,
  :root[data-skin="pro"] .composer .mode-row,
  :root[data-skin="pro"] .composer .prompt-box,
  :root[data-skin="pro"] .composer .prompt-preflight {
    grid-column: 2;
  }

  :root[data-skin="pro"] .composer .prompt-box {
    position: sticky;
    top: 12px;
    z-index: 2;
  }

  :root[data-skin="pro"] .composer .delivery-order-panel,
  :root[data-skin="pro"] .composer .delivery-stack,
  :root[data-skin="pro"] .composer > .generation-settings-panel,
  :root[data-skin="pro"] .composer > .pricing-controls,
  :root[data-skin="pro"] .composer > .price-hint {
    grid-column: 3;
  }

  :root[data-skin="pro"] .composer .professional-brief {
    grid-column: 2 / 4;
  }

  :root[data-skin="pro"] .composer .professional-brief:not(.hidden) {
    grid-column: 2;
    grid-row: 6;
  }

  :root[data-skin="pro"] .composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    grid-column: 2;
    grid-row: 4;
    max-height: 430px;
    overflow: auto;
  }

  :root[data-skin="pro"] .composer:has([data-creation-mode="professional"].active) .prompt-box {
    grid-row: 2;
  }

  :root[data-skin="pro"] .composer .blank-starter-panel {
    grid-row: 4;
  }

  :root[data-skin="pro"] .professional-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-skin="pro"] .professional-brief-head small,
  :root[data-skin="pro"] .professional-brief-focus {
    display: none;
  }

  :root[data-skin="pro"] .composer .delivery-stack {
    position: sticky;
    top: 14px;
  }

  :root[data-skin="pro"] .composer .creation-mode-panel {
    grid-row: 2;
  }

  :root[data-skin="pro"] .composer .track-panel {
    grid-row: 3;
  }

  :root[data-skin="pro"] .composer .mobile-flow {
    grid-row: 4;
  }

  :root[data-skin="pro"] .composer .mode-row {
    grid-row: 3;
  }

  :root[data-skin="pro"] .composer .prompt-box {
    grid-row: 2;
  }

  :root[data-skin="pro"] .composer .delivery-stack {
    grid-row: 2 / span 3;
  }

  :root[data-skin="pro"] .composer .mode-row {
    grid-row: 3;
  }

  :root[data-skin="pro"] .composer .prompt-preflight,
  :root[data-skin="pro"] .composer .blank-starter-panel {
    grid-row: 4;
  }

  :root[data-skin="pro"] .composer .track-guide {
    max-height: 220px;
    overflow: auto;
  }

  :root[data-skin="pro"] .creation-mode-panel,
  :root[data-skin="pro"] .track-panel {
    grid-template-columns: 1fr;
  }

  :root[data-skin="pro"] .blank-starter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-summary,
  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .mobile-flow,
  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .track-guide {
    display: none;
  }

  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    max-height: 252px;
    overflow: auto;
  }

  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .track-card {
    min-height: 48px;
    padding: 8px;
  }

  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .track-card small {
    display: none;
  }

  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-panel {
    max-height: 214px;
    overflow: auto;
  }

  :root[data-skin="pro"] .prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 0.46fr);
  }

  :root[data-skin="pro"] .prompt-live-missing,
  :root[data-skin="pro"] .prompt-live-preview button {
    grid-column: auto;
  }

  :root[data-skin="pro"] .prompt-live-plan {
    display: none;
  }

  :root[data-skin="pro"] .starter-question-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-head small,
  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .blank-next-steps {
    display: none;
  }

  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-grid button {
    min-height: 42px;
    padding: 7px;
  }

  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-grid span {
    display: none;
  }

  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .blank-variant-panel {
    grid-template-columns: 1fr;
    padding: 8px;
  }

  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .blank-variant-panel small {
    display: none;
  }

  :root[data-skin="pro"] .composer:not(:has([data-creation-mode="professional"].active)) .blank-variant-grid button {
    min-height: 30px;
    padding: 0 9px;
  }

  :root[data-skin="cute"] .composer .prompt-box {
    grid-row: 2 / span 2;
  }

  :root[data-skin="cute"] .composer .blank-starter-panel {
    grid-row: 4;
  }

  :root[data-skin="cute"] .composer .delivery-stack {
    grid-row: 2 / span 2;
  }

  :root[data-skin="cute"] .composer .track-panel {
    grid-row: 6;
  }

  :root[data-skin="cute"] .blank-starter-quick {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    align-items: start;
  }

  :root[data-skin="cute"] .starter-quick-head {
    display: grid;
    align-content: start;
  }

  :root[data-skin="cute"] .starter-quick-tabs,
  :root[data-skin="cute"] .starter-quick-variants,
  :root[data-skin="cute"] .starter-diagnosis-card,
  :root[data-skin="cute"] .starter-question-row {
    grid-column: 2;
  }

  :root[data-skin="cute"] .starter-question-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .composer .delivery-stack > .delivery-order-panel,
  .composer .delivery-stack > .generate-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  :root[data-skin="clean"] .composer .delivery-stack > #deliveryOrderPanel,
  :root[data-skin="clean"] .composer .delivery-stack > .generation-settings-panel,
  :root[data-skin="clean"] .composer .delivery-stack > .pricing-controls,
  :root[data-skin="clean"] .composer .delivery-stack > .price-hint,
  :root[data-skin="cute"] .composer .delivery-stack > #deliveryOrderPanel,
  :root[data-skin="cute"] .composer .delivery-stack > .generation-settings-panel,
  :root[data-skin="cute"] .composer .delivery-stack > .pricing-controls,
  :root[data-skin="cute"] .composer .delivery-stack > .price-hint,
  :root[data-skin="pro"] .composer .delivery-stack > #deliveryOrderPanel,
  :root[data-skin="pro"] .composer .delivery-stack > .generation-settings-panel,
  :root[data-skin="pro"] .composer .delivery-stack > .pricing-controls,
  :root[data-skin="pro"] .composer .delivery-stack > .price-hint,
  :root[data-skin="clean"] .composer .delivery-stack > #generateBtn,
  :root[data-skin="cute"] .composer .delivery-stack > #generateBtn,
  :root[data-skin="pro"] .composer .delivery-stack > #generateBtn {
    grid-column: 1;
    width: 100%;
  }

  .template-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-controls {
    grid-template-columns: 1fr;
  }

  .photo-preview {
    grid-template-columns: 96px 1fr;
  }

  .photo-preview img {
    width: 96px;
    height: 96px;
  }

  .workflow-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .professional-template-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .template-case-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .template-tabs {
    overflow: visible;
  }

  .scenario-scroll {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    padding-right: 0;
  }

  .scenario-scroll button {
    flex-basis: auto;
  }

  .deliverable-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .result-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .queue-item {
    grid-template-columns: 48px 1fr auto;
  }

  .tabbar {
    width: 76px;
    top: 50%;
    left: auto;
    right: 14px;
    bottom: auto;
    grid-template-columns: 1fr;
    transform: translateY(-50%);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }

  .tabbar button {
    min-height: 58px;
    padding: 8px 4px;
  }

  .sheet-panel {
    width: min(760px, calc(100% - 48px));
    max-height: 82vh;
    border-radius: 24px 24px 0 0;
  }

  .plan-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plan-list > .guide-content,
  .plan-list > .copy-btn {
    grid-column: 1 / -1;
  }
}

@media (min-width: 860px) {
  :root[data-skin="clean"] .composer {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
  }

  :root[data-skin="clean"] .composer .section-title,
  :root[data-skin="clean"] .composer .mode-row,
  :root[data-skin="clean"] .composer .prompt-box,
  :root[data-skin="clean"] .composer .prompt-preflight,
  :root[data-skin="clean"] .composer .blank-starter-panel {
    grid-column: 1;
  }

  :root[data-skin="clean"] .composer .delivery-stack {
    grid-column: 2;
    grid-row: 2 / span 4;
    position: sticky;
    top: 16px;
  }

  :root[data-skin="clean"] .composer .creation-mode-panel {
    display: flex;
    gap: 8px;
    grid-column: 1 / -1;
    order: 1;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  :root[data-skin="clean"] .composer .creation-mode-panel button {
    flex: 0 0 132px;
    min-height: 42px;
    padding: 8px 10px;
  }

  :root[data-skin="clean"] .composer .creation-mode-panel small,
  :root[data-skin="clean"] .prompt-understanding-grid,
  :root[data-skin="clean"] .prompt-understanding-actions .secondary,
  :root[data-skin="clean"] .delivery-order-main small,
  :root[data-skin="clean"] .price-hint {
    display: none;
  }

  :root[data-skin="clean"] .composer textarea {
    min-height: 172px;
  }

  :root[data-skin="clean"] .blank-starter-panel {
    max-height: 230px;
    overflow: auto;
  }

  :root[data-skin="clean"] .blank-starter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :root[data-skin="clean"] .blank-starter-grid button {
    min-height: 38px;
  }

  :root[data-skin="cute"] .composer {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
  }

  :root[data-skin="cute"] .composer .section-title,
  :root[data-skin="cute"] .composer .prompt-box,
  :root[data-skin="cute"] .composer .prompt-preflight,
  :root[data-skin="cute"] .composer .blank-starter-panel {
    grid-column: 1;
  }

  :root[data-skin="cute"] .composer .creation-mode-panel,
  :root[data-skin="cute"] .composer .delivery-stack {
    grid-column: 2;
  }

  :root[data-skin="cute"] .composer .creation-mode-panel {
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-skin="cute"] .composer .creation-mode-panel button {
    min-height: 112px;
    padding: 16px;
  }

  :root[data-skin="cute"] .composer .delivery-stack {
    grid-row: 3 / span 3;
    position: sticky;
    top: 16px;
  }

  :root[data-skin="cute"] .composer .mode-row {
    grid-column: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :root[data-skin="cute"] .composer .track-panel {
    grid-column: 1 / -1;
  }

  :root[data-skin="cute"] .prompt-understanding-grid {
    grid-template-columns: 1fr;
  }

  :root[data-skin="cute"] .prompt-understanding-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-skin="cute"] .blank-starter-panel {
    max-height: 310px;
    overflow: auto;
  }

  :root[data-skin="cute"] .blank-starter-quick {
    max-height: none;
  }

  :root[data-skin="pro"] .app-shell {
    width: min(100%, 1480px);
  }

  :root[data-skin="pro"] .composer {
    grid-template-columns: 220px minmax(420px, 1fr) 340px;
    gap: 12px;
    align-items: start;
  }

  :root[data-skin="pro"] .composer .section-title {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.16);
  }

  :root[data-skin="pro"] .composer .creation-mode-panel,
  :root[data-skin="pro"] .composer .track-panel {
    grid-column: 1;
  }

  :root[data-skin="pro"] .composer .creation-mode-panel {
    grid-row: 2;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  :root[data-skin="pro"] .composer .creation-mode-panel button {
    display: grid;
    min-height: 48px;
    padding: 9px 10px;
  }

  :root[data-skin="pro"] .composer .track-panel {
    grid-row: 3 / span 4;
    max-height: 520px;
    overflow: auto;
  }

  :root[data-skin="pro"] .composer .track-card {
    min-height: 48px;
    padding: 8px;
  }

  :root[data-skin="pro"] .composer .track-card small {
    display: none;
  }

  :root[data-skin="pro"] .composer .mode-row,
  :root[data-skin="pro"] .composer .prompt-box,
  :root[data-skin="pro"] .composer .blank-starter-panel,
  :root[data-skin="pro"] .composer .prompt-preflight {
    grid-column: 2;
  }

  :root[data-skin="pro"] .composer .mode-row {
    grid-row: 2;
  }

  :root[data-skin="pro"] .composer .prompt-box {
    grid-row: 3;
    position: sticky;
    top: 12px;
    z-index: 2;
  }

  :root[data-skin="pro"] .composer .blank-starter-panel {
    grid-row: 4;
    max-height: 260px;
    overflow: auto;
  }

  :root[data-skin="pro"] .composer .prompt-preflight {
    grid-row: 5;
  }

  :root[data-skin="pro"] .composer .delivery-stack {
    grid-column: 3;
    grid-row: 2 / span 4;
    position: sticky;
    top: 12px;
  }

  :root[data-skin="pro"] .delivery-stack {
    gap: 8px;
  }

  :root[data-skin="pro"] .delivery-order-main {
    grid-template-columns: minmax(0, 1fr) 56px;
    padding: 10px;
  }

  :root[data-skin="pro"] .delivery-order-score {
    min-height: 52px;
  }

  :root[data-skin="pro"] .generation-settings-panel,
  :root[data-skin="pro"] .pricing-controls,
  :root[data-skin="pro"] .price-hint {
    display: none;
  }

  :root[data-skin="pro"] .prompt-understanding {
    display: grid;
    gap: 9px;
  }

  :root[data-skin="pro"] .prompt-understanding-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :root[data-skin="pro"] .prompt-understanding-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :root[data-skin="pro"] .prompt-understanding-actions .secondary {
    display: none;
  }

  :root[data-skin="pro"] .blank-starter-grid,
  :root[data-skin="pro"] .starter-quick-tabs,
  :root[data-skin="pro"] .starter-quick-variants {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :root[data-skin="pro"] .starter-question-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Final route visibility guard. Keep this as the last rule in the file. */
[data-page][hidden],
.panel.composer[data-page][hidden],
:root[data-skin] .panel.composer[data-page][hidden] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Desktop polish pass v2: this must stay at the physical end so it wins older overrides. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 224px minmax(620px, 1fr) 312px !important;
    grid-auto-rows: min-content !important;
    gap: 12px !important;
    min-height: calc(100vh - 118px) !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"] .panel.composer .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-height: 188px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-height: 260px !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-brief,
  :root[data-active-page="create"] .panel.composer .track-guide {
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-height: 116px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .mode-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 46px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 !important;
    grid-row-start: 3 !important;
    grid-row-end: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(232px, 0.38fr) !important;
    gap: 9px !important;
    max-height: calc(100vh - 232px) !important;
    padding: 12px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer #promptToolbar,
  :root[data-active-page="create"] .panel.composer textarea#prompt {
    grid-column: 1 / -1 !important;
  }

  :root[data-active-page="create"] .panel.composer textarea#prompt {
    min-height: 128px !important;
    max-height: 168px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-preview {
    grid-column: 1 / -1 !important;
    max-height: 154px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box:has(.blank-starter-quick:not(.hidden)) .prompt-live-preview {
    grid-column: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box:has(.blank-starter-quick:not(.hidden)) .blank-starter-quick {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick {
    max-height: 226px !important;
    padding: 8px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick.hidden,
  :root[data-active-page="create"] .panel.composer .assist.hidden,
  :root[data-active-page="create"] .panel.composer .photo-preview.hidden {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer .assist:not(.hidden) {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head small,
  :root[data-active-page="create"] .panel.composer .starter-workflow-strip,
  :root[data-active-page="create"] .panel.composer .starter-direction-card,
  :root[data-active-page="create"] .panel.composer .starter-field-panel small,
  :root[data-active-page="create"] .panel.composer .starter-field-open small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-action-board {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs,
  :root[data-active-page="create"] .panel.composer .starter-quick-variants,
  :root[data-active-page="create"] .panel.composer .starter-field-chips,
  :root[data-active-page="create"] .panel.composer .starter-next-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs button,
  :root[data-active-page="create"] .panel.composer .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer .starter-field-chips button,
  :root[data-active-page="create"] .panel.composer .starter-next-actions button {
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 4 !important;
    max-height: 112px !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 4 !important;
    grid-row-start: 1 !important;
    grid-row-end: span 4 !important;
    max-height: calc(100vh - 92px) !important;
    padding: 11px !important;
  }

  :root[data-active-page="create"] .panel.composer #deliveryOrderPanel {
    max-height: 150px !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-decision-board article {
    padding: 7px 9px !important;
  }
}

@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box {
    grid-row-start: 2 !important;
    grid-row-end: span 3 !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack {
    grid-row-start: 1 !important;
    grid-row-end: span 4 !important;
  }
}

/* Desktop polish pass: keep the creation workbench readable and remove empty shells. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 224px minmax(620px, 1fr) 312px !important;
    grid-auto-rows: min-content !important;
    gap: 12px !important;
    min-height: calc(100vh - 118px) !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"] .panel.composer .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-height: 188px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-height: 260px !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-brief,
  :root[data-active-page="create"] .panel.composer .track-guide {
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-height: 116px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .mode-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 46px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(232px, 0.38fr) !important;
    gap: 9px !important;
    max-height: calc(100vh - 232px) !important;
    padding: 12px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer #promptToolbar,
  :root[data-active-page="create"] .panel.composer textarea#prompt {
    grid-column: 1 / -1 !important;
  }

  :root[data-active-page="create"] .panel.composer textarea#prompt {
    min-height: 128px !important;
    max-height: 168px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-preview {
    grid-column: 1 / -1 !important;
    max-height: 154px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box:has(.blank-starter-quick:not(.hidden)) .prompt-live-preview {
    grid-column: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box:has(.blank-starter-quick:not(.hidden)) .blank-starter-quick {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick {
    max-height: 226px !important;
    padding: 8px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick.hidden,
  :root[data-active-page="create"] .panel.composer .assist.hidden,
  :root[data-active-page="create"] .panel.composer .photo-preview.hidden {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer .assist:not(.hidden) {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head small,
  :root[data-active-page="create"] .panel.composer .starter-workflow-strip,
  :root[data-active-page="create"] .panel.composer .starter-direction-card,
  :root[data-active-page="create"] .panel.composer .starter-field-panel small,
  :root[data-active-page="create"] .panel.composer .starter-field-open small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-action-board {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs,
  :root[data-active-page="create"] .panel.composer .starter-quick-variants,
  :root[data-active-page="create"] .panel.composer .starter-field-chips,
  :root[data-active-page="create"] .panel.composer .starter-next-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs button,
  :root[data-active-page="create"] .panel.composer .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer .starter-field-chips button,
  :root[data-active-page="create"] .panel.composer .starter-next-actions button {
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 4 !important;
    max-height: 112px !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 4 !important;
    max-height: calc(100vh - 92px) !important;
    padding: 11px !important;
  }

  :root[data-active-page="create"] .panel.composer #deliveryOrderPanel {
    max-height: 150px !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-decision-board article {
    padding: 7px 9px !important;
  }
}

@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .mode-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 / span 3 !important;
    margin-top: 64px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 5 !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 5 !important;
  }
}

[data-page][hidden],
.panel.composer[data-page][hidden],
:root[data-skin] .panel.composer[data-page][hidden] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 859px) {
  :root[data-skin="clean"] .composer .creation-mode-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-skin="clean"] .composer .creation-mode-panel small,
  :root[data-skin="clean"] .prompt-understanding-grid article:nth-child(n + 2),
  :root[data-skin="clean"] .price-hint {
    display: none;
  }

  :root[data-skin="cute"] .composer .creation-mode-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-skin="pro"] .composer .creation-mode-panel,
  :root[data-skin="pro"] .composer .track-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Flow cleanup: keep the creation path readable before advanced controls. */
.composer .mode-row {
  display: none;
}

.prompt-understanding:not(.expanded) .prompt-understanding-grid,
.prompt-understanding:not(.expanded) .prompt-compare {
  display: none;
}

.prompt-understanding:not(.expanded) .prompt-understanding-actions button:nth-child(3),
.prompt-understanding:not(.expanded) .prompt-understanding-actions button:nth-child(n + 5) {
  display: none;
}

.prompt-understanding:not(.expanded) {
  grid-template-columns: minmax(0, 1fr);
}

.prompt-understanding:not(.expanded) .prompt-understanding-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prompt-preflight:not(:has(.prompt-understanding.expanded)) > .preflight-grid {
  display: none;
}

.prompt-preflight:not(:has(.prompt-understanding.expanded)) {
  padding: 9px;
}

.prompt-preflight:not(:has(.prompt-understanding.expanded)) .preflight-head {
  display: none;
}

.prompt-preflight:not(:has(.prompt-understanding.expanded)) .preflight-summary {
  grid-template-columns: minmax(120px, 0.48fr) minmax(0, 1fr) auto;
  margin-bottom: 7px;
  padding: 8px;
}

.prompt-preflight:not(:has(.prompt-understanding.expanded)) .preflight-summary small {
  display: none;
}

.prompt-preflight:not(:has(.prompt-understanding.expanded)) .preflight-summary-grid span:nth-child(n + 5) {
  display: none;
}

.prompt-understanding:not(.expanded) {
  margin: 6px 0 0;
  padding: 8px;
}

.prompt-understanding:not(.expanded) .prompt-understanding-main {
  gap: 2px;
}

.prompt-understanding:not(.expanded) .prompt-understanding-main small {
  max-height: 1.45em;
  -webkit-line-clamp: 1;
}

.prompt-understanding:not(.expanded) .prompt-understanding-strip span:nth-child(n + 3) {
  display: none;
}

.prompt-understanding:not(.expanded) .prompt-understanding-actions button {
  min-height: 28px;
  padding-inline: 8px;
}

.starter-field-sheet {
  gap: 9px;
}

.starter-field-sheet header strong {
  font-size: 13px;
  line-height: 1.3;
}

.starter-field-status {
  gap: 6px;
}

.starter-field-status article {
  min-height: 54px;
  padding: 8px;
}

.starter-field-status small {
  display: -webkit-box;
  max-height: 1.4em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.starter-field-sheet-grid {
  gap: 6px;
}

.starter-field-sheet-grid button {
  min-height: 42px;
  padding: 8px;
}

.starter-field-sheet-grid button small,
.starter-field-sheet-grid button em {
  display: none;
}

.starter-field-sheet-actions small {
  display: none;
}

@media (min-width: 1180px) {
  .tabbar {
    top: 14px;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(420px, calc(100% - 520px));
    min-width: 340px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 7px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
  }

  .tabbar button {
    min-height: 38px;
    height: 38px;
    padding: 0 8px;
  }
}

@media (max-width: 560px) {
  .quick-actions,
  :root[data-skin="pro"] .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .quick-actions-head {
    grid-column: 1 / -1;
  }

  .quick-actions button {
    min-height: 64px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 10px;
  }

  .quick-actions small {
    display: none;
  }

  :root[data-skin="clean"] .prompt-preflight:not(.hidden),
  :root[data-skin="pro"] .prompt-preflight:not(.hidden) {
    display: block;
  }

  .prompt-preflight {
    padding: 9px;
    border-radius: 12px;
  }

  .prompt-understanding {
    margin: 6px 0;
    padding: 8px;
  }

  .prompt-understanding-strip span {
    padding: 4px 7px;
  }

  .prompt-understanding:not(.expanded) .prompt-understanding-actions {
    grid-template-columns: 1fr;
  }

  .composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px;
  }

  .composer .prompt-box,
  :root[data-skin="clean"] .composer .prompt-box,
  :root[data-skin="cute"] .composer .prompt-box,
  :root[data-skin="pro"] .composer .prompt-box {
    order: 2 !important;
    grid-row: 2 !important;
    grid-column: 1 !important;
  }

  .composer .delivery-stack,
  :root[data-skin="clean"] .composer .delivery-stack,
  :root[data-skin="cute"] .composer .delivery-stack,
  :root[data-skin="pro"] .composer .delivery-stack {
    order: 5 !important;
    grid-row: 5 !important;
    grid-column: 1 !important;
    position: static !important;
  }

  .composer .prompt-preflight,
  :root[data-skin="clean"] .composer .prompt-preflight,
  :root[data-skin="cute"] .composer .prompt-preflight,
  :root[data-skin="pro"] .composer .prompt-preflight {
    order: 4 !important;
    grid-row: 4 !important;
    grid-column: 1 !important;
  }

  .composer .creation-mode-panel,
  :root[data-skin="clean"] .composer .creation-mode-panel,
  :root[data-skin="cute"] .composer .creation-mode-panel,
  :root[data-skin="pro"] .composer .creation-mode-panel {
    order: 1 !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
  }

  .composer .track-panel,
  .composer .mobile-flow,
  .composer .track-guide,
  .composer .professional-brief,
  .composer .blank-starter-panel,
  :root[data-skin="clean"] .composer .track-panel,
  :root[data-skin="clean"] .composer .mobile-flow,
  :root[data-skin="clean"] .composer .track-guide,
  :root[data-skin="clean"] .composer .professional-brief,
  :root[data-skin="clean"] .composer .blank-starter-panel,
  :root[data-skin="cute"] .composer .track-panel,
  :root[data-skin="cute"] .composer .mobile-flow,
  :root[data-skin="cute"] .composer .track-guide,
  :root[data-skin="cute"] .composer .professional-brief,
  :root[data-skin="cute"] .composer .blank-starter-panel,
  :root[data-skin="pro"] .composer .track-panel,
  :root[data-skin="pro"] .composer .mobile-flow,
  :root[data-skin="pro"] .composer .track-guide,
  :root[data-skin="pro"] .composer .professional-brief,
  :root[data-skin="pro"] .composer .blank-starter-panel {
    order: 6 !important;
    grid-row: auto !important;
    grid-column: 1 !important;
  }

  textarea,
  :root[data-skin="clean"] .composer textarea,
  :root[data-skin="cute"] .composer textarea,
  :root[data-skin="pro"] .composer textarea {
    min-height: 132px;
  }

  .prompt-box {
    padding: 10px;
  }

  .delivery-order-panel {
    margin-bottom: 6px;
  }

  .delivery-order-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 10px;
  }

  .delivery-order-score {
    min-height: 46px;
  }

  .delivery-order-grid,
  .delivery-order-actions,
  .generation-settings-panel,
  .price-hint {
    display: none;
  }

  .generate-btn {
    position: static;
    transform: none;
    display: inline-grid;
    place-items: center;
    max-width: 100%;
    box-sizing: border-box;
    height: 50px;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.22);
  }

  .prompt-box:has(textarea:placeholder-shown) ~ .delivery-stack .generate-btn {
    opacity: 0.72;
    box-shadow: none;
  }

  .starter-quick-head small,
  .starter-diagnosis-card small,
  .starter-question-row small,
  .starter-question-row em,
  .starter-quick-tabs {
    display: none;
  }

  .blank-starter-quick,
  :root[data-skin="clean"] .blank-starter-quick,
  :root[data-skin="cute"] .blank-starter-quick,
  :root[data-skin="pro"] .blank-starter-quick {
    max-height: none;
    grid-template-columns: 1fr;
    padding: 8px;
    overflow: visible;
  }

  .starter-quick-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .starter-quick-head > button {
    min-height: 30px;
    padding: 0 9px;
  }

  .starter-quick-variants {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .starter-quick-variants button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 9px;
  }

  .starter-diagnosis-card {
    padding: 7px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .starter-question-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .starter-question-row button {
    min-height: 34px;
    padding: 6px 7px;
  }

  .starter-question-row button:nth-child(n + 3) {
    display: none;
  }

  :root[data-skin="clean"] .composer .mobile-flow,
  :root[data-skin="clean"] .composer .track-guide,
  :root[data-skin="clean"] .composer .professional-brief,
  :root[data-skin="clean"] .composer .prompt-understanding,
  :root[data-skin="clean"] .composer .prompt-live-missing,
  :root[data-skin="clean"] .composer .prompt-preflight:not(.hidden) {
    display: none !important;
  }

  :root[data-skin="clean"] .composer .starter-diagnosis-card {
    display: grid !important;
  }

  :root[data-skin="clean"] .composer .starter-question-row {
    display: grid !important;
  }

  :root[data-skin="clean"] .composer .blank-starter-quick {
    order: 3 !important;
    padding: 6px;
    border-style: dashed;
    background: rgba(255, 255, 255, 0.78);
  }

  :root[data-skin="clean"] .composer .starter-quick-variants button:nth-child(n + 4) {
    display: none;
  }

  :root[data-skin="clean"] .composer .delivery-stack {
    order: 4 !important;
  }

  :root[data-skin="cute"] .composer .mobile-flow {
    order: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
  }

  :root[data-skin="cute"] .composer .creation-mode-panel {
    order: 2 !important;
    grid-row: 2 !important;
  }

  :root[data-skin="cute"] .composer .prompt-box {
    order: 3 !important;
    grid-row: 3 !important;
  }

  :root[data-skin="cute"] .composer .blank-starter-panel {
    order: 4 !important;
    display: grid !important;
  }

  :root[data-skin="cute"] .composer .starter-diagnosis-card {
    display: grid !important;
    border-radius: 18px;
  }

  :root[data-skin="cute"] .composer .track-panel,
  :root[data-skin="cute"] .composer .track-guide,
  :root[data-skin="cute"] .composer .professional-brief {
    display: none !important;
  }

  :root[data-skin="cute"] .composer .starter-question-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-skin="cute"] .composer .starter-question-row button {
    min-height: 36px;
    padding: 6px 8px;
  }

  :root[data-skin="cute"] .composer .starter-question-row small,
  :root[data-skin="cute"] .composer .starter-question-row em {
    display: none !important;
  }

  :root[data-skin="pro"] .composer .track-panel {
    order: 4 !important;
    grid-row: 4 !important;
    display: grid !important;
  }

  :root[data-skin="pro"] .composer .creation-mode-panel {
    order: 2 !important;
    grid-row: 2 !important;
  }

  :root[data-skin="pro"] .composer .prompt-box {
    order: 3 !important;
    grid-row: 3 !important;
  }

  :root[data-skin="pro"] .composer .prompt-live-missing,
  :root[data-skin="pro"] .composer .professional-brief,
  :root[data-skin="pro"] .composer .prompt-preflight:not(.hidden) {
    display: none !important;
  }

  :root[data-skin="pro"] .composer .starter-diagnosis-card,
  :root[data-skin="pro"] .composer .starter-question-row,
  :root[data-skin="pro"] .composer .prompt-understanding {
    display: grid !important;
  }

  :root[data-skin="pro"] .composer .prompt-understanding-grid {
    display: none;
  }

  :root[data-skin="pro"] .composer .starter-question-row button:nth-child(n + 3) {
    display: grid;
  }

  .prompt-toolbar {
    margin-bottom: 6px;
  }
}

/* Creation workflow convergence: one clear path first, advanced controls second. */
.composer .delivery-stack {
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
}

.composer .delivery-stack #generateBtn {
  order: 1;
  min-height: 48px;
  font-size: 14px;
  box-shadow: 0 16px 34px rgba(15, 118, 110, 0.2);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.composer .delivery-stack #deliveryOrderPanel {
  order: 2;
}

.composer .delivery-stack .generation-settings-panel {
  order: 3;
}

.composer .delivery-stack .pricing-controls {
  order: 4;
}

.composer .delivery-stack .price-hint {
  order: 5;
}

.composer .delivery-order-actions {
  grid-template-columns: 1fr;
}

.composer .delivery-order-actions button:nth-child(2) {
  display: none;
}

.composer .creation-mode-summary ul,
.composer .creation-mode-summary p,
.composer .delivery-order-grid article:not(.priority),
.composer .track-card small {
  display: none;
}

.composer .creation-mode-summary {
  grid-template-columns: minmax(0, 1fr);
  padding: 8px 10px;
}

.composer .track-panel {
  gap: 6px;
}

.composer .track-card {
  min-height: 42px;
  padding: 8px 10px;
}

.composer .track-guide {
  padding: 9px;
}

.composer .track-guide small {
  display: none;
}

.composer .prompt-preflight:not(.hidden) {
  max-height: 360px;
  overflow: auto;
}

:root[data-skin="clean"] .composer .creation-mode-panel button {
  flex-basis: 112px;
}

:root[data-skin="clean"] .composer .creation-mode-summary,
:root[data-skin="clean"] .composer .track-guide,
:root[data-skin="clean"] .composer .professional-brief {
  display: none;
}

:root[data-skin="clean"] .composer .prompt-box {
  grid-row: 2;
}

:root[data-skin="clean"] .composer .delivery-stack {
  grid-row: 2 / span 2;
}

:root[data-skin="cute"] .composer .creation-mode-summary {
  border-radius: 22px;
}

:root[data-skin="cute"] .composer .track-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:root[data-skin="cute"] .composer .track-card {
  border-radius: 18px;
}

:root[data-skin="cute"] .composer .blank-starter-quick {
  border-radius: 22px;
}

:root[data-skin="pro"] .composer .creation-mode-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

:root[data-skin="pro"] .composer .creation-mode-summary ul,
:root[data-skin="pro"] .composer .creation-mode-summary p,
:root[data-skin="pro"] .composer .delivery-order-grid article:not(.priority) {
  display: grid;
}

:root[data-skin="pro"] .composer .track-card small {
  display: none;
}

:root[data-skin="pro"] .composer .track-guide small {
  display: block;
}

:root[data-skin="pro"] .composer .delivery-order-actions {
  grid-template-columns: 1fr 0.78fr;
}

:root[data-skin="pro"] .composer .delivery-order-actions button:nth-child(2) {
  display: inline-grid;
}

/* Creation guidance v2: make starter choices visible and keep advanced detail secondary. */
.composer .starter-style-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.88), rgba(255, 255, 255, 0.92)),
    var(--surface);
}

.composer .starter-style-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.composer .starter-style-title span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.composer .starter-style-title small {
  max-width: 58ch;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.composer .starter-style-panel .starter-quick-variants {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.composer .starter-style-panel .starter-quick-variants button {
  min-height: 42px;
  border-radius: 12px;
  white-space: normal;
}

.composer .starter-style-panel[data-starter-style="portrait"] .starter-quick-variants button {
  background: rgba(255, 247, 237, 0.92);
  border-color: rgba(245, 158, 11, 0.22);
  color: #7c2d12;
}

.composer .starter-style-panel[data-starter-style="product"] .starter-quick-variants button {
  background: rgba(239, 246, 255, 0.94);
  border-color: rgba(37, 99, 235, 0.2);
  color: #1e3a8a;
}

.composer .starter-style-panel[data-starter-style="cover"] .starter-quick-variants button {
  background: rgba(253, 244, 255, 0.9);
  border-color: rgba(192, 38, 211, 0.18);
  color: #86198f;
}

.composer .starter-style-panel[data-starter-style="story"] .starter-quick-variants button {
  background: rgba(245, 243, 255, 0.9);
  border-color: rgba(124, 58, 237, 0.18);
  color: #4c1d95;
}

.composer .starter-style-panel .starter-quick-variants button:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.composer .starter-empty-guide {
  padding: 8px 10px;
  border: 1px dashed rgba(15, 118, 110, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.4;
}

.composer .starter-next-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(130px, 0.65fr);
  gap: 8px;
}

.composer .starter-next-actions button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  white-space: normal;
}

.composer .starter-next-actions button.primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 26px rgba(15, 118, 110, 0.18);
}

.composer .professional-brief-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.composer .professional-brief-steps span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.composer .professional-brief-steps b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.composer .professional-brief.collapsed .professional-type-grid,
.composer .professional-brief.collapsed .professional-brief-grid {
  display: none;
}

.composer .professional-brief.collapsed .professional-brief-focus span:nth-child(n+2) {
  display: none;
}

.template-brief-panel {
  grid-template-columns: minmax(0, 1.1fr) minmax(210px, 0.72fr) auto;
  align-items: center;
}

.template-brief-cta-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.template-brief-cta-copy span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.template-brief-cta-copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.template-brief-cta-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.template-brief-panel .template-brief-metrics {
  display: none;
}

.template-brief-panel button[data-template-brief-apply] {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(15, 118, 110, 0.2);
}

:root[data-skin="clean"] .template-brief-cta-copy small {
  display: none;
}

:root[data-skin="clean"] .composer .blank-starter-quick {
  gap: 6px;
}

:root[data-skin="clean"] .composer .starter-quick-head {
  padding: 0;
}

:root[data-skin="clean"] .composer .starter-quick-head span,
:root[data-skin="clean"] .composer .starter-quick-head small,
:root[data-skin="clean"] .composer .starter-style-title small,
:root[data-skin="clean"] .composer .prompt-preflight,
:root[data-skin="clean"] .composer .prompt-understanding {
  display: none !important;
}

:root[data-skin="clean"] .composer .starter-quick-head strong {
  font-size: 14px;
}

:root[data-skin="clean"] .composer .starter-style-panel {
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

:root[data-skin="clean"] .composer .starter-style-title {
  display: none;
}

:root[data-skin="clean"] .composer .starter-style-panel .starter-quick-variants button {
  min-height: 34px;
  padding: 0 8px;
  border-radius: 9px;
}

:root[data-skin="clean"] .composer .starter-empty-guide {
  display: none;
}

:root[data-skin="clean"] .composer .starter-next-actions {
  grid-template-columns: 1fr;
}

:root[data-skin="cute"] .composer .starter-style-panel .starter-quick-variants {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

:root[data-skin="cute"] .composer .starter-quick-head {
  grid-template-columns: 1fr;
}

:root[data-skin="cute"] .composer .starter-quick-head > button {
  justify-self: start;
}

:root[data-skin="cute"] .composer .starter-diagnosis-card {
  display: grid;
}

:root[data-skin="cute"] .composer .starter-question-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:root[data-skin="cute"] .composer .starter-style-title small,
:root[data-skin="cute"] .composer .starter-diagnosis-card small,
:root[data-skin="cute"] .composer .starter-question-row small,
:root[data-skin="cute"] .composer .starter-question-row em {
  display: none;
}

:root[data-skin="cute"] .composer .starter-question-row button {
  min-height: 40px;
  padding: 8px 10px;
}

:root[data-skin="cute"] .composer .starter-style-panel .starter-quick-variants button {
  min-height: 54px;
  border-radius: 18px;
}

:root[data-skin="cute"] .composer .starter-next-actions button {
  min-height: 46px;
  border-radius: 18px;
}

:root[data-skin="pro"] .composer .starter-style-panel {
  background: rgba(2, 6, 23, 0.46);
  border-color: rgba(56, 189, 248, 0.2);
}

:root[data-skin="pro"] .composer .starter-empty-guide {
  background: rgba(15, 23, 42, 0.56);
  border-color: rgba(56, 189, 248, 0.22);
}

:root[data-skin="pro"] .composer .starter-next-actions button {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(56, 189, 248, 0.24);
  color: var(--text);
}

:root[data-skin="pro"] .composer .starter-next-actions button.primary {
  background: var(--accent);
  color: #00131d;
}

:root[data-skin="pro"] .composer .starter-style-panel .starter-quick-variants {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

:root[data-skin="pro"] .composer .starter-diagnosis-card,
:root[data-skin="pro"] .composer .starter-question-row,
:root[data-skin="pro"] .composer .prompt-understanding-grid,
:root[data-skin="pro"] .composer .prompt-preflight:not(.hidden) {
  display: grid;
}

:root[data-skin="pro"] .composer .starter-question-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:root[data-skin="pro"] .composer .professional-brief.collapsed .professional-type-grid {
  display: grid;
}

:root[data-skin="pro"] .template-brief-panel .template-brief-metrics {
  display: none;
}

@media (max-width: 720px) {
  .app-toast {
    right: auto;
    left: 50%;
    bottom: calc(116px + env(safe-area-inset-bottom));
    max-width: min(360px, calc(100vw - 48px));
    width: max-content;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 11px;
    transform: translate(-50%, 12px);
  }

  .app-toast.show {
    transform: translate(-50%, 0);
  }

  :root[data-active-page="templates"] .app-toast {
    bottom: calc(184px + env(safe-area-inset-bottom));
  }

  .composer .starter-style-title,
  .template-brief-panel {
    grid-template-columns: 1fr;
  }

  .composer .starter-style-title {
    display: grid;
  }

  .composer .starter-style-title small {
    max-width: none;
    text-align: left;
  }

  .composer .starter-style-panel .starter-quick-variants,
  .composer .starter-next-actions,
  .composer .professional-brief-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .template-brief-panel {
    display: grid;
  }
}

/* Skin layout contract: each workspace mode changes workflow density, not only colors. */
@media (min-width: 860px) {
  :root[data-skin="clean"] .composer {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }

  :root[data-skin="clean"] .composer .section-title {
    grid-column: 1 / -1;
  }

  :root[data-skin="clean"] .composer .mode-row,
  :root[data-skin="clean"] .composer .creation-mode-panel,
  :root[data-skin="clean"] .composer .prompt-box,
  :root[data-skin="clean"] .composer .blank-starter-quick,
  :root[data-skin="clean"] .composer .prompt-understanding,
  :root[data-skin="clean"] .composer .prompt-preflight {
    grid-column: 1;
  }

  :root[data-skin="clean"] .composer .delivery-stack {
    grid-column: 2;
    grid-row: 3 / span 6;
    position: sticky;
    top: 14px;
  }

  :root[data-skin="clean"] .composer .starter-style-title small,
  :root[data-skin="clean"] .composer .prompt-understanding-grid,
  :root[data-skin="clean"] .composer .track-panel,
  :root[data-skin="clean"] .composer .track-guide,
  :root[data-skin="clean"] .composer .mobile-flow,
  :root[data-skin="clean"] .composer .generation-settings-panel {
    display: none;
  }

  :root[data-skin="clean"] .composer .starter-style-panel .starter-quick-variants {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  :root[data-skin="cute"] .composer {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
    align-items: start;
  }

  :root[data-skin="cute"] .composer .section-title,
  :root[data-skin="cute"] .composer .prompt-box,
  :root[data-skin="cute"] .composer .blank-starter-quick,
  :root[data-skin="cute"] .composer .prompt-understanding,
  :root[data-skin="cute"] .composer .prompt-preflight {
    grid-column: 1;
  }

  :root[data-skin="cute"] .composer .creation-mode-panel,
  :root[data-skin="cute"] .composer .delivery-stack,
  :root[data-skin="cute"] .composer .track-panel {
    grid-column: 2;
  }

  :root[data-skin="cute"] .composer .creation-mode-panel {
    display: grid;
    grid-template-columns: 1fr;
  }

  :root[data-skin="cute"] .composer .creation-mode-panel button {
    min-height: 74px;
    border-radius: 22px;
  }

  :root[data-skin="cute"] .composer .starter-style-panel .starter-quick-variants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-skin="cute"] .composer .delivery-stack {
    position: sticky;
    top: 14px;
  }

  :root[data-skin="pro"] .app-shell {
    max-width: 1480px;
  }

  :root[data-skin="pro"] .composer {
    grid-template-columns: 218px minmax(0, 1fr) 330px;
    align-items: start;
  }

  :root[data-skin="pro"] .composer .section-title {
    grid-column: 1 / -1;
  }

  :root[data-skin="pro"] .composer .creation-mode-panel,
  :root[data-skin="pro"] .composer .track-panel,
  :root[data-skin="pro"] .composer .track-guide,
  :root[data-skin="pro"] .composer .professional-brief {
    grid-column: 1;
  }

  :root[data-skin="pro"] .composer .mode-row,
  :root[data-skin="pro"] .composer .prompt-box,
  :root[data-skin="pro"] .composer .blank-starter-quick,
  :root[data-skin="pro"] .composer .prompt-understanding,
  :root[data-skin="pro"] .composer .prompt-preflight {
    grid-column: 2;
  }

  :root[data-skin="pro"] .composer .delivery-stack {
    grid-column: 3;
    grid-row: 2 / span 8;
    position: sticky;
    top: 14px;
  }

  :root[data-skin="pro"] .composer .creation-mode-panel,
  :root[data-skin="pro"] .composer .track-panel {
    grid-template-columns: 1fr;
  }

  :root[data-skin="pro"] .composer .starter-style-title small,
  :root[data-skin="pro"] .composer .track-card small,
  :root[data-skin="pro"] .composer .professional-brief-focus {
    display: block;
  }

  :root[data-skin="pro"] .composer .starter-style-panel .starter-quick-variants {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Creation/template interaction closeout: expose second-level choices and make submit primary. */
.composer .blank-starter-quick {
  min-height: 0;
}

.composer .starter-style-panel,
.composer .starter-diagnosis-card,
.composer .starter-question-row,
.composer .track-guide:not(:empty),
.composer .professional-brief:not(.hidden) {
  display: grid;
}

.composer .starter-quick-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.composer .starter-quick-tabs button,
.composer .starter-quick-variants button,
.composer .starter-question-row button,
.template-choice-row button,
.template-hero-actions button {
  min-width: 0;
  white-space: normal;
  line-height: 1.25;
}

.composer .starter-quick-tabs button.active,
.composer .starter-question-row button:hover,
.composer .starter-quick-variants button:hover,
.template-goal-strip button.active,
.template-view-switch button.active {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.14);
}

.composer .starter-diagnosis-card {
  border-color: rgba(15, 118, 110, 0.18);
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.92), rgba(255, 255, 255, 0.94));
}

.composer .starter-question-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.composer .starter-question-row button {
  min-height: 54px;
  border-color: rgba(15, 118, 110, 0.14);
  background: rgba(255, 255, 255, 0.9);
}

.composer .starter-style-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.composer .starter-style-title small {
  max-width: 22em;
  overflow: hidden;
  color: var(--muted);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer .starter-empty-guide {
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}

.composer .starter-next-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 7px;
}

.composer .starter-next-actions button {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 13px;
  white-space: nowrap;
}

.composer .delivery-stack {
  align-self: start;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(240, 253, 250, 0.82), rgba(255, 255, 255, 0.96)),
    var(--surface);
}

.composer .delivery-stack #generateBtn {
  position: relative;
  min-height: 56px;
  border-radius: 14px;
  font-size: 15px;
  letter-spacing: 0;
}

.composer .delivery-stack #generateBtn::after {
  content: "先提交，参数可在下方高级设置调整";
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 750;
}

.composer .generation-settings-panel {
  opacity: 0.82;
}

.composer .settings-summary {
  min-height: 42px;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.76);
}

.composer .settings-summary span::before {
  content: "高级 · ";
}

.composer .pricing-controls {
  padding-top: 8px;
  border-top: 1px dashed rgba(15, 118, 110, 0.14);
}

.template-hero-panel {
  grid-template-columns: 1fr;
  gap: 8px;
  display: none !important;
  padding-block: 0;
}

.template-hero-panel p,
.template-hero-tags,
.template-hero-actions,
.template-goal-strip {
  display: none !important;
}

.template-view-switch {
  display: grid;
  order: 1;
}

.template-workbench-panel .section-title {
  margin-bottom: 8px;
}

.template-workbench-panel .section-title span {
  font-size: 12px;
}

.template-workbench-panel {
  overflow: hidden;
}

.template-brief-panel:not(:empty) {
  display: grid;
  margin-bottom: 10px;
  border-color: rgba(15, 118, 110, 0.16);
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.9), rgba(255, 255, 255, 0.96));
}

.template-brief-primary,
.template-brief-metrics span {
  min-width: 0;
}

.template-workbench-grid {
  align-items: stretch;
}

.template-workbench-block.strong {
  border-color: rgba(15, 118, 110, 0.28);
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.95), rgba(255, 255, 255, 0.92)),
    var(--surface);
}

.template-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.template-choice-row button {
  min-height: 38px;
  padding: 8px 10px;
}

:root[data-skin="clean"] .composer .blank-starter-quick {
  display: grid;
}

:root[data-skin="clean"] .composer .starter-style-panel {
  border-style: solid;
}

:root[data-skin="clean"] .composer .starter-question-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:root[data-skin="clean"] .composer .starter-style-title small,
:root[data-skin="clean"] .composer .starter-empty-guide,
:root[data-skin="clean"] .composer .starter-diagnosis-card,
:root[data-skin="clean"] .composer .starter-question-row,
:root[data-skin="clean"] .composer .starter-diagnosis-card small,
:root[data-skin="clean"] .composer .starter-question-row small,
:root[data-skin="clean"] .composer .starter-question-row em {
  display: none !important;
}

:root[data-skin="clean"] .composer .track-panel,
:root[data-skin="clean"] .composer .track-guide,
:root[data-skin="clean"] .composer .professional-brief {
  display: none;
}

:root[data-skin="clean"] .composer .professional-brief:not(.hidden) {
  display: grid;
}

:root[data-skin="cute"] .composer .track-panel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:root[data-skin="cute"] .composer .track-card small,
:root[data-skin="cute"] .composer .starter-question-row small {
  display: block;
}

:root[data-skin="cute"] .composer .starter-style-title small {
  display: none;
}

:root[data-skin="cute"] .composer .starter-question-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:root[data-skin="cute"] .composer .starter-question-row button {
  min-height: 48px;
  border-radius: 18px;
}

:root[data-skin="cute"] .composer .starter-question-row small,
:root[data-skin="cute"] .composer .starter-question-row em {
  display: none !important;
}

:root[data-skin="pro"] .composer .delivery-stack {
  background: rgba(2, 6, 23, 0.7);
  border-color: rgba(56, 189, 248, 0.24);
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.22);
}

:root[data-skin="pro"] .composer .settings-summary {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(56, 189, 248, 0.2);
}

:root[data-skin="pro"] .composer .starter-diagnosis-card,
:root[data-skin="pro"] .composer .starter-question-row button {
  background: rgba(15, 23, 42, 0.74);
}

:root[data-skin="pro"] .composer .starter-style-title small {
  max-width: 18em;
}

:root[data-skin="pro"] .composer .starter-empty-guide {
  display: none;
}

:root[data-skin="pro"] .composer .starter-diagnosis-card small,
:root[data-skin="pro"] .composer .starter-question-row small,
:root[data-skin="pro"] .composer .starter-question-row em {
  display: none !important;
}

@media (min-width: 860px) {
  :root[data-skin="clean"] .composer {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  :root[data-skin="clean"] .composer .delivery-stack {
    grid-row: 2 / span 5;
  }

  :root[data-skin="cute"] .composer {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  }

  :root[data-skin="cute"] .composer .delivery-stack {
    grid-row: 3 / span 4;
  }

  :root[data-skin="pro"] .composer {
    grid-template-columns: 240px minmax(0, 1fr) 360px;
  }

  :root[data-skin="pro"] .composer .delivery-stack {
    grid-row: 2 / span 6;
  }

  :root[data-skin="pro"] .composer .professional-brief:not(.hidden) {
    max-height: 460px;
    overflow: auto;
  }
}

@media (max-width: 720px) {
  .composer .starter-quick-tabs,
  .composer .starter-question-row,
  :root[data-skin="clean"] .composer .starter-question-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .composer .starter-quick-head small,
  .composer .starter-style-title small,
  .composer .starter-diagnosis-card small,
  .composer .starter-question-row small,
  .composer .starter-question-row em {
    display: none !important;
  }

  .composer .starter-diagnosis-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 8px;
  }

  .composer .starter-question-row button {
    min-height: 40px;
    padding: 7px 8px;
  }

  .composer .delivery-stack {
    padding: 8px;
  }

  .composer .delivery-stack #generateBtn {
    min-height: 52px;
  }

  .template-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .template-workbench-panel {
    padding-bottom: 24px;
  }

  .template-workbench-grid {
    gap: 8px;
  }

  .template-workbench-block {
    padding: 10px;
    border-radius: 14px;
  }

  .template-workbench-block strong {
    font-size: 16px;
  }

  .template-choice-row button {
    min-height: 44px;
    padding: 8px 9px;
    border-radius: 11px;
    font-size: 13px;
  }

  .template-view-switch {
    position: sticky;
    top: 0;
    z-index: 5;
    gap: 6px;
    padding: 5px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
  }

  :root[data-skin="pro"] .template-view-switch {
    background: rgba(2, 6, 23, 0.9);
  }

  .template-view-switch button {
    min-height: 42px;
    padding: 7px 6px;
    border-radius: 11px;
    font-size: 12px;
  }

  .template-brief-panel:not(:empty) {
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 14px;
  }

  .template-brief-panel button[data-template-brief-apply] {
    min-height: 42px;
    width: 100%;
  }

  .template-brief-primary small,
  .template-brief-cta-copy small {
    display: none;
  }

  .template-filter-panel {
    padding-bottom: calc(136px + env(safe-area-inset-bottom));
  }

  .template-tabs {
    gap: 6px;
    padding-bottom: 6px;
    scroll-padding-inline: 12px;
  }

  .template-tabs button {
    height: 34px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 11px;
  }
}

/* Mobile creator first screen: keep prompt as the primary action across skins. */
@media (max-width: 560px) {
  :root[data-skin="clean"] .composer,
  :root[data-skin="cute"] .composer,
  :root[data-skin="pro"] .composer {
    gap: 7px;
    align-content: start;
  }

  :root[data-skin="clean"] .composer .section-title,
  :root[data-skin="cute"] .composer .section-title,
  :root[data-skin="pro"] .composer .section-title {
    order: 0 !important;
    margin-bottom: 0;
  }

  :root[data-skin="clean"] .composer .mode-row,
  :root[data-skin="cute"] .composer .mode-row,
  :root[data-skin="pro"] .composer .mode-row {
    order: 1 !important;
    margin: 0;
  }

  :root[data-skin="clean"] .composer .creation-mode-panel,
  :root[data-skin="cute"] .composer .creation-mode-panel,
  :root[data-skin="pro"] .composer .creation-mode-panel {
    order: 2 !important;
    grid-row: auto !important;
    margin: 0;
    padding: 7px;
    gap: 6px;
  }

  :root[data-skin="clean"] .composer .creation-mode-panel button,
  :root[data-skin="cute"] .composer .creation-mode-panel button,
  :root[data-skin="pro"] .composer .creation-mode-panel button {
    min-height: 40px;
    padding: 7px 8px;
  }

  :root[data-skin="clean"] .composer .creation-mode-panel small,
  :root[data-skin="cute"] .composer .creation-mode-panel small,
  :root[data-skin="pro"] .composer .creation-mode-panel small {
    display: none !important;
  }

  :root[data-skin="clean"] .composer .prompt-box,
  :root[data-skin="cute"] .composer .prompt-box,
  :root[data-skin="pro"] .composer .prompt-box {
    order: 3 !important;
    grid-row: auto !important;
    margin: 0;
    padding: 11px;
  }

  :root[data-skin="clean"] .composer textarea,
  :root[data-skin="cute"] .composer textarea,
  :root[data-skin="pro"] .composer textarea {
    min-height: 156px;
  }

  :root[data-skin="clean"] .composer .blank-starter-quick,
  :root[data-skin="cute"] .composer .blank-starter-quick,
  :root[data-skin="pro"] .composer .blank-starter-quick {
    order: 4 !important;
    margin: 0;
    padding: 8px;
    gap: 6px;
    max-height: 190px;
    overflow: hidden;
  }

  :root[data-skin="clean"] .composer .starter-quick-head small,
  :root[data-skin="clean"] .composer .starter-style-title small,
  :root[data-skin="clean"] .composer .starter-diagnosis-card,
  :root[data-skin="clean"] .composer .starter-question-row,
  :root[data-skin="cute"] .composer .starter-quick-head small,
  :root[data-skin="cute"] .composer .starter-style-title small,
  :root[data-skin="cute"] .composer .starter-diagnosis-card,
  :root[data-skin="cute"] .composer .starter-question-row,
  :root[data-skin="pro"] .composer .starter-quick-head small,
  :root[data-skin="pro"] .composer .starter-style-title small,
  :root[data-skin="pro"] .composer .starter-diagnosis-card,
  :root[data-skin="pro"] .composer .starter-question-row {
    display: none !important;
  }

  :root[data-skin="clean"] .composer .starter-quick-tabs,
  :root[data-skin="clean"] .composer .starter-quick-variants,
  :root[data-skin="cute"] .composer .starter-quick-tabs,
  :root[data-skin="cute"] .composer .starter-quick-variants,
  :root[data-skin="pro"] .composer .starter-quick-tabs,
  :root[data-skin="pro"] .composer .starter-quick-variants {
    gap: 5px;
  }

  :root[data-skin="clean"] .composer .starter-workflow-strip,
  :root[data-skin="cute"] .composer .starter-workflow-strip,
  :root[data-skin="pro"] .composer .starter-workflow-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  :root[data-skin="clean"] .composer .starter-workflow-step,
  :root[data-skin="cute"] .composer .starter-workflow-step,
  :root[data-skin="pro"] .composer .starter-workflow-step {
    padding: 6px;
  }

  :root[data-skin="clean"] .composer .starter-workflow-step b,
  :root[data-skin="cute"] .composer .starter-workflow-step b,
  :root[data-skin="pro"] .composer .starter-workflow-step b {
    width: 18px;
    height: 18px;
  }

  :root[data-skin="clean"] .composer .starter-field-chips,
  :root[data-skin="cute"] .composer .starter-field-chips,
  :root[data-skin="pro"] .composer .starter-field-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  :root[data-skin="clean"] .composer .starter-field-chips button,
  :root[data-skin="cute"] .composer .starter-field-chips button,
  :root[data-skin="pro"] .composer .starter-field-chips button {
    min-height: 28px;
    padding: 0 6px;
    font-size: 10px;
  }

  :root[data-skin="clean"] .composer .track-panel,
  :root[data-skin="clean"] .composer .track-guide,
  :root[data-skin="clean"] .composer .mobile-flow,
  :root[data-skin="clean"] .composer .professional-brief,
  :root[data-skin="cute"] .composer .track-panel,
  :root[data-skin="cute"] .composer .track-guide,
  :root[data-skin="cute"] .composer .mobile-flow,
  :root[data-skin="cute"] .composer .professional-brief,
  :root[data-skin="pro"] .composer .track-panel,
  :root[data-skin="pro"] .composer .track-guide,
  :root[data-skin="pro"] .composer .mobile-flow,
  :root[data-skin="pro"] .composer .professional-brief {
    order: 8 !important;
    margin: 0;
    max-height: 92px;
    overflow: hidden;
  }

  :root[data-skin="clean"] .composer .track-card,
  :root[data-skin="cute"] .composer .track-card,
  :root[data-skin="pro"] .composer .track-card {
    min-height: 42px;
    padding: 7px;
  }

  :root[data-skin="clean"] .composer .track-card small,
  :root[data-skin="clean"] .composer .track-guide small,
  :root[data-skin="cute"] .composer .track-card small,
  :root[data-skin="cute"] .composer .track-guide small,
  :root[data-skin="pro"] .composer .track-card small,
  :root[data-skin="pro"] .composer .track-guide small {
    display: none !important;
  }

  :root[data-skin="clean"] .composer .prompt-preflight,
  :root[data-skin="cute"] .composer .prompt-preflight,
  :root[data-skin="pro"] .composer .prompt-preflight {
    order: 5 !important;
    margin: 0;
  }

  :root[data-skin="clean"] .composer .delivery-stack,
  :root[data-skin="cute"] .composer .delivery-stack,
  :root[data-skin="pro"] .composer .delivery-stack {
    order: 6 !important;
    margin: 0;
  }

  :root[data-skin="cute"] .composer .creation-mode-panel {
    border-radius: 16px;
  }

  :root[data-skin="pro"] .composer .creation-mode-panel,
  :root[data-skin="pro"] .composer .track-panel {
    background: rgba(2, 6, 23, 0.68);
  }

  :root[data-skin="pro"] .composer .track-card {
    border-color: rgba(56, 189, 248, 0.22);
    background:
      linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(2, 6, 23, 0.84)),
      rgba(15, 23, 42, 0.92);
    color: rgba(219, 234, 254, 0.72);
    box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.12);
  }

  :root[data-skin="pro"] .composer .track-card strong {
    color: #e0f2fe;
  }

  :root[data-skin="pro"] .composer .track-card small {
    color: rgba(186, 230, 253, 0.62);
  }

  :root[data-skin="pro"] .composer .track-card.active {
    border-color: rgba(34, 211, 238, 0.62);
    background:
      linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(37, 99, 235, 0.12)),
      rgba(8, 47, 73, 0.88);
    box-shadow:
      0 0 0 1px rgba(34, 211, 238, 0.14),
      0 14px 34px rgba(14, 165, 233, 0.16);
  }
}

/* Final create-path contract: input first, fields second, generation third. */
.composer .delivery-stack {
  padding: 12px;
}

.composer .delivery-stack #generateBtn {
  min-height: 62px;
  border-radius: 14px;
  font-size: 16px;
  letter-spacing: 0;
  box-shadow: 0 16px 34px rgba(15, 118, 110, 0.18);
}

.composer .delivery-stack #generateBtn::after {
  content: "先确认，再进入队列";
}

.composer .starter-action-board {
  grid-template-columns: minmax(138px, 0.72fr) minmax(0, 1.28fr);
}

.composer .starter-field-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(240, 253, 250, 0.72));
}

.composer .starter-field-chips button {
  min-height: 38px;
  font-size: 12px;
}

@media (min-width: 860px) {
  :root[data-skin="clean"] .composer,
  :root[data-skin="cute"] .composer,
  :root[data-skin="pro"] .composer {
    align-items: start;
  }

  :root[data-skin="clean"] .composer {
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }

  :root[data-skin="clean"] .composer .section-title {
    grid-column: 1 / -1 !important;
  }

  :root[data-skin="clean"] .composer .creation-mode-panel,
  :root[data-skin="clean"] .composer .mode-row,
  :root[data-skin="clean"] .composer .prompt-box,
  :root[data-skin="clean"] .composer .prompt-preflight,
  :root[data-skin="clean"] .composer .delivery-stack {
    grid-column: 1 !important;
  }

  :root[data-skin="clean"] .composer .delivery-stack,
  :root[data-skin="pro"] .composer .delivery-stack {
    position: static !important;
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
    gap: 10px;
  }

  :root[data-skin="clean"] .composer .delivery-stack #generateBtn,
  :root[data-skin="pro"] .composer .delivery-stack #generateBtn {
    grid-column: 1;
  }

  :root[data-skin="clean"] .composer .delivery-stack #deliveryOrderPanel,
  :root[data-skin="pro"] .composer .delivery-stack #deliveryOrderPanel {
    grid-column: 2;
    grid-row: 1 / span 4;
  }

  :root[data-skin="clean"] .composer .generation-settings-panel,
  :root[data-skin="clean"] .composer .pricing-controls,
  :root[data-skin="clean"] .composer .price-hint {
    display: none !important;
  }

  :root[data-skin="clean"] .composer .blank-starter-quick {
    display: none !important;
  }

  :root[data-skin="cute"] .composer {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px) !important;
  }

  :root[data-skin="cute"] .composer .prompt-box,
  :root[data-skin="cute"] .composer .prompt-preflight,
  :root[data-skin="cute"] .composer .delivery-stack {
    grid-column: 1 !important;
  }

  :root[data-skin="cute"] .composer .creation-mode-panel,
  :root[data-skin="cute"] .composer .track-panel {
    grid-column: 2 !important;
  }

  :root[data-skin="cute"] .composer .delivery-stack {
    position: static !important;
  }

  :root[data-skin="cute"] .composer .starter-action-board {
    grid-template-columns: 1fr;
  }

  :root[data-skin="pro"] .composer {
    grid-template-columns: 232px minmax(0, 1fr) 360px !important;
  }

  :root[data-skin="pro"] .composer .prompt-box,
  :root[data-skin="pro"] .composer .prompt-preflight,
  :root[data-skin="pro"] .composer .delivery-stack {
    grid-column: 2 !important;
  }

  :root[data-skin="pro"] .composer .delivery-stack {
    grid-row: auto !important;
  }

  :root[data-skin="pro"] .composer .starter-action-board {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  :root[data-skin="pro"] .composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 2 / span 8 !important;
    position: sticky !important;
    top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    align-self: start;
  }

  :root[data-skin="pro"] .composer .delivery-stack #generateBtn,
  :root[data-skin="pro"] .composer .delivery-stack #deliveryOrderPanel {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Absolute final desktop workbench layer. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer {
    display: grid !important;
    grid-template-columns: 220px minmax(560px, 1fr) 330px !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer {
    grid-template-columns: 196px minmax(600px, 1fr) 300px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer {
    grid-template-columns: 236px minmax(560px, 1fr) 340px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 232px minmax(580px, 1fr) 350px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: 1fr !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .track-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-height: 312px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 5 !important;
    top: 72px !important;
    grid-template-columns: 1fr !important;
    max-height: calc(100vh - 92px) !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer > .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-height: 36px !important;
    margin: 0 !important;
  }

  :root[data-active-page="create"] .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: auto !important;
  }

  :root[data-active-page="create"] .creation-mode-panel button {
    min-height: 42px !important;
    padding: 8px 10px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  :root[data-active-page="create"] .creation-mode-panel small,
  :root[data-active-page="create"] .mode-row,
  :root[data-active-page="create"] .mobile-flow,
  :root[data-active-page="create"] .creation-mode-summary,
  :root[data-active-page="create"] .blank-starter-panel {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .creation-mode-panel button {
    min-height: 52px !important;
    border-radius: 16px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .creation-mode-panel small {
    display: block !important;
  }

  :root[data-active-page="create"] .track-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    max-height: 312px !important;
    margin-top: 260px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .track-card {
    min-height: 38px !important;
    padding: 8px 9px !important;
  }

  :root[data-active-page="create"] .track-card small {
    display: none !important;
  }

  :root[data-active-page="create"] .track-card.active small {
    display: block !important;
  }

  :root[data-active-page="create"] .track-guide {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-height: 124px !important;
    margin-top: 584px !important;
    overflow: auto !important;
    padding: 9px !important;
  }

  :root[data-active-page="create"] .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    width: auto !important;
    max-height: 560px !important;
    overflow: auto !important;
    padding: 12px !important;
  }

  :root[data-active-page="create"] textarea#prompt {
    min-height: 132px !important;
    max-height: 210px !important;
  }

  :root[data-active-page="create"] .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 4 !important;
    max-height: 164px !important;
    overflow: auto !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  :root[data-active-page="create"] .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 5 !important;
    position: sticky !important;
    top: 72px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: auto !important;
    max-height: calc(100vh - 92px) !important;
    overflow: auto !important;
    padding: 12px !important;
  }

  :root[data-active-page="create"] .delivery-stack > * {
    grid-column: 1 !important;
  }

  :root[data-active-page="create"] #generateBtn {
    order: -20 !important;
    width: 100% !important;
    min-height: 56px !important;
    font-size: 16px !important;
  }

  :root[data-active-page="create"] #deliveryOrderPanel {
    order: -10 !important;
    max-height: 172px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .generation-settings-panel {
    order: 0 !important;
  }

  :root[data-active-page="create"] .pricing-controls {
    order: 1 !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .settings-summary small,
  :root[data-active-page="create"] .price-hint {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .track-guide,
  :root[data-active-page="create"][data-skin="clean"] .prompt-preflight,
  :root[data-active-page="create"][data-skin="clean"] .pricing-controls,
  :root[data-active-page="create"][data-skin="clean"] .generation-settings-panel {
    display: none !important;
  }
}

[data-page][hidden],
.panel.composer[data-page][hidden],
:root[data-skin] .panel.composer[data-page][hidden] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Final desktop workbench authority: this must stay after all older skin blocks. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .app-shell {
    width: min(100%, 1360px) !important;
    padding-inline: 24px !important;
  }

  :root[data-active-page="create"] .panel.composer {
    display: grid !important;
    grid-template-columns: 220px minmax(560px, 1fr) 330px !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer {
    grid-template-columns: 196px minmax(600px, 1fr) 300px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer {
    grid-template-columns: 236px minmax(560px, 1fr) 340px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 232px minmax(580px, 1fr) 350px !important;
  }

  :root[data-active-page="create"] .panel.composer > .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-height: 36px !important;
    margin: 0 !important;
  }

  :root[data-active-page="create"] .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: auto !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .creation-mode-panel button {
    min-height: 42px !important;
    padding: 8px 10px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  :root[data-active-page="create"] .creation-mode-panel small {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .creation-mode-panel button {
    min-height: 52px !important;
    border-radius: 16px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .creation-mode-panel small {
    display: block !important;
  }

  :root[data-active-page="create"] .mode-row,
  :root[data-active-page="create"] .mobile-flow,
  :root[data-active-page="create"] .creation-mode-summary,
  :root[data-active-page="create"] .blank-starter-panel {
    display: none !important;
  }

  :root[data-active-page="create"] .track-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    max-height: 312px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .track-card {
    min-height: 38px !important;
    padding: 8px 9px !important;
  }

  :root[data-active-page="create"] .track-card small {
    display: none !important;
  }

  :root[data-active-page="create"] .track-card.active small {
    display: block !important;
    line-height: 1.22 !important;
  }

  :root[data-active-page="create"] .track-guide {
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-height: 124px !important;
    overflow: auto !important;
    padding: 9px !important;
  }

  :root[data-active-page="create"] .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    width: auto !important;
    max-height: 620px !important;
    overflow: auto !important;
    padding: 12px !important;
  }

  :root[data-active-page="create"] textarea#prompt {
    min-height: 132px !important;
    max-height: 210px !important;
  }

  :root[data-active-page="create"] .starter-style-title small,
  :root[data-active-page="create"] .starter-field-panel small,
  :root[data-active-page="create"] .starter-field-open small {
    display: none !important;
  }

  :root[data-active-page="create"] .starter-style-panel,
  :root[data-active-page="create"] .starter-field-panel {
    padding: 8px !important;
  }

  :root[data-active-page="create"] .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 4 !important;
    max-height: 164px !important;
    overflow: auto !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  :root[data-active-page="create"] .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 5 !important;
    position: sticky !important;
    top: 72px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    align-self: start !important;
    width: auto !important;
    max-height: calc(100vh - 92px) !important;
    overflow: auto !important;
    padding: 12px !important;
  }

  :root[data-active-page="create"] .delivery-stack > * {
    grid-column: 1 !important;
  }

  :root[data-active-page="create"] #generateBtn {
    order: -20 !important;
    width: 100% !important;
    min-height: 56px !important;
    font-size: 16px !important;
  }

  :root[data-active-page="create"] #deliveryOrderPanel {
    order: -10 !important;
    max-height: 172px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .generation-settings-panel {
    order: 0 !important;
  }

  :root[data-active-page="create"] .pricing-controls {
    order: 1 !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .settings-summary small,
  :root[data-active-page="create"] .price-hint {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .track-guide,
  :root[data-active-page="create"][data-skin="clean"] .prompt-preflight,
  :root[data-active-page="create"][data-skin="clean"] .blank-starter-quick,
  :root[data-active-page="create"][data-skin="clean"] .pricing-controls,
  :root[data-active-page="create"][data-skin="clean"] .generation-settings-panel {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .track-panel {
    max-height: 250px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .prompt-box {
    max-height: 590px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .blank-starter-quick {
    max-height: 286px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .track-panel {
    max-height: 342px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .delivery-stack {
    border-radius: 6px !important;
  }
}

[data-page][hidden],
.panel.composer[data-page][hidden],
:root[data-skin] .panel.composer[data-page][hidden] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Desktop commercial workbench final pass.
   Wide screens should feel like a focused workstation, not a stretched mobile stack. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .app-shell {
    width: min(100%, 1360px) !important;
    padding-inline: 24px !important;
  }

  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    display: grid !important;
    grid-template-columns: 220px minmax(560px, 1fr) 330px !important;
    gap: 12px !important;
    align-items: start !important;
    min-height: 0 !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer {
    grid-template-columns: 236px minmax(560px, 1fr) 340px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 232px minmax(580px, 1fr) 350px !important;
  }

  :root[data-active-page="create"] .panel.composer > .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-height: 36px !important;
    margin: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer > .section-title h3 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  :root[data-active-page="create"] .panel.composer > .section-title button {
    min-height: 34px !important;
    padding: 0 12px !important;
  }

  :root[data-active-page="create"] .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .creation-mode-panel button,
  :root[data-active-page="create"][data-skin="pro"] .creation-mode-panel button {
    min-height: 42px !important;
    padding: 8px 10px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  :root[data-active-page="create"] .creation-mode-panel small {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .creation-mode-panel button {
    min-height: 52px !important;
    border-radius: 16px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .creation-mode-panel small {
    display: block !important;
    line-height: 1.15 !important;
  }

  :root[data-active-page="create"] .mode-row,
  :root[data-active-page="create"] .mobile-flow,
  :root[data-active-page="create"] .creation-mode-summary,
  :root[data-active-page="create"] .blank-starter-panel {
    display: none !important;
  }

  :root[data-active-page="create"] .track-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    max-height: 312px !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  :root[data-active-page="create"] .track-card {
    min-height: 38px !important;
    padding: 8px 9px !important;
    gap: 3px !important;
  }

  :root[data-active-page="create"] .track-card small {
    display: none !important;
  }

  :root[data-active-page="create"] .track-card.active small {
    display: block !important;
    margin-top: 2px !important;
    line-height: 1.22 !important;
  }

  :root[data-active-page="create"] .track-guide {
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-height: 124px !important;
    overflow: auto !important;
    padding: 9px !important;
  }

  :root[data-active-page="create"] .track-guide small,
  :root[data-active-page="create"] .track-guide li {
    line-height: 1.25 !important;
  }

  :root[data-active-page="create"] .professional-brief {
    grid-column: 2 !important;
    grid-row: 2 !important;
    max-height: 168px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    width: auto !important;
    max-height: 620px !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 12px !important;
  }

  :root[data-active-page="create"] #promptToolbar {
    min-height: 32px !important;
    margin-bottom: 8px !important;
  }

  :root[data-active-page="create"] #promptToolbar button {
    min-height: 30px !important;
    padding: 0 10px !important;
  }

  :root[data-active-page="create"] textarea#prompt {
    min-height: 132px !important;
    max-height: 210px !important;
  }

  :root[data-active-page="create"] .blank-starter-quick {
    max-height: 318px !important;
    overflow: auto !important;
    padding: 9px !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .starter-style-title {
    margin-bottom: 6px !important;
  }

  :root[data-active-page="create"] .starter-style-title small,
  :root[data-active-page="create"] .starter-field-panel small,
  :root[data-active-page="create"] .starter-field-open small {
    display: none !important;
  }

  :root[data-active-page="create"] .starter-style-panel,
  :root[data-active-page="create"] .starter-field-panel {
    padding: 8px !important;
  }

  :root[data-active-page="create"] .starter-style-panel .starter-quick-variants {
    gap: 6px !important;
  }

  :root[data-active-page="create"] .starter-style-panel .starter-quick-variants button,
  :root[data-active-page="create"] .starter-field-chips button,
  :root[data-active-page="create"] .starter-next-actions button {
    min-height: 32px !important;
    padding: 6px 8px !important;
  }

  :root[data-active-page="create"] .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 4 !important;
    max-height: 164px !important;
    overflow: auto !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  :root[data-active-page="create"] .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 5 !important;
    position: sticky !important;
    top: 72px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    align-self: start !important;
    width: auto !important;
    max-height: calc(100vh - 92px) !important;
    overflow: auto !important;
    padding: 12px !important;
  }

  :root[data-active-page="create"] .delivery-stack > * {
    grid-column: 1 !important;
  }

  :root[data-active-page="create"] #generateBtn {
    order: -20 !important;
    width: 100% !important;
    min-height: 56px !important;
    font-size: 16px !important;
  }

  :root[data-active-page="create"] #deliveryOrderPanel {
    order: -10 !important;
    max-height: 172px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .generation-settings-panel {
    order: 0 !important;
  }

  :root[data-active-page="create"] .pricing-controls {
    order: 1 !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .settings-summary {
    min-height: 56px !important;
    padding: 9px 10px !important;
  }

  :root[data-active-page="create"] .settings-summary small,
  :root[data-active-page="create"] .price-hint {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .track-guide,
  :root[data-active-page="create"][data-skin="clean"] .prompt-preflight,
  :root[data-active-page="create"][data-skin="clean"] .blank-starter-quick,
  :root[data-active-page="create"][data-skin="clean"] .pricing-controls,
  :root[data-active-page="create"][data-skin="clean"] .generation-settings-panel {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer {
    grid-template-columns: 196px minmax(600px, 1fr) 300px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .track-panel {
    max-height: 250px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .prompt-box {
    max-height: 650px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .blank-starter-quick {
    max-height: 352px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .track-panel {
    max-height: 342px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .delivery-stack {
    border-radius: 6px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .prompt-preflight {
    display: block !important;
  }
}

/* Keep route visibility authoritative after desktop workbench overrides. */
[data-page][hidden],
.panel.composer[data-page][hidden],
:root[data-skin] .panel.composer[data-page][hidden] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Final route visibility guard. Keep this as the last rule in the file. */
[data-page][hidden],
.panel.composer[data-page][hidden],
:root[data-skin] .panel.composer[data-page][hidden] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Final route visibility guard. Keep this as the last rule in the file. */
[data-page][hidden],
.panel.composer[data-page][hidden],
:root[data-skin] .panel.composer[data-page][hidden] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Authoritative route hiding must be the last rule because desktop workbench rules use !important. */
[data-page][hidden] {
  display: none !important;
}

/* Ultimate desktop workbench override: keep the money path visible on wide screens. */
@media (min-width: 1100px) {
  :root[data-skin="clean"] .app-shell,
  :root[data-skin="cute"] .app-shell,
  :root[data-skin="pro"] .app-shell {
    width: min(100%, 1320px) !important;
    padding-inline: 24px !important;
  }

  :root[data-skin="clean"] .panel.composer,
  :root[data-skin="cute"] .panel.composer,
  :root[data-skin="pro"] .panel.composer {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) 330px !important;
    gap: 14px !important;
    align-items: start !important;
    padding: 16px !important;
  }

  :root[data-skin="clean"] .panel.composer .section-title,
  :root[data-skin="cute"] .panel.composer .section-title,
  :root[data-skin="pro"] .panel.composer .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    width: auto !important;
    margin: 0 !important;
  }

  :root[data-skin="clean"] .panel.composer .creation-mode-panel,
  :root[data-skin="cute"] .panel.composer .creation-mode-panel,
  :root[data-skin="pro"] .panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-skin="clean"] .panel.composer .creation-mode-panel button,
  :root[data-skin="cute"] .panel.composer .creation-mode-panel button,
  :root[data-skin="pro"] .panel.composer .creation-mode-panel button {
    justify-content: flex-start;
    min-height: 48px !important;
    padding: 10px 11px !important;
    text-align: left;
  }

  :root[data-skin="clean"] .panel.composer .creation-mode-panel small,
  :root[data-skin="cute"] .panel.composer .creation-mode-panel small,
  :root[data-skin="pro"] .panel.composer .creation-mode-panel small {
    display: block !important;
  }

  :root[data-skin="clean"] .panel.composer .track-panel,
  :root[data-skin="cute"] .panel.composer .track-panel,
  :root[data-skin="pro"] .panel.composer .track-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: auto !important;
    max-height: 560px !important;
    overflow: auto !important;
  }

  :root[data-skin="clean"] .panel.composer .track-card,
  :root[data-skin="cute"] .panel.composer .track-card,
  :root[data-skin="pro"] .panel.composer .track-card {
    min-height: 44px !important;
    padding: 9px 10px !important;
  }

  :root[data-skin="clean"] .panel.composer .track-card small,
  :root[data-skin="cute"] .panel.composer .track-card small,
  :root[data-skin="pro"] .panel.composer .track-card small {
    display: block !important;
    margin-top: 3px;
    line-height: 1.25;
  }

  :root[data-skin="clean"] .panel.composer .prompt-box,
  :root[data-skin="cute"] .panel.composer .prompt-box,
  :root[data-skin="pro"] .panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
  }

  :root[data-skin="clean"] .panel.composer textarea,
  :root[data-skin="cute"] .panel.composer textarea,
  :root[data-skin="pro"] .panel.composer textarea {
    min-height: 168px !important;
  }

  :root[data-skin="clean"] .panel.composer .blank-starter-quick,
  :root[data-skin="cute"] .panel.composer .blank-starter-quick,
  :root[data-skin="pro"] .panel.composer .blank-starter-quick {
    max-height: 330px !important;
    overflow: hidden !important;
  }

  :root[data-skin="clean"] .panel.composer .prompt-preflight,
  :root[data-skin="cute"] .panel.composer .prompt-preflight,
  :root[data-skin="pro"] .panel.composer .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: auto !important;
    margin: 0 !important;
  }

  :root[data-skin="clean"] .panel.composer .delivery-stack,
  :root[data-skin="cute"] .panel.composer .delivery-stack,
  :root[data-skin="pro"] .panel.composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 4 !important;
    position: sticky !important;
    top: 16px;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: auto !important;
    align-self: start;
    padding: 12px !important;
  }

  :root[data-skin="clean"] .panel.composer .delivery-stack > *,
  :root[data-skin="cute"] .panel.composer .delivery-stack > *,
  :root[data-skin="pro"] .panel.composer .delivery-stack > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  :root[data-skin="clean"] .panel.composer #generateBtn,
  :root[data-skin="cute"] .panel.composer #generateBtn,
  :root[data-skin="pro"] .panel.composer #generateBtn {
    width: 100%;
    min-height: 58px !important;
  }

  :root[data-skin="clean"] .panel.composer .generation-settings-panel,
  :root[data-skin="clean"] .panel.composer .pricing-controls,
  :root[data-skin="clean"] .panel.composer .price-hint {
    display: none !important;
  }

  :root[data-skin="cute"] .panel.composer {
    grid-template-columns: 240px minmax(0, 1fr) 340px !important;
  }

  :root[data-skin="pro"] .panel.composer {
    grid-template-columns: 250px minmax(0, 1fr) 360px !important;
  }

  :root[data-skin="pro"] .panel.composer .delivery-stack {
    border: 1px solid rgba(56, 189, 248, 0.18);
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.48), rgba(2, 6, 23, 0.82)),
      rgba(2, 6, 23, 0.86);
  }
}

/* Keep route visibility authoritative after all desktop overrides. */
[data-page][hidden] {
  display: none !important;
}

/* Create page density pass: keep the professional controls, remove first-screen overload. */
.composer .creation-mode-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.composer .creation-mode-panel button {
  min-height: 46px;
  padding: 8px 10px;
}

.composer .creation-mode-panel small {
  display: none;
}

.composer .starter-workflow-strip,
.composer .starter-direction-card {
  display: none;
}

.composer .blank-starter-quick,
:root[data-skin="clean"] .composer .blank-starter-quick,
:root[data-skin="cute"] .composer .blank-starter-quick,
:root[data-skin="pro"] .composer .blank-starter-quick {
  gap: 10px;
  padding: 10px;
}

.composer .starter-action-board,
:root[data-skin="cute"] .composer .starter-action-board,
:root[data-skin="pro"] .composer .starter-action-board {
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.composer .starter-style-panel,
:root[data-skin="clean"] .composer .starter-style-panel,
:root[data-skin="pro"] .composer .starter-style-panel {
  padding: 9px;
}

.composer .starter-style-title {
  margin-bottom: 8px;
}

.composer .starter-style-title small {
  display: none;
}

.composer .starter-style-panel .starter-quick-variants {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.composer .starter-style-panel .starter-quick-variants button {
  min-height: 34px;
  padding: 7px 8px;
}

.composer .starter-field-panel {
  grid-template-columns: minmax(130px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px;
}

.composer .starter-field-panel small {
  display: none;
}

.composer .starter-field-chips {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.composer .starter-field-chips button {
  min-height: 32px;
}

.composer .starter-next-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.composer .starter-next-actions button {
  min-height: 38px;
}

.composer .starter-field-open {
  min-height: 46px;
  padding: 9px 11px;
}

.composer .starter-quick-head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.composer .starter-quick-head small,
.composer .starter-field-open small {
  display: none;
}

.composer .starter-quick-tabs {
  gap: 6px;
}

.composer .starter-quick-tabs button {
  min-height: 32px;
  padding: 6px 8px;
}

.composer .starter-field-open {
  grid-template-columns: auto minmax(0, 1fr);
}

:root[data-skin="clean"] .composer .creation-mode-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

:root[data-skin="clean"] .composer .creation-mode-panel button {
  min-height: 38px !important;
  padding: 6px 8px !important;
}

:root[data-skin="clean"] .composer .creation-mode-panel small,
:root[data-skin="pro"] .composer .creation-mode-panel small {
  display: none !important;
}

:root[data-skin="cute"] .composer .creation-mode-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

:root[data-skin="cute"] .composer .creation-mode-panel button {
  min-height: 72px !important;
  padding: 12px !important;
}

:root[data-skin="cute"] .composer .creation-mode-panel small {
  display: block !important;
}

:root[data-skin="pro"] .composer .creation-mode-panel {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
}

:root[data-skin="pro"] .composer .creation-mode-panel button {
  min-height: 36px !important;
  padding: 6px 8px !important;
}

:root[data-skin="clean"] .composer .starter-action-board,
:root[data-skin="pro"] .composer .starter-action-board {
  grid-template-columns: minmax(0, 1fr) !important;
}

:root[data-skin="cute"] .composer .starter-action-board {
  grid-template-columns: minmax(150px, 0.75fr) minmax(0, 1.25fr) !important;
}

:root[data-skin="clean"] .prompt-live-preview {
  grid-template-columns: minmax(0, 1fr) auto;
}

:root[data-skin="cute"] .prompt-live-preview {
  grid-template-columns: minmax(0, 1fr);
}

:root[data-skin="pro"] .prompt-live-preview {
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr) auto;
}

:root[data-skin="clean"] .prompt-live-summary {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:root[data-skin="cute"] .prompt-live-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:root[data-skin="pro"] .prompt-live-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:root[data-skin="clean"] .prompt-live-plan {
  display: none;
}

:root[data-skin="clean"] .composer .starter-style-panel .starter-quick-variants {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

:root[data-skin="cute"] .composer .starter-style-panel .starter-quick-variants {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

:root[data-skin="pro"] .composer .starter-style-panel .starter-quick-variants {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (max-width: 720px) {
  :root[data-skin="clean"] .prompt-live-preview,
  :root[data-skin="cute"] .prompt-live-preview,
  :root[data-skin="pro"] .prompt-live-preview {
    grid-template-columns: 1fr;
  }

  :root[data-skin="clean"] .prompt-live-summary,
  :root[data-skin="cute"] .prompt-live-summary,
  :root[data-skin="pro"] .prompt-live-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .composer .starter-action-board {
    grid-template-columns: 1fr;
  }

  .composer .starter-workflow-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .composer .starter-workflow-step {
    justify-content: center;
  }

  .composer .starter-workflow-step span {
    display: none;
  }

  .composer .starter-field-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Template center refinement: default to a calm recommendation console. */
:root[data-template-view="starter"] .template-workbench-grid {
  grid-template-columns: minmax(0, 1fr);
}

:root[data-template-view="starter"] .template-workbench-block.strong {
  min-height: 0;
}

:root[data-template-view="starter"] .template-workbench-block.strong strong {
  font-size: 16px;
}

:root[data-template-view="starter"] .template-workbench-block.strong .template-choice-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:root[data-template-view="starter"] .template-workbench-block.strong .template-choice-row button {
  min-height: 46px;
  border-radius: 12px;
  font-size: 13px;
}

:root[data-skin="pro"][data-template-view="starter"] .template-workbench-block.strong .template-choice-row button {
  border-color: rgba(56, 189, 248, 0.34);
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.16), rgba(8, 18, 38, 0.96));
  box-shadow: inset 0 0 0 1px rgba(226, 246, 255, 0.05);
  color: #f2fbff;
}

:root[data-skin="pro"][data-template-view="starter"] .template-workbench-block.strong .template-choice-row button:nth-child(2) {
  border-color: rgba(125, 211, 252, 0.72);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.34), rgba(7, 89, 133, 0.62));
}

:root[data-template-view="starter"] .template-workbench-block.strong .template-choice-row button:nth-child(n+5) {
  display: none;
}

:root[data-template-view="professional"] .template-workbench-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

:root[data-template-view="professional"] .template-workbench-block {
  min-height: 132px;
}

:root[data-template-view="professional"] .professional-template-panel {
  border-color: rgba(15, 118, 110, 0.18);
}

/* Desktop maturity pass v42: queue becomes a compact operations strip, not a second workspace. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .queue {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    padding: 14px 16px;
    margin-top: 12px;
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86)),
      var(--panel);
  }

  :root[data-active-page="create"] .queue .section-title {
    grid-column: 1;
    grid-row: 1;
    min-height: 32px;
    margin: 0;
    align-items: center;
  }

  :root[data-active-page="create"] .queue .section-title h3 {
    font-size: 18px;
    line-height: 1.15;
  }

  :root[data-active-page="create"] .queue .section-title span {
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
  }

  :root[data-active-page="create"] .queue-toolbar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  :root[data-active-page="create"] .queue-toolbar button,
  :root[data-active-page="create"] .queue-copy {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    background: rgba(255, 255, 255, 0.82);
    color: var(--primary);
    box-shadow: none;
    font-size: 12px;
    font-weight: 800;
  }

  :root[data-active-page="create"] .queue-toolbar button:first-child {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.95), rgba(16, 185, 129, 0.95));
    color: white;
    border-color: transparent;
  }

  :root[data-active-page="create"] .queue-safety-note {
    grid-column: 1 / -1;
    margin: -2px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(15, 118, 110, 0.72);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
  }

  :root[data-active-page="create"] .queue-list,
  :root[data-active-page="create"] .queue-summary {
    grid-column: 1 / -1;
  }

  :root[data-active-page="create"] .queue-summary {
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :root[data-active-page="create"] .empty-queue {
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.78));
  }

  :root[data-active-page="create"] .empty-queue strong {
    font-size: 14px;
    line-height: 1.2;
  }

  :root[data-active-page="create"] .empty-queue small {
    max-width: 620px;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(71, 85, 105, 0.68);
  }

  :root[data-active-page="create"] .queue-empty-steps {
    display: none;
  }

  :root[data-active-page="create"] .empty-queue .queue-actions {
    justify-self: end;
    display: flex;
    flex-direction: row;
    gap: 8px;
  }

  :root[data-active-page="create"] .queue-item {
    min-height: 86px;
    padding: 12px;
    border-radius: 12px;
  }

  :root[data-active-page="create"] .queue-item .queue-actions {
    gap: 7px;
  }

  :root[data-skin="pro"][data-active-page="create"] .queue {
    border-color: rgba(56, 189, 248, 0.16);
    background:
      linear-gradient(180deg, rgba(8, 21, 38, 0.86), rgba(2, 6, 23, 0.78)),
      rgba(2, 6, 23, 0.88);
  }

  :root[data-skin="pro"][data-active-page="create"] .queue-safety-note {
    color: rgba(125, 211, 252, 0.72);
  }
}

@media (min-width: 1100px) {
  :root[data-active-page="create"] .queue .queue-safety-note {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(15, 118, 110, 0.68) !important;
    text-align: left !important;
  }

  :root[data-active-page="create"] .empty-queue .queue-actions {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
}

:root[data-skin="pro"][data-template-view="professional"] .professional-template-panel,
:root[data-skin="pro"][data-template-view="professional"] .template-workbench-block {
  border-color: rgba(56, 189, 248, 0.22);
  background:
    linear-gradient(135deg, rgba(8, 47, 73, 0.22), rgba(15, 23, 42, 0.76)),
    var(--surface);
}

@media (max-width: 720px) {
  :root[data-template-view="starter"] .template-workbench-block.strong .template-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-template-view="professional"] .template-workbench-grid {
    grid-template-columns: 1fr;
  }
}

/* Professional delivery wizard: make the expert path read as steps, not dense copy. */
.composer .professional-brief-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.composer .professional-brief-steps span.done {
  border-color: rgba(22, 163, 74, 0.2);
  background: rgba(240, 253, 244, 0.82);
}

.composer .professional-brief-steps span.todo {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 251, 235, 0.9);
}

.composer .professional-brief-steps span.todo b {
  color: #b45309;
}

:root[data-skin="pro"] .composer .professional-brief-steps span.done,
:root[data-skin="pro"] .composer .professional-brief-steps span.todo {
  background: rgba(2, 6, 23, 0.48);
}

/* Creation page density pass: keep starter guidance as chips, not long question copy. */
.composer .starter-diagnosis-card,
.composer .starter-question-row,
:root[data-skin="cute"] .composer .starter-diagnosis-card,
:root[data-skin="cute"] .composer .starter-question-row,
:root[data-skin="pro"] .composer .starter-diagnosis-card,
:root[data-skin="pro"] .composer .starter-question-row {
  display: none !important;
}

@media (max-width: 720px) {
  .composer .professional-brief-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Pro skin must look like a control console, not the soft default card stack. */
:root[data-skin="clean"] .composer .starter-style-panel .starter-quick-variants button:nth-child(n + 4) {
  display: none;
}

:root[data-skin="clean"] .composer .starter-style-panel .starter-quick-variants {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

:root[data-skin="cute"] .composer .starter-style-panel {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 241, 246, 0.82));
}

:root[data-skin="cute"] .composer .starter-style-panel .starter-quick-variants {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

:root[data-skin="cute"] .composer .starter-style-panel .starter-quick-variants button,
:root[data-skin="cute"] .composer .starter-next-actions button {
  min-height: 42px;
  border-radius: 999px;
}

:root[data-skin="pro"] .composer .starter-style-panel,
:root[data-skin="pro"] .composer .starter-field-panel {
  border-color: rgba(56, 189, 248, 0.18);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(8, 13, 27, 0.92), rgba(15, 23, 42, 0.86));
}

:root[data-skin="pro"] .composer .starter-style-title span,
:root[data-skin="pro"] .composer .starter-field-panel span,
:root[data-skin="pro"] .composer .starter-style-title strong,
:root[data-skin="pro"] .composer .starter-field-panel strong {
  color: #e0f2fe;
}

:root[data-skin="pro"] .composer .starter-style-panel .starter-quick-variants {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

:root[data-skin="pro"] .composer .starter-style-panel .starter-quick-variants button,
:root[data-skin="pro"] .composer .starter-field-chips button,
:root[data-skin="pro"] .composer .starter-next-actions button {
  border-radius: 4px;
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(15, 23, 42, 0.82);
  color: #e0f2fe;
}

:root[data-skin="pro"] .composer .track-card {
  border-color: rgba(56, 189, 248, 0.22);
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(2, 6, 23, 0.84)),
    rgba(15, 23, 42, 0.92);
  color: rgba(219, 234, 254, 0.72);
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.12);
}

:root[data-skin="pro"] .composer .track-card strong {
  color: #e0f2fe;
}

:root[data-skin="pro"] .composer .track-card small {
  color: rgba(186, 230, 253, 0.62);
}

:root[data-skin="pro"] .composer .track-card.active {
  border-color: rgba(34, 211, 238, 0.62);
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(37, 99, 235, 0.12)),
    rgba(8, 47, 73, 0.88);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.14),
    0 14px 34px rgba(14, 165, 233, 0.16);
}

@media (min-width: 860px) {
  :root[data-skin="pro"] .composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    grid-template-columns: 1fr !important;
    border-radius: 6px;
  }

  :root[data-skin="pro"] .composer .creation-mode-panel button {
    justify-content: flex-start;
    min-height: 48px !important;
    border-radius: 4px;
  }

  :root[data-skin="pro"] .composer .track-panel {
    grid-column: 1 !important;
    grid-row: 4 / span 8 !important;
  }

  :root[data-skin="pro"] .composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 2 / span 8 !important;
    position: sticky !important;
    top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    align-self: start;
  }

  :root[data-skin="pro"] .composer .delivery-stack #generateBtn,
  :root[data-skin="pro"] .composer .delivery-stack #deliveryOrderPanel {
    grid-column: 1;
    grid-row: auto;
  }
}
/* EOF desktop override: keep the left rail anchored in the first viewport. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer .track-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    margin-top: 270px !important;
    max-height: 250px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-guide {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    margin-top: 532px !important;
    max-height: 112px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box {
    max-height: 590px !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick {
    max-height: 286px !important;
  }
}

/* EOF desktop template console: turn template selection into a real workbench. */
@media (min-width: 1100px) {
  :root[data-active-page="templates"] .app-shell {
    width: min(100%, 1360px) !important;
    padding-inline: 24px !important;
  }

  :root[data-active-page="templates"] .template-workbench-panel {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) 330px !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  :root[data-active-page="templates"] .template-workbench-panel > .section-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 34px !important;
    margin: 0 !important;
  }

  :root[data-active-page="templates"] .template-view-switch {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    position: sticky !important;
    top: 72px !important;
    z-index: 3 !important;
    align-self: start !important;
    padding: 8px !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(14px) !important;
  }

  :root[data-active-page="templates"] .template-view-switch button {
    min-height: 44px !important;
    padding: 8px 10px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  :root[data-active-page="templates"] .template-workbench-grid {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
    min-height: 0 !important;
  }

  :root[data-active-page="templates"] .template-workbench-block {
    min-height: 112px !important;
    padding: 12px !important;
    gap: 8px !important;
  }

  :root[data-active-page="templates"] .template-workbench-block strong {
    font-size: 15px !important;
  }

  :root[data-active-page="templates"] .template-workbench-block span {
    display: none !important;
  }

  :root[data-active-page="templates"] .template-choice-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  :root[data-active-page="templates"] .template-choice-row button {
    min-height: 38px !important;
    padding: 7px 8px !important;
  }

  :root[data-active-page="templates"] .template-brief-panel:not(:empty) {
    grid-column: 3 !important;
    grid-row: 2 !important;
    position: sticky !important;
    top: 72px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-self: start !important;
    max-height: calc(100vh - 92px) !important;
    overflow: auto !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  :root[data-active-page="templates"] .template-brief-panel > div {
    gap: 5px !important;
  }

  :root[data-active-page="templates"] .template-brief-primary small,
  :root[data-active-page="templates"] .template-brief-cta-copy small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  :root[data-active-page="templates"] .template-brief-metrics {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  :root[data-active-page="templates"] .template-brief-metrics span {
    min-height: 44px !important;
    padding: 7px 8px !important;
  }

  :root[data-active-page="templates"] .template-brief-panel button[data-template-brief-apply] {
    width: 100% !important;
    min-height: 48px !important;
  }

  :root[data-active-page="templates"] .template-filter-panel,
  :root[data-active-page="templates"] .professional-template-panel,
  :root[data-active-page="templates"] .template-case-panel {
    margin-top: 12px !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block:not(.strong) {
    display: none !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong .template-choice-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong .template-choice-row button:nth-child(n + 5) {
    display: none !important;
  }

  :root[data-template-view="professional"][data-active-page="templates"] .template-workbench-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-template-view="professional"][data-active-page="templates"] .template-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-template-view="professional"][data-active-page="templates"] .professional-template-panel {
    display: block !important;
  }

  :root[data-active-page="templates"] .template-filter-panel {
    padding: 10px 14px !important;
  }

  :root[data-active-page="templates"] .template-filter-panel .section-title {
    margin-bottom: 8px !important;
  }

  :root[data-active-page="templates"] .template-tabs {
    gap: 7px !important;
  }

  :root[data-active-page="templates"] .template-tabs button {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  :root[data-active-page="templates"] .professional-template-panel {
    padding: 12px 14px !important;
  }

  :root[data-active-page="templates"] .professional-template-panel .section-title {
    margin-bottom: 10px !important;
  }

  :root[data-active-page="templates"] .professional-template-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  :root[data-active-page="templates"] .professional-template {
    min-height: 92px !important;
    padding: 10px !important;
    gap: 5px !important;
  }

  :root[data-active-page="templates"] .professional-template strong {
    font-size: 13px !important;
  }

  :root[data-active-page="templates"] .professional-template small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    font-size: 11px !important;
  }

  :root[data-active-page="templates"] .professional-template em {
    width: fit-content !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
  }

  :root[data-skin="cute"][data-active-page="templates"] .template-workbench-panel {
    grid-template-columns: 230px minmax(0, 1fr) 340px !important;
  }

  :root[data-skin="cute"][data-active-page="templates"] .template-view-switch,
  :root[data-skin="cute"][data-active-page="templates"] .template-brief-panel {
    border-radius: 18px !important;
  }

  :root[data-skin="pro"][data-active-page="templates"] .template-workbench-panel {
    grid-template-columns: 220px minmax(0, 1fr) 350px !important;
  }

  :root[data-skin="pro"][data-active-page="templates"] .template-view-switch {
    border-color: rgba(56, 189, 248, 0.18) !important;
    border-radius: 6px !important;
    background: rgba(2, 6, 23, 0.72) !important;
  }

  :root[data-skin="pro"][data-active-page="templates"] .template-brief-panel,
  :root[data-skin="pro"][data-active-page="templates"] .template-workbench-block {
    border-radius: 6px !important;
  }
}

/* Desktop final pass: fix the visible workstation, not just the color skin. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .app-shell,
  :root[data-active-page="templates"] .app-shell {
    width: min(100%, 1400px) !important;
    padding-inline: 20px !important;
  }

  :root[data-active-page="create"] .topbar,
  :root[data-active-page="templates"] .topbar {
    min-height: 58px !important;
    height: auto !important;
    margin-bottom: 10px !important;
    padding: 12px 16px !important;
  }

  :root[data-active-page="create"] .topbar h1,
  :root[data-active-page="templates"] .topbar h1 {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  :root[data-active-page="create"] .topbar .eyebrow,
  :root[data-active-page="templates"] .topbar .eyebrow {
    margin-bottom: 2px !important;
    font-size: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer {
    grid-template-columns: 238px minmax(620px, 1fr) 332px !important;
    gap: 14px !important;
    min-height: calc(100vh - 118px) !important;
    padding: 14px !important;
    overflow: visible !important;
    align-content: start !important;
  }

  :root[data-active-page="create"] .panel.composer .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-height: 36px !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 8px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel button {
    display: grid !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    align-content: center !important;
    justify-items: start !important;
    text-align: left !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  :root[data-active-page="create"] .panel.composer .track-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin: 8px 0 0 !important;
    max-height: 344px !important;
    overflow: auto !important;
    padding-right: 4px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-card {
    min-height: 44px !important;
    padding: 8px 10px !important;
    align-content: center !important;
  }

  :root[data-active-page="create"] .panel.composer .track-card small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .track-guide {
    grid-column: 1 !important;
    grid-row: 4 !important;
    margin: 8px 0 0 !important;
    max-height: 150px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 / span 3 !important;
    max-height: calc(100vh - 170px) !important;
    min-height: 640px !important;
    overflow: auto !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"] .panel.composer textarea {
    min-height: 132px !important;
    max-height: 150px !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-workflow-strip,
  :root[data-active-page="create"] .panel.composer .starter-direction-card,
  :root[data-active-page="create"] .panel.composer .starter-diagnosis-card,
  :root[data-active-page="create"] .panel.composer .starter-question-row {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-action-board {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel {
    min-width: 0 !important;
    width: 100% !important;
    padding: 9px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    margin-bottom: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-title small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel .starter-quick-variants {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(5, minmax(86px, 1fr)) !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer .starter-field-chips button,
  :root[data-active-page="create"] .panel.composer .starter-next-actions button,
  :root[data-active-page="templates"] .template-choice-row button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 7px 8px !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-panel {
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 9px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-panel small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-chips {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(4, minmax(86px, 1fr)) !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-next-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .assist-list {
    display: grid !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .assist-option {
    min-height: 58px !important;
    padding: 8px 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 5 !important;
    max-height: 150px !important;
    overflow: auto !important;
    margin: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 5 !important;
    position: sticky !important;
    top: 12px !important;
    max-height: calc(100vh - 92px) !important;
    overflow: auto !important;
    align-self: start !important;
  }

  :root[data-skin="clean"][data-active-page="create"] .panel.composer {
    grid-template-columns: 210px minmax(620px, 1fr) 310px !important;
  }

  :root[data-skin="clean"][data-active-page="create"] .panel.composer .blank-starter-quick {
    display: none !important;
  }

  :root[data-skin="clean"][data-active-page="create"] .panel.composer .creation-mode-panel {
    grid-template-columns: 1fr !important;
  }

  :root[data-skin="clean"][data-active-page="create"] .panel.composer .creation-mode-panel small {
    display: none !important;
  }

  :root[data-skin="clean"][data-active-page="create"] .panel.composer .starter-style-panel .starter-quick-variants {
    grid-template-columns: repeat(3, minmax(110px, 1fr)) !important;
  }

  :root[data-skin="clean"][data-active-page="create"] .panel.composer .starter-style-panel .starter-quick-variants button:nth-child(n + 4) {
    display: none !important;
  }

  :root[data-skin="cute"][data-active-page="create"] .panel.composer {
    grid-template-columns: 250px minmax(620px, 1fr) 340px !important;
  }

  :root[data-skin="cute"][data-active-page="create"] .panel.composer .creation-mode-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-skin="cute"][data-active-page="create"] .panel.composer .creation-mode-panel button {
    min-height: 68px !important;
    border-radius: 18px !important;
  }

  :root[data-skin="cute"][data-active-page="create"] .panel.composer .track-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 280px !important;
  }

  :root[data-skin="cute"][data-active-page="create"] .panel.composer .track-card {
    min-height: 52px !important;
    border-radius: 16px !important;
  }

  :root[data-skin="cute"][data-active-page="create"] .panel.composer .starter-style-panel .starter-quick-variants {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }

  :root[data-skin="pro"][data-active-page="create"] .panel.composer {
    grid-template-columns: 240px minmax(650px, 1fr) 352px !important;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.9)),
      var(--surface) !important;
  }

  :root[data-skin="pro"][data-active-page="create"] .panel.composer .creation-mode-panel {
    grid-template-columns: 1fr !important;
    border-radius: 6px !important;
  }

  :root[data-skin="pro"][data-active-page="create"] .panel.composer .creation-mode-panel small,
  :root[data-skin="pro"][data-active-page="create"] .panel.composer .track-card small {
    display: none !important;
  }

  :root[data-skin="pro"][data-active-page="create"] .panel.composer .track-card,
  :root[data-skin="pro"][data-active-page="create"] .panel.composer .starter-style-panel,
  :root[data-skin="pro"][data-active-page="create"] .panel.composer .starter-field-panel {
    border-radius: 6px !important;
  }

  :root[data-active-page="templates"] .template-workbench-panel {
    min-height: calc(100vh - 118px) !important;
    grid-template-columns: 210px minmax(690px, 1fr) 320px !important;
    gap: 14px !important;
    align-content: start !important;
  }

  :root[data-active-page="templates"] .template-workbench-panel > .section-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  :root[data-active-page="templates"] .template-view-switch {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  :root[data-active-page="templates"] .template-view-switch button {
    min-height: 46px !important;
    padding: 8px 10px !important;
    text-align: left !important;
  }

  :root[data-active-page="templates"] .template-workbench-grid {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    gap: 10px !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block:not(.strong) {
    display: grid !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong {
    grid-column: 1 / -1 !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong .template-choice-row {
    grid-template-columns: repeat(5, minmax(92px, 1fr)) !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong .template-choice-row button:nth-child(n + 5) {
    display: block !important;
  }

  :root[data-active-page="templates"] .template-workbench-block {
    min-height: 104px !important;
    padding: 12px !important;
  }

  :root[data-active-page="templates"] .template-workbench-block span {
    display: block !important;
  }

  :root[data-active-page="templates"] .template-choice-row {
    grid-template-columns: repeat(4, minmax(92px, 1fr)) !important;
    gap: 8px !important;
  }

  :root[data-active-page="templates"] .template-brief-panel:not(:empty) {
    grid-column: 3 !important;
    grid-row: 2 !important;
    position: sticky !important;
    top: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-height: calc(100vh - 92px) !important;
    overflow: auto !important;
  }

  :root[data-active-page="templates"] .template-brief-metrics {
    display: none !important;
    grid-template-columns: 1fr !important;
  }

  :root[data-template-view="professional"][data-active-page="templates"] .template-workbench-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-template-view="professional"][data-active-page="templates"] .template-filter-panel,
  :root[data-template-view="professional"][data-active-page="templates"] .professional-template-panel {
    display: block !important;
  }

  :root[data-active-page="templates"] .professional-template-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  :root[data-active-page="templates"] .professional-template {
    min-height: 86px !important;
    padding: 9px !important;
  }

  :root[data-active-page="templates"] .professional-template small {
    margin-top: 5px !important;
  }

  :root[data-skin="clean"][data-active-page="templates"] .template-workbench-panel {
    grid-template-columns: 190px minmax(720px, 1fr) 300px !important;
  }

  :root[data-skin="cute"][data-active-page="templates"] .template-workbench-panel {
    grid-template-columns: 230px minmax(680px, 1fr) 330px !important;
  }

  :root[data-skin="cute"][data-active-page="templates"] .template-workbench-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-skin="cute"][data-active-page="templates"] .template-choice-row {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }

  :root[data-skin="pro"][data-active-page="templates"] .template-workbench-panel {
    grid-template-columns: 220px minmax(720px, 1fr) 340px !important;
  }

  :root[data-skin="pro"][data-active-page="templates"] .template-workbench-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-skin="pro"][data-active-page="templates"] .template-choice-row {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }
}

@media (max-width: 1099px) {
  :root[data-active-page="create"] .panel.composer .starter-style-panel .starter-quick-variants,
  :root[data-active-page="create"] .panel.composer .starter-field-chips,
  :root[data-active-page="templates"] .template-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Desktop correction pass: keep the editor clear and move guidance into rails. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer {
    grid-template-columns: 220px minmax(640px, 1fr) 320px !important;
    grid-auto-rows: min-content !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer .section-title {
    grid-column: 1 / 3 !important;
    min-height: 30px !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel {
    padding: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel button,
  :root[data-active-page="create"] .panel.composer .track-card {
    min-height: 38px !important;
    padding: 7px 9px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-panel {
    max-height: 220px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-guide {
    max-height: 108px !important;
  }

  :root[data-active-page="create"] .panel.composer:has(.professional-brief:not(.hidden)) .track-guide {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-brief:not(.hidden) {
    grid-column: 1 !important;
    grid-row: 4 !important;
    display: grid !important;
    max-height: 210px !important;
    overflow: auto !important;
    margin: 8px 0 0 !important;
    padding: 10px !important;
    font-size: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-brief-steps {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-brief-steps span {
    min-height: 0 !important;
    padding: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-type-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-type-grid button:nth-child(n + 5) {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 / span 5 !important;
    min-height: 476px !important;
    max-height: calc(100vh - 146px) !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-preview {
    max-height: 210px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-understanding-grid,
  :root[data-active-page="create"] .panel.composer .preflight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 6 !important;
    width: 100% !important;
    max-height: calc(100vh - 82px) !important;
  }

  :root[data-skin="clean"][data-active-page="create"] .panel.composer {
    grid-template-columns: 200px minmax(660px, 1fr) 300px !important;
  }

  :root[data-skin="clean"][data-active-page="create"] .panel.composer .professional-brief:not(.hidden) {
    display: none !important;
  }

  :root[data-skin="cute"][data-active-page="create"] .panel.composer {
    grid-template-columns: 240px minmax(640px, 1fr) 320px !important;
  }

  :root[data-skin="cute"][data-active-page="create"] .panel.composer .professional-brief:not(.hidden) {
    border-radius: 18px !important;
    max-height: 190px !important;
  }

  :root[data-skin="pro"][data-active-page="create"] .panel.composer {
    grid-template-columns: 230px minmax(660px, 1fr) 340px !important;
  }

  :root[data-skin="pro"][data-active-page="create"] .panel.composer .professional-brief:not(.hidden) {
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 6px !important;
    background: rgba(2, 6, 23, 0.44) !important;
  }

  :root[data-active-page="templates"] .template-workbench-panel {
    min-height: auto !important;
    grid-auto-rows: min-content !important;
    padding: 12px !important;
  }

  :root[data-active-page="templates"] .template-workbench-grid {
    max-height: calc(100vh - 154px) !important;
    overflow: auto !important;
  }

  :root[data-active-page="templates"] .template-workbench-block {
    min-height: 88px !important;
    padding: 10px !important;
  }

  :root[data-active-page="templates"] .template-choice-row button,
  :root[data-active-page="templates"] .professional-template {
    min-height: 42px !important;
    padding: 8px !important;
  }

  :root[data-active-page="templates"] .professional-template small,
  :root[data-active-page="templates"] .template-workbench-block span {
    line-height: 1.25 !important;
  }
}

/* Desktop workstation overhaul: final authority for wide screens. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .app-shell,
  :root[data-active-page="templates"] .app-shell {
    width: min(100%, 1440px) !important;
    padding: 12px 28px 28px !important;
  }

  :root[data-active-page="create"] .topbar,
  :root[data-active-page="templates"] .topbar {
    min-height: 54px !important;
    margin-bottom: 10px !important;
    padding: 11px 16px !important;
    border-radius: 14px !important;
  }

  :root[data-active-page="create"] .tabbar,
  :root[data-active-page="templates"] .tabbar {
    top: 14px !important;
    width: min(432px, calc(100% - 560px)) !important;
    min-width: 356px !important;
    height: auto !important;
    padding: 6px !important;
    border-radius: 14px !important;
  }

  :root[data-active-page="create"] .tabbar button,
  :root[data-active-page="templates"] .tabbar button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    display: grid !important;
    grid-template-columns: 248px minmax(640px, 1fr) 352px !important;
    grid-template-rows: auto auto minmax(0, auto) auto !important;
    gap: 12px !important;
    align-items: start !important;
    min-height: calc(100vh - 112px) !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer {
    grid-template-columns: 220px minmax(700px, 1fr) 320px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer {
    grid-template-columns: 260px minmax(640px, 1fr) 352px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 250px minmax(670px, 1fr) 370px !important;
  }

  :root[data-active-page="create"] .panel.composer > .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-height: 38px !important;
    margin: 0 !important;
  }

  :root[data-active-page="create"] .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .mode-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.72) !important;
  }

  :root[data-active-page="create"] .mode-row button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"] .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .creation-mode-panel button {
    min-height: 42px !important;
    padding: 8px 10px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  :root[data-active-page="create"] .creation-mode-panel small {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .creation-mode-panel small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .creation-mode-panel {
    grid-template-columns: 1fr !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel small,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .creation-mode-panel small,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .creation-mode-panel small,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .creation-mode-panel small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel button,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .creation-mode-panel button,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .creation-mode-panel button,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .creation-mode-panel button {
    min-height: 44px !important;
    padding: 8px 10px !important;
  }

  :root[data-active-page="create"] .track-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    max-height: 318px !important;
    margin: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  :root[data-active-page="create"] .track-card {
    min-height: 38px !important;
    padding: 8px 9px !important;
    gap: 2px !important;
  }

  :root[data-active-page="create"] .track-card small {
    display: none !important;
  }

  :root[data-active-page="create"] .track-card.active small {
    display: block !important;
    line-height: 1.2 !important;
  }

  :root[data-active-page="create"] .track-guide {
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-height: 116px !important;
    margin: 0 !important;
    padding: 9px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 / span 2 !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: calc(100vh - 218px) !important;
    padding: 12px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] #promptToolbar {
    min-height: 30px !important;
    margin-bottom: 8px !important;
  }

  :root[data-active-page="create"] textarea#prompt {
    min-height: 142px !important;
    max-height: 190px !important;
  }

  :root[data-active-page="create"] .blank-starter-quick {
    max-height: 296px !important;
    padding: 9px !important;
    gap: 8px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .starter-style-panel,
  :root[data-active-page="create"] .starter-field-panel {
    padding: 8px !important;
  }

  :root[data-active-page="create"] .starter-style-title small,
  :root[data-active-page="create"] .starter-field-panel small,
  :root[data-active-page="create"] .starter-field-open small {
    display: none !important;
  }

  :root[data-active-page="create"] .starter-style-panel .starter-quick-variants button,
  :root[data-active-page="create"] .starter-field-chips button,
  :root[data-active-page="create"] .starter-next-actions button {
    min-height: 34px !important;
    padding: 6px 8px !important;
  }

  :root[data-active-page="create"] .prompt-live-preview {
    max-height: 190px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-preview {
    grid-template-columns: minmax(118px, 0.22fr) minmax(0, 1fr) minmax(112px, 0.18fr) !important;
    gap: 5px !important;
    max-height: 184px !important;
    padding: 6px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-main {
    gap: 1px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-main em,
  :root[data-active-page="create"] .panel.composer .prompt-live-professional p,
  :root[data-active-page="create"] .panel.composer .prompt-live-missing {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-professional summary {
    min-height: 28px !important;
    padding: 5px 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-diff {
    gap: 3px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-diff em {
    min-height: 22px !important;
    padding: 4px 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-proof-card,
  :root[data-active-page="create"] .panel.composer .prompt-live-summary-card {
    padding: 4px 5px !important;
  }

  :root[data-active-page="create"] .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 5 !important;
    max-height: 138px !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 5 !important;
    position: sticky !important;
    top: 72px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    max-height: calc(100vh - 92px) !important;
    padding: 12px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .delivery-stack > * {
    grid-column: 1 !important;
  }

  :root[data-active-page="create"] #generateBtn {
    order: -20 !important;
    min-height: 58px !important;
    width: 100% !important;
    font-size: 16px !important;
  }

  :root[data-active-page="create"] #deliveryOrderPanel {
    order: -10 !important;
    max-height: 174px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .settings-summary {
    min-height: 54px !important;
    padding: 9px 10px !important;
  }

  :root[data-active-page="create"] .settings-summary small,
  :root[data-active-page="create"] .price-hint {
    display: none !important;
  }

  :root[data-active-page="create"] .pricing-controls {
    grid-template-columns: 1fr !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .blank-starter-quick,
  :root[data-active-page="create"][data-skin="clean"] .prompt-preflight,
  :root[data-active-page="create"][data-skin="clean"] .track-guide,
  :root[data-active-page="create"][data-skin="clean"] .pricing-controls,
  :root[data-active-page="create"][data-skin="clean"] .generation-settings-panel {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .prompt-box {
    max-height: calc(100vh - 164px) !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .blank-starter-quick {
    max-height: 348px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .mode-row {
    border-color: rgba(56, 189, 248, 0.18) !important;
    border-radius: 6px !important;
    background: rgba(2, 6, 23, 0.54) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .mode-row button {
    border-radius: 4px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .prompt-preflight {
    display: block !important;
  }

  :root[data-active-page="templates"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-panel {
    display: grid !important;
    grid-template-columns: 230px minmax(720px, 1fr) 340px !important;
    grid-auto-rows: min-content !important;
    gap: 12px !important;
    min-height: calc(100vh - 112px) !important;
    padding: 14px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-panel {
    grid-template-columns: 250px minmax(680px, 1fr) 350px !important;
  }

  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-panel {
    grid-template-columns: 232px minmax(730px, 1fr) 360px !important;
  }

  :root[data-active-page="templates"] .template-workbench-panel > .section-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 36px !important;
    margin: 0 !important;
  }

  :root[data-active-page="templates"] .template-view-switch {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: sticky !important;
    top: 72px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  :root[data-active-page="templates"] .template-view-switch button {
    min-height: 42px !important;
    padding: 8px 10px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  :root[data-active-page="templates"] .template-workbench-grid {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    max-height: calc(100vh - 154px) !important;
    overflow: auto !important;
  }

  :root[data-template-view="professional"][data-active-page="templates"] .template-workbench-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="templates"] .template-workbench-block {
    min-height: 88px !important;
    padding: 10px !important;
    gap: 7px !important;
  }

  :root[data-active-page="templates"] .template-workbench-block span {
    display: none !important;
  }

  :root[data-active-page="templates"] .template-choice-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong .template-choice-row button:nth-child(n + 5) {
    display: none !important;
  }

  :root[data-active-page="templates"] .template-choice-row button,
  :root[data-active-page="templates"] .professional-template {
    min-height: 40px !important;
    padding: 7px 8px !important;
    line-height: 1.22 !important;
  }

  :root[data-active-page="templates"] .professional-template-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  :root[data-active-page="templates"] .professional-template small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
  }

  :root[data-active-page="templates"] .template-brief-panel:not(:empty) {
    grid-column: 3 !important;
    grid-row: 2 !important;
    position: sticky !important;
    top: 72px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    max-height: calc(100vh - 92px) !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: auto !important;
  }

  :root[data-active-page="templates"] .template-brief-metrics {
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  :root[data-active-page="templates"] .template-brief-panel button[data-template-brief-apply] {
    min-height: 48px !important;
    width: 100% !important;
  }

  .image-viewer-panel {
    width: min(1240px, calc(100vw - 44px)) !important;
    max-height: calc(100vh - 44px) !important;
    border-radius: 18px !important;
  }

  .image-viewer-body {
    grid-template-columns: minmax(620px, 1fr) 360px !important;
    gap: 14px !important;
  }

  .viewer-side-panel {
    max-height: calc(100vh - 128px) !important;
    border-radius: 14px !important;
  }

  .viewer-delivery {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  .viewer-delivery-quick,
  .viewer-delivery-actions,
  .viewer-refine-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1250px) {
  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 220px minmax(540px, 1fr) 310px !important;
  }

  :root[data-active-page="templates"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-panel {
    grid-template-columns: 210px minmax(560px, 1fr) 310px !important;
  }
}

[data-page][hidden],
.panel.composer[data-page][hidden],
:root[data-skin] .panel.composer[data-page][hidden] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Desktop polish pass v3: physical EOF override for the commercial desktop workbench. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 224px minmax(620px, 1fr) 312px !important;
    grid-auto-rows: min-content !important;
    gap: 12px !important;
    min-height: calc(100vh - 118px) !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"] .panel.composer .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-height: 188px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-height: 260px !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-brief,
  :root[data-active-page="create"] .panel.composer .track-guide {
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-height: 116px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .mode-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 46px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(232px, 0.38fr) !important;
    gap: 9px !important;
    max-height: calc(100vh - 232px) !important;
    padding: 12px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer #promptToolbar,
  :root[data-active-page="create"] .panel.composer textarea#prompt {
    grid-column: 1 / -1 !important;
  }

  :root[data-active-page="create"] .panel.composer textarea#prompt {
    min-height: 128px !important;
    max-height: 168px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-preview {
    grid-column: 1 / -1 !important;
    max-height: 154px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box:has(.blank-starter-quick:not(.hidden)) .prompt-live-preview {
    grid-column: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box:has(.blank-starter-quick:not(.hidden)) .blank-starter-quick {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick {
    max-height: 226px !important;
    padding: 8px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick.hidden,
  :root[data-active-page="create"] .panel.composer .assist.hidden,
  :root[data-active-page="create"] .panel.composer .photo-preview.hidden {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer .assist:not(.hidden) {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head small,
  :root[data-active-page="create"] .panel.composer .starter-workflow-strip,
  :root[data-active-page="create"] .panel.composer .starter-direction-card,
  :root[data-active-page="create"] .panel.composer .starter-field-panel small,
  :root[data-active-page="create"] .panel.composer .starter-field-open small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-action-board {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs,
  :root[data-active-page="create"] .panel.composer .starter-quick-variants,
  :root[data-active-page="create"] .panel.composer .starter-field-chips,
  :root[data-active-page="create"] .panel.composer .starter-next-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs button,
  :root[data-active-page="create"] .panel.composer .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer .starter-field-chips button,
  :root[data-active-page="create"] .panel.composer .starter-next-actions button {
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 4 !important;
    max-height: 112px !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 4 !important;
    max-height: calc(100vh - 92px) !important;
    padding: 11px !important;
  }

  :root[data-active-page="create"] .panel.composer #deliveryOrderPanel {
    max-height: 150px !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-decision-board article {
    padding: 7px 9px !important;
  }
}

@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box {
    grid-row-start: 2 !important;
    grid-row-end: span 3 !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack {
    grid-row-start: 1 !important;
    grid-row-end: span 4 !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer {
    grid-template-columns: 204px minmax(690px, 1fr) 292px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer {
    grid-template-columns: 224px minmax(620px, 1fr) 312px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 246px minmax(610px, 1fr) 340px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) 104px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-preview {
    grid-template-columns: 118px minmax(0, 1fr) 112px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-preview {
    grid-template-columns: 92px minmax(0, 1fr) 132px !important;
  }
}

@media (min-width: 1100px) {
  :root[data-active-page="templates"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-panel {
    grid-template-columns: 232px minmax(690px, 1fr) 360px !important;
  }

  :root[data-active-page="templates"] .template-workbench-grid {
    gap: 12px !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong .template-choice-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="templates"] .template-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  :root[data-active-page="templates"] .template-choice-row button {
    display: grid !important;
    align-content: center !important;
    gap: 2px !important;
    min-height: 48px !important;
    padding: 7px 9px !important;
    text-align: left !important;
  }

  :root[data-active-page="templates"] .template-choice-row button strong,
  :root[data-active-page="templates"] .template-choice-row button small {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="templates"] .template-choice-row button strong {
    font-size: 13px !important;
    font-weight: 950 !important;
  }

  :root[data-active-page="templates"] .template-choice-row button small {
    color: var(--muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }

  :root[data-active-page="templates"] .template-brief-panel {
    gap: 9px !important;
    max-height: calc(100vh - 92px) !important;
  }

  :root[data-active-page="templates"] .template-brief-value,
  :root[data-active-page="templates"] .template-brief-flow article {
    padding: 9px 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.72) !important;
  }

  :root[data-skin="pro"][data-active-page="templates"] .template-brief-value,
  :root[data-skin="pro"][data-active-page="templates"] .template-brief-flow article {
    background: rgba(15, 23, 42, 0.68) !important;
  }

  :root[data-active-page="templates"] .template-brief-value {
    display: grid !important;
    gap: 3px !important;
  }

  :root[data-active-page="templates"] .template-brief-value span,
  :root[data-active-page="templates"] .template-brief-flow b {
    color: var(--accent) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
  }

  :root[data-active-page="templates"] .template-brief-value strong {
    color: var(--ink) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  :root[data-active-page="templates"] .template-brief-flow {
    display: grid !important;
    gap: 7px !important;
  }

  :root[data-active-page="templates"] .template-brief-flow article {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 0.42fr) minmax(0, 1fr) !important;
    gap: 7px !important;
    align-items: center !important;
  }

  :root[data-active-page="templates"] .template-brief-flow span,
  :root[data-active-page="templates"] .template-brief-flow small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="templates"] .template-brief-flow span {
    color: var(--ink) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
  }

  :root[data-active-page="templates"] .template-brief-flow small {
    color: var(--muted) !important;
    font-size: 11px !important;
  }
}

@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .track-panel {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-height: calc(100vh - 292px) !important;
    margin: 0 !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-expert-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-expert-panel article {
    display: grid !important;
    gap: 3px !important;
    padding: 8px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.7) !important;
  }

  :root[data-skin="pro"][data-active-page="create"] .panel.composer .professional-expert-panel article {
    background: rgba(15, 23, 42, 0.66) !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-expert-panel span {
    color: var(--accent) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-expert-panel strong {
    color: var(--ink) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-expert-panel small {
    display: -webkit-box !important;
    overflow: hidden !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  :root[data-active-page="create"] .panel.composer .professional-brief.collapsed .professional-type-grid,
  :root[data-active-page="create"] .panel.composer .professional-brief.collapsed .professional-brief-grid {
    display: none !important;
  }
}

/* Desktop command-center pass v4: keep the PC creation screen compact and mode-specific. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .professional-brief {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: minmax(260px, 0.25fr) minmax(620px, 1fr) minmax(320px, 0.34fr) !important;
    grid-template-rows: min-content 54px minmax(0, calc(100vh - 228px)) !important;
    align-items: start !important;
    gap: 12px !important;
    max-height: calc(100vh - 96px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) > .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    height: 54px !important;
    max-height: 54px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel button {
    min-height: 0 !important;
    height: 24px !important;
    padding: 4px 7px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .mode-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 46px !important;
    height: 46px !important;
    align-self: start !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .track-panel,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .track-guide,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .blank-starter-quick,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .blank-starter-panel {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    max-height: calc(100vh - 228px) !important;
    margin: 0 !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head {
    gap: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head small,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-focus,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-grid {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps span,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-expert-panel article,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid button {
    padding: 7px 8px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-type-grid {
    display: grid !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    max-height: calc(100vh - 228px) !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    min-height: 150px !important;
    max-height: 190px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-live-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-height: 250px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: end !important;
    max-height: 118px !important;
    pointer-events: none !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: min(320px, calc(100% - 28px)) !important;
    max-height: calc(100vh - 118px) !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) #deliveryOrderPanel {
    max-height: 236px !important;
  }
}

/* Template workbench focus pass: hidden sections must stay hidden after desktop overrides. */
:root[data-active-page="templates"] [data-template-workbench][hidden],
:root[data-active-page="templates"] [data-template-library][hidden],
:root[data-active-page="templates"] .template-workbench-block[hidden] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

:root[data-active-page="templates"][data-template-view] .template-workbench-grid > .template-workbench-block[hidden],
:root[data-active-page="templates"][data-template-view="starter"] .template-workbench-grid > .template-workbench-block:not(.strong)[hidden],
:root[data-active-page="templates"][data-template-view="professional"] .template-workbench-grid > .template-workbench-block[hidden],
:root[data-active-page="templates"][data-template-view="case"] .template-workbench-grid > .template-workbench-block[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
}

/* Desktop creation layout repair v5: make PC mode a real workbench, not a tall mobile stack. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-rows: min-content 46px min-content minmax(0, 1fr) !important;
    align-content: start !important;
    align-items: start !important;
    max-height: calc(100vh - 112px) !important;
    min-height: calc(100vh - 112px) !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-height: calc(100vh - 390px) !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-guide,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .professional-brief {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    height: 44px !important;
    min-height: 44px !important;
    align-self: start !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 / span 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: min-content !important;
    align-content: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: calc(100vh - 184px) !important;
    padding: 14px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) #promptToolbar {
    grid-column: 1 !important;
    margin: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) textarea#prompt {
    grid-column: 1 !important;
    min-height: 150px !important;
    max-height: 190px !important;
    height: 168px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-column: 1 !important;
    grid-template-columns: minmax(140px, 0.28fr) minmax(0, 1fr) minmax(108px, auto) !important;
    max-height: 164px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    grid-column: 1 !important;
    grid-row: auto !important;
    display: grid !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-variants,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-chips,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    grid-template-columns: minmax(145px, 0.34fr) minmax(0, 0.66fr) !important;
    gap: 9px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(155px, 0.32fr) minmax(0, 1fr) !important;
    align-items: center !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel > div:first-child {
    align-content: center !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel small,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-workflow-step small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-workflow-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    border-radius: 14px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs button,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-chips button,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions button {
    min-height: 34px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 4 !important;
    max-height: 118px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 4 !important;
    position: sticky !important;
    top: 76px !important;
    align-self: start !important;
    max-height: calc(100vh - 132px) !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 212px minmax(720px, 1fr) 292px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick {
    padding: 9px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-head small,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-workflow-strip,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card small {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-variants,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 248px minmax(660px, 1fr) 312px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick {
    border-radius: 18px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    grid-template-columns: minmax(170px, 0.38fr) minmax(0, 0.62fr) !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-variants {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 252px minmax(650px, 1fr) 340px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick {
    padding: 10px !important;
    border-radius: 10px !important;
    background: rgba(2, 6, 23, 0.74) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    grid-template-columns: minmax(120px, 0.26fr) minmax(0, 0.74fr) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-variants,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-chips {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Desktop template sales desk v17: make template choice feel like paid packages. */
@media (min-width: 1100px) {
  :root[data-active-page="templates"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-panel {
    grid-template-columns: 232px minmax(680px, 1fr) 348px !important;
    gap: 12px !important;
    max-width: 1368px !important;
    align-items: start !important;
  }

  :root[data-active-page="templates"] .template-view-switch {
    align-self: start !important;
    gap: 8px !important;
  }

  :root[data-active-page="templates"] .template-view-switch button {
    min-height: 38px !important;
    justify-content: flex-start !important;
    padding: 8px 10px !important;
  }

  :root[data-active-page="templates"] .template-workbench-grid {
    gap: 10px !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong .template-choice-row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong .template-choice-row button:nth-child(n + 5) {
    display: grid !important;
  }

  :root[data-active-page="templates"] .template-choice-row button {
    min-height: 58px !important;
    align-content: center !important;
    border-radius: 10px !important;
  }

  :root[data-active-page="templates"] .template-choice-row button small {
    margin-top: 3px !important;
    line-height: 1.2 !important;
  }

  :root[data-active-page="templates"] #templateBriefPanel {
    max-height: 444px !important;
    gap: 8px !important;
    padding: 11px !important;
    overflow: auto !important;
  }

  :root[data-active-page="templates"] .template-brief-launch {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 12px;
    background: #ffffff;
  }

  :root[data-active-page="templates"] .template-brief-launch button {
    min-height: 44px !important;
    border-radius: 10px !important;
  }

  :root[data-active-page="templates"] .template-brief-value {
    padding: 8px 9px !important;
  }

  :root[data-active-page="templates"] .template-brief-flow {
    gap: 6px !important;
  }

  :root[data-active-page="templates"] .template-brief-flow article {
    min-height: 44px !important;
    padding: 6px 7px !important;
  }

  :root[data-active-page="templates"] .template-brief-flow small {
    -webkit-line-clamp: 1 !important;
  }
}

/* Desktop creation layout repair v6: remove squeezed subcards and row inflation. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    height: 94px !important;
    max-height: 94px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel button {
    min-height: 42px !important;
    height: 42px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-summary {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mobile-flow,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-panel {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    grid-row: 3 / span 2 !important;
    margin-top: 32px !important;
    max-height: calc(100vh - 352px) !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-row: 3 / span 2 !important;
    max-height: calc(100vh - 202px) !important;
    overflow-x: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) textarea#prompt {
    overflow-x: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel {
    width: 100% !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs button,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-chips button,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions button {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Desktop creation layout repair v7: avoid nested scrollbars on the main PC canvas. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    max-height: none !important;
    overflow: visible !important;
    overflow-x: clip !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card small {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--muted) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box:has(textarea#prompt:placeholder-shown) ~ .prompt-preflight {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* Desktop creation layout repair v8: sober three-column workbench, compact diagnostics. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .app-shell {
    width: min(calc(100% - 88px), 1280px) !important;
    padding-bottom: 72px !important;
  }

  :root[data-active-page="create"] .panel.composer {
    display: grid !important;
    grid-template-columns: 214px minmax(0, 1fr) 330px !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer {
    grid-template-columns: 188px minmax(0, 1fr) 300px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer {
    grid-template-columns: 230px minmax(0, 1fr) 330px !important;
    gap: 16px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 236px minmax(0, 1fr) 372px !important;
    gap: 10px !important;
  }

  :root[data-active-page="create"] .composer > .section-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 34px !important;
    margin: 0 !important;
  }

  :root[data-active-page="create"] .composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }

  :root[data-active-page="create"] .composer .creation-mode-panel button {
    min-height: 46px !important;
    padding: 8px 10px !important;
    text-align: left !important;
  }

  :root[data-active-page="create"] .composer .creation-mode-panel small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 10px !important;
  }

  :root[data-active-page="create"] .composer .track-panel {
    grid-column: 1 !important;
    grid-row: 3 / span 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    max-height: 456px !important;
    margin: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  :root[data-active-page="create"] .composer .track-card {
    min-height: 46px !important;
    padding: 8px 10px !important;
  }

  :root[data-active-page="create"] .composer .track-card strong {
    margin-bottom: 2px !important;
    font-size: 12px !important;
  }

  :root[data-active-page="create"] .composer .track-card small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .composer .track-card small {
    display: none !important;
  }

  :root[data-active-page="create"] .composer .mode-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .composer .mode-row button {
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }

  :root[data-active-page="create"] .composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 !important;
    max-height: none !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .composer textarea#prompt {
    min-height: 156px !important;
    max-height: 238px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  :root[data-active-page="create"] .composer .blank-starter-quick {
    display: grid !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
    gap: 8px !important;
    max-height: none !important;
    margin-top: 8px !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .composer .blank-starter-quick {
    grid-template-columns: 1fr !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .composer .blank-starter-quick {
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr) !important;
  }

  :root[data-active-page="create"] .composer .starter-quick-head,
  :root[data-active-page="create"] .composer .starter-quick-tabs {
    grid-column: 1 !important;
  }

  :root[data-active-page="create"] .composer .starter-action-board,
  :root[data-active-page="create"] .composer .starter-field-open {
    grid-column: 2 !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .composer .starter-quick-head,
  :root[data-active-page="create"][data-skin="clean"] .composer .starter-quick-tabs,
  :root[data-active-page="create"][data-skin="clean"] .composer .starter-action-board,
  :root[data-active-page="create"][data-skin="clean"] .composer .starter-field-open {
    grid-column: 1 !important;
  }

  :root[data-active-page="create"] .composer .starter-workflow-strip {
    display: none !important;
  }

  :root[data-active-page="create"] .composer .starter-action-board {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .composer .starter-direction-card {
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
  }

  :root[data-active-page="create"] .composer .starter-style-panel,
  :root[data-active-page="create"] .composer .starter-field-panel {
    min-width: 0 !important;
    padding: 8px !important;
  }

  :root[data-active-page="create"] .composer .starter-style-panel small,
  :root[data-active-page="create"] .composer .starter-field-panel small,
  :root[data-active-page="create"] .composer .starter-direction-card small,
  :root[data-active-page="create"] .composer .prompt-live-plan,
  :root[data-active-page="create"] .composer .prompt-live-professional,
  :root[data-active-page="create"] .composer .prompt-live-diff {
    display: none !important;
  }

  :root[data-active-page="create"] .composer .starter-quick-variants,
  :root[data-active-page="create"] .composer .starter-field-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .composer .starter-quick-variants button,
  :root[data-active-page="create"] .composer .starter-field-chips button {
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  :root[data-active-page="create"] .composer .starter-next-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .composer .starter-field-open {
    min-height: 38px !important;
    padding: 7px 10px !important;
  }

  :root[data-active-page="create"] .composer .starter-field-open small {
    display: none !important;
  }

  :root[data-active-page="create"] .composer .prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.32fr) auto !important;
    padding: 6px !important;
  }

  :root[data-active-page="create"] .composer .prompt-live-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"] .composer .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 4 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 9px !important;
  }

  :root[data-active-page="create"] .composer .prompt-preflight:not(.details-expanded) .preflight-grid {
    display: none !important;
  }

  :root[data-active-page="create"] .composer .prompt-preflight:not(.details-expanded) .prompt-understanding-grid,
  :root[data-active-page="create"] .composer .prompt-preflight:not(.details-expanded) .prompt-compare,
  :root[data-active-page="create"] .composer .prompt-preflight:not(.compare-expanded) .prompt-compare,
  :root[data-active-page="create"] .composer .prompt-preflight:not(.details-expanded) .prompt-understanding-actions .secondary {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .composer .prompt-preflight:not(.details-expanded) .prompt-understanding-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"] .composer .prompt-understanding {
    margin: 6px 0 0 !important;
    padding: 8px !important;
  }

  :root[data-active-page="create"] .composer .prompt-understanding-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"] .composer .prompt-understanding-actions button {
    min-height: 30px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    font-size: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"] .composer .creation-mode-summary,
  :root[data-active-page="create"] .composer .mobile-flow,
  :root[data-active-page="create"] .composer .blank-starter-panel,
  :root[data-active-page="create"] .composer .track-guide,
  :root[data-active-page="create"] .composer .professional-brief {
    display: none !important;
  }

  :root[data-active-page="create"] .composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 4 !important;
    max-height: 360px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 2 / span 4 !important;
    position: sticky !important;
    top: 16px !important;
    display: grid !important;
    gap: 9px !important;
    align-self: start !important;
    max-height: calc(100vh - 40px) !important;
    overflow: auto !important;
    padding: 10px !important;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
  }

  :root[data-active-page="create"] .composer .delivery-stack > * {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
  }

  :root[data-active-page="create"] .composer .generate-btn {
    min-height: 54px !important;
    border-radius: 12px !important;
  }

  :root[data-active-page="create"] .composer .delivery-order-panel {
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .composer .delivery-order-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .composer .delivery-order-grid article {
    min-height: 0 !important;
    padding: 8px !important;
  }

  :root[data-active-page="create"] .composer .delivery-order-grid small,
  :root[data-active-page="create"] .composer .delivery-template-card small,
  :root[data-active-page="create"] .composer .delivery-order-main small {
    display: -webkit-box !important;
    max-height: 2.75em !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  :root[data-active-page="create"] .composer .pricing-controls {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin-top: 0 !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .composer .generation-settings-panel,
  :root[data-active-page="create"][data-skin="clean"] .composer .pricing-controls,
  :root[data-active-page="create"][data-skin="clean"] .composer .price-hint {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .composer .creation-mode-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .composer .track-panel {
    grid-row: 3 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 360px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .composer .track-card {
    min-height: 58px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .composer .delivery-stack {
    border-color: rgba(56, 189, 248, 0.22);
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.5), rgba(2, 6, 23, 0.86)),
      rgba(2, 6, 23, 0.92);
  }

  :root[data-active-page="create"][data-skin="pro"] .composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .composer .track-panel {
    border-color: rgba(56, 189, 248, 0.18);
    background: rgba(2, 6, 23, 0.42);
  }

  :root[data-active-page="create"] .queue {
    margin-top: 12px !important;
  }
}

/* Desktop layout rescue v9 EOF: remove blank canvases and make PC workbench scanable. */
@media (min-width: 1100px) {
  :root[data-active-page="templates"] .template-workbench-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    align-content: start !important;
    align-items: start !important;
    grid-template-columns: 232px minmax(0, 1fr) 360px !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
    padding: 14px !important;
    padding-bottom: 20px !important;
    overflow: visible !important;
  }

  :root[data-active-page="templates"] .template-view-switch {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  :root[data-active-page="templates"] .template-view-switch button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
  }

  :root[data-active-page="templates"] .template-workbench-grid {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="templates"] #templateBriefPanel {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    position: static !important;
    max-height: 430px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer {
    align-content: start !important;
    min-height: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: minmax(244px, 0.22fr) minmax(600px, 1fr) minmax(300px, 0.32fr) !important;
    grid-template-rows: 46px minmax(0, auto) !important;
    gap: 12px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 46px !important;
    max-height: 46px !important;
    padding: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .mode-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: auto !important;
    max-height: 520px !important;
    padding: 10px !important;
    gap: 8px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head {
    min-height: 0 !important;
    padding: 8px !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-actions button,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps {
    gap: 5px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps span {
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-expert-panel {
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-expert-panel article {
    padding: 7px 8px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid button {
    min-height: 34px !important;
    padding: 6px 8px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 !important;
    max-height: 520px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    max-height: 112px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    position: sticky !important;
    top: 14px !important;
    right: auto !important;
    width: 100% !important;
    max-height: calc(100vh - 128px) !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) #deliveryOrderPanel {
    max-height: 244px !important;
    overflow: auto !important;
  }
}

/* Desktop template height hard stop v10 EOF: beat skin-specific tall-panel rules. */
@media (min-width: 1100px) {
  :root[data-active-page="templates"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    align-content: start !important;
    padding-bottom: 20px !important;
  }

  :root[data-active-page="templates"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="clean"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="cute"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="pro"] .template-view-switch {
    position: static !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Desktop regular-create density v11: make the common PC workbench feel commercial. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-rows: 44px minmax(0, auto) !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel {
    grid-row: 1 / span 2 !important;
    padding: 7px !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row {
    grid-row: 1 !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row button {
    min-height: 36px !important;
    height: 36px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-row: 2 !important;
    gap: 8px !important;
    max-height: 560px !important;
    padding: 12px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) textarea#prompt {
    height: 142px !important;
    min-height: 132px !important;
    max-height: 158px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    max-height: 142px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    gap: 7px !important;
    max-height: 334px !important;
    padding: 8px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-head {
    min-height: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-head small,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card small,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel small,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    gap: 7px !important;
    max-height: 218px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel {
    min-height: 0 !important;
    padding: 7px 8px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs button,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-chips button,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions button {
    min-height: 29px !important;
    height: 29px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions {
    margin-top: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    max-height: 96px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    top: 58px !important;
    max-height: calc(100vh - 112px) !important;
  }
}

/* Desktop pro-skin control deck v12: professional is a real tech workbench, not recolored cute. */
@media (min-width: 1100px) {
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 276px minmax(540px, 1fr) 372px !important;
    grid-template-rows: 46px minmax(0, auto) !important;
    gap: 12px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    height: 46px !important;
    max-height: 46px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel button {
    height: 32px !important;
    min-height: 32px !important;
    justify-content: center !important;
    padding: 0 6px !important;
    text-align: center !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    max-height: 520px !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow: auto !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.42), rgba(2, 6, 23, 0.72)),
      rgba(2, 6, 23, 0.88) !important;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.06) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-card {
    min-height: 42px !important;
    padding: 7px 9px !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
    background: rgba(15, 23, 42, 0.76) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-card strong {
    font-size: 12px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-card small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: rgba(191, 219, 254, 0.66) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 !important;
    max-height: 560px !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.72)),
      rgba(2, 6, 23, 0.9) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(132px, 0.42fr) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-understanding-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    top: 52px !important;
    width: 100% !important;
    border-color: rgba(56, 189, 248, 0.24) !important;
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.5), rgba(2, 6, 23, 0.88)),
      rgba(2, 6, 23, 0.94) !important;
  }
}

/* Desktop create command-room v13: remove PC gaps and make each skin a different workstation. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    align-items: start !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box {
    margin-top: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: minmax(264px, 0.26fr) minmax(620px, 1fr) minmax(320px, 0.34fr) !important;
    grid-template-rows: 46px auto auto !important;
    gap: 12px !important;
    max-width: 1288px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    max-height: 456px !important;
    padding: 9px !important;
    gap: 7px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head small,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-focus,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-grid {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps span {
    min-height: 0 !important;
    padding: 7px !important;
    line-height: 1.28 !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-expert-panel {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-expert-panel article {
    min-height: 0 !important;
    padding: 7px 8px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-expert-panel small {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid button {
    min-height: 38px !important;
    padding: 6px 7px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-type-grid button:nth-child(n + 7) {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 !important;
    max-height: 318px !important;
    padding: 12px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    height: 180px !important;
    min-height: 170px !important;
    max-height: 190px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start !important;
    max-height: 132px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 3 !important;
    top: 16px !important;
    max-height: calc(100vh - 118px) !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 228px minmax(620px, 1fr) 318px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-height: 430px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: minmax(660px, 1fr) 332px !important;
    grid-template-rows: 48px auto auto !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    height: 48px !important;
    max-height: 48px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    top: 64px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    display: none !important;
  }
}

/* Desktop professional brief v14: default view should be choices first, explanations later. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed {
    max-height: 366px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-expert-panel,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-brief-focus,
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-brief-grid {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-type-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    order: 3 !important;
    max-height: 150px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-type-grid button {
    min-height: 40px !important;
  }
}

/* Prompt evidence v15: make the first glance prove that user input changed the draft. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-preview {
    grid-template-columns: minmax(150px, 0.24fr) minmax(0, 1fr) minmax(106px, 0.18fr) !important;
    align-items: stretch !important;
    align-content: start !important;
    max-height: 136px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-main {
    order: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-proof {
    order: 1 !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 4px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-proof-card {
    min-height: 28px !important;
    padding: 4px 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-proof-card small {
    white-space: nowrap !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary {
    order: 3 !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-height: 34px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary-card {
    min-height: 30px !important;
    padding: 3px 5px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary-card small {
    max-height: 1.2em !important;
    -webkit-line-clamp: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-diff {
    order: 2 !important;
    grid-column: 3 !important;
    align-content: start !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-diff em:nth-child(n + 4) {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-professional {
    order: 4 !important;
    grid-column: 1 / -1 !important;
  }
}

/* Desktop command center v16: PC layout must read as tool rail + brief + submit console. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: minmax(188px, 0.18fr) minmax(560px, 1fr) minmax(352px, 0.34fr) !important;
    grid-template-rows: auto 44px minmax(0, auto) auto !important;
    gap: 12px !important;
    max-width: 1260px !important;
    align-items: start !important;
  }

  :root[data-active-page="create"] .panel.composer > .section-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .creation-mode-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: 44px !important;
    max-height: 44px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel button {
    min-height: 40px !important;
    padding: 6px 10px !important;
    display: grid !important;
    place-items: center !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .mode-row {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    height: auto !important;
    max-height: none !important;
    align-self: start !important;
    position: sticky !important;
    top: 84px !important;
    z-index: 2 !important;
  }

  :root[data-active-page="create"] .panel.composer .mode-row button {
    min-height: 42px !important;
    padding: 8px 10px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    border-radius: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .track-panel {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-height: 312px !important;
    overflow: auto !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-card {
    min-height: 42px !important;
    padding: 7px 9px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-card small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 / span 2 !important;
    max-height: 486px !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"] .panel.composer textarea#prompt {
    min-height: 118px !important;
    height: 128px !important;
    max-height: 150px !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick {
    max-height: 210px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 5 !important;
    max-height: 136px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 3 / span 3 !important;
    position: sticky !important;
    top: 84px !important;
    max-height: calc(100vh - 112px) !important;
    overflow: auto !important;
    align-self: start !important;
  }

  :root[data-active-page="create"] .panel.composer #generateBtn {
    order: -5 !important;
    min-height: 52px !important;
    font-size: 15px !important;
  }

  :root[data-active-page="create"] .panel.composer #deliveryOrderPanel {
    order: -4 !important;
  }

  :root[data-active-page="create"] .panel.composer .generation-settings-panel,
  :root[data-active-page="create"] .panel.composer .pricing-controls,
  :root[data-active-page="create"] .panel.composer .price-hint {
    order: 0 !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer {
    grid-template-columns: 172px minmax(620px, 1fr) 330px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer {
    grid-template-columns: 198px minmax(590px, 1fr) 352px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-columns: 216px minmax(560px, 1fr) 374px !important;
  }
}

/* Viewer delivery package v16: make result review feel like a paid handoff. */
.viewer-delivery {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.viewer-delivery-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 10px;
  align-items: stretch;
}

.viewer-delivery-status,
.viewer-delivery-checklist article {
  min-width: 0;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
}

.viewer-delivery-status span,
.viewer-delivery-checklist b {
  display: block;
  color: #0f766e;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.viewer-delivery-status strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.18;
  font-weight: 950;
}

.viewer-delivery-status small,
.viewer-delivery-checklist span {
  display: block;
  margin-top: 5px;
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

.viewer-delivery .viewer-delivery-score {
  min-height: 0;
  border-radius: 12px;
  background: #0f766e;
  color: #fff;
}

.viewer-delivery .viewer-delivery-score strong {
  font-size: 28px;
}

.viewer-delivery .viewer-delivery-score span {
  color: rgba(255, 255, 255, 0.86);
}

.viewer-delivery-quick {
  grid-template-columns: 1.05fr 0.92fr 1.08fr !important;
}

.viewer-delivery-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.viewer-delivery-package {
  padding: 8px 10px !important;
}

.viewer-delivery-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.placeholder-viewer .viewer-delivery-status,
.placeholder-viewer .viewer-delivery-checklist article {
  border-color: rgba(245, 158, 11, 0.26);
  background: #fffbeb;
}

.placeholder-viewer .viewer-delivery-status span,
.placeholder-viewer .viewer-delivery-checklist b {
  color: #b45309;
}

.placeholder-viewer .viewer-delivery .viewer-delivery-score {
  background: #f59e0b;
}

.placeholder-viewer .viewer-delivery-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.placeholder-viewer .viewer-delivery-hero.placeholder {
  grid-template-columns: minmax(0, 1fr) 76px !important;
}

.placeholder-viewer .viewer-delivery-hero.placeholder .viewer-delivery-score {
  min-height: 64px !important;
  padding: 8px 6px !important;
}

.placeholder-viewer .viewer-delivery-hero.placeholder .viewer-delivery-score strong {
  font-size: 17px !important;
  line-height: 1.05 !important;
}

.placeholder-viewer .viewer-delivery-hero.placeholder .viewer-delivery-score span {
  margin-top: 3px !important;
  font-size: 10px !important;
}

@media (max-width: 720px) {
  .viewer-delivery-hero,
  .viewer-delivery-checklist,
  .viewer-delivery-quick,
  .viewer-delivery-actions {
    grid-template-columns: 1fr !important;
  }

  .placeholder-viewer .viewer-delivery-hero.placeholder {
    grid-template-columns: minmax(0, 1fr) 72px !important;
  }
}

/* Desktop command center v16b: beat older skin-specific non-professional rules. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: minmax(188px, 0.18fr) minmax(560px, 1fr) minmax(352px, 0.34fr) !important;
    grid-template-rows: auto 44px minmax(0, auto) auto auto !important;
    gap: 12px !important;
    max-width: 1260px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 172px minmax(620px, 1fr) 330px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 198px minmax(590px, 1fr) 352px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 216px minmax(560px, 1fr) 374px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: 1fr !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-height: 312px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 / span 2 !important;
    max-height: 486px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 5 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 3 / span 3 !important;
    max-height: calc(100vh - 112px) !important;
  }
}

/* Desktop command center v18: de-overlap the PC workbench and reduce visual noise. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    grid-template-rows: auto 44px minmax(0, auto) auto auto !important;
    row-gap: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box {
    max-height: 540px !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick {
    grid-template-columns: minmax(178px, 0.55fr) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head {
    padding: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs button {
    min-height: 30px !important;
    padding: 0 10px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-action-board {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto auto !important;
    gap: 7px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-content: start !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-direction-card {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 34px !important;
    padding: 7px 9px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-panel {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"] .panel.composer .starter-field-panel {
    min-height: 118px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-title small,
  :root[data-active-page="create"] .panel.composer .starter-field-panel small,
  :root[data-active-page="create"] .panel.composer .starter-direction-card small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-variants,
  :root[data-active-page="create"] .panel.composer .starter-field-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer .starter-field-chips button {
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-next-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
    position: static !important;
    z-index: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-next-actions button {
    min-height: 32px !important;
    height: 32px !important;
    line-height: 1.1 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-open {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-height: 38px !important;
    margin-top: 8px !important;
    position: static !important;
    align-self: start !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-open small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight {
    max-height: 118px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack {
    padding: 10px !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-order-grid {
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .generation-settings-panel {
    max-height: 96px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer .blank-starter-quick {
    grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr) !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer .blank-starter-quick {
    grid-template-columns: minmax(188px, 0.58fr) minmax(0, 1fr) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .blank-starter-quick {
    grid-template-columns: minmax(196px, 0.48fr) minmax(0, 1fr) !important;
  }
}

/* Desktop command center v18b: override older non-professional one-column starter rules. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel {
    grid-column: 2 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

/* Desktop command center v19: make the PC first fold readable and action-led. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel {
    grid-column: 1 / 3 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    grid-row: 2 / span 4 !important;
  }

  :root[data-active-page="create"] .panel.composer #generateBtn {
    min-height: 58px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head {
    grid-template-columns: 1fr !important;
    min-height: 42px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head button {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"] .panel.composer .starter-field-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-variants,
  :root[data-active-page="create"] .panel.composer .starter-field-chips,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-variants,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-chips,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-variants,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-chips,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-variants,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-chips,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-variants,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-chips {
    grid-column: 1 !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer .starter-field-chips button {
    width: 100% !important;
    min-width: 0 !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-quick-variants,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-field-chips {
    grid-template-columns: 1fr !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-action-board {
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.12), 0 16px 34px rgba(2, 6, 23, 0.22) !important;
  }
}

/* Desktop command center v20: make the pro skin a coherent dark control console. */
@media (min-width: 1100px) {
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-action-board,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-direction-card,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-field-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-field-open,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel {
    border-color: rgba(56, 189, 248, 0.24) !important;
    background: rgba(2, 6, 23, 0.82) !important;
    color: #dbeafe !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight *,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-action-board *,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-field-open * {
    color: inherit !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight button,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-action-board button,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-field-open {
    border-color: rgba(125, 211, 252, 0.28) !important;
    background: rgba(15, 23, 42, 0.88) !important;
    color: #e0f2fe !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-understanding,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-understanding-main,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-understanding-strip span,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-compare div {
    border-color: rgba(56, 189, 248, 0.18) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: #dbeafe !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack .delivery-order-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack .generation-settings-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack .pricing-controls,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack .price-hint {
    border-color: rgba(56, 189, 248, 0.2) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: #dbeafe !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .generate-btn {
    border-color: rgba(125, 211, 252, 0.44) !important;
    background: linear-gradient(135deg, #38bdf8, #14b8a6) !important;
    color: #00111c !important;
    box-shadow: 0 18px 38px rgba(20, 184, 166, 0.28) !important;
  }
}

/* Desktop command center v21: keep direction choices readable on wide screens. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer .starter-quick-tabs,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-quick-tabs,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-quick-tabs,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-quick-tabs {
    grid-template-columns: repeat(2, minmax(88px, 1fr)) !important;
    gap: 6px !important;
    height: auto !important;
    align-items: stretch !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs button,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-quick-tabs button,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-quick-tabs button,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-quick-tabs button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"] .panel.composer .starter-field-panel {
    min-height: 112px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs {
    grid-template-columns: repeat(2, minmax(88px, 1fr)) !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs button,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs button,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-tabs button {
    min-height: 30px !important;
    width: 100% !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

/* Desktop command center v22: turn the PC create page into a calm three-column cockpit. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .app-shell,
  :root[data-active-page="create"][data-skin="clean"] .app-shell,
  :root[data-active-page="create"][data-skin="cute"] .app-shell,
  :root[data-active-page="create"][data-skin="pro"] .app-shell {
    width: min(100% - 48px, 1320px) !important;
  }

  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 220px minmax(610px, 1fr) 360px !important;
    grid-template-rows: auto 48px minmax(0, auto) minmax(0, auto) !important;
    gap: 12px 14px !important;
    max-width: 1260px !important;
    align-items: start !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 196px minmax(660px, 1fr) 330px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 220px minmax(620px, 1fr) 350px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 232px minmax(600px, 1fr) 374px !important;
  }

  :root[data-active-page="create"] .panel.composer .section-title,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .section-title,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .section-title,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 6px !important;
    border-radius: 14px !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel button {
    min-height: 34px !important;
    font-size: 13px !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel small,
  :root[data-active-page="create"] .panel.composer .track-card small,
  :root[data-active-page="create"] .panel.composer .starter-direction-card small,
  :root[data-active-page="create"] .panel.composer .starter-style-title small,
  :root[data-active-page="create"] .panel.composer .starter-field-panel small,
  :root[data-active-page="create"] .panel.composer .starter-field-open small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .mode-row,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  :root[data-active-page="create"] .panel.composer .mode-row button {
    min-height: 34px !important;
    padding: 0 10px !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  :root[data-active-page="create"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .track-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-height: 332px !important;
    padding: 8px !important;
    gap: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-card {
    min-height: 36px !important;
    padding: 0 11px !important;
    border-radius: 11px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-card strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 / 5 !important;
    max-height: 580px !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"] .panel.composer textarea#prompt {
    min-height: 130px !important;
    max-height: 150px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-preview {
    grid-template-columns: minmax(132px, 0.34fr) minmax(0, 1fr) auto !important;
    max-height: 86px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-proof,
  :root[data-active-page="create"] .panel.composer .prompt-live-diff,
  :root[data-active-page="create"] .panel.composer .prompt-live-professional,
  :root[data-active-page="create"] .panel.composer .prompt-live-missing {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick {
    grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr) !important;
    max-height: 336px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-action-board {
    gap: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-next-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-next-actions button:nth-child(n+3) {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 2 !important;
    max-height: 240px !important;
    padding: 10px !important;
    position: sticky !important;
    top: 88px !important;
  }

  :root[data-active-page="create"] .panel.composer #generateBtn {
    min-height: 62px !important;
    font-size: 17px !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-order-panel {
    max-height: 152px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    grid-column: 3 !important;
    grid-row: 3 / 5 !important;
    margin: 0 !important;
    max-height: 416px !important;
    overflow: auto !important;
    position: sticky !important;
    top: 344px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .preflight-head,
  :root[data-active-page="create"] .panel.composer .prompt-compare,
  :root[data-active-page="create"] .panel.composer .prompt-understanding-grid,
  :root[data-active-page="create"] .panel.composer .prompt-understanding-actions .secondary {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-understanding,
  :root[data-active-page="create"] .panel.composer .prompt-understanding-main,
  :root[data-active-page="create"] .panel.composer .prompt-understanding-strip {
    margin: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-understanding-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-understanding-actions button {
    min-width: 0 !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Desktop command center v22b: beat older skin-specific verbose rules. */
@media (min-width: 1100px) {
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .track-panel .track-card small,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .track-panel .track-card small,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .track-panel .track-card small,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel .track-card small,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel .track-card small,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel .track-card small {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-preview .prompt-live-proof,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-preview .prompt-live-proof,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-preview .prompt-live-proof,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-preview .prompt-live-diff,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-preview .prompt-live-diff,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-preview .prompt-live-diff,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-preview .prompt-live-professional,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-preview .prompt-live-professional,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-preview .prompt-live-professional {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-preflight .prompt-understanding-grid,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-preflight .prompt-understanding-grid,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight .prompt-understanding-grid,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-preflight .prompt-compare,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-preflight .prompt-compare,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight .prompt-compare,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-preflight .preflight-head,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-preflight .preflight-head,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight .preflight-head {
    display: none !important;
  }
}

/* Desktop template cockpit v23: make starter templates feel like a product shelf, not a sparse form. */
@media (min-width: 1100px) {
  :root[data-active-page="templates"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-panel {
    grid-template-columns: 220px minmax(760px, 1fr) 326px !important;
    gap: 14px !important;
    width: min(100% - 48px, 1320px) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
  }

  :root[data-active-page="templates"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="clean"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="cute"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="pro"] .template-view-switch {
    width: 220px !important;
    gap: 8px !important;
  }

  :root[data-active-page="templates"] .template-workbench-grid,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-grid,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-grid,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-grid,
  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-content: start !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong {
    grid-column: 1 / -1 !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong .template-choice-row,
  :root[data-active-page="templates"] .template-choice-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  :root[data-active-page="templates"] .template-choice-row button {
    min-height: 60px !important;
    padding: 9px 10px !important;
  }

  :root[data-active-page="templates"] .template-choice-row button strong,
  :root[data-active-page="templates"] .template-choice-row button small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="templates"] #templateBriefPanel,
  :root[data-active-page="templates"][data-skin="clean"] #templateBriefPanel,
  :root[data-active-page="templates"][data-skin="cute"] #templateBriefPanel,
  :root[data-active-page="templates"][data-skin="pro"] #templateBriefPanel {
    max-height: 392px !important;
    padding: 10px !important;
  }

  :root[data-active-page="templates"] .template-brief-launch {
    grid-template-columns: 1fr !important;
  }

  :root[data-active-page="templates"] .template-brief-panel button[data-template-brief-apply] {
    min-height: 44px !important;
  }
}

/* Desktop cockpit v24: keep professional PC mode from collapsing into the left rail. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: 264px minmax(580px, 1fr) 326px !important;
    grid-template-rows: 52px minmax(0, auto) minmax(0, auto) !important;
    gap: 12px !important;
    max-width: 1264px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 52px !important;
    max-height: 52px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel button {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .mode-row {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    width: 100% !important;
    max-height: 462px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-height: 318px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-preflight,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .prompt-preflight {
    grid-column: 2 !important;
    grid-row: 3 !important;
    max-height: 132px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / 4 !important;
    width: 100% !important;
    max-height: calc(100vh - 128px) !important;
    overflow: auto !important;
    position: sticky !important;
    top: 84px !important;
  }

  :root[data-active-page="templates"] .template-brief-panel,
  :root[data-active-page="templates"][data-skin="pro"] .template-brief-panel {
    color: var(--text) !important;
  }

  :root[data-active-page="templates"] .template-brief-launch {
    background: rgba(255, 255, 255, 0.92) !important;
  }
}

/* Commercial polish v25: make paid decision info and template cards easier to trust on desktop. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    max-height: 330px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-panel {
    max-height: 226px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-decision-board,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-grid {
    gap: 7px !important;
  }

  :root[data-active-page="templates"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="clean"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="cute"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="pro"] .template-view-switch {
    display: grid !important;
  }

  :root[data-active-page="templates"] .template-choice-row button {
    min-height: 68px !important;
    align-content: center !important;
    gap: 4px !important;
  }

  :root[data-active-page="templates"] .template-choice-row button strong,
  :root[data-active-page="templates"] .template-choice-row button small {
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
  }

  :root[data-active-page="templates"] .template-choice-row button strong {
    -webkit-line-clamp: 1 !important;
  }

  :root[data-active-page="templates"] .template-choice-row button small {
    -webkit-line-clamp: 2 !important;
    line-height: 1.35 !important;
  }
}

/* Desktop layout cleanup v26: remove PC overlap, noisy rails and template dead space. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer > .section-title,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer > .section-title,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer > .section-title,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer > .section-title {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer {
    padding: 14px !important;
    gap: 12px !important;
  }

  :root[data-active-page="create"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .track-panel {
    max-height: 322px !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    padding: 6px !important;
    gap: 5px !important;
    align-content: start !important;
  }

  :root[data-active-page="create"] .panel.composer .track-panel::-webkit-scrollbar {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .track-card,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .track-card,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .track-card,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .track-card {
    min-height: 34px !important;
    padding: 6px 10px !important;
    align-content: center !important;
  }

  :root[data-active-page="create"] .panel.composer .track-card small,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .track-card small,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .track-card small,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .track-card small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack {
    scrollbar-width: thin !important;
  }

  :root[data-active-page="create"] .queue,
  :root[data-active-page="create"][data-skin="clean"] .queue,
  :root[data-active-page="create"][data-skin="cute"] .queue,
  :root[data-active-page="create"][data-skin="pro"] .queue {
    padding: 16px !important;
    margin-top: 14px !important;
  }

  :root[data-active-page="create"] .empty-queue {
    min-height: 84px !important;
    padding: 12px !important;
  }

  :root[data-active-page="templates"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 14px !important;
    align-items: start !important;
  }

  :root[data-active-page="templates"] .template-workbench-panel > .section-title {
    align-self: start !important;
  }

  :root[data-active-page="templates"] .template-workbench-panel > .section-title span {
    display: none !important;
  }

  :root[data-active-page="templates"] #templateBriefPanel,
  :root[data-active-page="templates"][data-skin="clean"] #templateBriefPanel,
  :root[data-active-page="templates"][data-skin="cute"] #templateBriefPanel,
  :root[data-active-page="templates"][data-skin="pro"] #templateBriefPanel {
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="templates"] .template-workbench-grid,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-grid,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-grid,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-grid {
    align-self: start !important;
  }
}

/* Template desk v27: starter view gets a compact next-step filter band on PC. */
@media (max-width: 1099px) {
  :root[data-active-page="templates"][data-template-view="starter"] .template-filter-panel {
    display: none !important;
  }
}

@media (min-width: 1100px) {
  :root[data-active-page="templates"][data-template-view="starter"] .template-filter-panel,
  :root[data-active-page="templates"][data-template-view="starter"][data-skin="clean"] .template-filter-panel,
  :root[data-active-page="templates"][data-template-view="starter"][data-skin="cute"] .template-filter-panel,
  :root[data-active-page="templates"][data-template-view="starter"][data-skin="pro"] .template-filter-panel {
    display: grid !important;
    grid-template-columns: 168px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    max-width: 1320px !important;
    min-height: 76px !important;
    padding: 14px !important;
    margin-top: 12px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-filter-panel .section-title {
    margin: 0 !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-filter-panel .section-title h3 {
    font-size: 16px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-filter-panel .section-title span {
    display: inline !important;
    font-size: 12px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-tabs button {
    min-height: 40px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"] .empty-queue {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 68px !important;
    padding: 10px 12px !important;
  }

  :root[data-active-page="create"] .empty-queue small,
  :root[data-active-page="create"] .queue-empty-steps {
    display: none !important;
  }

  :root[data-active-page="create"] .empty-queue .queue-actions {
    justify-content: end !important;
    margin: 0 !important;
  }

  :root[data-active-page="create"] .empty-queue .queue-copy {
    min-height: 30px !important;
    padding: 0 12px !important;
  }
}

/* Desktop commercial layout v28: reduce PC visual noise and make templates feel like product entry points. */
@media (min-width: 1100px) {
  :root[data-active-page="templates"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-panel {
    grid-template-columns: 186px minmax(640px, 1fr) 300px !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  :root[data-active-page="templates"] .template-workbench-panel > .section-title {
    display: none !important;
  }

  :root[data-active-page="templates"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="clean"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="cute"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="pro"] .template-view-switch {
    width: 186px !important;
    gap: 7px !important;
    padding: 8px !important;
    align-self: start !important;
    background: rgba(255, 255, 255, 0.74) !important;
  }

  :root[data-active-page="templates"] .template-view-switch button {
    justify-content: flex-start !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    text-align: left !important;
    box-shadow: none !important;
  }

  :root[data-active-page="templates"] .template-view-switch button.active {
    background: linear-gradient(135deg, var(--accent), #1a968b) !important;
    color: #fff !important;
    box-shadow: 0 12px 22px rgba(15, 118, 110, 0.14) !important;
  }

  :root[data-active-page="templates"] .template-workbench-grid,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-grid,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-grid,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-grid {
    gap: 9px !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong {
    padding: 14px !important;
  }

  :root[data-active-page="templates"] .template-workbench-block > span {
    font-size: 11px !important;
  }

  :root[data-active-page="templates"] .template-workbench-block > strong {
    margin-top: 2px !important;
    font-size: 16px !important;
  }

  :root[data-active-page="templates"] .template-choice-row button {
    min-height: 56px !important;
    border-radius: 10px !important;
  }

  :root[data-active-page="templates"] #templateBriefPanel,
  :root[data-active-page="templates"][data-skin="clean"] #templateBriefPanel,
  :root[data-active-page="templates"][data-skin="cute"] #templateBriefPanel,
  :root[data-active-page="templates"][data-skin="pro"] #templateBriefPanel {
    gap: 8px !important;
    align-self: start !important;
    padding: 10px !important;
  }

  :root[data-active-page="templates"] .template-brief-primary,
  :root[data-active-page="templates"] .template-brief-value,
  :root[data-active-page="templates"] .template-brief-launch {
    gap: 4px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  :root[data-active-page="templates"] .template-brief-primary strong,
  :root[data-active-page="templates"] .template-brief-value strong {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  :root[data-active-page="templates"] .template-brief-primary small,
  :root[data-active-page="templates"] .template-brief-value strong,
  :root[data-active-page="templates"] .template-brief-launch small {
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  :root[data-active-page="templates"] .template-brief-flow {
    display: grid !important;
    gap: 7px !important;
  }

  :root[data-active-page="templates"] .template-brief-flow article {
    display: grid !important;
    grid-template-columns: 24px minmax(54px, auto) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
  }

  :root[data-active-page="templates"] .template-brief-flow article b {
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
  }

  :root[data-active-page="templates"] .template-brief-flow article small {
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-filter-panel,
  :root[data-active-page="templates"][data-template-view="starter"][data-skin="clean"] .template-filter-panel,
  :root[data-active-page="templates"][data-template-view="starter"][data-skin="cute"] .template-filter-panel,
  :root[data-active-page="templates"][data-template-view="starter"][data-skin="pro"] .template-filter-panel {
    max-width: 1320px !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
    margin-top: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: 236px minmax(610px, 1fr) 304px !important;
    max-width: 1240px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    max-height: 420px !important;
    padding: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack {
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .delivery-order-main {
    grid-template-columns: minmax(0, 1fr) 64px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  :root[data-active-page="create"] #deliveryOrderPanel,
  :root[data-active-page="create"][data-skin="clean"] #deliveryOrderPanel,
  :root[data-active-page="create"][data-skin="cute"] #deliveryOrderPanel,
  :root[data-active-page="create"][data-skin="pro"] #deliveryOrderPanel {
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .delivery-order-main strong {
    font-size: 14px !important;
  }

  :root[data-active-page="create"] .delivery-order-main small {
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .delivery-order-score {
    box-sizing: border-box !important;
    min-width: 42px !important;
    width: 42px !important;
    max-width: 42px !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 3px 4px !important;
  }

  :root[data-active-page="create"] .delivery-order-score b {
    font-size: 20px !important;
    line-height: 20px !important;
  }

  :root[data-active-page="create"] .delivery-decision-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .delivery-decision-board article {
    min-height: 50px !important;
    padding: 7px 8px !important;
  }

  :root[data-active-page="create"] .delivery-decision-board b,
  :root[data-active-page="create"] .delivery-decision-board span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root[data-active-page="create"] .delivery-decision-board span {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  :root[data-active-page="create"] .delivery-order-grid article {
    padding: 8px 9px !important;
  }

  :root[data-active-page="create"] .delivery-order-actions button {
    min-height: 36px !important;
    border-radius: 10px !important;
  }
}

/* Template monetization v29: show sellable packages on desktop without adding another heavy screen. */
@media (max-width: 1099px) {
  :root[data-active-page="templates"][data-template-view="starter"] .package-panel {
    display: none !important;
  }
}

@media (min-width: 1100px) {
  :root[data-active-page="templates"][data-template-view="starter"] .package-panel,
  :root[data-active-page="templates"][data-template-view="starter"][data-skin="clean"] .package-panel,
  :root[data-active-page="templates"][data-template-view="starter"][data-skin="cute"] .package-panel,
  :root[data-active-page="templates"][data-template-view="starter"][data-skin="pro"] .package-panel {
    display: grid !important;
    grid-template-columns: 168px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    max-width: 1320px !important;
    min-height: 88px !important;
    padding: 12px 14px !important;
    margin-top: 10px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .package-panel .section-title {
    margin: 0 !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .package-panel .section-title h3 {
    font-size: 16px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .package-panel .section-title span {
    display: inline !important;
    font-size: 12px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .deliverable-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .deliverable-grid article {
    min-height: 58px !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .deliverable-grid article strong,
  :root[data-active-page="templates"][data-template-view="starter"] .deliverable-grid article small,
  :root[data-active-page="templates"][data-template-view="starter"] .deliverable-grid article em {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .deliverable-grid article strong {
    font-size: 13px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .deliverable-grid article small {
    font-size: 11px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .deliverable-grid article em {
    font-size: 10px !important;
  }
}

/* Desktop prompt clarity pass v30: make the starter rail visible and let skin switch change structure, not just color. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-auto-rows: min-content !important;
    align-content: start !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) #promptToolbar,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) #promptToolbar,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) #promptToolbar,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) #promptToolbar {
    order: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    order: 1 !important;
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) textarea#prompt,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) textarea#prompt,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) textarea#prompt,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) textarea#prompt {
    order: 2 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    order: 3 !important;
    display: grid !important;
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    order: 4 !important;
    grid-column: 1 / -1 !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(132px, 0.28fr) minmax(0, 1fr) minmax(104px, 0.18fr) !important;
    max-height: 160px !important;
    border-radius: 18px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(152px, 0.26fr) minmax(0, 1fr) minmax(132px, 0.24fr) !important;
    max-height: 206px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-professional {
    display: block !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-diff {
    display: flex !important;
  }
}

/* Desktop diagnosis rail v31: keep preflight on the right rail while starter buttons stay close to the prompt. */
@media (min-width: 1100px) {
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    order: initial !important;
    grid-column: 3 !important;
    grid-row: 3 / 5 !important;
    align-self: start !important;
    display: block !important;
    max-height: 416px !important;
    overflow: auto !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    display: none !important;
  }
}

/* Desktop skin differentiation v32: make clean/cute/pro read as different workbenches. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    align-items: start !important;
    grid-auto-rows: min-content !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    align-content: start !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-echo {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-echo > div {
    min-width: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.7) !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-echo b {
    display: block !important;
    color: var(--accent) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-echo p {
    margin: 4px 0 0 !important;
    color: var(--ink) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 208px minmax(0, 1fr) 330px !important;
    gap: 10px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: 124px !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-proof,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-professional,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-diff,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick {
    grid-template-columns: 1fr !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 244px minmax(0, 1fr) 296px !important;
    gap: 14px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-template-columns: minmax(0, 1fr) minmax(228px, 0.42fr) !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
    border-radius: 18px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(126px, 0.28fr) minmax(0, 1fr) minmax(114px, 0.22fr) !important;
    max-height: 172px !important;
    border-radius: 18px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-professional,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-proof {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 246px minmax(0, 1fr) 340px !important;
    gap: 12px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-template-columns: minmax(0, 1fr) minmax(252px, 0.42fr) !important;
    padding: 14px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick {
    grid-template-columns: minmax(176px, 0.44fr) minmax(0, 1fr) !important;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.72)),
      rgba(2, 6, 23, 0.9) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(152px, 0.26fr) minmax(0, 1fr) minmax(136px, 0.24fr) !important;
    max-height: 214px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-professional {
    display: block !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-diff {
    display: flex !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-proof {
    display: grid !important;
  }
}

/* Desktop layout cleanup v33: use the PC canvas, remove nested scrollbars, and prevent right-rail overlaps. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .app-shell,
  :root[data-active-page="create"][data-skin="clean"] .app-shell,
  :root[data-active-page="create"][data-skin="cute"] .app-shell,
  :root[data-active-page="create"][data-skin="pro"] .app-shell {
    width: min(100% - 48px, 1480px) !important;
    max-width: 1480px !important;
    padding-inline: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    width: 100% !important;
    max-width: 1480px !important;
    grid-template-columns: 236px minmax(720px, 1fr) 356px !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 220px minmax(760px, 1fr) 340px !important;
    gap: 12px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 248px minmax(740px, 1fr) 360px !important;
    gap: 16px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 252px minmax(760px, 1fr) 368px !important;
    gap: 14px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    grid-template-columns: minmax(0, 0.9fr) minmax(240px, 1.1fr) !important;
  }

  :root[data-active-page="create"] .panel.composer textarea#prompt,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer textarea#prompt,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer textarea#prompt,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer textarea#prompt {
    min-height: 116px !important;
    max-height: 142px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr) !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(156px, 0.3fr) minmax(0, 1fr) minmax(140px, 0.22fr) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(166px, 0.28fr) minmax(0, 1fr) minmax(156px, 0.24fr) !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    align-self: start !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-order-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-order-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-order-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-order-panel,
  :root[data-active-page="create"] .panel.composer .delivery-stack #deliveryOrderPanel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-stack #deliveryOrderPanel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-stack #deliveryOrderPanel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack #deliveryOrderPanel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack .template-delivery-sheet,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-stack .template-delivery-sheet,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-stack .template-delivery-sheet,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack .template-delivery-sheet {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-order-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-order-grid > * {
    min-height: 58px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .panel.composer .settings-summary,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .settings-summary,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .settings-summary {
    min-height: 58px !important;
    align-items: start !important;
    grid-template-columns: 1fr !important;
  }

  :root[data-active-page="create"] .panel.composer .settings-summary strong {
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  :root[data-active-page="create"] .panel.composer .settings-summary small,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .settings-summary small,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .settings-summary small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    align-self: start !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    grid-row: 3 !important;
    align-self: start !important;
    margin-top: 154px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    margin-top: 172px !important;
  }
}

/* Desktop workbench cleanup v35: final PC overrides after legacy rescue blocks. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel {
    grid-column-start: 1 !important;
    grid-column-end: 2 !important;
    grid-row-start: 1 !important;
    grid-row-end: 2 !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-content: start !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row {
    grid-column-start: 1 !important;
    grid-column-end: 2 !important;
    grid-row-start: 2 !important;
    grid-row-end: 3 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    align-items: start !important;
    grid-template-columns: 158px minmax(0, 1fr) !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 78px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-echo > div,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-summary-card,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-proof-card {
    background: rgba(8, 21, 38, 0.92) !important;
    border-color: rgba(56, 189, 248, 0.28) !important;
    color: rgba(226, 244, 255, 0.92) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-echo p,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-summary-card small,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-proof-card small {
    color: rgba(226, 244, 255, 0.78) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight {
    background: rgba(7, 19, 36, 0.96) !important;
    border-color: rgba(56, 189, 248, 0.24) !important;
    color: rgba(226, 244, 255, 0.9) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight * {
    color: inherit !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    max-height: 232px !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-direction-card {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel {
    grid-row: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel {
    grid-row: 2 !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight {
    background: rgba(7, 19, 36, 0.96) !important;
    border-color: rgba(56, 189, 248, 0.24) !important;
    color: rgba(226, 244, 255, 0.9) !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    grid-template-columns: 1fr !important;
  }

  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions {
    grid-column: 1 / -1 !important;
  }

  :root[data-active-page="create"] .app-shell,
  :root[data-active-page="create"][data-skin="clean"] .app-shell,
  :root[data-active-page="create"][data-skin="cute"] .app-shell,
  :root[data-active-page="create"][data-skin="pro"] .app-shell {
    width: min(calc(100vw - 96px), 1400px) !important;
    max-width: 1400px !important;
  }

  :root[data-active-page="create"] .panel.composer,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 214px minmax(0, 1fr) 322px !important;
    grid-template-rows: auto auto auto 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
    max-width: 1400px !important;
  }

  :root[data-active-page="create"][data-skin="cute"] .panel.composer,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 224px minmax(0, 1fr) 328px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 226px minmax(0, 1fr) 330px !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .creation-mode-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 7px !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel button,
  :root[data-active-page="create"] .panel.composer .mode-row button {
    min-height: 38px !important;
    padding: 0 12px !important;
    justify-content: start !important;
    text-align: left !important;
    border-radius: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .creation-mode-panel small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .mode-row,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .mode-row {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  :root[data-active-page="create"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .track-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .track-panel,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    grid-column: 1 !important;
    grid-row: 3 / span 2 !important;
    width: 100% !important;
    margin-top: 0 !important;
    max-height: none !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-box,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-column: 2 !important;
    grid-row: 1 / span 4 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .blank-starter-quick:not(.hidden),
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .blank-starter-quick:not(.hidden) {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-head small,
  :root[data-active-page="create"] .panel.composer .starter-direction-card small,
  :root[data-active-page="create"] .panel.composer .starter-style-title small,
  :root[data-active-page="create"] .panel.composer .starter-field-panel small {
    display: none !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs,
  :root[data-active-page="create"] .panel.composer .starter-quick-variants,
  :root[data-active-page="create"] .panel.composer .starter-field-chips,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .starter-style-panel .starter-quick-variants,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .starter-style-panel .starter-quick-variants,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .starter-style-panel .starter-quick-variants {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-quick-tabs button,
  :root[data-active-page="create"] .panel.composer .starter-quick-variants button,
  :root[data-active-page="create"] .panel.composer .starter-field-chips button {
    min-height: 32px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-action-board {
    grid-template-columns: 154px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-direction-card {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    min-height: 0 !important;
    padding: 10px !important;
    align-content: center !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel,
  :root[data-active-page="create"] .panel.composer .starter-field-panel {
    grid-column: 2 !important;
    min-height: 0 !important;
    gap: 7px !important;
    padding: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-style-panel {
    grid-row: 1 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-panel {
    grid-row: 2 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-next-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  :root[data-active-page="create"] .panel.composer .starter-field-open {
    min-height: 40px !important;
    padding: 8px 12px !important;
  }

  :root[data-active-page="create"] .panel.composer textarea#prompt {
    min-height: 96px !important;
    max-height: 118px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-preview,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(128px, 0.23fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    max-height: 204px !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-preview {
    max-height: 218px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary-card,
  :root[data-active-page="create"] .panel.composer .prompt-live-proof-card {
    min-height: 42px !important;
    padding: 7px 8px !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-live-summary-card small,
  :root[data-active-page="create"] .panel.composer .prompt-live-proof-card small,
  :root[data-active-page="create"] .panel.composer .prompt-live-main em,
  :root[data-active-page="create"] .panel.composer .prompt-live-echo p,
  :root[data-active-page="create"] .panel.composer .prompt-live-professional p,
  :root[data-active-page="create"] .panel.composer .prompt-live-missing em {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-proof,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-diff,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-professional,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .prompt-live-missing,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-proof,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-live-professional,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-proof,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-echo,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-diff,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-professional,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-missing {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-live-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  :root[data-active-page="create"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .delivery-stack,
  :root[data-active-page="create"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="clean"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 4 !important;
    gap: 10px !important;
  }

  :root[data-active-page="create"] .panel.composer #generateBtn {
    min-height: 56px !important;
    order: -3 !important;
  }

  :root[data-active-page="create"] .panel.composer #deliveryOrderPanel {
    order: -2 !important;
  }

  :root[data-active-page="create"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"][data-skin="cute"] .panel.composer .prompt-preflight,
  :root[data-active-page="create"][data-skin="pro"] .panel.composer .prompt-preflight {
    grid-column: auto !important;
    grid-row: auto !important;
    order: -1 !important;
    max-height: 230px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .queue {
    width: min(calc(100vw - 96px), 1400px) !important;
    max-width: 1400px !important;
    margin-inline: auto !important;
  }
}

/* Desktop create workbench polish v37: last-word overrides. */
@media (min-width: 1100px) {
  html[data-active-page="create"] .app-shell {
    width: min(calc(100vw - 72px), 1480px) !important;
    max-width: 1480px !important;
  }

  html[data-active-page="create"] .panel.composer {
    width: min(calc(100vw - 72px), 1480px) !important;
    max-width: 1480px !important;
    grid-template-columns: 224px minmax(620px, 1fr) 338px !important;
    gap: 14px !important;
  }

  html[data-active-page="create"] .panel.composer .blank-starter-quick:not(.hidden) {
    display: grid !important;
    grid-template-columns: 164px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  html[data-active-page="create"] .panel.composer .starter-quick-head {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 10px !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 12px !important;
    background: rgba(8, 21, 38, 0.48) !important;
  }

  html[data-active-page="create"] .panel.composer .starter-quick-tabs {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  html[data-active-page="create"] .panel.composer .starter-action-board {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html[data-active-page="create"] .panel.composer .starter-direction-card {
    display: none !important;
  }

  html[data-active-page="create"] .panel.composer .starter-style-panel,
  html[data-active-page="create"] .panel.composer .starter-field-panel,
  html[data-active-page="create"] .panel.composer .starter-next-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  html[data-active-page="create"] .panel.composer .starter-style-panel {
    grid-row: 1 !important;
  }

  html[data-active-page="create"] .panel.composer .starter-field-panel {
    grid-row: 2 !important;
  }

  html[data-active-page="create"] .panel.composer .starter-next-actions {
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 8px !important;
  }

  html[data-active-page="create"] .panel.composer .starter-quick-variants,
  html[data-active-page="create"] .panel.composer .starter-field-chips {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html[data-active-page="create"] .panel.composer .starter-quick-tabs button,
  html[data-active-page="create"] .panel.composer .starter-quick-variants button,
  html[data-active-page="create"] .panel.composer .starter-field-chips button {
    min-height: 34px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-active-page="create"] .panel.composer textarea#prompt {
    min-height: 112px !important;
    max-height: 132px !important;
  }

  html[data-active-page="create"] .panel.composer .prompt-live-preview {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;
    max-height: 150px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  html[data-active-page="create"] .panel.composer .prompt-live-main {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    padding: 8px !important;
  }

  html[data-active-page="create"] .panel.composer .prompt-live-summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html[data-active-page="create"] .panel.composer .prompt-live-diff {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] .panel.composer .prompt-live-diff em {
    min-width: 0 !important;
    max-width: 24% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-active-page="create"] .panel.composer .prompt-live-proof,
  html[data-active-page="create"] .panel.composer .prompt-live-echo,
  html[data-active-page="create"] .panel.composer .prompt-live-professional,
  html[data-active-page="create"] .panel.composer .prompt-live-missing,
  html[data-active-page="create"] .panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  html[data-active-page="create"] .queue {
    width: min(calc(100vw - 72px), 1480px) !important;
    max-width: 1480px !important;
    padding: 14px 16px !important;
  }

  html[data-active-page="create"] .queue-toolbar button,
  html[data-active-page="create"] .queue-copy {
    min-height: 36px !important;
    border-radius: 10px !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
    background: rgba(8, 21, 38, 0.72) !important;
    color: rgba(226, 244, 255, 0.9) !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] .queue-toolbar button:first-child,
  html[data-active-page="create"] .queue-copy:not(.secondary) {
    background: linear-gradient(135deg, #16b8d8, #18d2a8) !important;
    color: #042033 !important;
  }

  html[data-active-page="create"] .empty-queue {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto !important;
    align-items: center !important;
    background: rgba(8, 21, 38, 0.56) !important;
    border-style: solid !important;
  }
}

/* Desktop create workbench polish v38: high-specificity overrides for old rescue selectors. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .app-shell {
    width: min(calc(100vw - 72px), 1480px) !important;
    max-width: 1480px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    width: min(calc(100vw - 72px), 1480px) !important;
    max-width: 1480px !important;
    grid-template-columns: 224px minmax(620px, 1fr) 338px !important;
    gap: 14px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .blank-starter-quick:not(.hidden),
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    display: grid !important;
    grid-template-columns: 164px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-head {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 10px !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 12px !important;
    background: rgba(8, 21, 38, 0.48) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-tabs {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-action-board,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-direction-card {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-style-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-next-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-style-panel {
    grid-row: 1 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-panel {
    grid-row: 2 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-next-actions {
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-variants,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-chips {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-preview,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;
    max-height: 150px !important;
    overflow: hidden !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-proof,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-echo,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-summary,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-professional,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-missing,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-preview,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: 104px !important;
    align-content: start !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px 10px !important;
    min-height: 48px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main span,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main strong,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main em {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main span {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main strong {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main em {
    grid-column: 2 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-diff {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-diff em {
    min-width: 0 !important;
    max-width: 24% !important;
    padding: 4px 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-safety-note {
    border-color: rgba(56, 189, 248, 0.18) !important;
    background: rgba(8, 21, 38, 0.62) !important;
    color: rgba(56, 189, 248, 0.92) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-list > .empty-queue {
    min-height: 78px !important;
    padding: 12px 14px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="clean"] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin="clean"] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 206px minmax(580px, 1fr) 320px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="cute"] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin="cute"] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 236px minmax(600px, 1fr) 326px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="clean"] .app-shell .panel.composer .prompt-live-preview,
  :root:root:root[data-active-page="create"][data-skin="clean"] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :root:root:root[data-active-page="create"][data-skin="cute"] .app-shell .panel.composer .prompt-live-preview,
  :root:root:root[data-active-page="create"][data-skin="cute"] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: 136px minmax(0, 1fr) !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-live-preview,
  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    grid-template-columns: 160px minmax(0, 1fr) !important;
  }
}

/* Desktop create workbench polish v39: calmer PC control deck and wider working canvas. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .app-shell {
    width: min(calc(100vw - 48px), 1520px) !important;
    max-width: 1520px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    width: min(calc(100vw - 48px), 1520px) !important;
    max-width: 1520px !important;
    grid-template-columns: 232px minmax(680px, 1fr) 332px !important;
    gap: 14px !important;
    padding: 12px !important;
    align-items: start !important;
  }

  :root:root:root[data-active-page="create"][data-skin="cute"] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin="cute"] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 248px minmax(660px, 1fr) 334px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 252px minmax(660px, 1fr) 352px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .creation-mode-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .creation-mode-panel button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .mode-row button {
    min-height: 36px !important;
    padding: 0 9px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .creation-mode-panel button small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .mode-row button small {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .mode-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .mode-row button:first-child {
    grid-column: 1 / -1 !important;
    min-height: 40px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-panel {
    max-height: 310px !important;
    overflow: hidden !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-card {
    min-height: 38px !important;
    padding: 8px 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-card small {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-box {
    min-height: 0 !important;
    max-height: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer textarea#prompt {
    min-height: 104px !important;
    max-height: 124px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .blank-starter-quick:not(.hidden),
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    grid-template-columns: minmax(172px, 0.82fr) minmax(0, 1.28fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-next-actions {
    min-height: 36px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-next-actions button {
    min-height: 36px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-stack {
    padding: 12px !important;
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    background: linear-gradient(180deg, rgba(8, 21, 38, 0.82), rgba(8, 21, 38, 0.58)) !important;
    box-shadow: 0 18px 48px rgba(2, 6, 23, 0.12) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-panel {
    max-height: none !important;
    overflow: visible !important;
  }

  :root:root:root[data-active-page="create"][data-skin="clean"] .app-shell .panel.composer .delivery-stack {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(32, 37, 34, 0.08) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer #generateBtn {
    min-height: 46px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue {
    width: min(calc(100vw - 48px), 1520px) !important;
    max-width: 1520px !important;
  }
}

/* Desktop create workbench polish v40: make live prompt understanding readable. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-preview,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    max-height: 138px !important;
    min-height: 116px !important;
    padding: 12px !important;
    align-content: start !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main {
    grid-column: 1 / -1 !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    min-height: 62px !important;
    align-items: start !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main small {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    line-height: 1.45 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main em {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    max-width: none !important;
    max-height: 42px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    overflow: hidden !important;
    line-height: 1.45 !important;
    color: var(--ink) !important;
    font-weight: 800 !important;
    text-align: left !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-diff {
    grid-column: 1 / -1 !important;
    flex-wrap: wrap !important;
    max-height: 44px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-diff em {
    flex: 0 1 auto !important;
    max-width: 32% !important;
  }
}

/* Desktop create workbench polish v41: reduce PC clutter and restore a clear workbench hierarchy. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .app-shell {
    width: min(calc(100vw - 64px), 1460px) !important;
    max-width: 1460px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    width: min(calc(100vw - 64px), 1460px) !important;
    max-width: 1460px !important;
    grid-template-columns: 212px minmax(700px, 1fr) 330px !important;
    gap: 18px !important;
    padding: 16px !important;
    border-radius: 14px !important;
    align-items: start !important;
  }

  :root:root:root[data-active-page="create"][data-skin="cute"] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin="cute"] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 226px minmax(690px, 1fr) 326px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 232px minmax(700px, 1fr) 344px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .creation-mode-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .mode-row {
    gap: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .creation-mode-panel button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .mode-row button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-card {
    min-height: 38px !important;
    border-radius: 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-panel {
    max-height: 280px !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-panel::-webkit-scrollbar,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-stack::-webkit-scrollbar {
    width: 4px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-box,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, auto) !important;
    gap: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer #promptToolbar {
    order: 1 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer textarea#prompt {
    order: 2 !important;
    min-height: 122px !important;
    max-height: 142px !important;
    padding: 16px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    border-radius: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-preview,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    order: 3 !important;
    min-height: 96px !important;
    max-height: 116px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .blank-starter-quick:not(.hidden),
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    order: 4 !important;
    grid-template-columns: 154px minmax(0, 1fr) !important;
    gap: 10px !important;
    max-height: 310px !important;
    overflow: visible !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-head {
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: rgba(240, 253, 250, 0.72) !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .starter-quick-head {
    background: rgba(14, 165, 233, 0.1) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-head small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-style-title small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-panel small {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-workflow-strip {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-action-board,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-style-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-panel {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-tabs button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-variants button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-chips button {
    min-height: 32px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-next-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-open {
    min-height: 38px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-open small {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-stack {
    position: sticky !important;
    top: 88px !important;
    max-height: calc(100vh - 112px) !important;
    overflow: auto !important;
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer #generateBtn {
    min-height: 52px !important;
    border-radius: 12px !important;
    letter-spacing: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-main {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-score {
    box-sizing: border-box !important;
    min-width: 42px !important;
    width: 42px !important;
    max-width: 42px !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 3px 4px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-score b {
    font-size: 20px !important;
    line-height: 20px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-decision-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-decision-board article {
    min-height: 54px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-decision-board article:nth-child(n+5),
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-grid article:not(.priority),
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .price-hint {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .generation-settings-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .pricing-controls {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-preflight:not(.hidden),
  :root:root:root[data-active-page="create"][data-skin="cute"] .app-shell .panel.composer .prompt-preflight:not(.hidden),
  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight:not(.hidden) {
    grid-column: 2 !important;
    grid-row: 5 !important;
    order: 5 !important;
    position: static !important;
    max-height: 94px !important;
    overflow: hidden !important;
    margin-top: -2px !important;
    border-radius: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-preflight .preflight-grid,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-preflight .preflight-actions,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-preflight .prompt-understanding {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight:not(.hidden) {
    background: rgba(8, 21, 38, 0.9) !important;
    border-color: rgba(56, 189, 248, 0.24) !important;
    color: rgba(226, 244, 255, 0.9) !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-summary,
  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-summary-grid span {
    background: rgba(15, 23, 42, 0.72) !important;
    border-color: rgba(56, 189, 248, 0.16) !important;
    color: rgba(226, 244, 255, 0.82) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue {
    width: min(calc(100vw - 64px), 1460px) !important;
    max-width: 1460px !important;
    margin-top: 14px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue h3 {
    font-size: 18px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-toolbar {
    grid-template-columns: 1fr 1fr 1fr !important;
    margin-bottom: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-safety-note {
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-list > .empty-queue {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 72px !important;
    padding: 12px !important;
    align-items: center !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-empty-steps {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .empty-queue .queue-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    min-width: 148px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="clean"] .queue-list > .empty-queue {
    background: rgba(248, 250, 252, 0.92) !important;
    color: rgba(32, 37, 34, 0.72) !important;
  }
}

/* Desktop maturity pass v43: final PC hierarchy, compact queue, and calmer first screen. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 212px minmax(720px, 1fr) 318px !important;
    gap: 16px !important;
    min-height: 0 !important;
    padding: 16px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="cute"] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin="cute"] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 224px minmax(700px, 1fr) 318px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 226px minmax(700px, 1fr) 334px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-panel {
    max-height: 300px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-card {
    min-height: 34px !important;
    padding: 7px 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer textarea#prompt {
    min-height: 104px !important;
    max-height: 118px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-preview,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview {
    min-height: 88px !important;
    max-height: 104px !important;
    padding: 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main {
    min-height: 50px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main em {
    max-height: 34px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-diff {
    max-height: 32px !important;
    overflow: hidden !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .blank-starter-quick:not(.hidden),
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    grid-template-columns: 146px minmax(0, 1fr) !important;
    max-height: 282px !important;
    padding: 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-tabs button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-variants button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-chips button {
    min-height: 30px !important;
    padding: 0 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-panel {
    padding: 9px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-next-actions button {
    min-height: 34px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .starter-next-actions {
    margin-top: 4px !important;
    padding: 0 4px 2px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .starter-next-actions button {
    min-height: 36px !important;
    border-radius: 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-stack {
    width: 100% !important;
    min-height: 0 !important;
    max-height: calc(100vh - 118px) !important;
    padding: 12px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer #generateBtn {
    min-height: 50px !important;
    font-size: 14px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-decision-board article {
    min-height: 48px !important;
    padding: 7px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr) auto !important;
    gap: 8px 12px !important;
    margin-top: 12px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    align-items: center !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue .section-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    min-height: 30px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue h3 {
    font-size: 17px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-safety-note {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(15, 118, 110, 0.72) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-toolbar {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-toolbar button {
    min-height: 32px !important;
    min-width: 0 !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-list,
  :root:root:root[data-active-page="create"][data-skin] .queue-summary {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-list > .empty-queue {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 56px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    align-items: center !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .empty-queue strong {
    font-size: 13px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .empty-queue small {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .empty-queue .queue-actions {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .empty-queue .queue-copy {
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .queue-safety-note {
    color: rgba(125, 211, 252, 0.72) !important;
  }
}

/* Desktop maturity pass v44: pro skin turns preflight into a compact control-console strip. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(116px, 0.52fr) minmax(0, 1.48fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 58px !important;
    max-height: 68px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    background:
      linear-gradient(90deg, rgba(14, 165, 233, 0.12), rgba(15, 23, 42, 0.88)),
      rgba(8, 21, 38, 0.94) !important;
    box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.12), 0 18px 44px rgba(2, 6, 23, 0.22) !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-head strong {
    color: rgba(125, 211, 252, 0.94) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-head span {
    width: fit-content !important;
    min-height: 22px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: rgba(34, 211, 238, 0.1) !important;
    color: rgba(226, 244, 255, 0.86) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-summary {
    display: grid !important;
    grid-template-columns: minmax(96px, 0.38fr) minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-summary > div:first-child {
    min-width: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-summary strong {
    display: block !important;
    max-width: 100% !important;
    color: rgba(226, 244, 255, 0.94) !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-summary small {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-summary-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-summary-grid span {
    flex: 0 0 auto !important;
    min-height: 24px !important;
    max-width: 86px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    background: rgba(15, 23, 42, 0.78) !important;
    color: rgba(226, 244, 255, 0.82) !important;
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-detail-toggle {
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    background: rgba(8, 47, 73, 0.78) !important;
    color: rgba(226, 244, 255, 0.9) !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-grid,
  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .preflight-actions,
  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight .prompt-understanding {
    display: none !important;
  }
}

/* Desktop maturity pass v45: remove PC overlap and make empty operations feel like a strip. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer {
    align-items: start !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .blank-starter-quick:not(.hidden) {
    max-height: 242px !important;
    overflow: auto !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .starter-field-panel {
    padding: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .starter-next-actions {
    margin-top: 2px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .starter-next-actions button {
    min-height: 32px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer .prompt-preflight:not(.hidden) {
    margin-top: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue {
    grid-template-columns: minmax(150px, 0.42fr) minmax(280px, 1fr) auto !important;
    min-height: 60px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue .section-title {
    min-height: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue h3 {
    font-size: 16px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-safety-note,
  :root:root:root[data-active-page="create"][data-skin] .queue-summary {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-list {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-list > .empty-queue {
    display: flex !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .empty-queue strong {
    color: inherit !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .empty-queue .queue-actions {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue-toolbar button {
    min-height: 30px !important;
    padding: 0 12px !important;
  }

  :root:root:root[data-active-page="create"] .app-toast {
    right: 24px !important;
    bottom: 22px !important;
    left: auto !important;
    max-width: 300px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }
}

/* Commercial delivery pass v45: confirmation reads like an order sheet instead of a wall of cards. */
@media (min-width: 760px) {
  .generate-confirm {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr) !important;
    gap: 10px !important;
    max-height: min(680px, calc(100vh - 168px)) !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  .generate-confirm-guard,
  .generate-confirm-details,
  .generate-confirm-check,
  .generate-confirm-actions {
    grid-column: 1 / -1 !important;
  }

  .generate-confirm-guard {
    min-height: 58px !important;
    padding: 12px !important;
    border-color: rgba(15, 118, 110, 0.2) !important;
    background:
      linear-gradient(135deg, rgba(15, 118, 110, 0.95), rgba(20, 184, 166, 0.82)),
      #0f766e !important;
  }

  .generate-confirm-guard b {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
  }

  .generate-confirm-guard span {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 12px !important;
  }

  .generate-confirm-decision {
    grid-column: 1 !important;
    grid-template-columns: 1fr !important;
  }

  .generate-confirm-decision article {
    min-height: 58px !important;
    padding: 10px 12px !important;
  }

  .generate-confirm-safe-strip {
    grid-column: 2 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-self: stretch !important;
  }

  .generate-confirm-safe-strip span {
    display: grid !important;
    min-height: 42px !important;
    place-items: center !important;
  }

  .generate-confirm-summary {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .generate-confirm-summary article,
  .generate-confirm-proof article {
    min-height: 78px !important;
  }

  .generate-confirm-summary small,
  .generate-confirm-proof span {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  .generate-confirm-proof {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .generate-confirm-details summary {
    padding: 9px 12px !important;
  }

  .generate-confirm-check {
    align-items: center !important;
    padding: 10px 12px !important;
  }

  .generate-confirm-actions {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr) !important;
  }
}

/* Commercial delivery pass v45: result viewer becomes a composed delivery desk. */
@media (min-width: 980px) {
  .image-viewer-panel {
    width: min(1180px, calc(100vw - 48px)) !important;
    max-height: calc(100vh - 54px) !important;
  }

  .image-viewer-body {
    grid-template-columns: minmax(0, 1.22fr) minmax(340px, 0.78fr) !important;
    gap: 14px !important;
  }

  .image-viewer-stage {
    min-height: min(66vh, 620px) !important;
  }

  .viewer-side-panel {
    gap: 10px !important;
  }

  #viewerPrompt {
    display: -webkit-box !important;
    max-height: 82px !important;
    overflow: hidden !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(15, 118, 110, 0.14) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #334155 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
  }

  .viewer-delivery {
    padding: 12px !important;
    border-radius: 16px !important;
    background:
      linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(236, 253, 245, 0.72)) !important;
    background-color: #f8fafc !important;
    border: 1px solid rgba(15, 118, 110, 0.16) !important;
  }

  .viewer-delivery-hero {
    grid-template-columns: minmax(0, 1fr) 76px !important;
  }

  .viewer-delivery-status {
    background: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
  }

  .viewer-delivery-status span {
    color: rgba(45, 212, 191, 0.92) !important;
  }

  .viewer-delivery-status strong,
  .viewer-delivery-status small {
    color: #ffffff !important;
  }

  .viewer-delivery-checklist {
    grid-template-columns: 1fr !important;
  }

  .viewer-delivery-checklist article {
    min-height: 54px !important;
    padding: 9px 10px !important;
  }

  .viewer-delivery-quick,
  .viewer-delivery-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  .viewer-delivery-quick button,
  .viewer-delivery-actions button {
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

/* Desktop workbench v46: make the PC create page read like a real operator console. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .app-shell {
    width: min(calc(100vw - 56px), 1500px) !important;
    max-width: 1500px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    width: min(calc(100vw - 56px), 1500px) !important;
    max-width: 1500px !important;
    grid-template-columns: 218px minmax(720px, 1fr) 322px !important;
    gap: 14px !important;
    padding: 14px !important;
  }

  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer,
  :root:root:root[data-active-page="create"][data-skin="pro"] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 220px minmax(720px, 1fr) 330px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .section-title {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 8px !important;
    gap: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .creation-mode-summary {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 34px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .mode-row {
    grid-column: 1 !important;
    grid-row: 3 !important;
    padding: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-panel {
    grid-column: 1 !important;
    grid-row: 4 !important;
    min-height: 244px !important;
    max-height: 244px !important;
    gap: 6px !important;
    padding-right: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-card {
    min-height: 31px !important;
    padding: 6px 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-card small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .creation-mode-panel button small {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 1 / span 4 !important;
    gap: 9px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer textarea#prompt {
    min-height: 118px !important;
    max-height: 132px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-preview {
    min-height: 76px !important;
    max-height: 88px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-proof,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-summary,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-echo,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-professional,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-missing,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-main {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    min-height: 42px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-live-diff {
    max-height: 28px !important;
    flex-wrap: nowrap !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .blank-starter-quick:not(.hidden),
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 9px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-head button {
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-tabs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-action-board,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
    gap: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-direction-card {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-style-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-panel {
    min-height: 92px !important;
    padding: 9px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-next-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-open {
    min-height: 34px !important;
    padding: 7px 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-preflight:not(.hidden) {
    grid-column: 2 !important;
    grid-row: 5 !important;
    margin-top: 6px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 1 / span 5 !important;
    top: 84px !important;
    gap: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-decision-board {
    grid-template-columns: 1fr 1fr !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-decision-board article {
    min-height: 46px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-decision-board article span,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-grid small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .queue {
    width: min(calc(100vw - 56px), 1500px) !important;
    max-width: 1500px !important;
  }
}

/* Desktop workbench v47: repair starter board placement after the v46 density pass. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .blank-starter-quick:not(.hidden),
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    align-items: start !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-head {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-action-board,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
    align-items: stretch !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-style-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-next-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-open {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
}

/* Desktop workbench v49: final density rules win after the placement repair. */
@media (min-width: 1100px) {
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .creation-mode-panel button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .mode-row button {
    min-height: 38px !important;
    letter-spacing: 0 !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-panel {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 37px !important;
    align-content: start !important;
    overflow: hidden !important;
    padding: 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-card {
    min-height: 37px !important;
    height: 37px !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 8px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .track-card strong {
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .blank-starter-quick:not(.hidden),
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    gap: 7px !important;
    padding: 8px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
      var(--panel) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-head {
    min-height: 36px !important;
    padding: 7px 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-head small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-style-title small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-panel small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-open small {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-tabs button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-quick-variants button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-chips button {
    min-height: 29px !important;
    height: 29px !important;
    padding: 0 9px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-style-panel,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-panel {
    min-height: 78px !important;
    padding: 8px !important;
    align-content: start !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-next-actions button,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .starter-field-open {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer #generateBtn {
    min-height: 62px !important;
    font-size: 15px !important;
    box-shadow: 0 14px 32px rgba(6, 182, 212, 0.18) !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-main {
    min-height: 76px !important;
    padding: 11px !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-main small,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .delivery-order-grid article:nth-child(n+4) {
    display: none !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-preflight:not(.hidden) {
    min-height: 58px !important;
    max-height: 72px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-preflight .preflight-head span,
  :root:root:root[data-active-page="create"][data-skin] .app-shell .panel.composer .prompt-preflight .preflight-summary small {
    display: none !important;
  }
}

/* Desktop create proof v57: expose why the prompt changed and make the PC cockpit feel intentional. */
@media (min-width: 1100px) {
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 104px !important;
    max-height: 118px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(260px, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 9px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 82px !important;
    align-content: center !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof {
    display: grid !important;
    grid-column: 2 !important;
    gap: 7px !important;
    grid-row: 1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof-card,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card {
    min-height: 48px !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof-card b,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card b {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof-card small,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-height: 1.28 !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-missing,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .queue {
    min-height: 94px !important;
    margin-top: 14px !important;
    padding: 14px 16px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .queue-list > .empty-queue {
    min-height: 54px !important;
    background:
      linear-gradient(90deg, rgba(6, 182, 212, 0.1), transparent 36%),
      rgba(255, 255, 255, 0.055) !important;
  }
}

/* Template studio v58: desktop templates become a single guided decision surface. */
@media (min-width: 1100px) {
  :root[data-active-page="templates"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-panel,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 316px !important;
    grid-template-rows: auto minmax(300px, auto) !important;
    grid-template-areas:
      "switch brief"
      "main brief" !important;
    max-width: 1360px !important;
    min-height: 430px !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 12px !important;
  }

  :root[data-active-page="templates"] .template-goal-strip {
    display: none !important;
  }

  :root[data-active-page="templates"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="clean"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="cute"] .template-view-switch,
  :root[data-active-page="templates"][data-skin="pro"] .template-view-switch {
    grid-area: switch !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
    align-self: stretch !important;
    background: rgba(3, 16, 31, 0.38) !important;
    border: 1px solid rgba(125, 211, 252, 0.16) !important;
    border-radius: 12px !important;
  }

  :root[data-active-page="templates"][data-skin="clean"] .template-view-switch {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  :root[data-active-page="templates"][data-skin="cute"] .template-view-switch {
    background: rgba(255, 248, 252, 0.78) !important;
    border-color: rgba(244, 114, 182, 0.18) !important;
  }

  :root[data-active-page="templates"] .template-view-switch button {
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="templates"] .template-workbench-grid,
  :root[data-active-page="templates"][data-skin="clean"] .template-workbench-grid,
  :root[data-active-page="templates"][data-skin="cute"] .template-workbench-grid,
  :root[data-active-page="templates"][data-skin="pro"] .template-workbench-grid {
    grid-area: main !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong {
    min-height: 326px !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }

  :root[data-active-page="templates"] .template-workbench-block > span {
    display: none !important;
  }

  :root[data-active-page="templates"] .template-workbench-block > strong {
    max-width: 640px !important;
    margin: 0 0 10px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  :root[data-template-view="starter"][data-active-page="templates"] .template-workbench-block.strong .template-choice-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  :root[data-active-page="templates"] .template-choice-row button {
    min-height: 134px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    align-content: start !important;
    gap: 8px !important;
  }

  :root[data-active-page="templates"] .template-choice-row button strong {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  :root[data-active-page="templates"] .template-choice-row button small {
    font-size: 11px !important;
    line-height: 1.35 !important;
    opacity: 0.78 !important;
  }

  :root[data-active-page="templates"] .template-choice-row button .template-visual-preview {
    height: 78px !important;
    border-radius: 10px !important;
    margin: 0 0 2px !important;
  }

  :root[data-active-page="templates"] .template-choice-row button:nth-child(1) .template-visual-preview {
    background:
      radial-gradient(circle at 25% 34%, rgba(255, 230, 224, 0.96) 0 10%, transparent 11%),
      linear-gradient(90deg, rgba(168, 85, 247, 0.72) 0 36%, rgba(236, 72, 153, 0.52) 36% 70%, rgba(15, 23, 42, 0.34) 70%),
      linear-gradient(160deg, rgba(15, 23, 42, 0.94), rgba(3, 7, 18, 0.88)) !important;
  }

  :root[data-active-page="templates"] .template-choice-row button:nth-child(2) .template-visual-preview {
    background:
      radial-gradient(ellipse at 48% 44%, rgba(45, 212, 191, 0.95) 0 20%, transparent 22%),
      linear-gradient(90deg, transparent 0 63%, rgba(249, 115, 22, 0.7) 63% 67%, transparent 67%),
      linear-gradient(168deg, rgba(15, 23, 42, 0.92), rgba(17, 94, 89, 0.52)) !important;
  }

  :root[data-active-page="templates"] .template-choice-row button:nth-child(3) .template-visual-preview {
    background:
      linear-gradient(90deg, rgba(34, 197, 94, 0.74) 0 28%, transparent 28% 34%, rgba(250, 204, 21, 0.82) 34% 62%, transparent 62%),
      linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.88)) !important;
  }

  :root[data-active-page="templates"] .template-choice-row button:nth-child(4) .template-visual-preview {
    background:
      radial-gradient(circle at 20% 32%, rgba(226, 232, 240, 0.95) 0 4%, transparent 5%),
      radial-gradient(circle at 52% 58%, rgba(56, 189, 248, 0.95) 0 5%, transparent 6%),
      radial-gradient(circle at 78% 26%, rgba(129, 140, 248, 0.96) 0 5%, transparent 6%),
      linear-gradient(145deg, transparent 0 45%, rgba(96, 165, 250, 0.24) 45% 49%, transparent 50%),
      linear-gradient(25deg, transparent 0 36%, rgba(45, 212, 191, 0.28) 37% 40%, transparent 41%),
      linear-gradient(160deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.88)) !important;
  }

  :root[data-active-page="templates"] .template-choice-row button:nth-child(5) .template-visual-preview {
    background:
      linear-gradient(90deg, rgba(34, 211, 238, 0.62) 0 18%, transparent 18% 25%, rgba(245, 158, 11, 0.72) 25% 48%, transparent 48% 54%, rgba(20, 184, 166, 0.56) 54% 79%, transparent 79%),
      linear-gradient(165deg, rgba(15, 23, 42, 0.94), rgba(51, 65, 85, 0.72)) !important;
  }

  :root[data-active-page="templates"] #templateBriefPanel,
  :root[data-active-page="templates"][data-skin="clean"] #templateBriefPanel,
  :root[data-active-page="templates"][data-skin="cute"] #templateBriefPanel,
  :root[data-active-page="templates"][data-skin="pro"] #templateBriefPanel {
    grid-area: brief !important;
    align-self: stretch !important;
    min-height: 0 !important;
    max-height: 416px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  :root[data-active-page="templates"] .template-brief-launch button {
    min-height: 44px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
  }

  :root[data-active-page="templates"] .template-filter-panel,
  :root[data-active-page="templates"][data-skin="clean"] .template-filter-panel,
  :root[data-active-page="templates"][data-skin="cute"] .template-filter-panel,
  :root[data-active-page="templates"][data-skin="pro"] .template-filter-panel {
    max-width: 1360px !important;
    min-height: 50px !important;
    margin-top: 8px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    opacity: 0.82 !important;
  }

  :root[data-active-page="templates"] .template-filter-panel .section-title h3 {
    font-size: 14px !important;
  }

  :root[data-active-page="templates"] .template-filter-panel .section-title span {
    font-size: 11px !important;
  }

  :root[data-active-page="templates"] .template-tabs {
    gap: 6px !important;
  }

  :root[data-active-page="templates"] .template-tabs button {
    min-height: 34px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .package-panel,
  :root[data-active-page="templates"][data-template-view="starter"][data-skin="clean"] .package-panel,
  :root[data-active-page="templates"][data-template-view="starter"][data-skin="cute"] .package-panel,
  :root[data-active-page="templates"][data-template-view="starter"][data-skin="pro"] .package-panel {
    max-width: 1360px !important;
    min-height: 68px !important;
    margin-top: 8px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    opacity: 0.9 !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .deliverable-grid article {
    min-height: 46px !important;
    padding: 7px 8px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .deliverable-grid article small {
    display: none !important;
  }
}

/* Template studio v59: override older high-specificity desktop template rails. */
@media (min-width: 1100px) {
  :root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell .template-workbench-panel {
    grid-template-columns: minmax(0, 1fr) 316px !important;
    grid-template-rows: auto minmax(300px, auto) !important;
    grid-template-areas:
      "switch brief"
      "main brief" !important;
    min-height: 420px !important;
    max-width: 1360px !important;
  }

  :root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell .template-view-switch {
    grid-area: switch !important;
    width: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  :root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell .template-workbench-grid {
    grid-area: main !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: auto !important;
  }

  :root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell #templateBriefPanel {
    grid-area: brief !important;
    width: auto !important;
    max-height: 416px !important;
  }

  :root:root:root:root[data-active-page="templates"][data-skin][data-template-view="starter"] .app-shell.app-shell .template-workbench-block.strong .template-choice-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Template professional first screen v65: professional delivery opens as a direct library surface. */
@media (min-width: 1100px) {
  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .template-workbench-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas: "switch" !important;
    min-height: 0 !important;
    max-width: 1360px !important;
    padding: 10px !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .template-workbench-grid {
    display: none !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .template-view-switch {
    grid-area: switch !important;
    align-self: start !important;
    min-height: 54px !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell #templateBriefPanel {
    display: none !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .template-filter-panel {
    display: none !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template-panel {
    max-width: 1360px !important;
    margin-top: 8px !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template-panel .section-title {
    margin-bottom: 10px !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template {
    min-height: 164px !important;
    padding: 8px !important;
    border-radius: 11px !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template .template-visual-preview {
    height: 78px !important;
    margin-bottom: 8px !important;
  }
}

/* Desktop create cockpit v58: reduce visual noise and give the paid handoff rail more room. */
@media (min-width: 1100px) {
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell {
    width: min(calc(100vw - 64px), 1508px) !important;
    max-width: 1508px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 206px minmax(700px, 1fr) 354px !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer,
  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 208px minmax(690px, 1fr) 366px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer textarea#prompt {
    min-height: 104px !important;
    max-height: 116px !important;
    padding: 18px 20px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    gap: 7px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 92px !important;
    max-height: 104px !important;
    grid-template-columns: minmax(0, 0.78fr) minmax(280px, 1fr) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main {
    min-height: 70px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof-card,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card {
    min-height: 42px !important;
    padding: 7px 8px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick:not(.hidden) {
    padding: 7px !important;
    gap: 6px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-head {
    min-height: 30px !important;
    padding: 5px 9px !important;
    border-style: dashed !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-tabs button,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants button,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips button {
    min-height: 27px !important;
    height: 27px !important;
    font-size: 12px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    min-height: 72px !important;
    padding: 7px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button,
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    min-height: 28px !important;
    height: 28px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    gap: 9px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main {
    min-height: 68px !important;
    padding: 10px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .queue {
    width: min(calc(100vw - 64px), 1508px) !important;
    max-width: 1508px !important;
  }
}

/* Desktop create delivery console v60: make the paid handoff rail read as a workflow, not a pile of cards. */
@media (min-width: 1100px) {
  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    min-height: 344px !important;
    align-content: start !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main {
    min-height: 82px !important;
    grid-template-columns: minmax(0, 1fr) 68px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main span {
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main strong {
    font-size: 17px !important;
    line-height: 1.18 !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main small {
    -webkit-line-clamp: 2 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 7px !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.66) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    border-color: rgba(56, 189, 248, 0.24) !important;
    background: rgba(8, 21, 38, 0.72) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 1px 5px !important;
    min-height: 42px !important;
    padding: 6px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.54) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article {
    background: rgba(14, 32, 58, 0.84) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article.active {
    background: rgba(15, 118, 110, 0.1) !important;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.16) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article.active {
    background: rgba(14, 165, 233, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.22) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip b {
    grid-row: 1 / span 2 !important;
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    color: #ffffff !important;
    background: #0f766e !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    opacity: 0.72 !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board article {
    min-height: 42px !important;
    padding: 7px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-grid article:nth-child(n+3) {
    display: none !important;
  }
}

/* Paid handoff v61: keep confirmation and placeholder delivery decisive. */
@media (min-width: 760px) {
  .generate-confirm {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.48fr) !important;
    max-height: min(600px, calc(100vh - 150px)) !important;
  }

  .generate-confirm-decision {
    grid-column: 1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .generate-confirm-decision article {
    min-height: 50px !important;
    padding: 9px 10px !important;
  }

  .generate-confirm-safe-strip {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .generate-confirm-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .generate-confirm-summary article {
    min-height: 64px !important;
  }

  .generate-confirm-proof {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 8px 0 !important;
  }

  .generate-confirm-details:not([open]) .generate-confirm-proof {
    display: none !important;
  }

  .generate-confirm-check {
    min-height: 46px !important;
  }
}

@media (min-width: 980px) {
  .viewer-delivery-hero.placeholder {
    grid-template-columns: minmax(0, 1fr) 68px !important;
  }

  .viewer-delivery-hero.placeholder .viewer-delivery-status {
    background: #1f2937 !important;
  }

  .viewer-delivery-hero.placeholder .viewer-delivery-score strong {
    font-size: 16px !important;
  }

  .viewer-delivery-quick.placeholder-quick {
    grid-template-columns: 1.1fr 0.9fr !important;
  }

  .viewer-delivery-quick.placeholder-quick button:first-child {
    background: #0f766e !important;
    color: #ffffff !important;
    border-color: rgba(15, 118, 110, 0.18) !important;
  }
}

/* Desktop create calm first screen v62: clean/cute are buyer-facing, pro keeps the diagnostic console. */
@media (min-width: 1100px) {
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .track-panel,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    max-height: 186px !important;
    overflow: hidden !important;
    align-content: start !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .track-card:nth-child(n + 7),
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .track-card:nth-child(n + 7) {
    display: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 74px !important;
    max-height: 94px !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-diff,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-diff,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional {
    display: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary {
    grid-template-columns: 106px minmax(0, 1fr) !important;
    gap: 8px 12px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card {
    min-height: 30px !important;
    padding: 6px 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card:nth-child(n + 3),
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card:nth-child(n + 3) {
    display: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo {
    min-height: 28px !important;
    padding: 6px 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo small,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo small {
    display: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo strong,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo strong {
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
  }
}

/* Cute guided layout v63: make cute a guided card flow instead of a pink copy of the desktop console. */
@media (min-width: 1100px) {
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 206px minmax(0, 1fr) 300px !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(230px, 0.42fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 152px !important;
    height: auto !important;
    padding: 12px !important;
    border-radius: 18px !important;
    align-content: stretch !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack #generateBtn {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    min-height: 118px !important;
    height: 100% !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack #deliveryOrderPanel,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 62px !important;
    margin: 0 !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 44px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-grid,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer [data-delivery-order-action] {
    display: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 / 4 !important;
    grid-row: 2 / span 4 !important;
    min-height: 500px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box textarea {
    min-height: 86px !important;
  }
}

/* Pro node console v64: make professional mode read like a node/QA control desk. */
@media (min-width: 1100px) {
  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 220px minmax(0, 1fr) 380px !important;
    gap: 10px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    min-height: 294px !important;
    max-height: 348px !important;
    padding: 10px !important;
    align-content: start !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    background:
      linear-gradient(180deg, rgba(8, 21, 38, 0.9), rgba(3, 7, 18, 0.72)),
      repeating-linear-gradient(180deg, rgba(56, 189, 248, 0.08) 0 1px, transparent 1px 34px) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-card {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: stretch !important;
    min-height: 28px !important;
    padding: 5px 9px !important;
    border-radius: 8px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-card::before {
    content: "" !important;
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: rgba(56, 189, 248, 0.72) !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.55) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-card strong {
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-card.active {
    border-color: rgba(34, 211, 238, 0.55) !important;
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.22), rgba(8, 47, 73, 0.68)) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    border-color: rgba(56, 189, 248, 0.22) !important;
    background:
      linear-gradient(135deg, rgba(8, 21, 38, 0.98), rgba(12, 30, 52, 0.9)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.06) 0 1px, transparent 1px 42px) !important;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.06), 0 18px 40px rgba(2, 6, 23, 0.22) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-diff em {
    border-radius: 6px !important;
    border-color: rgba(56, 189, 248, 0.24) !important;
    background: rgba(14, 165, 233, 0.12) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    border-color: rgba(56, 189, 248, 0.24) !important;
    background:
      radial-gradient(circle at top right, rgba(45, 212, 191, 0.16), transparent 36%),
      linear-gradient(180deg, rgba(8, 21, 38, 0.96), rgba(2, 6, 23, 0.9)) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(125, 211, 252, 0.06) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main,
  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board article,
  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-grid article {
    border-left: 2px solid rgba(34, 211, 238, 0.38) !important;
  }
}

/* Prompt input fingerprint v66: show compact proof that the draft follows the user's words. */
.prompt-live-signature {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.prompt-live-signature-card {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}

.prompt-live-signature-card b,
.prompt-live-signature-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-live-signature-card b {
  margin-bottom: 2px;
  font-size: 11px;
  color: rgba(15, 118, 110, 0.78);
}

.prompt-live-signature-card small {
  font-size: 12px;
  line-height: 1.28;
  color: rgba(15, 23, 42, 0.72);
}

.prompt-live-decision {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.prompt-live-decision-card {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
}

.prompt-live-decision-card b,
.prompt-live-decision-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-live-decision-card b {
  margin-bottom: 2px;
  font-size: 10px;
  color: rgba(71, 85, 105, 0.82);
}

.prompt-live-decision-card small {
  font-size: 12px;
  line-height: 1.28;
  color: rgba(15, 23, 42, 0.78);
}

.professional-template-summary {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(130px, 0.8fr)) auto;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.92), rgba(255, 255, 255, 0.74));
}

.professional-template-summary > div,
.professional-template-summary article {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}

.professional-template-summary span,
.professional-template-summary b,
.professional-template-summary small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.professional-template-summary span,
.professional-template-summary b {
  font-size: 11px;
  color: rgba(15, 118, 110, 0.78);
}

.professional-template-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1.18;
}

.professional-template-summary small {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.68);
}

.professional-template-summary button {
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #0f766e;
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
}

.template-card-handoff {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}

.template-card-handoff b,
.template-card-handoff small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-card-handoff b {
  font-size: 11px;
  color: rgba(15, 23, 42, 0.82);
}

.template-card-handoff small {
  font-size: 10px;
  color: rgba(71, 85, 105, 0.76);
}

.template-card-cta {
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: #0f766e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

@media (min-width: 1100px) {
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 104px !important;
    max-height: 118px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card {
    min-height: 34px !important;
    padding: 5px 7px !important;
    background: rgba(255, 255, 255, 0.42) !important;
    box-shadow: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card b,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card b {
    font-size: 10px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card small,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card small {
    font-size: 11px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card {
    border-color: rgba(56, 189, 248, 0.2) !important;
    background: rgba(8, 47, 73, 0.46) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card b {
    color: rgba(125, 211, 252, 0.88) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card small {
    color: rgba(226, 244, 255, 0.78) !important;
  }
}

/* Desktop create focus v67: clean skin becomes an order desk, pro keeps the full console. */
@media (min-width: 1100px) {
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 176px minmax(740px, 1fr) 318px !important;
    gap: 14px !important;
    padding: 14px !important;
    align-items: start !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    display: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.74) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel button,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .mode-row button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 6px 8px !important;
    border-radius: 9px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    gap: 8px !important;
    min-height: 520px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer textarea#prompt {
    min-height: 116px !important;
    max-height: 128px !important;
    border-radius: 13px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    grid-template-columns: minmax(210px, 0.62fr) minmax(0, 1fr) !important;
    min-height: 106px !important;
    max-height: 118px !important;
    gap: 6px 8px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main {
    min-height: 58px !important;
    padding: 7px 9px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main small,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main em {
    display: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision-card,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card {
    min-height: 27px !important;
    padding: 3px 6px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision-card b,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card b {
    font-size: 10px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision-card small,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card small {
    font-size: 11px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-missing,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    gap: 9px !important;
    min-height: 248px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)) !important;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.08) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 58px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.18) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main {
    min-height: 78px !important;
    padding: 10px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    padding: 6px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-grid,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer [data-delivery-order-action],
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .generation-settings-panel,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .price-hint {
    display: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .queue {
    min-height: 58px !important;
    padding: 10px 16px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .queue .section-title {
    margin: 0 !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .queue-list > .empty-queue,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .queue-safety-note {
    display: none !important;
  }
}

/* Template professional handoff v68: every professional card has preview, proof, and an apply affordance. */
@media (min-width: 1100px) {
  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template-summary {
    display: grid !important;
    max-width: 100% !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template {
    min-height: 196px !important;
    grid-template-rows: 78px auto auto auto auto !important;
    align-content: start !important;
    gap: 6px !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template .template-visual-preview {
    margin-bottom: 0 !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template strong {
    font-size: 14px !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template small {
    -webkit-line-clamp: 1 !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .template-card-handoff {
    min-height: 42px !important;
  }

  :root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template.active .template-card-cta {
    background: #0f172a !important;
  }

  :root:root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell.app-shell .professional-template-summary {
    border-color: rgba(56, 189, 248, 0.22) !important;
    background: linear-gradient(135deg, rgba(8, 21, 38, 0.92), rgba(2, 6, 23, 0.82)) !important;
  }

  :root:root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell.app-shell .professional-template-summary strong,
  :root:root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell.app-shell .professional-template-summary small {
    color: rgba(226, 244, 255, 0.86) !important;
  }

  :root:root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell.app-shell .professional-template-summary button,
  :root:root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell.app-shell .template-card-cta {
    background: linear-gradient(135deg, #0ea5e9, #14b8a6) !important;
  }

  :root:root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell.app-shell .template-card-handoff {
    border-color: rgba(56, 189, 248, 0.18) !important;
    background: rgba(8, 47, 73, 0.42) !important;
  }

  :root:root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell.app-shell .template-card-handoff b,
  :root:root:root:root[data-active-page="templates"][data-skin="pro"] .app-shell.app-shell .template-card-handoff small {
    color: rgba(226, 244, 255, 0.84) !important;
  }
}

/* Prompt evidence deck v69: clean/cute desktop show proof of change without long text blocks. */
@media (min-width: 1100px) {
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    grid-template-columns: minmax(168px, 0.36fr) minmax(0, 1fr) !important;
    grid-auto-rows: min-content !important;
    align-items: stretch !important;
    min-height: 126px !important;
    max-height: 142px !important;
    gap: 7px 9px !important;
    padding: 9px !important;
    overflow: hidden !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main {
    grid-row: span 2 !important;
    min-height: 98px !important;
    padding: 10px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main small,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main em,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main small,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main em {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card {
    min-height: 42px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card:nth-child(1),
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card:nth-child(1) {
    border-color: rgba(20, 184, 166, 0.22) !important;
    background: rgba(240, 253, 250, 0.86) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card:nth-child(2),
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card:nth-child(2) {
    border-color: rgba(14, 165, 233, 0.2) !important;
    background: rgba(239, 246, 255, 0.9) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card:nth-child(3),
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card:nth-child(3) {
    border-color: rgba(245, 158, 11, 0.22) !important;
    background: rgba(255, 251, 235, 0.92) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-diff,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-diff {
    display: none !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
    gap: 8px !important;
    min-height: 36px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo > div,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo > div {
    min-width: 0 !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.68) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo b,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo p,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo b,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo p {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo b,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo b {
    margin-bottom: 2px !important;
    font-size: 10px !important;
    color: rgba(15, 118, 110, 0.78) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo p,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo p {
    font-size: 12px !important;
    line-height: 1.24 !important;
    color: rgba(15, 23, 42, 0.76) !important;
  }

  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-missing,
  :root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview > button,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-missing,
  :root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview > button {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .professional-template-summary {
    grid-template-columns: 1fr;
  }

  .professional-template-summary article {
    display: none;
  }
}

/* Desktop create action focus v70: one primary mode rail, visible cost controls, stronger clean submit area. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 176px minmax(820px, 1fr) 300px !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  html:root:root:root:root:root[data-active-page="create"][data-skin="clean"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 176px minmax(820px, 1fr) 300px !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel {
    width: auto !important;
    grid-template-columns: 1fr !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel button {
    min-height: 43px !important;
    height: auto !important;
    justify-content: center !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    width: auto !important;
    min-width: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    width: auto !important;
    max-width: 300px !important;
    min-height: 430px !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 76px !important;
    height: auto !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .generation-settings-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls.collapsed,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .price-hint {
    display: grid !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls.collapsed {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls label:first-child {
    grid-column: 1 / -1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls label {
    min-height: 58px !important;
    padding: 7px !important;
    border-radius: 11px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls select,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls input {
    min-height: 31px !important;
    font-size: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .settings-summary {
    min-height: 54px !important;
    padding: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .settings-summary small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .price-hint {
    min-height: 30px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 6px 8px !important;
  }
}

/* Desktop create evidence strip v71: clean mode keeps proof, not paragraphs. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 108px !important;
    max-height: 118px !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card {
    min-height: 38px !important;
    padding: 6px 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 42px !important;
    gap: 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo > div {
    min-height: 42px !important;
    padding: 6px 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-missing,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview > button {
    display: none !important;
  }
}

/* Desktop clean declutter v72: keep only the short proof cards in clean mode. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 58px !important;
    max-height: 70px !important;
    padding: 7px !important;
    align-content: center !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card {
    min-height: 42px !important;
    padding: 6px 9px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .queue-safety-note {
    display: flex !important;
    min-height: 28px !important;
    padding: 6px 10px !important;
    margin-top: 6px !important;
    align-items: center !important;
    border-radius: 999px !important;
    background: rgba(240, 253, 250, 0.78) !important;
    border: 1px solid rgba(20, 184, 166, 0.16) !important;
    color: rgba(15, 118, 110, 0.86) !important;
    font-size: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .queue-safety-note::before {
    content: "只查看";
    margin-right: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.12);
    color: rgba(15, 118, 110, 0.92);
    font-weight: 800;
  }
}

/* Desktop cute guide v73: make cute a soft step-by-step board, not a pink console. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    min-height: 154px !important;
    height: auto !important;
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 18px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 241, 248, 0.94)) !important;
    border-color: rgba(244, 114, 182, 0.22) !important;
    box-shadow: 0 18px 40px rgba(219, 39, 119, 0.09) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 128px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f472b6, #22c1c3) !important;
    box-shadow: 0 18px 42px rgba(219, 39, 119, 0.18) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main {
    min-height: 64px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: rgba(244, 114, 182, 0.16) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article {
    min-height: 44px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.8) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    grid-template-columns: minmax(176px, 0.34fr) minmax(0, 1fr) !important;
    min-height: 92px !important;
    max-height: 106px !important;
    padding: 9px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main {
    min-height: 74px !important;
    padding: 9px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main em {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature {
    align-self: stretch !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card {
    min-height: 56px !important;
    border-radius: 14px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-missing,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview > button {
    display: none !important;
  }
}

/* Desktop skin refinement v74: compact cute CTA and strengthen pro field intake. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    min-height: 168px !important;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
    grid-row: 1 !important;
    align-self: stretch !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main {
    min-height: 58px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    min-height: 54px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    border-color: rgba(56, 189, 248, 0.24) !important;
    background:
      linear-gradient(135deg, rgba(8, 47, 73, 0.5), rgba(15, 23, 42, 0.74)) !important;
    box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.12) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel strong,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel b {
    color: rgba(226, 244, 255, 0.94) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips button {
    min-height: 34px !important;
    border-color: rgba(56, 189, 248, 0.28) !important;
    background: rgba(8, 47, 73, 0.62) !important;
    color: rgba(226, 244, 255, 0.92) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    min-height: 36px !important;
    border-color: rgba(56, 189, 248, 0.28) !important;
    background: rgba(8, 47, 73, 0.72) !important;
    color: rgba(226, 244, 255, 0.92) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button.primary {
    background: linear-gradient(135deg, #0ea5e9, #14b8a6) !important;
    color: #00111c !important;
    font-weight: 900 !important;
  }
}

/* Desktop create layout contract v75: prevent 1366px overflow and keep skins structurally different. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell {
    width: min(calc(100vw - 32px), 1500px) !important;
    max-width: 1500px !important;
    overflow-x: clip !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer {
    max-width: 100% !important;
    overflow: visible !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 164px minmax(0, 1fr) 300px !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    max-width: 300px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 88px !important;
    font-size: 17px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 196px minmax(0, 1fr) 300px !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    grid-column: 2 / 4 !important;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
    max-width: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 208px minmax(0, 1fr) 360px !important;
    gap: 10px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    max-width: 360px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 78px !important;
    box-shadow: 0 18px 42px rgba(14, 165, 233, 0.24) !important;
  }
}

/* Desktop pro prompt console v76: keep evidence, remove long first-screen prose. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 96px !important;
    max-height: 106px !important;
    padding: 9px !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-diff,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-plan,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-missing,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card:nth-child(n + 4) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card {
    min-height: 38px !important;
    padding: 6px 8px !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
    background: rgba(8, 47, 73, 0.42) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card small,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Desktop pro calm console v77: less glow, more B2B parameter desk. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    background: linear-gradient(180deg, rgba(6, 18, 34, 0.96), rgba(3, 8, 22, 0.98)) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    background: rgba(5, 18, 32, 0.92) !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.06) !important;
    gap: 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 64px !important;
    box-shadow: 0 10px 24px rgba(14, 165, 233, 0.18) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-card,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .professional-mode-card,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board article,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-grid article {
    background: rgba(8, 24, 42, 0.72) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article {
    min-height: 40px !important;
    padding: 7px !important;
    background: rgba(8, 24, 42, 0.76) !important;
    border-color: rgba(56, 189, 248, 0.16) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-grid {
    gap: 7px !important;
  }
}

/* Desktop pro job spec v78: make generation parameters visible before submit. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .generation-settings-panel {
    display: block !important;
    order: 5 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .settings-summary {
    min-height: 42px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: rgba(8, 24, 42, 0.78) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    color: rgba(226, 244, 255, 0.92) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .settings-summary span {
    font-size: 11px !important;
    color: rgba(125, 211, 252, 0.92) !important;
    text-transform: uppercase !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .settings-summary strong {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .settings-summary small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls.collapsed {
    display: grid !important;
    order: 6 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: rgba(5, 18, 32, 0.88) !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls label:first-child {
    grid-column: 1 / -1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls label {
    gap: 4px !important;
    min-height: 50px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls span {
    font-size: 11px !important;
    color: rgba(125, 211, 252, 0.86) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls input,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls select {
    min-height: 30px !important;
    padding: 5px 8px !important;
    border-radius: 9px !important;
    background: rgba(2, 6, 23, 0.78) !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
    color: rgba(226, 244, 255, 0.94) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .price-hint {
    display: block !important;
    order: 7 !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    min-height: 28px !important;
    border-radius: 10px !important;
    background: rgba(14, 165, 233, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    color: rgba(186, 230, 253, 0.92) !important;
    font-size: 11px !important;
  }
}

/* Generate confirm compact gate v80: keep first screen decisive, move prose into details. */
@media (min-width: 760px) {
  .generate-confirm {
    grid-template-columns: minmax(0, 1fr) 190px !important;
    gap: 8px !important;
    max-height: min(520px, calc(100vh - 142px)) !important;
  }

  .generate-confirm-guard {
    min-height: 46px !important;
    padding: 9px 10px !important;
  }

  .generate-confirm-guard span {
    font-size: 11px !important;
  }

  .generate-confirm-decision {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .generate-confirm-decision article {
    min-height: 48px !important;
    padding: 8px !important;
  }

  .generate-confirm-decision strong {
    -webkit-line-clamp: 1 !important;
    font-size: 12px !important;
  }

  .generate-confirm-safe-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .generate-confirm-safe-strip span {
    min-height: 34px !important;
    padding: 5px !important;
    font-size: 10px !important;
  }

  .generate-confirm-summary {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .generate-confirm-summary article {
    min-height: 48px !important;
    padding: 8px !important;
  }

  .generate-confirm-summary small {
    -webkit-line-clamp: 1 !important;
  }

  .generate-confirm-details summary {
    padding: 8px 10px !important;
  }

  .generate-confirm-check {
    min-height: 40px !important;
    padding: 8px 10px !important;
  }

  .generate-confirm-actions button {
    min-height: 40px !important;
  }
}

/* Create skin workbench identity v81: make skin changes visible as different worktables, not color swaps. */
.skin-workbench-cue {
  grid-column: 1 / -1;
  display: grid;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  overflow: hidden;
}

.section-title .skin-workbench-cue {
  flex: 1 1 520px;
  margin: 0;
}

.prompt-box .skin-workbench-cue {
  grid-column: 1 / -1;
  margin: 0;
}

.skin-workbench-head,
.skin-workbench-focus,
.skin-workbench-steps {
  min-width: 0;
}

.skin-workbench-head b,
.skin-workbench-focus strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-workbench-head span,
.skin-workbench-focus small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(71, 85, 105, 0.74);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-workbench-steps {
  display: grid;
  gap: 6px;
}

.skin-workbench-steps em,
.skin-workbench-cue > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-cue {
    grid-template-columns: 124px minmax(0, 1fr) 248px 82px;
    min-height: 40px;
    padding: 7px 10px;
    background: rgba(248, 250, 252, 0.96);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: none;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-steps em,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-cue > i {
    background: rgba(15, 23, 42, 0.05);
    color: rgba(15, 23, 42, 0.72);
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-cue {
    grid-template-columns: 160px minmax(120px, 0.7fr) minmax(360px, 1fr) 88px;
    min-height: 58px;
    padding: 10px 12px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(253, 242, 248, 0.98));
    border-color: rgba(244, 114, 182, 0.22);
    box-shadow: 0 12px 26px rgba(251, 146, 60, 0.12);
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-steps em,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-cue > i {
    background: rgba(255, 255, 255, 0.84);
    color: rgba(157, 23, 77, 0.76);
    box-shadow: inset 0 0 0 1px rgba(244, 114, 182, 0.14);
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-cue {
    grid-template-columns: 178px minmax(120px, 0.62fr) minmax(330px, 1fr) 94px;
    min-height: 56px;
    padding: 9px 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(2, 6, 23, 0.94), rgba(8, 47, 73, 0.88));
    border-color: rgba(56, 189, 248, 0.2);
    color: rgba(226, 244, 255, 0.94);
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.08);
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-head span,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-focus small {
    color: rgba(186, 230, 253, 0.68);
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-steps em,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-cue > i {
    border-radius: 8px;
    background: rgba(14, 165, 233, 0.12);
    color: rgba(186, 230, 253, 0.94);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.16);
  }
}

@media (max-width: 1099px) {
  .skin-workbench-cue {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 9px;
  }

  .skin-workbench-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skin-workbench-cue > i {
    justify-self: start;
  }
}

/* Desktop cute compact rhythm v82: keep the guided feeling while fitting more of the workbench above the fold. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    min-height: 142px !important;
    max-height: 176px !important;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack #generateBtn,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    font-size: 15px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main {
    min-height: 50px !important;
    padding: 7px 10px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    min-height: 42px !important;
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article {
    min-height: 36px !important;
    padding: 5px 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    min-height: 454px !important;
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box textarea {
    min-height: 76px !important;
    max-height: 92px !important;
    padding: 14px 16px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box .skin-workbench-cue {
    min-height: 48px !important;
    padding: 8px 10px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 82px !important;
    max-height: 92px !important;
    padding: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main {
    min-height: 60px !important;
    padding: 7px 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card {
    min-height: 46px !important;
    padding: 6px 7px !important;
  }
}

/* Desktop create commercial polish v83: reduce copy weight without moving the smoke-tested rails. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel {
    padding: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel button small,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-focus,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-steps,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-cue > i,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-workflow-strip,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-direction-card,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-style-title small,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel p {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .skin-workbench-cue {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 34px !important;
    padding: 6px 9px !important;
    border-radius: 10px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-toolbar {
    min-height: 32px !important;
    padding: 0 2px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 52px !important;
    max-height: 64px !important;
    padding: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card {
    min-height: 34px !important;
    padding: 5px 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick {
    max-height: 238px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    min-height: 132px !important;
    max-height: 164px !important;
    grid-template-columns: minmax(210px, 266px) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack #generateBtn,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    height: 106px !important;
    min-height: 106px !important;
    max-height: 106px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main {
    min-height: 44px !important;
    padding: 6px 9px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main small,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    min-height: 36px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article {
    min-height: 32px !important;
    padding: 4px 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick {
    border-color: rgba(244, 114, 182, 0.2) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 247, 237, 0.9)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .starter-workflow-strip,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .starter-direction-card,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .starter-style-title small,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel p {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    border-color: rgba(244, 114, 182, 0.18) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 10px 22px rgba(244, 114, 182, 0.08) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    gap: 6px !important;
    padding: 9px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 72px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-preflight:not(.hidden) {
    max-height: 168px !important;
    padding: 9px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(8, 24, 42, 0.94), rgba(2, 6, 23, 0.92)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-preflight .preflight-detail-toggle,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-preflight .preflight-grid,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-preflight .preflight-actions,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-preflight .prompt-understanding,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-grid {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-preflight .preflight-head {
    min-height: 30px !important;
    padding: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-preflight .preflight-summary,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-preflight .preflight-summary-grid span,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board article {
    min-height: 34px !important;
    padding: 6px 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main {
    min-height: 58px !important;
    padding: 8px 9px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main small,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board article small {
    -webkit-line-clamp: 1 !important;
  }
}

/* Desktop create acceleration v86: make skins feel like different workbenches, not color swaps. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow: visible !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row button {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 4px 7px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 188px minmax(760px, 1fr) 286px !important;
    gap: 10px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    min-height: 470px !important;
    max-height: 520px !important;
    padding: 10px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer textarea#prompt {
    min-height: 86px !important;
    max-height: 104px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick {
    max-height: 196px !important;
    min-height: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board {
    min-height: 0 !important;
    max-height: 104px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    min-height: 30px !important;
    max-height: 34px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    width: 286px !important;
    min-height: 380px !important;
    max-height: 456px !important;
    padding: 9px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 72px !important;
    max-height: 78px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main {
    min-height: 52px !important;
    max-height: 68px !important;
    padding: 7px 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    min-height: 36px !important;
    max-height: 40px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls {
    max-height: 128px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls label {
    min-height: 38px !important;
    padding: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 226px minmax(0, 1fr) 360px !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-column: 1 / 3 !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.92), rgba(253, 242, 248, 0.92)) !important;
    border-color: rgba(244, 114, 182, 0.2) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 212px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 / 4 !important;
    min-height: 430px !important;
    max-height: 500px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick {
    max-height: 206px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 220px minmax(660px, 1fr) 372px !important;
    gap: 10px !important;
    background:
      linear-gradient(90deg, rgba(2, 6, 23, 0.04), transparent 34%),
      rgba(255, 255, 255, 0.68) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    background: rgba(2, 6, 23, 0.92) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.08) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .mode-row button {
    color: rgba(219, 234, 254, 0.82) !important;
    background: rgba(15, 23, 42, 0.86) !important;
    border-color: rgba(56, 189, 248, 0.14) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .mode-row button.active {
    color: #e0f2fe !important;
    background: rgba(14, 165, 233, 0.2) !important;
    border-color: rgba(125, 211, 252, 0.38) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    max-height: 308px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    min-height: 486px !important;
    max-height: 560px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    width: 372px !important;
    max-height: 516px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls {
    max-height: 142px !important;
    overflow: hidden !important;
  }
}

/* Commercial MVP create workbench v87: clearer desktop workflow, no clipped action rail. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer {
    align-items: start !important;
    grid-auto-flow: dense !important;
    padding: 14px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .section-title {
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 4px 2px 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-summary {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-height: 74px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 / span 5 !important;
    border-color: rgba(15, 118, 110, 0.18) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 2 / span 5 !important;
    align-self: start !important;
    max-height: calc(100vh - 112px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    border-color: rgba(15, 118, 110, 0.2) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack::-webkit-scrollbar {
    width: 8px;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.22);
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    order: -20 !important;
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.18) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls {
    max-height: none !important;
    overflow: visible !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary-card {
    border-color: rgba(15, 118, 110, 0.14) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 188px minmax(780px, 1fr) 300px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    width: 300px !important;
    max-height: calc(100vh - 124px) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    max-height: 88px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    position: static !important;
    width: auto !important;
    max-height: 184px !important;
    overflow-y: hidden !important;
    box-shadow: 0 16px 38px rgba(251, 146, 60, 0.12) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 / 4 !important;
    grid-row: 3 / span 5 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    grid-column: 1 / 3 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 220px minmax(660px, 1fr) 372px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    width: 372px !important;
    max-height: calc(100vh - 108px) !important;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.94), rgba(8, 47, 73, 0.88)) !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
    box-shadow: 0 22px 52px rgba(2, 6, 23, 0.22) !important;
  }
}

/* Commercial MVP create workbench v88 final overrides. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status {
    order: -18 !important;
    min-height: 54px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status {
    min-height: 42px !important;
    max-height: 52px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip {
    display: grid !important;
  }
}

/* Trust sprint v89: reduce desktop visual noise and make pro a real control room. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] {
    background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.18), transparent 32%),
      linear-gradient(135deg, #07111f 0%, #020617 52%, #08111f 100%) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    background: linear-gradient(135deg, rgba(8, 24, 42, 0.92), rgba(2, 6, 23, 0.82)) !important;
    border: 1px solid rgba(56, 189, 248, 0.26) !important;
    box-shadow: 0 28px 70px rgba(2, 6, 23, 0.44), inset 0 0 0 1px rgba(125, 211, 252, 0.06) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .mode-row,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    background: rgba(2, 6, 23, 0.78) !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.05) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 72px !important;
    max-height: 92px !important;
    grid-template-columns: 0.95fr 1.3fr !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main {
    min-height: 58px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip {
    min-height: 58px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-self: stretch !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-preflight:not(.hidden) {
    max-height: 72px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-preflight .preflight-summary {
    display: grid !important;
    max-height: 42px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick {
    max-height: 210px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .queue {
    background: rgba(2, 6, 23, 0.9) !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 20px 50px rgba(2, 6, 23, 0.28) !important;
  }

  html:root:root:root:root[data-active-page="create"] .queue-item.submitting {
    border-color: rgba(14, 165, 233, 0.34) !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(255, 255, 255, 0.78)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .queue-item.submitting {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(2, 6, 23, 0.82)) !important;
  }
}

/* Trust sprint v90 final authority: keep this after all legacy override blocks. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr) !important;
    grid-template-areas:
      "direction fields"
      "style fields"
      "next next" !important;
    gap: 8px !important;
    max-height: none !important;
    min-height: 156px !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-direction-card {
    grid-area: direction !important;
    position: static !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel {
    grid-area: style !important;
    position: static !important;
    min-height: 78px !important;
    overflow: visible !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    grid-area: fields !important;
    position: static !important;
    min-height: 124px !important;
    overflow: visible !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    grid-area: next !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 38px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 98px !important;
    max-height: 118px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 118px !important;
    max-height: 138px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision-card:nth-child(n + 4) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template-summary {
    position: sticky !important;
    top: 74px !important;
    z-index: 12 !important;
    margin-bottom: 12px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 760px) {
  html,
  body,
  .app-shell,
  .panel.composer {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .panel.composer,
  .panel.composer .prompt-box,
  .panel.composer .delivery-stack,
  .panel.composer .blank-starter-quick,
  .panel.composer .starter-action-board,
  .panel.composer .starter-style-panel,
  .panel.composer .starter-field-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .panel.composer #generateBtn {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .prompt-live-preview {
    max-height: none !important;
    overflow: visible !important;
  }

  .prompt-live-mobile {
    display: grid;
    gap: 8px;
  }

  .prompt-live-mobile-head {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(20, 184, 166, 0.14);
  }

  .prompt-live-mobile-head span,
  .prompt-live-mobile-head small,
  .prompt-live-mobile-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .prompt-live-mobile .prompt-live-gap-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .prompt-live-mobile .prompt-live-professional {
    display: block !important;
    max-height: none !important;
  }

  .prompt-live-mobile > button {
    display: grid !important;
    place-items: center;
    min-height: 38px;
    border-radius: 12px;
  }
}

/* Trust sprint v91 final authority: create-page command bar and mode de-duplication. */
.create-toolbar-row {
  display: none;
}

@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: auto minmax(360px, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 40px !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.74) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row > span {
    color: #0f766e !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-skin-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(620px, 100%) !important;
    margin-left: auto !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-skin-row .skin {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 30px !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    text-align: left !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-skin-row .skin strong {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-skin-row .skin small {
    overflow: hidden !important;
    color: rgba(15, 23, 42, 0.58) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-skin-row .skin em {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-summary {
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-height: 56px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    grid-column: 1 !important;
    grid-row: 5 !important;
    min-height: 32px !important;
    max-height: 42px !important;
    padding: 4px !important;
    gap: 4px !important;
    border-radius: 12px !important;
    background: rgba(15, 118, 110, 0.06) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row button {
    min-height: 28px !important;
    padding: 5px 6px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    grid-column: 1 !important;
    grid-row: 6 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 / span 5 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    grid-column: 3 !important;
    grid-row: 3 / span 5 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    grid-column: 2 / 4 !important;
    grid-row: 3 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 / 4 !important;
    grid-row: 4 / span 5 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row {
    border-color: rgba(56, 189, 248, 0.22) !important;
    background: rgba(2, 6, 23, 0.72) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row > span {
    color: #7dd3fc !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .create-skin-row .skin small {
    color: rgba(219, 234, 254, 0.68) !important;
  }
}

@media (max-width: 760px) {
  .panel.composer .create-toolbar-row {
    display: grid;
    gap: 8px;
    width: 100%;
  }

  .panel.composer .create-toolbar-row > span {
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
  }

  .panel.composer .create-skin-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .panel.composer .create-skin-row .skin {
    min-height: 36px;
    padding: 6px;
  }

  .panel.composer .create-skin-row .skin small,
  .panel.composer .create-skin-row .skin em {
    display: none;
  }
}

/* Trust sprint v92 final prompt compactness after create command bar. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 72px !important;
    max-height: 88px !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    max-height: 58px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main em,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 104px !important;
    max-height: 118px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision-card:nth-child(n + 4) {
    display: none !important;
  }
}

/* Trust sprint v93 final authority: clean skin shows source-aware proof, not the long live parser. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 74px !important;
    max-height: 88px !important;
    padding: 8px !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-missing,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    min-height: 54px !important;
    max-height: 64px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 7px 8px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card b,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card small {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Trust sprint v94: keep clean skin compact while exposing the source/change proof strip. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    grid-template-rows: 40px 24px !important;
    gap: 4px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature {
    min-height: 38px !important;
    max-height: 40px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature-card {
    padding: 4px 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 22px !important;
    max-height: 24px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip span {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 3px 6px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip b,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip em {
    display: inline !important;
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Trust sprint v97 final authority: keep desktop controls above the fold. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer {
    position: relative !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    position: absolute !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    top: 16px !important;
    left: 210px !important;
    z-index: 8 !important;
    display: grid !important;
    width: 270px !important;
    max-width: calc(100% - 920px) !important;
    min-width: 220px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 30px !important;
    max-height: 32px !important;
    padding: 3px !important;
    border: 1px solid rgba(15, 118, 110, 0.14) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row button {
    grid-column: auto !important;
    min-height: 24px !important;
    padding: 3px 6px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row button:first-child,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row button.active {
    grid-column: auto !important;
    width: auto !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .mode-row {
    border-color: rgba(56, 189, 248, 0.24) !important;
    background: rgba(8, 24, 42, 0.92) !important;
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.18) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .delivery-node-status small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .delivery-node-status {
    min-height: 64px !important;
    max-height: 70px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .delivery-stage-strip article small,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .settings-summary small,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .price-hint small {
    display: none !important;
  }
}

/* Trust sprint v98 final authority: source-led generate confirmation. */
.generate-confirm-user-lead {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr);
}

.generate-confirm-user-lead article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(20, 184, 166, 0.16);
  border-radius: 12px;
  background: rgba(240, 253, 250, 0.78);
}

.generate-confirm-user-lead b {
  color: #0f766e;
  font-size: 11px;
  font-weight: 950;
}

.generate-confirm-user-lead strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generate-confirm-user-lead small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: rgba(15, 23, 42, 0.68);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generate-confirm-diff-strip {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.generate-confirm-diff-strip article {
  display: grid;
  min-width: 0;
  min-height: 54px;
  align-content: start;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.92);
}

.generate-confirm-diff-strip article[data-tone="keep"] {
  border-color: rgba(20, 184, 166, 0.18);
  background: rgba(240, 253, 250, 0.84);
}

.generate-confirm-diff-strip article[data-tone="add"] {
  border-color: rgba(59, 130, 246, 0.16);
  background: rgba(239, 246, 255, 0.84);
}

.generate-confirm-diff-strip article[data-tone="check"] {
  border-color: rgba(245, 158, 11, 0.18);
  background: rgba(255, 251, 235, 0.86);
}

.generate-confirm-diff-strip b {
  color: rgba(51, 65, 85, 0.78);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.1;
}

.generate-confirm-diff-strip strong {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #0f172a;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .generate-confirm-user-lead {
    grid-template-columns: 1fr;
  }

  .generate-confirm-diff-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Trust sprint v99 final authority: clean desktop shows one readable source strip, not stacked parser cards. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    min-height: 64px !important;
    max-height: 78px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    background: rgba(240, 253, 250, 0.72) !important;
    border-color: rgba(20, 184, 166, 0.16) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-signature,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-summary,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-echo,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-missing,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr 0.85fr !important;
    gap: 8px !important;
    min-height: 48px !important;
    max-height: 58px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip span {
    display: grid !important;
    align-content: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 7px 9px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip b {
    display: block !important;
    overflow: hidden !important;
    color: #0f766e !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip em {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-style: normal !important;
    line-height: 1.2 !important;
  }
}

/* Trust sprint v184: confirm and empty preview read as a short review sheet. */
.generate-confirm-diff-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.generate-confirm-diff-strip article {
  min-height: 44px;
  padding: 7px 8px;
}

.generate-confirm-decision {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.generate-confirm-safe-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.generate-confirm-user-lead article {
  padding: 7px 9px;
}

.generate-confirm-user-lead small {
  font-size: 10.5px;
}

.prompt-live-preview.is-empty .prompt-live-gap-strip {
  grid-template-columns: minmax(0, 1fr);
}

.prompt-live-preview.is-empty .prompt-live-gap-strip span {
  min-height: 32px;
}

@media (min-width: 760px) {
  .generate-confirm {
    grid-template-columns: minmax(0, 1fr) 168px !important;
  }

  .generate-confirm-diff-strip,
  .generate-confirm-decision {
    gap: 5px !important;
  }

  .generate-confirm-diff-strip article,
  .generate-confirm-decision article {
    min-height: 42px !important;
    padding: 7px !important;
  }

  .generate-confirm-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .generate-confirm-summary article {
    min-height: 38px !important;
  }
}

@media (max-width: 760px) {
  .generate-confirm-diff-strip,
  .generate-confirm-decision,
  .generate-confirm-safe-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Trust sprint v100 final authority: clean desktop fills the workbench instead of leaving a hollow lower half. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    min-height: 620px !important;
    align-content: start !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    min-height: 326px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    min-height: 212px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    min-height: 118px !important;
  }
}

/* Trust sprint v101: desktop first-screen calm and action-first delivery rail. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row {
    min-height: 40px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row > span {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-skin-row {
    gap: 8px !important;
    grid-column: 1 / -1 !important;
    justify-self: end !important;
    width: min(520px, calc(100% - 570px)) !important;
    min-width: 420px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-skin-row .skin {
    min-height: 30px !important;
    padding: 5px 12px !important;
    align-content: center !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-skin-row .skin small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-skin-row .skin em,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel button small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .track-card small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    gap: 8px !important;
    padding: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 76px !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #deliveryOrderPanel {
    display: grid !important;
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main {
    min-height: 60px !important;
    padding: 10px !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main span,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main small,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-score {
    box-sizing: border-box !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 3px 4px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status {
    min-height: 48px !important;
    max-height: 52px !important;
    padding: 9px 10px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    min-height: 34px !important;
    max-height: 38px !important;
    padding: 5px !important;
    gap: 5px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article {
    min-height: 24px !important;
    padding: 4px 6px !important;
    gap: 4px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .settings-summary {
    min-height: 42px !important;
    padding: 8px 10px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .settings-summary small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .settings-summary span,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .settings-summary strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls.collapsed {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    max-height: 160px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls label:first-child {
    grid-column: 1 / -1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls label {
    gap: 4px !important;
    min-height: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls select,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls input {
    min-height: 38px !important;
    padding: 7px 10px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .price-hint {
    min-height: 28px !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Trust sprint v102 final authority: desktop starter becomes a compact task launcher. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-diff,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick:not(.hidden) {
    height: 286px !important;
    max-height: 286px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-head {
    min-height: 42px !important;
    padding: 8px 10px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-head small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-title small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-workflow-strip {
    min-height: 34px !important;
    max-height: 38px !important;
    padding: 5px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-workflow-step {
    min-height: 24px !important;
    padding: 4px 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-workflow-step small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "style fields"
      "next next" !important;
    gap: 8px !important;
    height: 166px !important;
    min-height: 0 !important;
    max-height: 166px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    height: 286px !important;
    max-height: 286px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-direction-card {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel {
    grid-area: style !important;
    min-height: 78px !important;
    padding: 9px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    grid-area: fields !important;
    min-height: 78px !important;
    padding: 9px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants button,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips button {
    min-height: 28px !important;
    padding: 5px 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    grid-area: next !important;
    min-height: 34px !important;
    max-height: 38px !important;
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    min-height: 32px !important;
    padding: 6px 10px !important;
  }
}

/* Trust sprint v102 final authority tail sentinel. */

/* Trust sprint v103: the first create-page render can occur before skin-specific
   attributes settle, so keep the desktop starter density independent of skin. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-proof,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-diff,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-professional {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick:not(.hidden) {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: 42px 34px 166px 32px !important;
    gap: 6px !important;
    height: 292px !important;
    min-height: 0 !important;
    max-height: 292px !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-head {
    min-height: 0 !important;
    height: 42px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-head small,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-style-title small,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel small,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open small,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-workflow-strip,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-direction-card {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-tabs {
    height: 34px !important;
    min-height: 0 !important;
    max-height: 34px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-tabs button {
    min-height: 28px !important;
    padding: 5px 8px !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "style fields"
      "next next" !important;
    gap: 8px !important;
    height: 166px !important;
    min-height: 0 !important;
    max-height: 166px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    min-height: 0 !important;
    height: 118px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel {
    grid-area: style !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    grid-area: fields !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants button,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips button {
    min-height: 27px !important;
    padding: 5px 7px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    grid-area: next !important;
    height: 38px !important;
    min-height: 0 !important;
    max-height: 38px !important;
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    min-height: 0 !important;
    height: 32px !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box {
    height: 532px !important;
    min-height: 0 !important;
    max-height: 532px !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #prompt {
    min-height: 150px !important;
  }
}

/* Trust sprint v103 final authority tail sentinel. */
/* Trust sprint v104: clean workbench shows decisions first, detailed controls on demand. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-toolbar > div {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box:focus-within .prompt-toolbar > div {
    display: flex !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls.collapsed {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls:not(.collapsed) {
    display: grid !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Trust sprint v104 final authority tail sentinel. */

/* Trust sprint v105 final authority: quiet default desktop create and denser professional templates. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .create-skin-row {
    width: min(420px, 34vw) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .starter-quick-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .starter-quick-tabs button:nth-child(n+4) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick:not(.hidden) {
    grid-template-rows: 40px 30px 148px 32px !important;
    gap: 6px !important;
    height: 274px !important;
    max-height: 274px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    height: 148px !important;
    max-height: 148px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    height: 100px !important;
    max-height: 100px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants button:nth-child(n+3) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status {
    min-height: 62px !important;
    max-height: 68px !important;
    gap: 4px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template {
    min-height: 0 !important;
    padding: 10px !important;
    gap: 8px !important;
    grid-template-rows: 58px auto auto auto !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template .template-visual-preview {
    min-height: 54px !important;
    max-height: 58px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template small,
  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .template-card-handoff small {
    -webkit-line-clamp: 2 !important;
  }
}

/* Trust sprint v105 final authority tail sentinel. */
/* Trust sprint v106 final authority tail append: desktop skins are different workbenches, not recolors. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row.mode-row {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row.create-toolbar-row {
    grid-column: 1 / -1 !important;
    min-height: 46px !important;
    height: 48px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 168px minmax(720px, 1fr) 268px !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    grid-column: 3 !important;
    width: 100% !important;
    max-width: 268px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    grid-template-rows: auto 184px auto !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    width: 100% !important;
    position: sticky !important;
    top: 92px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 176px !important;
    height: 184px !important;
    max-height: 184px !important;
    position: static !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    height: 100% !important;
    min-height: 140px !important;
    max-height: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #deliveryOrderPanel {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .settings-summary,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .price-hint {
    grid-column: 2 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .pricing-controls {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 520px !important;
    height: 560px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    height: 252px !important;
    max-height: 252px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 220px minmax(620px, 1fr) 360px !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-panel.track-panel {
    grid-column: 1 !important;
    width: 100% !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .track-panel.track-panel {
    display: grid !important;
    grid-row: 3 !important;
    min-height: 300px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    grid-column: 3 !important;
    width: 100% !important;
    max-width: 360px !important;
    min-height: 720px !important;
  }
}

/* Trust sprint v106 final authority tail sentinel. */

/* Trust sprint v107 final authority tail append: calmer clean desktop and earlier professional template signals. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    grid-template-rows: 34px 24px 118px 30px !important;
    gap: 4px !important;
    height: 220px !important;
    max-height: 220px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board {
    height: 118px !important;
    max-height: 118px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    min-height: 28px !important;
    height: 30px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    min-height: 28px !important;
    height: 30px !important;
  }
}

/* Trust sprint v107 final authority tail sentinel. */
/* Trust sprint v110 final authority tail append: EOF desktop information budget guard. */
@media (min-width: 980px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview {
    gap: 6px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-proof,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-diff,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-echo,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-professional,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-missing,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview > button {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: 82px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-main,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-decision,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-summary {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview {
    grid-template-columns: 176px minmax(0, 1fr) !important;
    max-height: 108px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-main {
    grid-column: 1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-gap-strip,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-signature {
    grid-column: 2 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-decision,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-summary {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview {
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: 112px !important;
    border-color: rgba(56, 189, 248, 0.34) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-main {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-signature,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview .prompt-live-decision {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
}

/* Trust sprint v110 final authority tail sentinel. */

/* Trust sprint v111 final authority tail append: template page gets a calmer mobile hierarchy. */
@media (max-width: 720px) {
  :root:root:root[data-active-page="templates"] .app-shell .template-workbench-panel {
    gap: 10px !important;
    padding: 12px 12px calc(104px + env(safe-area-inset-bottom)) !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell #templateBriefPanel.template-brief-panel {
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-primary {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 3px 8px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-primary span {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-primary strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 18px !important;
    line-height: 1.16 !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-primary small {
    grid-column: 1 / -1 !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-launch {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-cta-copy {
    min-width: 0 !important;
    gap: 2px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-cta-copy span,
  :root:root:root[data-active-page="templates"] .app-shell .template-brief-cta-copy small {
    display: none !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-cta-copy strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-launch button {
    width: auto !important;
    min-width: 122px !important;
    min-height: 44px !important;
    max-height: 46px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-value {
    padding: 8px 9px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-value strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 15px !important;
    line-height: 1.34 !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-flow article {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 2px 5px !important;
    min-height: 46px !important;
    padding: 6px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-flow b {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-flow span {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-brief-flow small {
    grid-column: 1 / -1 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1.18 !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-workbench-block {
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-workbench-block > span {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-workbench-block.strong > strong {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-choice-row {
    gap: 8px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-choice-row button {
    min-height: 48px !important;
    max-height: 56px !important;
    border-radius: 16px !important;
    padding: 7px 8px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-choice-row button strong {
    font-size: 16px !important;
    line-height: 1.08 !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-choice-row button small {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }
}

@media (min-width: 1100px) {
  :root:root:root[data-active-page="templates"] .app-shell .template-workbench-panel {
    gap: 12px !important;
    padding: 12px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-workbench-block {
    min-height: 144px !important;
    padding: 12px !important;
    gap: 9px !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-workbench-block > strong {
    font-size: 18px !important;
    line-height: 1.22 !important;
  }

  :root:root:root[data-active-page="templates"] .app-shell .template-choice-row button {
    min-height: 44px !important;
    padding: 8px 9px !important;
  }
}

/* Trust sprint v111 final authority tail sentinel. */

/* Trust sprint v112 final authority tail append: desktop generate rail gets real working width. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 176px minmax(720px, 1fr) 372px !important;
    gap: 14px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    min-width: 0 !important;
    width: 100% !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    width: 372px !important;
    max-width: 372px !important;
    min-height: 420px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 78px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status {
    min-height: 56px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .settings-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .price-hint {
    min-height: 30px !important;
    align-content: center !important;
  }
}

/* Trust sprint v112 final authority tail sentinel. */

/* Trust sprint v113 final authority tail append: create page exposes primary creation paths. */
.create-shortcut-dock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-height: 58px;
}

.create-shortcut-dock button {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.88);
  color: #0f172a;
  text-align: left;
  box-shadow: none;
}

.create-shortcut-dock button.active,
.create-shortcut-dock button:hover {
  border-color: rgba(14, 165, 233, 0.38);
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.96), rgba(240, 253, 250, 0.94));
}

.create-shortcut-dock strong,
.create-shortcut-dock small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-shortcut-dock strong {
  font-size: 14px;
  line-height: 1.1;
  font-weight: 900;
}

.create-shortcut-dock small {
  color: rgba(15, 23, 42, 0.58);
  font-size: 11px;
  line-height: 1.1;
}

@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .create-shortcut-dock {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-height: 58px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 760px) {
  .create-shortcut-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Trust sprint v113 final authority tail sentinel. */

/* Trust sprint v114 final authority tail append: prompt preview must show user-specific blueprint first. */
.prompt-live-blueprint {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.prompt-live-blueprint-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 46px;
  padding: 8px 9px;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.prompt-live-blueprint-card b,
.prompt-live-blueprint-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-live-blueprint-card b {
  color: rgba(15, 23, 42, 0.58);
  font-size: 11px;
  line-height: 1.1;
  font-weight: 800;
}

.prompt-live-blueprint-card small {
  color: #0f172a;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 900;
}

.create-shortcut-dock button.active {
  border-color: rgba(15, 118, 110, 0.46);
  background: linear-gradient(135deg, rgba(204, 251, 241, 0.98), rgba(224, 242, 254, 0.96));
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.2);
}

@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-blueprint {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-blueprint {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-main,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-gap-strip,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-decision {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-blueprint {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-blueprint-card {
    background: rgba(8, 24, 42, 0.74);
    border-color: rgba(125, 211, 252, 0.22);
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-blueprint-card b {
    color: rgba(186, 230, 253, 0.72);
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .prompt-live-blueprint-card small {
    color: rgba(240, 249, 255, 0.96);
  }
}

@media (max-width: 760px) {
  .prompt-live-blueprint {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prompt-live-blueprint-card {
    min-height: 42px;
    padding: 7px 8px;
  }
}

/* Trust sprint v114 final authority tail sentinel. */

/* Trust sprint v115: desktop action belongs beside the prompt, while delivery stays a compact status rail. */
.prompt-action-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(168px, 220px);
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(240, 249, 255, 0.96), rgba(240, 253, 250, 0.96));
}

.prompt-action-dock.hidden {
  display: none !important;
}

.prompt-action-dock div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.prompt-action-dock span {
  color: #0284c7;
  font-size: 12px;
  font-weight: 900;
}

.prompt-action-dock small {
  min-width: 0;
  overflow: hidden;
  color: rgba(15, 23, 42, 0.64);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-action-dock button {
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #0ea5e9, #14b8a6);
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 12px 30px rgba(14, 165, 233, 0.22);
}

.prompt-action-dock button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  box-shadow: none;
}

@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    grid-template-rows: auto minmax(150px, auto) auto auto auto auto auto !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main small,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .settings-summary small,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .price-hint small,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-grid,
  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    align-content: start !important;
    gap: 9px !important;
    min-height: 312px !important;
    max-height: 360px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status {
    min-height: 48px !important;
  }

  html:root:root:root:root[data-active-page="create"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article {
    min-height: 34px !important;
    padding: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 176px minmax(760px, 1fr) 332px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    width: 332px !important;
    max-width: 332px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 58px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: minmax(250px, 0.72fr) minmax(640px, 1.28fr) 286px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board {
    grid-template-columns: 1fr !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    width: 286px !important;
    max-width: 286px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 240px minmax(680px, 1fr) 320px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    width: 320px !important;
    max-width: 320px !important;
  }
}

@media (max-width: 760px) {
  .prompt-action-dock {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Trust sprint v116: keep the three desktop skins structurally different after compacting the noisy rail. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-action-dock.prompt-action-dock {
    min-height: 62px !important;
    height: 62px !important;
    max-height: 66px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 176px minmax(740px, 1fr) 340px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    width: 340px !important;
    max-width: 340px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #generateBtn {
    min-height: 72px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: minmax(206px, 0.58fr) minmax(720px, 1.42fr) 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    width: 720px !important;
    max-width: 720px !important;
    min-height: 176px !important;
    max-height: 184px !important;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.8fr) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 240px minmax(640px, 1fr) 366px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    width: 366px !important;
    max-width: 366px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-main small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .settings-summary small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .price-hint small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-order-grid,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board {
    display: none !important;
  }
}

/* Trust sprint v118: desktop create screen shows fewer helper layers before user intent is clear. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-action-dock.prompt-action-dock {
    min-height: 66px !important;
    height: 66px !important;
    max-height: 68px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    position: relative !important;
    grid-template-rows: 32px 22px 92px !important;
    align-content: start !important;
    gap: 6px !important;
    min-height: 188px !important;
    height: 188px !important;
    max-height: 188px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    min-height: 100px !important;
    height: 100px !important;
    max-height: 100px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    min-height: 72px !important;
    height: 72px !important;
    max-height: 72px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-direction-card,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-workflow-step small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-title small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-workflow-strip {
    min-height: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-head {
    min-height: 32px !important;
    max-height: 32px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    position: absolute !important;
    left: 8px !important;
    right: 112px !important;
    bottom: 8px !important;
    width: auto !important;
    min-height: 26px !important;
    height: 26px !important;
    max-height: 26px !important;
    overflow: hidden !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button:nth-child(n+4) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    width: 96px !important;
    min-height: 26px !important;
    height: 26px !important;
    max-height: 26px !important;
    overflow: hidden !important;
    grid-template-columns: 1fr !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open small {
    display: none !important;
  }
}

/* Trust sprint v119: collapse duplicate creation shortcuts after the guided starter is visible. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box:has(#blankStarterQuickPanel.blank-starter-quick:not(.hidden)) #createShortcutDock.create-shortcut-dock {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack #generateBtn {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    right: 112px !important;
    grid-template-columns: minmax(168px, 1.2fr) minmax(100px, 0.8fr) minmax(120px, 0.9fr) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button:nth-child(-n+3) {
    display: grid !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button:nth-child(n+4) {
    display: none !important;
  }
}

/* Trust sprint v120: scenario clicks expose a real next-step button row without bringing back the entry wall. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    grid-template-columns: minmax(150px, 1.15fr) minmax(88px, 0.72fr) minmax(88px, 0.72fr) minmax(118px, 0.9fr) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button:nth-child(-n+4) {
    display: grid !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button:nth-child(n+5) {
    display: none !important;
  }
}

/* Trust sprint v121: scenario clicks become a real guided row, not a cramped hidden strip. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    grid-template-rows: 34px 28px minmax(104px, auto) !important;
    min-height: 228px !important;
    height: 228px !important;
    max-height: 228px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    min-height: 142px !important;
    height: 142px !important;
    max-height: 142px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    position: static !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    overflow: hidden !important;
    grid-template-columns: minmax(156px, 1.18fr) repeat(4, minmax(82px, 0.82fr)) minmax(108px, 0.9fr) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button:nth-child(-n+6) {
    display: grid !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button:nth-child(n+7) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button {
    min-height: 40px !important;
    padding: 8px 10px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    right: 10px !important;
    bottom: 10px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 156px minmax(760px, 1fr) 340px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    width: 340px !important;
    max-width: 340px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 232px minmax(660px, 1fr) 380px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    width: 380px !important;
    max-width: 380px !important;
  }
}

/* Template focus final authority v31: starter keeps one clear path; hidden libraries must not be revived by skin overrides. */
html:root:root:root:root[data-active-page="templates"] .app-shell.app-shell [data-template-library][hidden],
html:root:root:root:root[data-active-page="templates"] .app-shell.app-shell [data-template-workbench][hidden],
html:root:root:root:root[data-active-page="templates"] .app-shell.app-shell .template-workbench-block[hidden],
html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] .app-shell.app-shell .template-filter-panel[hidden],
html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] .app-shell.app-shell .package-panel[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Trust sprint v122: desktop professional starter must remain a usable workbench, not a compressed overlay. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) {
    display: grid !important;
    align-items: start !important;
    gap: 12px !important;
    grid-auto-flow: row !important;
    grid-template-rows: auto 48px auto auto auto !important;
    min-height: calc(100vh - 138px) !important;
    overflow: visible !important;
    padding: 14px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: 240px minmax(720px, 1fr) 340px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: 220px minmax(700px, 1fr) 360px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) {
    grid-template-columns: 250px minmax(680px, 1fr) 380px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .section-title {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 2px 2px 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .create-toolbar-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-height: 44px !important;
    max-height: 48px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-height: 124px !important;
    max-height: 180px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief {
    grid-column: 1 !important;
    grid-row: 4 !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 190px !important;
    max-height: 290px !important;
    overflow: auto !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .track-panel {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .track-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .track-panel {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 5 !important;
    max-height: 308px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .mode-row,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .creation-mode-summary {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box.prompt-box {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 3 / span 4 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(148px, 162px) auto auto auto !important;
    align-content: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 540px !important;
    height: 540px !important;
    max-height: 540px !important;
    overflow: hidden !important;
    padding: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box.prompt-box > * {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-toolbar {
    display: flex !important;
    width: 100% !important;
    min-height: 32px !important;
    max-height: 36px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-toolbar span {
    display: inline-block !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 148px !important;
    height: 156px !important;
    max-height: 166px !important;
    overflow: auto !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .blank-starter-quick.blank-starter-quick:not(.hidden) {
    width: 100% !important;
    min-height: 188px !important;
    height: 188px !important;
    max-height: 198px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .delivery-stack.delivery-stack {
    grid-column: 3 !important;
    grid-row: 3 / span 4 !important;
    position: sticky !important;
    top: 96px !important;
    width: 100% !important;
    min-height: 420px !important;
    max-height: 620px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v123: desktop starter buttons become a calm action bar, not a duplicate button wall. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    grid-template-rows: 30px 24px 112px 32px !important;
    gap: 6px !important;
    min-height: 228px !important;
    height: 228px !important;
    max-height: 228px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(66px, 1fr) 36px !important;
    gap: 8px !important;
    min-height: 112px !important;
    height: 112px !important;
    max-height: 112px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-direction-card {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    min-height: 66px !important;
    height: 66px !important;
    max-height: 66px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-title,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel > div:first-child {
    min-height: 18px !important;
    max-height: 20px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-title small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel strong,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants button,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips button {
    min-height: 30px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants button:nth-child(n + 5),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips button:nth-child(n + 5) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button:not(.primary):not([data-starter-next-generate]) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 7px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    position: static !important;
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open span,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr) !important;
  }
}

/* Trust sprint v124: remove the desktop dead gap between review action, prompt input, and starter choices. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box.prompt-box {
    grid-template-rows: auto auto auto auto auto auto auto !important;
    align-content: start !important;
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #skinWorkbenchCue {
    order: 0 !important;
    min-height: 42px !important;
    max-height: 52px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #promptActionDock {
    order: 1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #promptToolbar {
    order: 2 !important;
    min-height: 28px !important;
    max-height: 32px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) textarea#prompt {
    order: 3 !important;
    min-height: 104px !important;
    height: 108px !important;
    max-height: 118px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #promptLivePreview {
    order: 4 !important;
    min-height: 68px !important;
    max-height: 84px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick.blank-starter-quick:not(.hidden) {
    order: 5 !important;
    margin-top: 0 !important;
  }
}

/* Trust sprint v125: desktop workbench convergence for wide screens. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="home"][data-skin] .app-shell.app-shell,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell,
  html:root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell {
    width: min(1500px, calc(100vw - 96px)) !important;
  }

  html:root:root:root:root[data-active-page="home"][data-skin] .app-shell.app-shell .quick-actions {
    grid-template-columns: 220px repeat(3, minmax(160px, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  html:root:root:root:root[data-active-page="home"][data-skin] .app-shell.app-shell .quick-actions-head {
    grid-column: 1 !important;
    display: grid !important;
    align-content: center !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.72) !important;
  }

  html:root:root:root:root[data-active-page="home"][data-skin] .app-shell.app-shell .quick-actions-head small {
    max-width: none !important;
    text-align: left !important;
  }

  html:root:root:root:root[data-active-page="home"][data-skin] .app-shell.app-shell .quick-actions button {
    min-height: 64px !important;
    max-height: 74px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="home"][data-skin] .app-shell.app-shell .scenario-strip {
    overflow: visible !important;
  }

  html:root:root:root:root[data-active-page="home"][data-skin] .app-shell.app-shell .scenario-scroll {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  html:root:root:root:root[data-active-page="home"][data-skin] .app-shell.app-shell .scenario-scroll button {
    min-height: 88px !important;
    max-height: 104px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 220px minmax(760px, 1fr) 340px !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-items: start !important;
    min-height: calc(100vh - 170px) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    position: sticky !important;
    top: 96px !important;
    min-height: 132px !important;
    max-height: 180px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    grid-column: 1 !important;
    grid-row: 4 !important;
    margin-top: 12px !important;
    max-height: 238px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    grid-column: 3 !important;
    grid-row: 3 / span 3 !important;
    position: sticky !important;
    top: 96px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 420px !important;
    height: auto !important;
    max-height: 620px !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack > * {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack .generation-settings-panel,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack .pricing-controls {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack #priceHint.price-hint {
    display: grid !important;
    min-height: 34px !important;
    align-content: center !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack .delivery-order-panel {
    max-height: 118px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    grid-column: 2 !important;
    grid-row: 3 / span 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 620px !important;
    height: auto !important;
    max-height: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer textarea#prompt {
    min-height: 136px !important;
    height: 150px !important;
    max-height: 190px !important;
    overflow: auto !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    min-height: 238px !important;
    height: 238px !important;
    max-height: 246px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell .template-workbench-panel {
    grid-template-columns: minmax(760px, 1fr) 360px !important;
    min-height: 540px !important;
    align-items: stretch !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell #templateBriefPanel.template-brief-panel {
    min-height: 414px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell .template-workbench-grid {
    min-height: 388px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell .template-choice-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Trust sprint v125 final authority tail sentinel. */

/* Trust sprint v126: create page information diet and shorter desktop workbench. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer {
    min-height: min(760px, calc(100vh - 170px)) !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    min-height: 540px !important;
    align-content: start !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    min-height: 560px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    display: grid !important;
    grid-template-rows: 30px 26px minmax(86px, auto) 30px !important;
    min-height: 180px !important;
    height: 180px !important;
    max-height: 190px !important;
    padding: 9px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-workflow-strip {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board.starter-compact-board,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(54px, 1fr) 30px !important;
    gap: 7px !important;
    min-height: 86px !important;
    height: 86px !important;
    max-height: 92px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    min-height: 54px !important;
    height: 54px !important;
    max-height: 58px !important;
    padding: 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-title {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel > div:first-child {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
    min-height: 18px !important;
    max-height: 18px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel > div:first-child strong {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants button,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips button,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    grid-template-columns: minmax(180px, 1fr) minmax(130px, 190px) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 5px 10px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview {
    min-height: 60px !important;
    max-height: 74px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    min-height: 360px !important;
    max-height: 480px !important;
  }
}

/* Trust sprint v126 final authority tail sentinel. */

/* Trust sprint v127: make the starter guide a readable three-row strip. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    grid-template-rows: 30px 26px 100px 30px !important;
    min-height: 198px !important;
    height: 198px !important;
    max-height: 204px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board.starter-compact-board,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 30px 30px 30px !important;
    gap: 5px !important;
    min-height: 100px !important;
    height: 100px !important;
    max-height: 100px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    display: grid !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border-color: transparent !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel {
    grid-row: 1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    grid-row: 2 !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    padding-left: 2px !important;
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel > div:first-child span {
    display: block !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel > div:first-child strong,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel > div:first-child small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants button,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips button {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    grid-row: 3 !important;
    height: 30px !important;
    max-height: 30px !important;
  }
}

/* Trust sprint v127 final authority tail sentinel. */

/* Trust sprint v128: remove the last first-screen button wall from starter cards. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    grid-template-rows: 30px 26px 66px 30px !important;
    min-height: 190px !important;
    height: 190px !important;
    max-height: 196px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board.starter-compact-board,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-action-board {
    grid-template-rows: 30px 30px !important;
    min-height: 66px !important;
    height: 66px !important;
    max-height: 66px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-next-actions * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open {
    display: grid !important;
    grid-row: 4 !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    align-items: center !important;
    opacity: 1 !important;
    color: var(--ink) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .starter-field-open small {
    display: none !important;
  }
}

/* Trust sprint v128 final authority tail sentinel. */

/* Trust sprint v129: remove duplicate preflight ghost text from non-pro create skins. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #promptPreflight,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #promptPreflight,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #promptPreflight,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #promptPreflight {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v129 final authority tail sentinel. */

/* Trust sprint v130: force the compact starter board to its real two-row height. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board.starter-compact-board,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 30px 30px !important;
    min-height: 66px !important;
    height: 66px !important;
    max-height: 66px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-style-panel {
    grid-row: 1 !important;
    grid-column: 1 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-field-panel {
    grid-row: 2 !important;
    grid-column: 1 !important;
  }
}

/* Trust sprint v130 final authority tail sentinel. */

/* Trust sprint v131: case templates must fill the desktop workbench before long case lists. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-workbench-panel {
    min-height: 540px !important;
    grid-template-columns: minmax(760px, 1fr) 360px !important;
    grid-template-rows: 48px minmax(388px, auto) !important;
    grid-template-areas:
      "switch switch"
      "main brief" !important;
    align-items: stretch !important;
  }

  html:root:root:root:root[data-active-page="templates"]:not([data-template-view="professional"]) .app-shell.app-shell .template-workbench-panel {
    grid-template-rows: 48px minmax(388px, auto) !important;
    grid-template-areas:
      "switch switch"
      "main brief" !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell .template-view-switch {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 6px !important;
    align-items: center !important;
    align-self: start !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-skin] .app-shell.app-shell .template-view-switch button {
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    line-height: 1 !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-workbench-grid {
    display: grid !important;
    min-height: 388px !important;
    height: 388px !important;
    max-height: 388px !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-workbench-block[data-template-workbench="case"] {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    min-height: 388px !important;
    height: 388px !important;
    max-height: 388px !important;
    padding: 18px !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-workbench-block[data-template-workbench="case"] > span {
    display: inline-flex !important;
    max-width: max-content !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-workbench-block[data-template-workbench="case"] > strong {
    max-width: 620px !important;
    margin: 0 0 10px !important;
    font-size: 22px !important;
    line-height: 1.18 !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-workbench-block[data-template-workbench="case"] .template-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-self: stretch !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-workbench-block[data-template-workbench="case"] .template-choice-row button {
    min-height: 128px !important;
    max-height: none !important;
    padding: 16px !important;
    border-radius: 14px !important;
    align-content: center !important;
    justify-items: start !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-workbench-block[data-template-workbench="case"] .template-choice-row button strong {
    font-size: 19px !important;
    line-height: 1.16 !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-workbench-block[data-template-workbench="case"] .template-choice-row button small {
    display: block !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    opacity: 0.82 !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell #templateBriefPanel.template-brief-panel {
    min-height: 502px !important;
    max-height: 502px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .package-panel[hidden] {
    display: none !important;
  }
}

/* Trust sprint v132: make 760-1099px create a clear narrow desktop flow instead of overlapping rails. */
@media (min-width: 760px) and (max-width: 1099px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell {
    width: min(860px, calc(100vw - 96px)) !important;
    margin-inline: auto !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
    align-items: stretch !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    overflow: visible !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer > * {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    position: static !important;
    transform: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .section-title {
    grid-row: 1 !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: min-content !important;
    gap: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptActionDock {
    order: 1 !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) !important;
    min-height: 60px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptToolbar {
    order: 2 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer textarea#prompt {
    order: 3 !important;
    min-height: 118px !important;
    height: 132px !important;
    max-height: 150px !important;
    overflow: auto !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview {
    order: 4 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 74px !important;
    max-height: 112px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-proof,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-diff,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-professional,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-missing {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    order: 5 !important;
    display: grid !important;
    min-height: 132px !important;
    height: auto !important;
    max-height: 180px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 320px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack #generateBtn {
    display: block !important;
    width: 100% !important;
    min-height: 54px !important;
    height: auto !important;
    max-height: 68px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack .generation-settings-panel,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack .pricing-controls,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack .template-delivery-sheet {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel {
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 52px !important;
    max-height: 70px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 6px 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel button small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-summary,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    display: none !important;
  }
}

/* Trust sprint v131 final authority tail sentinel. */

/* Trust sprint v132: hidden professional templates must not leak into the desktop template wall. */
html:root:root:root:root[data-active-page="templates"] .app-shell.app-shell .professional-template[hidden],
html:root:root:root:root[data-active-page="templates"] .app-shell.app-shell .professional-template-grid .professional-template[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Trust sprint v132 final authority tail sentinel. */

/* Trust sprint v133: professional templates must occupy the first screen, not sit below an empty workbench. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .template-workbench-panel,
  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"][data-skin] .app-shell.app-shell .template-workbench-panel {
    min-height: 72px !important;
    height: auto !important;
    max-height: 96px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 48px !important;
    grid-template-areas: "switch" !important;
    align-content: start !important;
    align-items: start !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .template-view-switch {
    grid-area: switch !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell #templateBriefPanel.template-brief-panel,
  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .template-workbench-grid,
  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .template-goal-strip {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="professional"] .app-shell.app-shell .professional-template-panel {
    margin-top: 8px !important;
  }
}

/* Trust sprint v133 final authority tail sentinel. */

/* Trust sprint v134: desktop starter is field completion, not a second entry wall. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    position: relative !important;
    display: block !important;
    min-height: 128px !important;
    height: 128px !important;
    max-height: 128px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-quick-head {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-quick-tabs,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-next-actions {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board[data-desktop-field-only="true"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 30px 30px !important;
    min-height: 30px !important;
    height: 66px !important;
    max-height: 66px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board.starter-compact-board[data-desktop-field-only="true"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 30px 30px !important;
    min-height: 66px !important;
    height: 66px !important;
    max-height: 66px !important;
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board.starter-compact-board.desktop-starter-compact[data-desktop-field-only="true"] {
    position: absolute !important;
    top: 44px !important;
    left: 8px !important;
    right: 8px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 30px 30px !important;
    min-height: 66px !important;
    height: 66px !important;
    max-height: 66px !important;
    gap: 6px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .desktop-starter-row {
    display: grid !important;
    grid-template-columns: 42px repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .desktop-starter-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    border-radius: 9px !important;
    background: rgba(15, 118, 110, 0.08) !important;
    color: rgba(15, 118, 110, 0.86) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board[data-desktop-field-only="true"] .starter-style-panel,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board[data-desktop-field-only="true"] .starter-field-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board[data-desktop-field-only="true"] .starter-style-title,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board[data-desktop-field-only="true"] .starter-field-panel > div {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board[data-desktop-field-only="true"] .starter-quick-variants,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board[data-desktop-field-only="true"] .starter-field-chips {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board[data-desktop-field-only="true"] .starter-quick-variants button,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board[data-desktop-field-only="true"] .starter-field-chips button,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .desktop-starter-row button {
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-field-open {
    position: absolute !important;
    top: 98px !important;
    left: 8px !important;
    right: 8px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v134 final authority tail sentinel. */

/* Trust sprint v135: narrow desktop create is an input-first flow, not a long explanation stack. */
@media (min-width: 760px) and (max-width: 1099px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #skinWorkbenchCue {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 56px !important;
    height: 56px !important;
    max-height: 64px !important;
    padding: 9px 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #skinWorkbenchCue .skin-workbench-focus,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #skinWorkbenchCue .skin-workbench-steps {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #skinWorkbenchCue .skin-workbench-head {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #skinWorkbenchCue .skin-workbench-head b,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #skinWorkbenchCue .skin-workbench-head span,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #skinWorkbenchCue > i {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #skinWorkbenchCue > i {
    justify-self: end !important;
    max-width: 132px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #createShortcutDock {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 50px !important;
    max-height: 58px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #createShortcutDock button {
    min-height: 50px !important;
    height: 50px !important;
    max-height: 50px !important;
    padding: 7px 10px !important;
    align-content: center !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #createShortcutDock button small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptToolbar {
    order: 1 !important;
    min-height: 28px !important;
    max-height: 32px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer textarea#prompt {
    order: 2 !important;
    min-height: 118px !important;
    height: 124px !important;
    max-height: 136px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #assist.assist:not(.hidden) {
    order: 3 !important;
    display: grid !important;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 64px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #assist.assist:not(.hidden) span {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #assist.assist:not(.hidden) * {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptActionDock {
    order: 4 !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 66px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview {
    order: 5 !important;
    min-height: 82px !important;
    height: 82px !important;
    max-height: 92px !important;
    grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-blueprint,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-signature,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-decision,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-summary,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-echo,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-proof,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-diff,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-professional,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-missing,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview > button {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-main {
    display: grid !important;
    min-height: 62px !important;
    max-height: 72px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-main em {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-gap-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 62px !important;
    max-height: 72px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    order: 6 !important;
    min-height: 96px !important;
    height: 96px !important;
    max-height: 116px !important;
  }
}

/* Trust sprint v135 final authority tail sentinel. */

/* Trust sprint v136: template starter becomes a four-choice target desk, with less mobile dead space. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] .app-shell.app-shell .template-workbench-panel {
    min-height: 500px !important;
    grid-template-rows: 48px minmax(340px, auto) !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] .app-shell.app-shell .template-workbench-grid {
    min-height: 340px !important;
    height: 340px !important;
    max-height: 360px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] .app-shell.app-shell .template-workbench-block.strong {
    min-height: 340px !important;
    height: 340px !important;
    max-height: 360px !important;
    align-content: start !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] .app-shell.app-shell .template-workbench-block.strong .template-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] .app-shell.app-shell .template-workbench-block.strong .template-choice-row button {
    min-height: 116px !important;
    height: 116px !important;
    max-height: 124px !important;
    justify-items: start !important;
    align-content: center !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] .app-shell.app-shell .template-workbench-block.strong .template-choice-row button:nth-child(n + 5) {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] .app-shell.app-shell #templateBriefPanel.template-brief-panel {
    min-height: 400px !important;
    max-height: 416px !important;
  }
}

@media (max-width: 720px) {
  html:root:root:root:root[data-active-page="templates"] .app-shell.app-shell .template-workbench-panel {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  html:root:root:root:root[data-active-page="templates"] .app-shell.app-shell .template-workbench-grid {
    min-height: 0 !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] .app-shell.app-shell .template-workbench-block.strong {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Trust sprint v136 final authority tail sentinel. */

/* Trust sprint v137: full template library is an index, not another wall of every module. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .template-workbench-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 48px !important;
    grid-template-areas: "switch" !important;
    min-height: 72px !important;
    max-height: 96px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .template-view-switch {
    grid-area: switch !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell #templateBriefPanel.template-brief-panel,
  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .template-workbench-grid,
  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .template-goal-strip,
  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .professional-template-panel,
  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .template-case-panel,
  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .package-panel {
    display: none !important;
    visibility: hidden !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .template-filter-panel {
    display: grid !important;
    margin-top: 8px !important;
    opacity: 1 !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell [data-template-library="workflows"] {
    display: grid !important;
    margin-top: 8px !important;
    max-width: 1360px !important;
    min-height: 280px !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .workflow-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .workflow {
    min-height: 92px !important;
    max-height: 110px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 720px) {
  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .template-workbench-panel {
    padding-bottom: 10px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell #templateBriefPanel.template-brief-panel,
  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .template-workbench-grid,
  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .professional-template-panel,
  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .template-case-panel,
  html:root:root:root:root[data-active-page="templates"][data-template-view="all"] .app-shell.app-shell .package-panel {
    display: none !important;
  }
}

/* Trust sprint v138: case cards show business facts first and fold long sales copy. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-case-card {
    gap: 8px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-case-card > p,
  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-case-card > ul,
  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-case-card > .template-plan {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-case-commerce {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-case-commerce span {
    min-height: 46px !important;
    padding: 7px 8px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-case-proof {
    display: grid !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="case"] .app-shell.app-shell .template-case-details:not([open]) > :not(summary) {
    display: none !important;
  }
}

@media (max-width: 720px) {
  html:root:root:root:root[data-active-page="templates"] .app-shell.app-shell .template-case-proof {
    grid-template-columns: 1fr !important;
  }
}

/* Trust sprint v138 final authority tail sentinel. */

/* Trust sprint v139: final authority for the create-page generation confirmation console. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    align-content: start !important;
    padding: 10px !important;
    border: 1px solid rgba(15, 118, 110, 0.16) !important;
    border-radius: 16px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.68)),
      var(--panel) !important;
    max-height: 390px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"]::before {
    content: "生成确认" !important;
    display: block !important;
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #generateBtn {
    grid-column: 1 !important;
    display: none !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-order-panel {
    grid-column: 1 !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    order: -17 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary article {
    min-height: 36px !important;
    padding: 5px 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-decision-board,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-order-grid,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-order-actions {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .generation-settings-panel {
    display: grid !important;
    margin: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pricing-controls.collapsed {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pricing-controls:not(.collapsed) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
    max-height: 118px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    display: grid !important;
    min-height: 28px !important;
    margin: 0 !important;
    align-items: center !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    background: rgba(15, 118, 110, 0.08) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    border-color: rgba(56, 189, 248, 0.24) !important;
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.76), rgba(2, 8, 23, 0.78)),
      rgba(2, 8, 23, 0.92) !important;
    max-height: 460px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pricing-controls.collapsed {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
    max-height: 118px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v139 final authority tail sentinel. */

/* Trust sprint v140: desktop create skeleton lock, keep modules in normal grid flow. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell {
    width: min(calc(100vw - 64px), 1460px) !important;
    max-width: 1460px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer {
    display: grid !important;
    grid-template-columns: minmax(176px, 212px) minmax(0, 1fr) 340px !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "toolbar toolbar toolbar"
      "left main confirm"
      "track main confirm"
      "track main confirm" !important;
    gap: 14px !important;
    align-items: start !important;
    overflow: visible !important;
    padding: 16px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: minmax(176px, 212px) minmax(0, 1fr) 340px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: minmax(194px, 226px) minmax(0, 1fr) 356px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: minmax(206px, 236px) minmax(0, 1fr) 374px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer > .section-title {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row {
    grid-area: toolbar !important;
    width: 100% !important;
    min-width: 0 !important;
    position: static !important;
    transform: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel {
    grid-area: left !important;
    width: 100% !important;
    min-width: 0 !important;
    position: static !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel button {
    min-width: 0 !important;
    min-height: 38px !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel small,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .mode-row,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .creation-mode-summary {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    grid-area: track !important;
    width: 100% !important;
    min-width: 0 !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    max-height: 300px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    grid-area: main !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
    transform: none !important;
    overflow: visible !important;
    align-content: start !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick:not(.hidden) {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(138px, 0.32fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 168px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-quick-head,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board,
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board.starter-compact-board.desktop-starter-compact[data-desktop-field-only="true"],
  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-field-open {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-quick-head {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    max-height: 70px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-action-board {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(2, minmax(30px, auto)) !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 66px !important;
    max-height: 74px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-field-open {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    min-height: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    grid-area: confirm !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    position: sticky !important;
    top: 88px !important;
    align-self: start !important;
    max-height: 410px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="clean"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"],
  html:root:root:root:root[data-active-page="create"][data-skin="cute"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"],
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] > * {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    max-height: 456px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin] .app-shell.app-shell .panel.composer.panel.composer #promptPreflight:not(.hidden) {
    grid-column: 2 !important;
    grid-row: 5 !important;
    position: static !important;
    transform: none !important;
    max-height: 96px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v140 final authority tail sentinel. */

/* Trust sprint v141: override older skin-specific desktop rails after cache-busted v140. */
@media (min-width: 1100px) {
  html:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: minmax(176px, 212px) minmax(0, 1fr) 340px !important;
  }

  html:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: minmax(194px, 226px) minmax(0, 1fr) 356px !important;
  }

  html:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: minmax(206px, 236px) minmax(0, 1fr) 374px !important;
  }

  html:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) > .delivery-stack.delivery-stack[data-confirm-console="true"],
  html:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) > .delivery-stack.delivery-stack[data-confirm-console="true"],
  html:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) > .delivery-stack.delivery-stack[data-confirm-console="true"] {
    grid-area: confirm !important;
    grid-column: 3 !important;
    grid-row: 2 / span 3 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) > .delivery-stack.delivery-stack[data-confirm-console="true"] > *,
  html:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) > .delivery-stack.delivery-stack[data-confirm-console="true"] > *,
  html:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) > .delivery-stack.delivery-stack[data-confirm-console="true"] > * {
    grid-column: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Trust sprint v141 final authority tail sentinel. */

/* Trust sprint v142: keep the create-page confirm console as one readable rail. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] {
    grid-area: confirm !important;
    grid-column: 3 !important;
    grid-row: 2 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"]::before,
  html:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] > *,
  html:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] > .delivery-order-panel,
  html:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] > .delivery-node-status,
  html:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] > .delivery-stage-strip,
  html:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] > .delivery-confirm-summary,
  html:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] > .generation-settings-panel,
  html:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] > .price-hint {
    grid-column: 1 !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary,
  html:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] [data-delivery-confirm-summary] {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Trust sprint v142 final authority tail sentinel. */

/* Trust sprint v143: override nested cute-rail leftovers inside the confirm console. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel.delivery-order-panel,
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-node-status,
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip,
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary,
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint,
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] [data-delivery-confirm-summary] {
    grid-column: 1 !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel.delivery-order-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .delivery-stack.delivery-stack[data-confirm-console="true"] [data-delivery-confirm-summary] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Trust sprint v143 final authority tail sentinel. */

/* Trust sprint v144: ID-level guard for generated confirm-panel children. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] #deliveryOrderPanel.delivery-order-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  :root[data-active-page="create"] #deliveryOrderPanel.delivery-order-panel > *,
  :root[data-active-page="create"] #deliveryOrderPanel.delivery-order-panel .delivery-node-status,
  :root[data-active-page="create"] #deliveryOrderPanel.delivery-order-panel .delivery-stage-strip,
  :root[data-active-page="create"] #deliveryOrderPanel.delivery-order-panel .delivery-confirm-summary,
  :root[data-active-page="create"] #deliveryOrderPanel.delivery-order-panel [data-delivery-confirm-summary] {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Trust sprint v144 final authority tail sentinel. */

/* Trust sprint v145: professional create page defaults to a compact decision brief. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    min-height: 0 !important;
    max-height: 176px !important;
    padding: 8px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 7px 8px !important;
    min-height: 0 !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief-head small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr) !important;
    gap: 6px !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief-actions button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-expert-panel,
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-type-grid,
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-brief-focus,
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-brief-grid {
    display: none !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    max-height: 74px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps span {
    min-height: 32px !important;
    height: 32px !important;
    padding: 5px 6px !important;
    align-content: center !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief-steps span b {
    display: inline !important;
    margin: 0 4px 0 0 !important;
    font-size: 10px !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel .starter-quick-head,
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel .starter-action-board {
    display: none !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    min-height: 140px !important;
    height: 144px !important;
    max-height: 150px !important;
  }
}

/* Trust sprint v145 final authority tail sentinel. */

/* Trust sprint v146: compact professional create input and prevent half-visible field cards. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    background: rgba(240, 253, 250, 0.9) !important;
    border-color: rgba(20, 184, 166, 0.2) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box.prompt-box {
    min-height: 0 !important;
    height: auto !important;
    max-height: 468px !important;
    grid-template-rows: auto auto minmax(136px, 148px) auto auto !important;
    gap: 7px !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-live-preview {
    min-height: 0 !important;
    height: auto !important;
    max-height: 62px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-live-preview .prompt-live-main,
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-live-preview .prompt-live-blueprint,
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-live-preview .prompt-live-signature,
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-live-preview .prompt-live-proof,
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-live-preview .prompt-live-professional {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-live-gap-strip {
    min-height: 42px !important;
    max-height: 46px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    min-height: 140px !important;
    height: 144px !important;
    max-height: 150px !important;
    line-height: 1.45 !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    display: grid !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 34px !important;
    padding: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel .starter-quick-head,
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel .starter-action-board {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel .starter-field-open {
    grid-column: 1 / -1 !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v146 final authority tail sentinel. */

/* Trust sprint v147: clean skin keeps only the compact prompt evidence strip on desktop. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-blueprint,
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-main,
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-decision,
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-summary {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-gap-strip {
    display: grid !important;
    min-height: 44px !important;
    max-height: 52px !important;
  }
}

/* Trust sprint v147 final authority tail sentinel. */

/* Trust sprint v148: professional create page uses a compact, ordered input console. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box.prompt-box {
    grid-template-rows: 42px 56px 22px 144px 46px 32px !important;
    gap: 7px !important;
    max-height: 382px !important;
    padding: 10px 12px !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #skinWorkbenchCue {
    order: 1 !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptActionDock {
    order: 2 !important;
    min-height: 56px !important;
    height: 56px !important;
    max-height: 56px !important;
    grid-template-columns: minmax(0, 1fr) minmax(176px, 220px) !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptToolbar {
    order: 3 !important;
    min-height: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
    align-items: center !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    order: 4 !important;
    min-height: 140px !important;
    height: 144px !important;
    max-height: 144px !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview {
    order: 5 !important;
    min-height: 44px !important;
    max-height: 46px !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    order: 6 !important;
    min-height: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.hidden) {
    background: rgba(2, 6, 23, 0.72) !important;
    border-color: rgba(56, 189, 248, 0.28) !important;
    color: rgba(240, 249, 255, 0.95) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08) !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief span,
  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief small {
    color: rgba(186, 230, 253, 0.78) !important;
  }
}

/* Trust sprint v148 final authority tail sentinel. */

/* Trust sprint v149: pin professional input console rows; legacy grid placement must not reorder controls. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box.prompt-box {
    grid-auto-flow: row !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 42px 56px 22px 144px 46px 32px !important;
    row-gap: 7px !important;
    min-height: 0 !important;
    height: 382px !important;
    max-height: 382px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #skinWorkbenchCue,
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptActionDock,
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptToolbar,
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) textarea#prompt,
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview,
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    grid-column: 1 / -1 !important;
    align-self: stretch !important;
    margin: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #skinWorkbenchCue {
    grid-row: 1 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptActionDock {
    grid-row: 2 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptToolbar {
    grid-row: 3 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    grid-row: 4 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview {
    grid-row: 5 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    grid-row: 6 !important;
  }
}

/* Trust sprint v149 final authority tail sentinel. */

/* Trust sprint v150: remove the professional create canvas dead floor on desktop. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) {
    min-height: 560px !important;
    height: auto !important;
    max-height: none !important;
    align-content: start !important;
    padding-bottom: 24px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .queue {
    margin-top: 14px !important;
  }
}

/* Trust sprint v150 final authority tail sentinel. */

/* Trust sprint v151: hard cap the professional create stage after measuring real dead floor. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) {
    min-height: 0 !important;
    height: 640px !important;
    max-height: 640px !important;
    padding-bottom: 20px !important;
  }
}

/* Trust sprint v151 final authority tail sentinel. */

/* Trust sprint v152: the create workbench height budget applies to all desktop skins. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer {
    min-height: 0 !important;
    height: 640px !important;
    max-height: 640px !important;
    align-content: start !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v152 final authority tail sentinel. */

/* Trust sprint v153: keep the right confirmation rail top-aligned after canvas compression. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    align-self: start !important;
    margin-top: 0 !important;
  }
}

/* Trust sprint v153 final authority tail sentinel. */

/* Trust sprint v154: restore cute right rail top alignment after the global canvas cap. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack {
    transform: translateY(-28px) !important;
  }
}

/* Trust sprint v154 final authority tail sentinel. */

/* Trust sprint v155: reduce desktop create chrome, question card noise, and confirm rail text. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .section-title {
    display: grid !important;
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 34px !important;
    height: 36px !important;
    max-height: 36px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    color: rgba(226, 232, 240, 0.72) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .section-title h3 {
    color: rgba(226, 232, 240, 0.78) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer > .section-title button {
    min-height: 28px !important;
    height: 30px !important;
    min-width: 88px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    color: rgba(15, 118, 110, 0.92) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row {
    min-height: 36px !important;
    height: 38px !important;
    max-height: 38px !important;
    align-items: center !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed:not(.hidden) {
    height: 150px !important;
    max-height: 150px !important;
    padding: 8px !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.collapsed):not(.hidden) {
    max-height: 430px !important;
    overflow: auto !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-brief-head {
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-brief-head strong {
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-brief-actions {
    grid-template-columns: minmax(0, 1fr) 48px !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-brief-actions button {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 6px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-brief-steps {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-brief-steps span {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 21px !important;
    height: 21px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief.collapsed .professional-brief-steps span b {
    display: inline !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel.delivery-order-panel {
    gap: 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-main {
    order: 1 !important;
    min-height: 54px !important;
    height: 58px !important;
    padding: 8px 10px !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-main small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-score {
    box-sizing: border-box !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 3px 4px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-node-status {
    order: 2 !important;
    min-height: 48px !important;
    height: 50px !important;
    padding: 7px 9px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-confirm-summary {
    order: 3 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-stage-strip {
    order: 4 !important;
    min-height: 36px !important;
    height: 38px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-grid,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .template-delivery-sheet,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-actions {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] > .generation-settings-panel {
    order: 5 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] > .price-hint {
    order: 6 !important;
    min-height: 22px !important;
    height: 22px !important;
    max-height: 24px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack {
    transform: translateY(-38px) !important;
  }
}

/* Trust sprint v155 final authority tail sentinel. */

/* Trust sprint v156: expanded professional card must stay scannable in the left rail. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.collapsed):not(.hidden) {
    height: 430px !important;
    max-height: 430px !important;
    padding: 9px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.collapsed) .professional-brief-steps {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.collapsed) .professional-brief-steps span {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.collapsed) .professional-expert-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.collapsed) .professional-expert-panel article {
    min-height: 39px !important;
    padding: 6px 8px !important;
    gap: 1px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.collapsed) .professional-expert-panel article small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.collapsed) .professional-type-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.collapsed) .professional-type-grid button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.collapsed) .professional-type-grid small,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.collapsed) .professional-brief-focus,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief:not(.collapsed) .professional-brief-grid {
    display: none !important;
  }
}

/* Trust sprint v156 final authority tail sentinel. */

/* Trust sprint v157: make visible prompt drafts and template starters feel like controls, not documents. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    min-height: 140px !important;
    height: 144px !important;
    max-height: 144px !important;
    padding: 14px 18px !important;
    line-height: 1.45 !important;
    overflow-y: auto !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview.prompt-live-preview {
    min-height: 42px !important;
    height: 44px !important;
    max-height: 44px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview .prompt-live-gap-strip {
    min-height: 32px !important;
    height: 34px !important;
    max-height: 34px !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview .prompt-live-gap-strip span {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 8px !important;
    gap: 1px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview .prompt-live-gap-strip b {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview .prompt-live-gap-strip em {
    display: block !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-brief-panel {
    gap: 12px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-brief-value {
    min-height: 54px !important;
    padding: 10px 12px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-brief-flow article small {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

@media (max-width: 760px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-starter-panel h3,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-choice-title {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.1 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-brief-flow article small {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Trust sprint v157 final authority tail sentinel. */

/* Trust sprint v158: compress desktop template starter into a decision workbench. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    padding: 16px !important;
    gap: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel.template-brief-panel {
    display: grid !important;
    grid-template-columns: minmax(210px, 0.95fr) minmax(260px, 1.05fr) auto !important;
    align-items: stretch !important;
    min-height: 276px !important;
    height: 286px !important;
    max-height: 296px !important;
    padding: 12px !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-primary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-value {
    min-height: 0 !important;
    align-content: center !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-primary strong {
    font-size: 22px !important;
    line-height: 1.12 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-primary small,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-value strong,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch small {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-height: 74px !important;
    max-height: 84px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow article {
    min-height: 66px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid {
    min-height: 236px !important;
    max-height: 260px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong {
    min-height: 226px !important;
    height: 236px !important;
    max-height: 248px !important;
    padding: 14px !important;
    gap: 10px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong > strong {
    font-size: 24px !important;
    line-height: 1.12 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button {
    min-height: 72px !important;
    height: 76px !important;
    max-height: 82px !important;
    padding: 9px !important;
    justify-items: center !important;
    text-align: center !important;
  }
}

/* Trust sprint v158 final authority tail sentinel. */

/* Trust sprint v159: integrate desktop professional create into one production console. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: minmax(206px, 0.72fr) minmax(620px, 1.76fr) minmax(360px, 0.98fr) !important;
    gap: 14px !important;
    min-height: 568px !important;
    height: 608px !important;
    max-height: 628px !important;
    padding: 14px !important;
    align-items: start !important;
    background:
      linear-gradient(135deg, rgba(8, 16, 26, 0.98), rgba(16, 23, 37, 0.98)) !important;
    border: 1px solid rgba(42, 222, 196, 0.18) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .section-title,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row {
    grid-column: 1 / -1 !important;
    height: 36px !important;
    margin: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief {
    background: rgba(6, 18, 29, 0.76) !important;
    border: 1px solid rgba(45, 212, 191, 0.2) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel {
    min-height: 132px !important;
    height: 148px !important;
    max-height: 158px !important;
    padding: 9px !important;
    gap: 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel button {
    min-height: 30px !important;
    height: 31px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    justify-content: start !important;
    text-align: left !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    min-height: 260px !important;
    height: 294px !important;
    max-height: 306px !important;
    padding: 10px !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-card {
    min-height: 36px !important;
    height: 38px !important;
    padding: 0 9px 0 20px !important;
    border-radius: 7px !important;
    align-content: center !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-card small,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-card em {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief:not(.hidden) {
    min-height: 134px !important;
    height: 148px !important;
    max-height: 156px !important;
    padding: 9px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-head {
    min-height: 34px !important;
    gap: 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-head small,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-expert-panel,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-focus,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-grid {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-steps {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-steps span {
    height: 21px !important;
    min-height: 21px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-type-grid button {
    min-height: 27px !important;
    height: 28px !important;
    padding: 0 7px !important;
    border-radius: 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-type-grid small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    min-height: 386px !important;
    height: 410px !important;
    max-height: 430px !important;
    padding: 12px !important;
    gap: 7px !important;
    background: rgba(3, 10, 18, 0.62) !important;
    border: 1px solid rgba(125, 211, 252, 0.18) !important;
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.06) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #skinWorkbenchCue {
    min-height: 34px !important;
    height: 38px !important;
    max-height: 42px !important;
    padding: 7px 10px !important;
    background: rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(34, 211, 238, 0.22) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock {
    min-height: 50px !important;
    height: 54px !important;
    max-height: 58px !important;
    padding: 8px !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 210px) !important;
    background: rgba(8, 47, 73, 0.46) !important;
    border-color: rgba(45, 212, 191, 0.28) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionBtn {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer textarea#prompt {
    min-height: 136px !important;
    height: 142px !important;
    max-height: 146px !important;
    background: rgba(248, 250, 252, 0.96) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview {
    min-height: 40px !important;
    height: 42px !important;
    max-height: 44px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick {
    min-height: 30px !important;
    height: 32px !important;
    max-height: 34px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 420px !important;
    height: 438px !important;
    max-height: 452px !important;
    padding: 10px !important;
    gap: 8px !important;
    background: rgba(3, 10, 18, 0.78) !important;
    border: 1px solid rgba(45, 212, 191, 0.24) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08) !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel.delivery-order-panel {
    gap: 7px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-main,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-node-status,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-confirm-summary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-stage-strip,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    background: rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(45, 212, 191, 0.18) !important;
    border-radius: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-main {
    height: 54px !important;
    min-height: 52px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-node-status {
    height: 46px !important;
    min-height: 44px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-stage-strip {
    height: 36px !important;
    min-height: 34px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary {
    height: 40px !important;
    min-height: 38px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pricing-controls {
    max-height: 112px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v159 final authority tail sentinel. */

/* Trust sprint v160: tighten the desktop pro workbench into a compact console. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer {
    min-height: 506px !important;
    height: 532px !important;
    max-height: 548px !important;
    grid-template-columns: minmax(214px, 0.64fr) minmax(620px, 1.8fr) minmax(360px, 0.96fr) !important;
    gap: 12px !important;
    padding: 12px !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .section-title,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row {
    height: 32px !important;
    min-height: 32px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel {
    height: 128px !important;
    max-height: 136px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel button {
    height: 28px !important;
    min-height: 28px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    height: 280px !important;
    min-height: 260px !important;
    max-height: 288px !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-card {
    height: 31px !important;
    min-height: 31px !important;
    padding-left: 18px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief:not(.hidden) {
    height: 126px !important;
    min-height: 118px !important;
    max-height: 132px !important;
    background: linear-gradient(180deg, rgba(8, 37, 54, 0.84), rgba(5, 21, 33, 0.82)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-head strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-steps span:nth-child(n + 3) {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-type-grid button:nth-child(n + 5) {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    height: 386px !important;
    min-height: 372px !important;
    max-height: 398px !important;
    background:
      linear-gradient(180deg, rgba(4, 14, 24, 0.9), rgba(3, 9, 18, 0.82)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer textarea#prompt {
    height: 142px !important;
    min-height: 140px !important;
    max-height: 146px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick {
    height: 30px !important;
    min-height: 28px !important;
    max-height: 32px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    height: 386px !important;
    min-height: 372px !important;
    max-height: 402px !important;
    padding: 9px !important;
    gap: 7px !important;
    background:
      linear-gradient(180deg, rgba(5, 16, 29, 0.98), rgba(2, 8, 18, 0.94)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-main.delivery-order-main,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-node-status.delivery-node-status,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-confirm-summary.delivery-confirm-summary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-stage-strip.delivery-stage-strip,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary.settings-summary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint.price-hint {
    background: rgba(7, 24, 40, 0.92) !important;
    border-color: rgba(45, 212, 191, 0.24) !important;
    color: rgba(235, 253, 255, 0.94) !important;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.04) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-main strong,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-node-status strong,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary strong,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint strong {
    color: rgba(235, 253, 255, 0.98) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-main span,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-node-status span,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-confirm-summary b,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint span {
    color: rgba(45, 212, 191, 0.9) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-score {
    background: rgba(13, 148, 136, 0.18) !important;
    border-color: rgba(45, 212, 191, 0.44) !important;
    color: rgba(240, 253, 250, 0.98) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stage-strip article span {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pricing-controls {
    display: grid !important;
    max-height: 62px !important;
    overflow: hidden !important;
    gap: 5px !important;
  }
}

/* Trust sprint v160 final authority tail sentinel. */

/* Trust sprint v161: remove the remaining desktop default canvas floor. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer {
    min-height: 548px !important;
    height: 584px !important;
    max-height: 604px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(240, 253, 250, 0.56)) !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-main,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-node-status,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-confirm-summary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-stage-strip,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(15, 118, 110, 0.12) !important;
    box-shadow: none !important;
  }
}

/* Trust sprint v161 final authority tail sentinel. */

/* Trust sprint v162: field completion belongs to the main input lane, not the left rail. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer {
    height: 544px !important;
    max-height: 560px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief:not(.hidden) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    height: 72px !important;
    min-height: 68px !important;
    max-height: 76px !important;
    display: grid !important;
    grid-template-columns: minmax(210px, 0.56fr) minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-head {
    min-height: 0 !important;
    height: 56px !important;
    align-items: center !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-head strong {
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-actions {
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: 76px 60px !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-actions button {
    min-height: 0 !important;
    height: 56px !important;
    border-radius: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-steps {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-steps span {
    height: 56px !important;
    min-height: 0 !important;
    align-content: center !important;
    padding: 5px 7px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief-steps span:nth-child(n + 4),
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-type-grid {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    grid-column: 3 !important;
    grid-row: 2 / span 2 !important;
  }
}

/* Trust sprint v162 final authority tail sentinel. */

/* Trust sprint v163: make the professional field brief a compact part of the input lane. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: 386px !important;
    min-height: 372px !important;
    max-height: 398px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > #promptToolbar {
    order: 1 !important;
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > #skinWorkbenchCue {
    order: 2 !important;
    flex: 0 0 auto !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > .professional-brief:not(.hidden) {
    order: 3 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(170px, 0.64fr) minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    max-height: 80px !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > .professional-brief:not(.hidden):not(.collapsed) {
    max-height: 178px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > .professional-brief .professional-brief-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-height: 44px !important;
    height: auto !important;
    align-items: center !important;
    padding: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > .professional-brief .professional-brief-head small,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > .professional-brief.collapsed .professional-brief-focus,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > .professional-brief.collapsed .professional-brief-grid,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > .professional-brief .professional-type-grid {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > .professional-brief .professional-brief-head strong {
    margin-top: 0 !important;
    font-size: 13px !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > .professional-brief .professional-brief-actions {
    display: grid !important;
    grid-template-columns: 66px 52px !important;
    gap: 5px !important;
    align-self: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > .professional-brief .professional-brief-actions button {
    height: 44px !important;
    min-height: 0 !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > .professional-brief .professional-brief-steps {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > .professional-brief .professional-brief-steps span {
    height: 44px !important;
    min-height: 0 !important;
    padding: 5px 6px !important;
    align-content: center !important;
    font-size: 10px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > textarea#prompt {
    order: 4 !important;
    flex: 1 1 112px !important;
    min-height: 96px !important;
    max-height: 132px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > #promptActionDock {
    order: 5 !important;
    flex: 0 0 auto !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > #promptLivePreview,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > #blankStarterQuickPanel,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .prompt-box > #createShortcutDock {
    order: 6 !important;
    max-height: 58px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v163 final authority tail sentinel. */

/* Trust sprint v164: keep the 920px desktop/tablet workbench from stretching into a long scroll wall. */
@media (min-width: 860px) and (max-width: 1099px) {
  html:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box {
    height: 720px !important;
    max-height: 720px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer textarea#prompt {
    min-height: 118px !important;
    max-height: 170px !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview {
    max-height: 82px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .assist:not(.hidden) {
    max-height: 56px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick {
    max-height: 110px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v164 final authority tail sentinel. */

/* Trust sprint v165: default desktop input lane follows write -> preview -> confirm. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    display: grid !important;
    grid-template-rows: auto auto minmax(104px, auto) auto auto auto !important;
    align-content: start !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box > #skinWorkbenchCue {
    order: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box > #promptToolbar {
    order: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box > textarea#prompt {
    order: 3 !important;
    grid-row: 3 !important;
    min-height: 104px !important;
    height: 108px !important;
    max-height: 118px !important;
    align-self: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box > #promptLivePreview {
    order: 4 !important;
    grid-row: 4 !important;
    max-height: 68px !important;
    overflow: hidden !important;
    align-self: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box > #promptActionDock {
    order: 5 !important;
    grid-row: 5 !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 66px !important;
    align-self: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box > #blankStarterQuickPanel {
    order: 6 !important;
    grid-row: 6 !important;
    max-height: 110px !important;
    overflow: hidden !important;
    align-self: stretch !important;
  }
}

/* Trust sprint v165 final authority tail sentinel. */

/* Trust sprint v166: pro left rail is a compact technical path selector, not pale cards. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel {
    height: 134px !important;
    min-height: 124px !important;
    max-height: 142px !important;
    gap: 6px !important;
    padding: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(45, 212, 191, 0.22) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.7), rgba(2, 8, 23, 0.64)),
      rgba(2, 8, 23, 0.9) !important;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.06) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 28px !important;
    height: 28px !important;
    max-height: 30px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(45, 212, 191, 0.2) !important;
    border-radius: 8px !important;
    background: rgba(7, 24, 40, 0.86) !important;
    color: rgba(224, 242, 254, 0.86) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel button.active {
    border-color: rgba(45, 212, 191, 0.62) !important;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.92), rgba(3, 105, 161, 0.9)) !important;
    color: #f8feff !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel strong {
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
}

/* Trust sprint v166 final authority tail sentinel. */

/* Trust sprint v167: stop the pro creation path selector from stretching to the grid row. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel {
    align-self: start !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    height: 122px !important;
    min-height: 112px !important;
    max-height: 130px !important;
    display: grid !important;
    grid-auto-rows: 28px !important;
    grid-template-rows: repeat(3, 28px) !important;
    align-content: start !important;
    gap: 5px !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel button {
    box-sizing: border-box !important;
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
  }
}

/* Trust sprint v167 final authority tail sentinel. */

/* Trust sprint v168: give the pro rail height lock enough specificity to beat legacy tails. */
@media (min-width: 1100px) {
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .creation-mode-panel:is(#imageAlchemyProRailHeightLock, .creation-mode-panel) {
    align-self: start !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    min-height: 112px !important;
    height: 122px !important;
    max-height: 130px !important;
    display: grid !important;
    grid-auto-rows: 28px !important;
    grid-template-rows: repeat(3, 28px) !important;
    align-content: start !important;
    gap: 5px !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .creation-mode-panel:is(#imageAlchemyProRailHeightLock, .creation-mode-panel) button:is(#imageAlchemyProRailButtonLock, button) {
    box-sizing: border-box !important;
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
  }
}

/* Trust sprint v168 final authority tail sentinel. */

/* Trust sprint v169: desktop starter keeps one compact next-step strip under the field row. */
@media (min-width: 1100px) {
  :root[data-active-page="create"][data-skin] body .app-shell .panel.composer .prompt-box #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 24px 38px 28px !important;
    gap: 4px !important;
    height: 110px !important;
    min-height: 104px !important;
    max-height: 116px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
    align-content: start !important;
  }

  :root[data-active-page="create"][data-skin] body .app-shell .panel.composer .prompt-box #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-quick-head {
    min-height: 0 !important;
    height: 24px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 86px !important;
    gap: 6px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin] body .app-shell .panel.composer .prompt-box #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-quick-head small {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin] body .app-shell .panel.composer .prompt-box #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-action-board {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin] body .app-shell .panel.composer .prompt-box #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-row {
    min-height: 28px !important;
    height: 28px !important;
    gap: 4px !important;
  }

  :root[data-active-page="create"][data-skin] body .app-shell .panel.composer .prompt-box .desktop-starter-next-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 138px !important;
    gap: 6px !important;
    min-height: 0 !important;
    height: 28px !important;
    max-height: 28px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin] body .app-shell .panel.composer .prompt-box .desktop-starter-next-actions button {
    min-height: 0 !important;
    height: 28px !important;
    max-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root[data-active-page="create"][data-skin] body .app-shell .panel.composer .prompt-box .desktop-starter-next-actions .starter-field-open {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    text-align: left !important;
  }

  :root[data-active-page="create"][data-skin] body .app-shell .panel.composer .prompt-box .desktop-starter-next-actions .starter-field-open strong,
  :root[data-active-page="create"][data-skin] body .app-shell .panel.composer .prompt-box .desktop-starter-next-actions .starter-field-open span {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Trust sprint v169 final authority tail sentinel. */

/* Trust sprint v170: professional desktop starter exposes the next-step strip instead of inheriting hidden legacy controls. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) {
    display: grid !important;
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 22px 60px 32px !important;
    gap: 4px !important;
    min-height: 122px !important;
    height: 126px !important;
    max-height: 130px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
    align-content: start !important;
    box-sizing: border-box !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-quick-head {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr) 82px !important;
    min-height: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
    gap: 6px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-action-board.starter-compact-board.desktop-starter-compact[data-desktop-field-only="true"] {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 28px 28px !important;
    min-height: 60px !important;
    height: 60px !important;
    max-height: 60px !important;
    gap: 4px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-row {
    display: grid !important;
    grid-template-columns: 58px repeat(4, minmax(0, 1fr)) !important;
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
    gap: 4px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-row button {
    display: block !important;
    min-width: 0 !important;
    min-height: 26px !important;
    height: 26px !important;
    max-height: 26px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    line-height: 26px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-next-actions.desktop-starter-next-actions {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: minmax(0, 1fr) 136px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    gap: 6px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-next-actions.desktop-starter-next-actions .starter-field-open,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-next-actions.desktop-starter-next-actions button {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 10px !important;
    align-items: center !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-next-actions.desktop-starter-next-actions .starter-field-open {
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    text-align: left !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-next-actions.desktop-starter-next-actions button:not(.starter-field-open) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-content: center !important;
  }
}

/* Trust sprint v170 final authority tail sentinel. */

/* Trust sprint v171: separate normal starter guidance from the compact professional mode checkpoint. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) {
    grid-template-rows: 22px 60px 30px !important;
    min-height: 126px !important;
    height: 132px !important;
    max-height: 138px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-action-board.starter-compact-board.desktop-starter-compact[data-desktop-field-only="true"] {
    grid-template-rows: 28px 28px !important;
    min-height: 60px !important;
    height: 60px !important;
    max-height: 60px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-row {
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-row button {
    min-height: 26px !important;
    height: 26px !important;
    max-height: 26px !important;
    line-height: 26px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 34px !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 36px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel .starter-quick-head,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel .starter-action-board {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel .desktop-starter-next-actions.desktop-starter-next-actions {
    grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel .desktop-starter-next-actions.desktop-starter-next-actions .starter-field-open {
    grid-column: 1 !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel .desktop-starter-next-actions.desktop-starter-next-actions button:not(.starter-field-open) {
    display: none !important;
  }
}

/* Trust sprint v171 final authority tail sentinel. */

/* Trust sprint v172: professional desktop prompt preview is a compact decision strip, not a paragraph. */
@media (min-width: 1100px) {
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview.prompt-live-preview {
    min-height: 36px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    background: rgba(5, 18, 32, 0.82) !important;
    border: 1px solid rgba(45, 212, 191, 0.2) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.06) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview .prompt-live-gap-strip[data-pro-density="compact"] {
    display: grid !important;
    grid-template-columns: 1.1fr 1.15fr 0.75fr !important;
    align-items: center !important;
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    gap: 6px !important;
    padding: 3px !important;
    background: transparent !important;
    border: 0 !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview .prompt-live-gap-strip[data-pro-density="compact"] span {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 9px !important;
    gap: 6px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(45, 212, 191, 0.16) !important;
    background: rgba(8, 47, 73, 0.74) !important;
    color: rgba(224, 242, 254, 0.9) !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview .prompt-live-gap-strip[data-pro-density="compact"] b {
    display: inline !important;
    color: rgba(94, 234, 212, 0.92) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) #promptLivePreview .prompt-live-gap-strip[data-pro-density="compact"] em {
    display: block !important;
    min-width: 0 !important;
    color: rgba(224, 242, 254, 0.88) !important;
    font-size: 11px !important;
    font-style: normal !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-order-main {
    min-height: 50px !important;
    height: 52px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-node-status {
    min-height: 42px !important;
    height: 44px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] #deliveryOrderPanel .delivery-stage-strip {
    min-height: 32px !important;
    height: 34px !important;
  }
}

/* Trust sprint v172 final authority tail sentinel. */

/* Trust sprint v173: the pro skin uses the compact decision strip in every create path. */
@media (min-width: 1100px) {
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer #promptLivePreview.prompt-live-preview {
    min-height: 36px !important;
    height: 38px !important;
    max-height: 42px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer #promptLivePreview .prompt-live-gap-strip[data-pro-density="compact"] {
    display: grid !important;
    grid-template-columns: 1.1fr 1.15fr 0.75fr !important;
    align-items: center !important;
    min-height: 34px !important;
    height: 36px !important;
    max-height: 38px !important;
    gap: 6px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer #promptLivePreview .prompt-live-gap-strip[data-pro-density="compact"] span {
    min-width: 0 !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v173 final authority tail sentinel. */

/* Trust sprint v174: pro desktop workbench docks skin switcher and turns the brief/rail into one console surface. */
@media (min-width: 1100px) {
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer {
    border-color: rgba(45, 212, 191, 0.2) !important;
    background:
      linear-gradient(135deg, rgba(7, 24, 40, 0.96), rgba(15, 23, 42, 0.96)) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .section-title,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .create-toolbar-row {
    min-height: 30px !important;
    height: 32px !important;
    margin: 0 !important;
    align-items: center !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .create-toolbar-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 292px !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .create-toolbar-row > span {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .create-skin-row {
    justify-self: end !important;
    align-self: center !important;
    width: 292px !important;
    min-width: 0 !important;
    height: 28px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 3px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(45, 212, 191, 0.18) !important;
    background: rgba(5, 18, 32, 0.84) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08) !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .create-skin-row [data-skin] {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 22px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(191, 219, 254, 0.82) !important;
    font-size: 11px !important;
    line-height: 22px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .create-skin-row [data-skin].active {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.94), rgba(2, 132, 199, 0.9)) !important;
    color: #f8feff !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .create-skin-row small,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .create-skin-row em {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .skin-workbench-cue {
    background: rgba(5, 18, 32, 0.86) !important;
    border: 1px solid rgba(45, 212, 191, 0.18) !important;
    box-shadow: none !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-box > .professional-brief:not(.hidden),
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief:not(.hidden) {
    min-height: 0 !important;
    height: 66px !important;
    max-height: 70px !important;
    padding: 6px !important;
    gap: 5px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(45, 212, 191, 0.18) !important;
    background: rgba(5, 18, 32, 0.86) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.06) !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-head {
    display: grid !important;
    grid-template-columns: minmax(130px, 1fr) 138px !important;
    min-height: 0 !important;
    height: 26px !important;
    gap: 6px !important;
    padding: 0 !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-head span,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-head small,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-expert-panel,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-focus,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-grid,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-type-grid {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-head strong {
    min-width: 0 !important;
    color: rgba(240, 253, 250, 0.96) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-actions {
    display: grid !important;
    grid-template-columns: 76px 56px !important;
    gap: 5px !important;
    height: 26px !important;
    align-self: center !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-actions button {
    min-height: 0 !important;
    height: 26px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    line-height: 26px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-steps {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-height: 0 !important;
    height: 27px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-steps span {
    min-height: 0 !important;
    height: 27px !important;
    padding: 0 7px !important;
    border-radius: 8px !important;
    align-content: center !important;
    background: rgba(8, 47, 73, 0.72) !important;
    border-color: rgba(45, 212, 191, 0.14) !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-steps span b {
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] {
    padding: 10px !important;
    gap: 8px !important;
    border: 1px solid rgba(45, 212, 191, 0.2) !important;
    background: rgba(5, 18, 32, 0.9) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-order-main,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-node-status,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .settings-summary,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .price-hint {
    border-radius: 9px !important;
    border: 1px solid rgba(45, 212, 191, 0.14) !important;
    background: rgba(8, 47, 73, 0.66) !important;
    box-shadow: none !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-stage-strip span {
    border-color: rgba(45, 212, 191, 0.13) !important;
    background: rgba(8, 47, 73, 0.72) !important;
  }
}

/* Trust sprint v174 final authority tail sentinel. */

/* Trust sprint v175: override legacy high-specificity pro create chrome rules. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row.create-toolbar-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 292px !important;
    gap: 10px !important;
    min-height: 30px !important;
    height: 32px !important;
    max-height: 34px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row {
    justify-self: end !important;
    width: 292px !important;
    max-width: 292px !important;
    min-width: 0 !important;
    height: 28px !important;
    max-height: 28px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 3px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(45, 212, 191, 0.18) !important;
    background: rgba(5, 18, 32, 0.86) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08) !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row [data-skin] {
    height: 22px !important;
    min-height: 0 !important;
    max-height: 22px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(191, 219, 254, 0.82) !important;
    font-size: 11px !important;
    line-height: 22px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row [data-skin].active {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.94), rgba(2, 132, 199, 0.9)) !important;
    color: #f8feff !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box > .professional-brief:not(.hidden),
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief.professional-brief:not(.hidden) {
    height: 66px !important;
    min-height: 0 !important;
    max-height: 70px !important;
    padding: 6px !important;
    gap: 5px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(45, 212, 191, 0.18) !important;
    background: rgba(5, 18, 32, 0.86) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.06) !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief.professional-brief:not(.hidden) .professional-brief-head {
    display: grid !important;
    grid-template-columns: minmax(130px, 1fr) 138px !important;
    height: 26px !important;
    min-height: 0 !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief.professional-brief:not(.hidden) .professional-brief-steps {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    height: 27px !important;
    min-height: 0 !important;
    gap: 4px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief.professional-brief:not(.hidden) .professional-brief-steps span {
    display: grid !important;
    height: 27px !important;
    min-height: 0 !important;
    padding: 0 7px !important;
    align-content: center !important;
    background: rgba(8, 47, 73, 0.72) !important;
    border-color: rgba(45, 212, 191, 0.14) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    border: 1px solid rgba(45, 212, 191, 0.2) !important;
    background: rgba(5, 18, 32, 0.9) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08) !important;
  }
}

/* Trust sprint v175 final authority tail sentinel. */

/* Trust sprint v176: pro create console contrast and right-rail overflow lock. */
@media (min-width: 1100px) {
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer textarea#prompt {
    border-color: rgba(45, 212, 191, 0.2) !important;
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.92), rgba(2, 8, 23, 0.94)) !important;
    color: rgba(232, 251, 255, 0.96) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer textarea#prompt::placeholder {
    color: rgba(186, 230, 253, 0.5) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"],
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] #deliveryOrderPanel {
    color: rgba(224, 242, 254, 0.92) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-order-main,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-node-status,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-confirm-summary,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-stage-strip span,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .settings-summary,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .price-hint {
    min-width: 0 !important;
    border-color: rgba(45, 212, 191, 0.16) !important;
    background: rgba(8, 47, 73, 0.7) !important;
    color: rgba(224, 242, 254, 0.92) !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-order-main strong,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-node-status strong,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .settings-summary strong,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .price-hint strong,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .price-hint span {
    min-width: 0 !important;
    color: rgba(240, 253, 250, 0.96) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-order-main small,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-node-status small,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .settings-summary small,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .price-hint small {
    color: rgba(186, 230, 253, 0.68) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .settings-summary {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 36px !important;
    height: 40px !important;
    max-height: 42px !important;
    padding: 7px 9px !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .settings-summary::after {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-confirm-summary article {
    min-width: 0 !important;
  }

  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-confirm-summary span,
  :root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack[data-confirm-console="true"] .delivery-stage-strip span {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Trust sprint v184 final authority: compact review sheet wins at file tail. */
.generate-confirm.generate-confirm .generate-confirm-diff-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.generate-confirm.generate-confirm .generate-confirm-decision {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.generate-confirm.generate-confirm .generate-confirm-safe-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.generate-confirm.generate-confirm .generate-confirm-diff-strip article,
.generate-confirm.generate-confirm .generate-confirm-decision article {
  min-height: 36px !important;
  padding: 6px 7px !important;
}

.generate-confirm.generate-confirm .generate-confirm-guard,
.generate-confirm.generate-confirm .generate-confirm-user-lead,
.generate-confirm.generate-confirm .generate-confirm-summary,
.generate-confirm.generate-confirm .generate-confirm-risk,
.generate-confirm.generate-confirm .generate-confirm-check {
  padding: 8px 10px !important;
}

.generate-confirm.generate-confirm .generate-confirm-risk {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px 10px !important;
}

.generate-confirm.generate-confirm .generate-confirm-risk small {
  grid-column: 1 !important;
}

.generate-confirm.generate-confirm .generate-confirm-risk button {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

.generate-confirm.generate-confirm .generate-confirm-summary {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Trust sprint v257: keep generation confirmation as a scan-first evidence panel. */
.generate-confirm.generate-confirm .generate-confirm-user-lead article {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  min-height: 34px !important;
  padding: 6px 8px !important;
}

.generate-confirm.generate-confirm .generate-confirm-user-lead small {
  grid-column: 2 !important;
  -webkit-line-clamp: 1 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

.generate-confirm.generate-confirm .generate-confirm-diff-strip article,
.generate-confirm.generate-confirm .generate-confirm-decision article {
  min-height: 34px !important;
  padding: 5px 7px !important;
}

.generate-confirm.generate-confirm .generate-confirm-diff-strip strong,
.generate-confirm.generate-confirm .generate-confirm-decision strong {
  -webkit-line-clamp: 1 !important;
  font-size: 12px !important;
  line-height: 1.18 !important;
}

.generate-confirm.generate-confirm .generate-confirm-summary article,
.generate-confirm.generate-confirm .generate-confirm-check {
  min-height: 34px !important;
  padding: 6px 8px !important;
}

.generate-confirm.generate-confirm .generate-confirm-summary small,
.generate-confirm.generate-confirm .generate-confirm-check span {
  -webkit-line-clamp: 1 !important;
  font-size: 11px !important;
}

.prompt-live-preview.is-empty .prompt-live-gap-strip {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (max-width: 760px) {
  .generate-confirm.generate-confirm .generate-confirm-diff-strip,
  .generate-confirm.generate-confirm .generate-confirm-decision,
  .generate-confirm.generate-confirm .generate-confirm-safe-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Trust sprint v184 final authority tail sentinel. */

/* Trust sprint v182: desktop clean create chrome should read as controls, not empty panels. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) > .create-toolbar-row.create-toolbar-row {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    grid-template-columns: minmax(0, 420px) !important;
    width: min(420px, 100%) !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 32px !important;
    max-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) > .create-toolbar-row.create-toolbar-row > span {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) > .create-toolbar-row.create-toolbar-row .create-skin-row.create-skin-row {
    display: grid !important;
    justify-self: end !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 420px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) > .create-toolbar-row.create-toolbar-row .create-skin-row.create-skin-row [data-skin] {
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) {
    gap: 5px !important;
    min-height: 112px !important;
    height: 118px !important;
    max-height: 124px !important;
    padding: 6px 8px !important;
    border-color: rgba(13, 148, 136, 0.13) !important;
    background: rgba(255, 255, 255, 0.64) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-quick-head {
    min-height: 20px !important;
    height: 20px !important;
    max-height: 20px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-quick-head strong {
    font-size: 11px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-quick-head button {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 0 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-action-board.starter-compact-board.desktop-starter-compact[data-desktop-field-only="true"] {
    min-height: 52px !important;
    height: 54px !important;
    max-height: 56px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-row {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-row button {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    line-height: 22px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-next-actions.desktop-starter-next-actions {
    grid-template-columns: minmax(0, 1fr) 116px !important;
    gap: 6px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-next-actions.desktop-starter-next-actions .starter-field-open,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-next-actions.desktop-starter-next-actions button {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
}

/* Trust sprint v182 final authority tail sentinel. */

/* Trust sprint v183: compact the clean desktop starter strip after legacy ultra-specific rules. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) {
    grid-template-rows: 20px 60px 30px !important;
    gap: 5px !important;
    min-height: 122px !important;
    height: 126px !important;
    max-height: 130px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-action-board.starter-compact-board.desktop-starter-compact[data-desktop-field-only="true"] {
    grid-template-rows: 28px 28px !important;
    min-height: 60px !important;
    height: 60px !important;
    max-height: 60px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-row {
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-next-actions.desktop-starter-next-actions {
    grid-template-columns: minmax(0, 1fr) 116px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
  }
}

/* Trust sprint v183 final authority tail sentinel. */

/* Trust sprint v177: desktop template page is a target desk, not a template wall. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
    grid-template-rows: 30px 46px minmax(286px, auto) !important;
    grid-template-areas:
      "title title"
      "switch switch"
      "desk brief" !important;
    gap: 10px 14px !important;
    min-height: 404px !important;
    max-height: 500px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel > .section-title.section-title {
    grid-area: title !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel > .section-title h3 {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel > .section-title span {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-goal-strip.template-goal-strip {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-view-switch.template-view-switch {
    grid-area: switch !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 46px !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-view-switch.template-view-switch button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid {
    grid-area: desk !important;
    display: grid !important;
    min-height: 286px !important;
    height: 286px !important;
    max-height: 306px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong.template-workbench-block {
    display: grid !important;
    min-height: 286px !important;
    height: 286px !important;
    max-height: 306px !important;
    padding: 14px !important;
    align-content: start !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong > span {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong > strong {
    min-height: 28px !important;
    max-height: 34px !important;
    overflow: hidden !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    min-height: 218px !important;
    max-height: 226px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button {
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    min-height: 104px !important;
    height: 104px !important;
    max-height: 106px !important;
    padding: 11px 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button:nth-child(n + 5) {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel.template-brief-panel {
    grid-area: brief !important;
    display: grid !important;
    min-height: 286px !important;
    height: 286px !important;
    max-height: 306px !important;
    align-content: start !important;
    gap: 9px !important;
    padding: 13px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-primary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-value {
    min-height: 54px !important;
    max-height: 66px !important;
    overflow: hidden !important;
    padding: 9px 10px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-primary small,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch small,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-value strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    min-height: 74px !important;
    max-height: 80px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow article {
    min-height: 72px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="case"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Trust sprint v177 final authority tail sentinel. */

/* Trust sprint v178: professional/all template views stay as compact indexes. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
    grid-template-rows: 58px !important;
    grid-template-areas: "switch brief" !important;
    gap: 10px !important;
    min-height: 88px !important;
    height: 96px !important;
    max-height: 112px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell .template-workbench-panel > .section-title,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell .template-goal-strip,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell .template-view-switch.template-view-switch {
    grid-area: switch !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 50px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell #templateBriefPanel.template-brief-panel {
    grid-area: brief !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 50px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell #templateBriefPanel .template-brief-primary {
    display: grid !important;
    min-height: 32px !important;
    max-height: 34px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell #templateBriefPanel .template-brief-primary strong {
    font-size: 14px !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell #templateBriefPanel .template-brief-primary small,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell #templateBriefPanel .template-brief-value,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch .template-brief-cta-copy {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch {
    display: grid !important;
    place-items: center end !important;
    min-height: 32px !important;
    max-height: 34px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="professional"] body .app-shell.app-shell .professional-template-panel.professional-template-panel {
    margin-top: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="all"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 46px !important;
    grid-template-areas: "switch" !important;
    gap: 0 !important;
    min-height: 70px !important;
    height: 74px !important;
    max-height: 88px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="all"] body .app-shell.app-shell .template-workbench-panel > .section-title,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="all"] body .app-shell.app-shell .template-goal-strip,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="all"] body .app-shell.app-shell #templateBriefPanel.template-brief-panel,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="all"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="all"] body .app-shell.app-shell .template-view-switch.template-view-switch {
    grid-area: switch !important;
    min-height: 46px !important;
    height: 46px !important;
    max-height: 46px !important;
  }
}

/* Trust sprint v178 final authority tail sentinel. */

/* Trust sprint v179: template starter cards and right brief must be readable, not decorative blocks. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button {
    position: relative !important;
    isolation: isolate !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    place-items: center start !important;
    gap: 5px !important;
    border: 1px solid rgba(15, 118, 110, 0.22) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(235, 253, 247, 0.94)) !important;
    box-shadow: inset 4px 0 0 rgba(15, 118, 110, 0.72) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button::before,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button::after {
    display: none !important;
    content: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button strong,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button small {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button strong {
    color: #12312d !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button small {
    color: rgba(23, 58, 53, 0.68) !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel.template-brief-panel > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 48px !important;
    max-height: 54px !important;
    padding: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch .template-brief-cta-copy {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow article {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Trust sprint v179 final authority tail sentinel. */

/* Trust sprint v180: starter target choices prioritize readable labels over thumbnails. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button .template-visual-preview {
    display: none !important;
    visibility: hidden !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button {
    min-height: 84px !important;
    height: 84px !important;
    max-height: 88px !important;
    align-content: center !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row {
    min-height: 178px !important;
    max-height: 190px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong.template-workbench-block {
    min-height: 256px !important;
    height: 256px !important;
    max-height: 276px !important;
  }
}

/* Trust sprint v180 final authority tail sentinel. */

/* Trust sprint v181: starter brief card uses a single readable column. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel.template-brief-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 56px 44px 54px 72px !important;
    align-content: start !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-primary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-value,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch {
    place-items: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 72px !important;
    max-height: 76px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow article {
    min-height: 68px !important;
    max-height: 72px !important;
    padding: 7px 6px !important;
  }
}

/* Trust sprint v181 final authority tail sentinel. */

/* Desktop regular-create clean consolidation v13: calm default PC entry, not a form wall. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell {
    width: min(calc(100% - 72px), 1328px) !important;
    padding-bottom: 56px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 184px minmax(0, 1fr) 304px !important;
    grid-template-rows: 38px minmax(0, auto) !important;
    gap: 12px !important;
    padding: 12px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    align-items: start !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) > .section-title {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .create-toolbar-row {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: min(528px, 100%) !important;
    min-height: 32px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel button {
    min-height: 39px !important;
    height: 39px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    text-align: left !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel small,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-card small,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-head small,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-style-panel small,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-panel small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    max-height: 308px !important;
    margin: 208px 0 0 !important;
    padding: 0 2px 0 0 !important;
    overflow: auto !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-card {
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    align-content: center !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .track-card strong {
    font-size: 11px !important;
    line-height: 34px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    display: grid !important;
    gap: 8px !important;
    padding: 12px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) textarea#prompt {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 150px !important;
    padding: 18px 20px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-action-dock {
    min-height: 48px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview.is-empty {
    min-height: 54px !important;
    max-height: 62px !important;
    padding: 7px 9px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-live-preview.is-empty .prompt-live-main {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick:not(.hidden) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    max-height: 178px !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 28px !important;
    gap: 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-head strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-head button,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-field-open,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-next-actions button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    max-height: 82px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .desktop-starter-row {
    display: grid !important;
    grid-template-columns: 52px repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-height: 31px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .desktop-starter-row button {
    min-height: 29px !important;
    height: 29px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .desktop-starter-label {
    min-width: 0 !important;
    font-size: 10px !important;
    line-height: 29px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .desktop-starter-next-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 128px !important;
    gap: 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-preflight,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .pricing-controls,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .create-shortcut-dock {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 2 / span 2 !important;
    position: sticky !important;
    top: 58px !important;
    display: grid !important;
    gap: 7px !important;
    max-height: 438px !important;
    min-height: 0 !important;
    padding: 9px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .generation-settings-panel {
    display: block !important;
    margin: 0 !important;
    max-height: 28px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .settings-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.50) !important;
    border-color: rgba(15, 118, 110, 0.075) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .settings-summary span,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .settings-summary small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .settings-summary strong {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: rgba(15, 23, 42, 0.62) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .price-hint {
    display: block !important;
    min-height: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    font-size: 11px !important;
    line-height: 16px !important;
    color: rgba(15, 118, 110, 0.78) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack > * {
    min-width: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-main {
    min-height: 58px !important;
    padding: 9px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-main strong {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-node-status,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-confirm-summary article,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stage-strip span {
    min-height: 30px !important;
    padding: 6px 7px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-confirm-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stage-strip {
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-grid,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-template-card,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-order-main small,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-node-status small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .queue {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px 10px !important;
    margin-top: 10px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .queue .section-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 28px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .queue .section-title h3 {
    font-size: 16px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .queue-summary {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .queue-toolbar {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    max-width: 286px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .queue-toolbar button,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell .queue-copy {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

/* Desktop clean create final polish v14: remove top chrome collision and clipped queue copy. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer > .section-title.section-title {
    display: grid !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: visible !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer > .create-toolbar-row.create-toolbar-row {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: min(536px, calc(100% - 8px)) !important;
    transform: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue {
    grid-template-columns: 256px minmax(280px, 1fr) auto !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue .section-title.section-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue #queueSummary.queue-summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue .queue-toolbar {
    grid-column: 3 !important;
    grid-row: 1 !important;
    max-width: 330px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue .queue-toolbar button {
    padding: 0 9px !important;
  }
}

/* Desktop clean create final polish v15: queue actions must stay fully visible. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue {
    grid-template-columns: 172px minmax(0, 760px) 204px !important;
    gap: 8px 12px !important;
    align-items: center !important;
    justify-content: start !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue .section-title.section-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue .queue-safety-note {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue #queueSummary.queue-summary {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue .queue-toolbar {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    width: 204px !important;
    max-width: 204px !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue .queue-toolbar button {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
    text-align: center !important;
    overflow: visible !important;
  }
}

@media (min-width: 980px) and (max-width: 1240px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue {
    grid-template-columns: minmax(0, 1fr) max-content !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue .section-title.section-title,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue .queue-safety-note,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue #queueSummary.queue-summary {
    grid-column: 1 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue .queue-toolbar {
    grid-column: 2 !important;
  }
}

/* Trust sprint v176 final authority tail sentinel. */

/* Blueprint convergence v0038: prompt preview visible layer is three short pills. */
@media (min-width: 980px) {
  html:root[data-active-page="create"][data-skin] body .app-shell .panel.composer #promptLivePreview .prompt-live-gap-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 6px !important;
    min-height: 38px !important;
    max-height: 46px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  html:root[data-active-page="create"][data-skin] body .app-shell .panel.composer #promptLivePreview .prompt-live-gap-strip span {
    min-height: 32px !important;
    max-height: 36px !important;
    padding: 5px 7px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  html:root[data-active-page="create"][data-skin] body .app-shell .panel.composer #promptLivePreview .prompt-live-gap-strip b,
  html:root[data-active-page="create"][data-skin] body .app-shell .panel.composer #promptLivePreview .prompt-live-gap-strip em {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }

  html:root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer #promptLivePreview.prompt-live-preview,
  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer #promptLivePreview.prompt-live-preview {
    max-height: 74px !important;
  }
}

/* Blueprint convergence v0040: desktop pro workbench and template first screen cleanup. */
@media (min-width: 1100px) {
  html:root[data-active-page="create"][data-skin="pro"] body .app-shell {
    max-width: 1440px !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer.panel.composer {
    grid-template-columns: 264px minmax(660px, 1fr) 392px !important;
    grid-template-rows: 38px auto auto !important;
    gap: 12px !important;
    align-items: start !important;
    min-height: 620px !important;
    overflow: visible !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief:not(.hidden) {
    height: 76px !important;
    max-height: 80px !important;
    padding: 7px 9px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-head {
    grid-template-columns: minmax(0, 1fr) 210px !important;
    height: 28px !important;
    gap: 8px !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-head strong,
  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-actions button,
  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-steps span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    height: 28px !important;
    gap: 6px !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    height: 34px !important;
    gap: 6px !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief-steps span {
    height: 34px !important;
    max-height: 34px !important;
    padding: 0 8px !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-stack.delivery-stack {
    width: 100% !important;
    max-width: 392px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-confirm-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
    min-height: 42px !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .generation-settings-panel,
  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .pricing-controls {
    overflow: hidden !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .pricing-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 86px !important;
    height: 90px !important;
    max-height: 92px !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .pricing-controls label {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding: 6px 7px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .pricing-controls label span,
  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .pricing-controls input,
  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .pricing-controls select {
    min-width: 0 !important;
    height: 26px !important;
    max-height: 26px !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .starter-next-actions,
  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .starter-field-open,
  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .starter-next-generate {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  html:root[data-active-page="templates"] body .app-shell .template-workbench-panel {
    min-height: 0 !important;
    max-height: 430px !important;
  }

  html:root[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid {
    min-height: 0 !important;
    align-items: stretch !important;
  }

  html:root[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block.strong {
    min-height: 210px !important;
  }

  html:root[data-active-page="templates"] body .app-shell .template-choice-row button {
    min-height: 74px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief.collapsed [data-professional-brief-fill] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .professional-brief.collapsed .professional-brief-actions {
    grid-template-columns: 56px !important;
    justify-content: end !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer #professionalBrief.collapsed .professional-collapsed-sentinel[hidden] {
    display: none !important;
  }
}

/* Trust sprint v185 final authority tail sentinel. */

/* Trust sprint v186: pro creation default first screen is input-led, not a compressed info wall. */
@media (min-width: 1100px) {
  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) #skinWorkbenchCue {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) textarea#prompt {
    min-height: 132px !important;
    height: 140px !important;
    max-height: 148px !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief.collapsed:not(.hidden) {
    grid-template-rows: 30px !important;
    height: 42px !important;
    max-height: 46px !important;
    padding: 6px 9px !important;
    gap: 0 !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief.collapsed .professional-brief-head {
    grid-template-columns: minmax(0, 1fr) 64px !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief.collapsed .professional-brief-actions {
    grid-template-columns: 56px !important;
    justify-content: end !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .professional-brief.collapsed .professional-brief-steps {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v187: pro prompt feedback must visibly prove user input delta without rebuilding the info wall. */
.prompt-live-pro-evidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.prompt-live-pro-evidence article {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: 10px;
  background: rgba(6, 25, 42, 0.82);
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08);
}

.prompt-live-pro-evidence article[data-role="boost"] {
  border-color: rgba(14, 165, 233, 0.28);
  background: rgba(8, 34, 58, 0.86);
}

.prompt-live-pro-evidence article[data-role="submit"] {
  border-color: rgba(20, 184, 166, 0.36);
  background: rgba(9, 42, 50, 0.86);
}

.prompt-live-pro-evidence b,
.prompt-live-pro-evidence strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-live-pro-evidence b {
  color: rgba(186, 230, 253, 0.72);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.prompt-live-pro-evidence strong {
  color: rgba(240, 249, 255, 0.98);
  font-size: 12px;
  line-height: 1.15;
  font-weight: 900;
}

.prompt-live-pro-details {
  display: none;
}

@media (min-width: 1100px) {
  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-live-preview {
    gap: 7px !important;
    min-height: 88px !important;
    height: auto !important;
    max-height: 126px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-live-preview .prompt-live-gap-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 24px !important;
    height: 26px !important;
    max-height: 28px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-live-preview .prompt-live-gap-strip span {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 4px 7px !important;
    overflow: hidden !important;
  }

  html:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-live-pro-details {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .prompt-live-pro-evidence {
    grid-template-columns: 1fr;
  }
}

/* Trust sprint v187 final authority tail sentinel. */

/* Trust sprint v188: pro preflight is a compact status rail, not a dark secondary panel. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 46px !important;
    height: 50px !important;
    max-height: 54px !important;
    margin-top: 6px !important;
    padding: 6px 8px !important;
    border-color: rgba(45, 212, 191, 0.22) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(8, 34, 58, 0.78), rgba(2, 8, 23, 0.84)) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08) !important;
    color: rgba(226, 244, 255, 0.92) !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-head,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .prompt-understanding,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-grid,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .prompt-understanding-actions {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-summary {
    display: grid !important;
    grid-template-columns: minmax(142px, 0.46fr) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    height: 38px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-summary strong {
    max-width: 100% !important;
    color: rgba(186, 230, 253, 0.96) !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-summary small {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-summary-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-summary-grid span {
    flex: 0 1 86px !important;
    min-width: 0 !important;
    max-width: 86px !important;
    min-height: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
    padding: 4px 7px !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.7) !important;
    color: rgba(226, 244, 255, 0.78) !important;
    font-size: 10px !important;
    line-height: 14px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-summary-grid span.ok {
    color: rgba(153, 246, 228, 0.9) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-summary-grid span.warn {
    color: rgba(253, 230, 138, 0.86) !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-detail-toggle {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 24px !important;
  }
}

/* Trust sprint v188 final authority tail sentinel. */

/* Trust sprint v189: pro preflight collapses to one cockpit status row. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-summary {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-compact-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: 28px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(45, 212, 191, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(6, 78, 95, 0.32) !important;
    color: rgba(165, 243, 252, 0.96) !important;
    font-size: 11px !important;
    line-height: 28px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-summary > div:first-of-type,
  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-detail-toggle {
    display: none !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-summary-grid {
    justify-content: flex-start !important;
    gap: 7px !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-summary-grid span {
    flex: 0 1 104px !important;
    max-width: 104px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }
}

/* Trust sprint v189 final authority tail sentinel. */

/* Trust sprint v190: remove the extra pro preflight label after visual overlap review. */
@media (min-width: 1100px) {
  html:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-compact-label,
  html:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-head {
    display: none !important;
  }

  html:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .prompt-preflight .preflight-summary {
    grid-template-columns: minmax(0, 1fr) !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
  }
}

/* Trust sprint v190 final authority tail sentinel. */

/* Trust sprint v191: professional mode should not show the blank-starter next-step rail. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .starter-next-actions,
  html:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .starter-field-open {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v191 final authority tail sentinel. */

/* Trust sprint v192: hide generic shortcut cards inside the pro professional cockpit. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) #createShortcutDock,
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .create-shortcut-dock {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v192 final authority tail sentinel. */

/* Trust sprint v193: tighten the pro cockpit delivery rail and idle queue. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] {
    gap: 6px !important;
    align-content: start !important;
    max-width: 360px !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .delivery-order-main {
    min-height: 54px !important;
    height: 58px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .delivery-order-main span,
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .delivery-node-status span,
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .settings-summary span,
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .price-hint span {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .delivery-order-main strong {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .delivery-order-score {
    box-sizing: border-box !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 3px 4px !important;
    border-radius: 10px !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .delivery-order-score small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .delivery-node-status {
    min-height: 38px !important;
    height: 40px !important;
    padding: 6px 9px !important;
    border-radius: 10px !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .delivery-confirm-summary {
    min-height: 38px !important;
    height: 40px !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .delivery-confirm-summary article {
    min-height: 36px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .delivery-stage-strip {
    height: 32px !important;
    min-height: 32px !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .delivery-stage-strip article {
    min-height: 30px !important;
    padding: 4px 6px !important;
    border-radius: 9px !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .settings-summary,
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-stack[data-confirm-console="true"] .price-hint {
    min-height: 30px !important;
    height: 32px !important;
    padding: 5px 8px !important;
    border-radius: 9px !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .queue.queue {
    min-height: 58px !important;
    padding: 10px 14px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .queue.queue .section-title {
    min-height: 34px !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .queue.queue .queue-safety-note {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .queue.queue .queue-list > .empty-queue {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: rgba(15, 23, 42, 0.64) !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .queue.queue .empty-queue strong {
    font-size: 12px !important;
    color: rgba(226, 244, 255, 0.78) !important;
  }
}

/* Trust sprint v193 final authority tail sentinel. */

/* Trust sprint v194: replace the pro professional settings form with a compact parameter rail. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .generation-settings-panel,
  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .pricing-controls,
  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .price-hint {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-param-rail {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-height: 32px !important;
    height: 34px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-param-rail span {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 5px 7px !important;
    border: 1px solid rgba(45, 212, 191, 0.14) !important;
    border-radius: 9px !important;
    background: rgba(8, 47, 73, 0.62) !important;
    color: rgba(224, 242, 254, 0.86) !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-param-rail b,
  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-param-rail em {
    min-width: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-param-rail b {
    color: rgba(45, 212, 191, 0.82) !important;
    font-weight: 950 !important;
  }

  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer:has([data-creation-mode="professional"].active) .delivery-param-rail em {
    color: rgba(240, 253, 250, 0.94) !important;
    font-style: normal !important;
    font-weight: 850 !important;
  }
}

/* Trust sprint v194 final authority tail sentinel. */

/* Trust sprint v195: pro delivery rail uses the compact parameter strip across all pro create states. */
.delivery-param-rail {
  display: none;
}

@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .generation-settings-panel,
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .pricing-controls,
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .price-hint {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-param-rail {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px !important;
    min-height: 30px !important;
    height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-param-rail span {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 5px 6px !important;
    border: 1px solid rgba(45, 212, 191, 0.14) !important;
    border-radius: 9px !important;
    background: rgba(8, 47, 73, 0.62) !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-param-rail b,
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-param-rail em {
    min-width: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-param-rail b {
    color: rgba(45, 212, 191, 0.82) !important;
    font-weight: 950 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .delivery-param-rail em {
    color: rgba(240, 253, 250, 0.94) !important;
    font-style: normal !important;
    font-weight: 850 !important;
  }
}

/* Trust sprint v195 final authority tail sentinel. */

/* Trust sprint v196: force-hide the legacy pricing grid inside the pro delivery rail. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack .pricing-controls.pricing-controls,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack .pricing-controls.pricing-controls:not(.collapsed) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v196 final authority tail sentinel. */

/* Trust sprint v197: stretch the pro delivery rail as a real control console. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 376px !important;
    height: 376px !important;
    max-height: 400px !important;
    align-content: stretch !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] > #deliveryOrderPanel.delivery-order-panel {
    min-height: 0 !important;
    height: calc(100% + 32px) !important;
    align-content: space-between !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v197 final authority tail sentinel. */

/* Trust sprint v198: make the expanded pro brief a review strip instead of a document panel. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1fr) minmax(130px, 0.38fr) !important;
    grid-template-rows: 28px 34px !important;
    align-items: stretch !important;
    gap: 6px !important;
    min-height: 76px !important;
    height: 78px !important;
    max-height: 82px !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-head {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-head span,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-head small,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-type-grid,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-grid {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-head strong {
    min-width: 0 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-actions {
    display: grid !important;
    grid-template-columns: 58px !important;
    align-items: stretch !important;
    height: 100% !important;
    gap: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) [data-professional-brief-fill] {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-actions button {
    height: 62px !important;
    min-height: 0 !important;
    padding: 0 7px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-steps {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-height: 0 !important;
    height: 28px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-steps span {
    display: grid !important;
    align-content: center !important;
    height: 28px !important;
    min-height: 0 !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-steps span b {
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-expert-panel.pro-expert-strip {
    grid-column: 2 / span 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-height: 0 !important;
    height: 34px !important;
    margin: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-expert-panel.pro-expert-strip article {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 0 !important;
    height: 34px !important;
    padding: 0 7px !important;
    gap: 5px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-expert-panel.pro-expert-strip span,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-expert-panel.pro-expert-strip strong {
    min-width: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-expert-panel.pro-expert-strip small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-focus.pro-review-focus {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    height: 28px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-focus.pro-review-focus span {
    display: block !important;
    height: 28px !important;
    padding: 0 7px !important;
    border-radius: 8px !important;
    line-height: 28px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Trust sprint v198 final authority tail sentinel. */

/* Trust sprint v199: tighten pro prompt evidence without removing input-delta proof. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview {
    display: grid !important;
    grid-template-rows: 30px 24px !important;
    align-content: start !important;
    min-height: 76px !important;
    height: 76px !important;
    max-height: 84px !important;
    padding: 6px !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-pro-evidence {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-pro-evidence article {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 7px !important;
    gap: 5px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-pro-evidence b,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-pro-evidence strong {
    min-width: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-gap-strip[data-pro-density="compact"] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-gap-strip[data-pro-density="compact"] span {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 0 7px !important;
    gap: 4px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v199 final authority tail sentinel. */

/* Trust sprint v200: pro queue is a single status bar, not a second dashboard. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.52fr) minmax(0, 1fr) auto !important;
    grid-template-rows: 34px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 54px !important;
    max-height: 58px !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue .section-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue .section-title h3 {
    font-size: 15px !important;
    line-height: 34px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue .section-title #queueCount {
    height: 24px !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    line-height: 24px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue .queue-safety-note {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue .queue-list,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue .queue-summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue .queue-list > .empty-queue {
    display: flex !important;
    align-items: center !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(15, 23, 42, 0.64) !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue .empty-queue strong {
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 34px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue .empty-queue small,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue .empty-queue .queue-actions {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue .queue-toolbar {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    height: 34px !important;
    margin: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue .queue-toolbar button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 12px !important;
    line-height: 28px !important;
  }
}

/* Trust sprint v200 final authority tail sentinel. */

/* Trust sprint v201: desktop consolidation for clean/cute create and starter template pages. */
@media (min-width: 1100px) {
  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 188px minmax(620px, 1fr) 304px !important;
    grid-template-rows: 36px minmax(0, auto) 52px !important;
    gap: 12px !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) > .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-height: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 4px !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .create-toolbar-row {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .create-toolbar-row > span {
    display: none !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .create-skin-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .create-skin-row button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel button {
    display: grid !important;
    align-content: center !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel button small,
  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .mode-row,
  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-summary,
  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel,
  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .track-guide {
    display: none !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box textarea {
    min-height: 112px !important;
    max-height: 132px !important;
    padding: 14px !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-action-dock {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(188px, 0.42fr) !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 8px !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-action-dock button {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 14px !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .blank-starter-quick {
    display: grid !important;
    gap: 8px !important;
    min-height: 0 !important;
    max-height: 106px !important;
    overflow: hidden !important;
    padding: 8px !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-quick-head {
    display: none !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .desktop-starter-compact {
    display: grid !important;
    grid-template-rows: 32px 32px !important;
    gap: 6px !important;
    min-height: 70px !important;
    height: 70px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .desktop-starter-row {
    display: grid !important;
    grid-template-columns: 62px repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: center !important;
    min-height: 32px !important;
    height: 32px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .desktop-starter-row button {
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .desktop-starter-row button:nth-of-type(n+5) {
    display: none !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .desktop-starter-label {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .desktop-starter-next-actions,
  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .create-shortcut-dock {
    display: none !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: start !important;
    position: sticky !important;
    top: 12px !important;
    max-height: 420px !important;
    padding: 10px !important;
    overflow: auto !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .queue.queue {
    display: grid !important;
    grid-template-columns: minmax(190px, 0.32fr) minmax(0, 1fr) auto !important;
    grid-template-rows: 34px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 56px !important;
    max-height: 60px !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .queue.queue .queue-safety-note {
    display: none !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .queue.queue .queue-list {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    height: 34px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .queue.queue .queue-toolbar {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 34px !important;
    margin: 0 !important;
  }

  html:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-hero-panel {
    display: none !important;
  }

  html:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 330px !important;
    grid-template-rows: 36px 44px minmax(0, auto) !important;
    gap: 10px !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel > .section-title {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    height: 36px !important;
    margin: 0 !important;
  }

  html:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-view-switch {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 4px !important;
  }

  html:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-goal-strip {
    display: none !important;
  }

  html:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-grid {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-choice-row,
  html:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-block {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    min-height: 0 !important;
  }

  html:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-choice-row button,
  html:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-grid button {
    min-height: 70px !important;
    height: 70px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: stretch !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 250px !important;
    overflow: auto !important;
  }
}

/* Trust sprint v201 final authority tail sentinel. */

/* Trust sprint v202: keep the primary submit visible and restore cute's guided rail. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-action-dock #promptActionBtn {
    min-height: 42px !important;
    height: 42px !important;
    line-height: 40px !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #generateBtn {
    grid-column: 1 !important;
    order: -28 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding: 0 12px !important;
    margin: 0 0 2px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) {
    grid-template-columns: 188px minmax(620px, 1fr) 340px !important;
    grid-template-rows: 36px minmax(0, auto) 208px !important;
    gap: 12px !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .track-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    height: 208px !important;
    min-height: 208px !important;
    max-height: 208px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .track-card {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 9px !important;
    display: grid !important;
    align-content: center !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .track-card small {
    display: none !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: start !important;
    position: sticky !important;
    top: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 358px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v202 final authority tail sentinel. */

/* Trust sprint v203: semantic generate button stays alive without stealing desktop layout. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #generateBtn {
    display: grid !important;
    order: -28 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack[data-confirm-console="true"] {
    margin-top: 38px !important;
  }
}

/* Trust sprint v203 final authority tail sentinel. */

/* Trust sprint v204: align cute confirm rail with the main prompt rail. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack[data-confirm-console="true"] {
    transform: translateY(38px) !important;
  }
}

/* Trust sprint v204 final authority tail sentinel. */

/* Trust sprint v205: use layout offset for cute rail y-alignment. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack[data-confirm-console="true"] {
    position: relative !important;
    top: 38px !important;
    transform: none !important;
  }
}

/* Trust sprint v205 final authority tail sentinel. */

/* Trust sprint v206: keep cute's aligned confirm rail sticky, not relative. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack[data-confirm-console="true"] {
    position: sticky !important;
    top: 12px !important;
    transform: translateY(38px) !important;
  }
}

/* Trust sprint v206 final authority tail sentinel. */

/* Trust sprint v207: align cute confirm rail in normal layout flow. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack[data-confirm-console="true"] {
    position: sticky !important;
    top: 12px !important;
    margin-top: 38px !important;
    transform: none !important;
  }
}

/* Trust sprint v207 final authority tail sentinel. */

/* Trust sprint v208: fill desktop workbench voids without adding button noise. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 384px !important;
    height: 384px !important;
    align-content: start !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 249, 246, 0.82)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    margin-top: auto !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 248, 0.92)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong {
    min-height: 286px !important;
    align-content: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(82px, 1fr) !important;
    align-content: stretch !important;
    gap: 10px !important;
    height: 180px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button {
    height: 100% !important;
    min-height: 82px !important;
    align-content: center !important;
    border-left-width: 4px !important;
  }
}

/* Trust sprint v208 final authority tail sentinel. */

/* Trust sprint v209: make starter template choices a real 2x2 target grid. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block.strong > .template-choice-row.template-choice-row {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(82px, 1fr)) !important;
    grid-auto-rows: minmax(82px, 1fr) !important;
    height: 180px !important;
    align-items: stretch !important;
    align-content: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block.strong > .template-choice-row.template-choice-row > button {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* Trust sprint v209 final authority tail sentinel. */

/* Trust sprint v210: starter target cards override the generic four-column template row. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block.strong > .template-choice-row.template-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(82px, 1fr)) !important;
    grid-auto-flow: row !important;
    height: 180px !important;
  }
}

/* Trust sprint v210 final authority tail sentinel. */

/* Trust sprint v211: decongest the pro confirmation console into a tighter control rail. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 414px !important;
    height: 414px !important;
    max-height: 430px !important;
    padding: 12px !important;
    gap: 7px !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel.delivery-order-panel {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    min-height: 0 !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-order-main.delivery-order-main {
    grid-template-columns: minmax(0, 1fr) 52px !important;
    min-height: 68px !important;
    height: 70px !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-order-main strong {
    max-width: 100% !important;
    font-size: 18px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-order-main small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-order-score {
    box-sizing: border-box !important;
    min-width: 42px !important;
    width: 42px !important;
    max-width: 42px !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 3px 4px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-param-rail.delivery-param-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-param-rail span {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-node-status.delivery-node-status {
    min-height: 44px !important;
    height: 44px !important;
    padding: 7px 10px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary article {
    min-height: 42px !important;
    height: 42px !important;
    padding: 7px 9px !important;
    align-content: center !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip.delivery-stage-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip article {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 9px !important;
    gap: 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip article small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v211 final authority tail sentinel. */

/* Trust sprint v212: starter templates become a visible segmented workbench, not a half-empty four-card wall. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    grid-template-columns: minmax(0, 1fr) 340px !important;
    grid-template-rows: 34px 40px minmax(356px, auto) !important;
    gap: 10px !important;
    min-height: 476px !important;
    padding: 14px !important;
    align-items: stretch !important;
    align-content: start !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(239, 250, 247, 0.94)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel > .section-title.section-title {
    grid-column: 1 / 3 !important;
    min-height: 34px !important;
    height: 34px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-view-switch.template-view-switch {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 1.08fr) minmax(280px, 0.92fr) !important;
    grid-template-rows: repeat(3, minmax(104px, 1fr)) !important;
    gap: 10px !important;
    min-height: 356px !important;
    height: 100% !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block.template-workbench-block {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 12px !important;
    border: 1px solid rgba(15, 118, 110, 0.13) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block.strong.template-workbench-block {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    min-height: 356px !important;
    align-content: stretch !important;
    background:
      linear-gradient(135deg, rgba(236, 253, 245, 0.95), rgba(255, 255, 255, 0.9)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong).template-workbench-block {
    grid-column: 2 !important;
    min-height: 104px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong):nth-of-type(2) {
    grid-row: 1 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong):nth-of-type(3) {
    grid-row: 2 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong):nth-of-type(4) {
    grid-row: 3 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block > span {
    color: var(--accent) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block > strong {
    min-width: 0 !important;
    color: var(--ink) !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong) > strong {
    font-size: 14px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block.strong > .template-choice-row.template-choice-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(118px, 1fr)) !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 252px !important;
    align-items: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong) > .template-choice-row.template-choice-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 44px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-choice-row button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 100% !important;
    padding: 8px !important;
    border-radius: 10px !important;
    align-content: center !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block.strong .template-choice-row button {
    min-height: 118px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong) .template-choice-row button strong {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong) .template-choice-row button small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel.template-brief-panel {
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-height: 356px !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v212 final authority tail sentinel. */

/* Trust sprint v213: keep mobile templates focused while desktop shows the full segmented workbench. */
@media (max-width: 1099px) {
  html:root[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid .template-workbench-block:not(.strong) {
    display: none !important;
  }

  html:root[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-guardrail {
    display: none !important;
  }
}

/* Trust sprint v213 final authority tail sentinel. */

/* Trust sprint v214: make the pro creation rail a scannable control console instead of a tall blank preview well. */
.pro-control-matrix {
  display: none;
}

@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 380px !important;
    height: 380px !important;
    max-height: 392px !important;
    padding: 10px !important;
    gap: 6px !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #deliveryOrderPanel.delivery-order-panel {
    display: grid !important;
    grid-template-rows: 62px 54px 42px 36px 40px 28px !important;
    grid-auto-rows: 0 !important;
    align-content: start !important;
    gap: 6px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .pro-control-matrix {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 54px !important;
    height: 54px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .pro-control-matrix article {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: 54px !important;
    padding: 7px 8px !important;
    border: 1px solid rgba(45, 212, 191, 0.18) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(8, 47, 73, 0.78), rgba(2, 8, 23, 0.86)) !important;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.05) !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .pro-control-matrix article.warn {
    border-color: rgba(245, 158, 11, 0.4) !important;
    background: linear-gradient(180deg, rgba(69, 38, 8, 0.64), rgba(2, 8, 23, 0.86)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .pro-control-matrix b {
    display: block !important;
    color: rgba(45, 212, 191, 0.96) !important;
    font-size: 10px !important;
    line-height: 14px !important;
    letter-spacing: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .pro-control-matrix span {
    display: -webkit-box !important;
    margin-top: 2px !important;
    color: rgba(224, 242, 254, 0.94) !important;
    font-size: 11px !important;
    line-height: 15px !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-order-main.delivery-order-main {
    min-height: 62px !important;
    height: 62px !important;
    max-height: 62px !important;
    padding: 8px 9px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-node-status.delivery-node-status {
    min-height: 42px !important;
    height: 42px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip.delivery-stage-strip {
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    transform: translateY(-6px) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary {
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-param-rail.delivery-param-rail {
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-decision-board,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-order-grid,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .template-delivery-sheet,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-order-actions {
    display: none !important;
  }
}

/* Trust sprint v214 final authority tail sentinel. */

/* Trust sprint v215: expose the pro rail primary action and remove the remaining top/bottom dead pockets. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 392px !important;
    height: 404px !important;
    max-height: 416px !important;
    gap: 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #generateBtn.generate-btn {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid rgba(45, 212, 191, 0.36) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.92), rgba(20, 184, 166, 0.9)) !important;
    color: #f8feff !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 14px 24px rgba(14, 165, 233, 0.16) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #deliveryOrderPanel.delivery-order-panel {
    grid-template-rows: 58px 48px 38px 36px 38px 24px !important;
    gap: 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-order-main.delivery-order-main {
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .pro-control-matrix {
    min-height: 48px !important;
    height: 48px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .pro-control-matrix article {
    min-height: 48px !important;
    height: 48px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip article small {
    display: none !important;
  }
}

/* Trust sprint v215 final authority tail sentinel. */

/* Trust sprint v216: desktop queue is a quiet status strip, not a second action rail. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue {
    display: grid !important;
    grid-template-columns: minmax(154px, 0.22fr) minmax(0, 1fr) max-content !important;
    grid-template-rows: 32px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    height: 54px !important;
    max-height: 58px !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue .section-title.section-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    align-items: center !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue .section-title h3 {
    font-size: 15px !important;
    line-height: 32px !important;
    white-space: nowrap !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue #queueCount {
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 8px !important;
    line-height: 22px !important;
    font-size: 12px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue .queue-safety-note {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue .queue-list,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue .queue-summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    height: 32px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue .queue-list > .empty-queue {
    display: flex !important;
    align-items: center !important;
    min-height: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue .empty-queue strong {
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 32px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue .empty-queue small,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue .empty-queue .queue-actions {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue .queue-toolbar {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue .queue-toolbar button {
    box-sizing: border-box !important;
    min-width: 52px !important;
    width: 52px !important;
    max-width: 52px !important;
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 26px !important;
    box-shadow: none !important;
  }
}

/* Trust sprint v216 final authority tail sentinel. */

/* Trust sprint v217: separate prompt draft review from the right-side generation confirmation console. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock {
    grid-template-columns: minmax(0, 1fr) 176px !important;
    min-height: 52px !important;
    height: 54px !important;
    max-height: 58px !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(14, 165, 233, 0.16) !important;
    background: linear-gradient(90deg, rgba(240, 249, 255, 0.82), rgba(240, 253, 250, 0.72)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock span {
    font-size: 12px !important;
    line-height: 17px !important;
    color: #0369a1 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock small {
    display: block !important;
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(15, 23, 42, 0.68) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionBtn {
    min-width: 156px !important;
    width: 176px !important;
    max-width: 176px !important;
    min-height: 38px !important;
    height: 40px !important;
    max-height: 42px !important;
    border: 1px solid rgba(14, 165, 233, 0.22) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(224, 242, 254, 0.9)) !important;
    color: #075985 !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock {
    border-color: rgba(236, 72, 153, 0.18) !important;
    background: linear-gradient(90deg, rgba(255, 247, 237, 0.88), rgba(255, 241, 242, 0.78)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock span,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionBtn {
    color: #9d174d !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock {
    border-color: rgba(56, 189, 248, 0.2) !important;
    background: linear-gradient(90deg, rgba(8, 47, 73, 0.72), rgba(2, 8, 23, 0.74)) !important;
    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.06) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock span {
    color: rgba(125, 211, 252, 0.96) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock small {
    color: rgba(224, 242, 254, 0.72) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionBtn {
    border-color: rgba(45, 212, 191, 0.28) !important;
    background: linear-gradient(135deg, rgba(8, 47, 73, 0.96), rgba(14, 116, 144, 0.82)) !important;
    color: #e0f2fe !important;
  }
}

/* Trust sprint v217 final authority tail sentinel. */

/* Trust sprint v218: starter templates show two decision lanes instead of a four-block button wall. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid {
    grid-template-columns: minmax(340px, 1.12fr) minmax(300px, 0.88fr) !important;
    grid-template-rows: minmax(356px, auto) !important;
    min-height: 356px !important;
    gap: 10px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block.strong.template-workbench-block {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 356px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong).template-workbench-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 356px !important;
    align-content: start !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong):nth-of-type(n + 3) {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong) > .template-choice-row.template-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 54px) !important;
    align-content: start !important;
    gap: 8px !important;
    min-height: 116px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong) .template-choice-row button {
    min-height: 54px !important;
    height: 54px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid .template-workbench-block:not(.strong) .template-choice-row button small {
    display: block !important;
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Trust sprint v218 final authority tail sentinel. */

/* Trust sprint v219: hard-stop hidden starter blocks that older high-specificity template rules re-expose. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid > .template-workbench-block.template-workbench-block:nth-of-type(n + 3) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid {
    grid-template-columns: minmax(340px, 1.12fr) minmax(300px, 0.88fr) !important;
    grid-template-rows: minmax(356px, auto) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid > .template-workbench-block.template-workbench-block:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 356px !important;
  }
}

/* Trust sprint v219 final authority tail sentinel. */

/* Trust sprint v220: starter workbench uses semantic lanes; delivery and industry detail stay deferred. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid {
    grid-template-columns: minmax(340px, 1.12fr) minmax(300px, 0.88fr) !important;
    grid-template-rows: repeat(2, minmax(172px, 1fr)) !important;
    min-height: 356px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid > .template-workbench-block[data-template-workbench="case"].template-workbench-block {
    box-sizing: border-box !important;
    display: grid !important;
    visibility: visible !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 172px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v220 final authority tail sentinel. */

/* Trust sprint v221: no nth-of-type restoration; hidden workbench blocks are governed by DOM scope. */
/* Trust sprint v221 final authority tail sentinel. */

/* Template structural hiding authority: hidden DOM state must beat legacy desktop nth-of-type layout overrides. */
#templateWorkbenchGrid > .template-workbench-block[hidden],
[data-template-library][hidden] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Trust sprint v222: desktop creation page reads as one guided canvas, not loose panels. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell {
    padding-top: 18px !important;
    padding-bottom: 44px !important;
    row-gap: 10px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer {
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    align-content: start !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptToolbar.prompt-toolbar {
    min-height: 26px !important;
    height: 28px !important;
    max-height: 28px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer textarea#prompt {
    min-height: 112px !important;
    height: 112px !important;
    max-height: 138px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock {
    margin-top: 0 !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .blank-starter-quick.blank-starter-quick {
    border-radius: 13px !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .starter-action-board,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .starter-direction-card,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .starter-style-panel,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .starter-field-panel {
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .starter-quick-tabs button,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .starter-quick-variants button,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .starter-field-chips button {
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue {
    margin-top: 10px !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.08), 0 18px 38px rgba(8, 47, 73, 0.18) !important;
  }
}

/* Trust sprint v222 final authority tail sentinel. */

/* Trust sprint v223: pro professional details keep short step labels, not long instructions in the main lane. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    height: 28px !important;
    max-height: 30px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .professional-brief[data-compact-mode="pro"]:not(.hidden):not(.collapsed) .professional-brief-steps span {
    height: 28px !important;
    min-height: 0 !important;
    max-height: 28px !important;
    padding: 0 7px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
}

/* Trust sprint v223 final authority tail sentinel. */

/* Trust sprint v224: pro create right rail and draft-review dock use a quieter text budget. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock {
    grid-template-columns: minmax(0, 1fr) 148px !important;
    min-height: 44px !important;
    height: 46px !important;
    max-height: 48px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock span {
    font-size: 11px !important;
    line-height: 15px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock small {
    font-size: 11px !important;
    line-height: 15px !important;
    max-width: 100% !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionBtn {
    min-height: 32px !important;
    height: 32px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 368px !important;
    height: 392px !important;
    max-height: 404px !important;
    gap: 5px !important;
    padding: 9px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-order-main.delivery-order-main {
    min-height: 52px !important;
    height: 52px !important;
    max-height: 54px !important;
    padding: 7px 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pro-control-matrix {
    min-height: 46px !important;
    height: 46px !important;
    max-height: 48px !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pro-control-matrix article {
    min-height: 44px !important;
    height: 44px !important;
    padding: 6px 7px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-node-status.delivery-node-status {
    min-height: 38px !important;
    height: 38px !important;
    max-height: 40px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip.delivery-stage-strip {
    min-height: 32px !important;
    height: 32px !important;
    max-height: 34px !important;
    transform: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary {
    min-height: 36px !important;
    height: 36px !important;
    max-height: 38px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-param-rail.delivery-param-rail {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 26px !important;
    gap: 5px !important;
  }
}

/* Trust sprint v224 final authority tail sentinel. */

/* Trust sprint v225: pro desktop left rail and top controls stop reading as a button wall. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row.create-toolbar-row {
    grid-template-columns: minmax(0, 1fr) 264px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .create-skin-row.create-skin-row {
    width: 264px !important;
    max-width: 264px !important;
    height: 28px !important;
    max-height: 28px !important;
    padding: 2px !important;
    gap: 2px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel {
    height: 124px !important;
    min-height: 124px !important;
    max-height: 126px !important;
    padding: 7px !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel button {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 0 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel.track-panel {
    min-height: 118px !important;
    height: 124px !important;
    max-height: 132px !important;
    padding: 7px !important;
    gap: 6px !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel.track-panel .track-card {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 9px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel.track-panel .track-card:nth-child(n + 3) {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-param-rail.delivery-param-rail {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v225 final authority tail sentinel. */

/* Trust sprint v226: desktop pro screenshot returns to default focus and queue balance uses lower whitespace. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue {
    margin-top: 28px !important;
  }
}

/* Trust sprint v226 final authority tail sentinel. */

/* Trust sprint v227: desktop pro queue rhythm is measured in the active workbench, not the default lane. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer {
    min-height: 560px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue {
    min-height: 60px !important;
    height: 60px !important;
    margin-top: 33px !important;
  }
}

/* Trust sprint v227 final authority tail sentinel. */

/* Trust sprint v228: pro professional right rail reads from confirmation first, not loose diagnostics first. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .delivery-stack.delivery-stack[data-confirm-console="true"] {
    align-content: start !important;
    gap: 5px !important;
    min-height: 282px !important;
    height: 292px !important;
    max-height: 304px !important;
    padding-top: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) .delivery-stack.delivery-stack[data-confirm-console="true"] > #generateBtn.generate-btn {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #deliveryOrderPanel.delivery-order-panel {
    align-content: start !important;
    min-height: 0 !important;
    height: auto !important;
    grid-template-rows: 52px 44px 38px 32px 34px 24px !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #deliveryOrderPanel .delivery-order-main.delivery-order-main {
    order: 1 !important;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 52px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #deliveryOrderPanel .pro-control-matrix {
    order: 2 !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #deliveryOrderPanel .delivery-node-status.delivery-node-status {
    order: 3 !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #deliveryOrderPanel .delivery-stage-strip.delivery-stage-strip {
    order: 4 !important;
    min-height: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #deliveryOrderPanel .delivery-confirm-summary.delivery-confirm-summary {
    order: 5 !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #deliveryOrderPanel .delivery-param-rail.delivery-param-rail {
    order: 6 !important;
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
  }
}

/* Trust sprint v228 final authority tail sentinel. */

/* Authority note: retained legacy non-pro compact starter strip. Current visible create-starter owner is v305; do not remove this fallback until the v305/v300 smoke guards pass after consolidation. */
/* Trust sprint v229: desktop create main lane becomes input + one field strip, not a repeated button wall. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) {
    grid-template-rows: 22px 38px 0 !important;
    gap: 5px !important;
    min-height: 74px !important;
    height: 78px !important;
    max-height: 82px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-quick-head {
    grid-template-columns: minmax(0, 1fr) 84px !important;
    min-height: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-quick-head small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-quick-head button {
    min-height: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-action-board.starter-compact-board.desktop-starter-compact[data-desktop-field-only="true"] {
    grid-template-rows: 0 34px !important;
    min-height: 36px !important;
    height: 38px !important;
    max-height: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-directions {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-fields.desktop-starter-fields {
    grid-template-columns: 68px repeat(4, minmax(0, 1fr)) !important;
    min-height: 32px !important;
    height: 34px !important;
    max-height: 34px !important;
    gap: 5px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-fields .desktop-starter-label {
    font-size: 0 !important;
    color: transparent !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-fields .desktop-starter-label::before {
    content: "补字段";
    display: inline-flex !important;
    align-items: center !important;
    color: #0f766e !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-fields button {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .desktop-starter-next-actions.desktop-starter-next-actions {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-pro-evidence {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 46px !important;
    height: 50px !important;
    max-height: 54px !important;
    gap: 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-pro-evidence article {
    min-height: 44px !important;
    height: 46px !important;
    max-height: 48px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-pro-evidence strong {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Trust sprint v229 final authority tail sentinel. */

/* Authority note: retained high-specificity compact strip fallback for older desktop height locks; keep as legacy guard until duplicate starter selectors are merged under v305. */
/* Trust sprint v230: non-pro starter strip beats older deep-root desktop height locks. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box.prompt-box > #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) {
    grid-template-rows: 22px 38px 0 !important;
    min-height: 74px !important;
    height: 78px !important;
    max-height: 82px !important;
    padding: 8px 10px !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box.prompt-box > #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick.blank-starter-quick:not(.hidden):has(.desktop-starter-next-actions) .starter-action-board.starter-action-board.desktop-starter-compact[data-desktop-field-only="true"] {
    grid-template-rows: 0 34px !important;
    min-height: 36px !important;
    height: 38px !important;
    max-height: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
}

/* Trust sprint v230 final authority tail sentinel. */

/* Goal closeout: template starter secondary guidance. */
.template-secondary-row {
  margin-top: 10px;
}

.template-start-more {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.template-start-guide-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.template-start-guide-detail article {
  display: grid;
  gap: 4px;
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.template-start-guide-detail b {
  color: var(--ink);
  font-size: 12px;
}

.template-start-guide-detail small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

:root[data-skin="pro"] .template-start-guide-detail article {
  border-color: rgba(45, 212, 191, 0.18);
  background: rgba(8, 47, 73, 0.58);
}

@media (max-width: 760px) {
  .template-start-guide-detail {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 761px) and (max-width: 1099px) {
  :root[data-active-page="templates"] #templateBriefPanel.template-brief-panel {
    min-height: 224px !important;
  }
}

@media (min-width: 1100px) {
  :root[data-active-page="templates"][data-template-view="starter"] .template-workbench-block[data-template-start-guide] {
    align-content: start !important;
    min-height: 176px !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-workbench-block[data-template-start-guide] > small {
    display: block !important;
    max-height: 32px !important;
    overflow: hidden !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-workbench-block[data-template-start-guide] .template-secondary-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-self: start !important;
    gap: 6px !important;
    margin-top: 2px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-workbench-block[data-template-start-guide] .template-secondary-row button {
    min-height: 38px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-workbench-block[data-template-start-guide] .template-secondary-row button small {
    display: none !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-workbench-block[data-template-start-guide] .template-start-guide-detail {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 2px !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-workbench-block[data-template-start-guide] .template-start-guide-detail article {
    min-height: 52px !important;
    height: 56px !important;
    padding: 7px 8px !important;
    overflow: hidden !important;
  }

  :root[data-active-page="templates"][data-template-view="starter"] .template-workbench-block[data-template-start-guide] .template-start-guide-detail small {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* Goal closeout v231: starter screenshots cannot inherit deep professional state; create page secondary rails stay quiet. */
@media (min-width: 1100px) {
  :root[data-active-page="create"][data-skin="clean"] #promptActionDock.prompt-action-dock {
    grid-template-columns: minmax(0, 1fr) 176px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 58px !important;
    padding: 7px 10px !important;
    background: rgba(240, 253, 250, 0.62) !important;
    border-color: rgba(20, 184, 166, 0.13) !important;
  }

  :root[data-active-page="create"][data-skin="clean"] #promptActionDock.prompt-action-dock span {
    font-size: 11px !important;
    color: #0f766e !important;
  }

  :root[data-active-page="create"][data-skin="clean"] #promptActionDock.prompt-action-dock small {
    font-size: 11px !important;
    color: rgba(15, 23, 42, 0.55) !important;
  }

  :root[data-active-page="create"][data-skin="clean"] #promptActionBtn {
    width: 176px !important;
    max-width: 176px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 42px !important;
    font-size: 12px !important;
    background: rgba(255, 255, 255, 0.76) !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .queue.queue {
    height: 46px !important;
    min-height: 44px !important;
    max-height: 48px !important;
    padding: 6px 12px !important;
    background: rgba(255, 255, 255, 0.64) !important;
    border-color: rgba(15, 23, 42, 0.05) !important;
    box-shadow: none !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .queue.queue .section-title h3 {
    font-size: 14px !important;
    color: rgba(15, 23, 42, 0.72) !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .queue.queue #queueCount {
    background: rgba(15, 118, 110, 0.08) !important;
    color: #0f766e !important;
  }

  :root[data-active-page="create"][data-skin="clean"] .queue.queue .queue-toolbar button {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    opacity: 0.78 !important;
  }
}

/* Goal closeout v232: beat legacy deep-root locks for the clean desktop secondary rails. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock {
    grid-template-columns: minmax(0, 1fr) 176px !important;
    min-height: 54px !important;
    height: 54px !important;
    max-height: 58px !important;
    padding: 7px 10px !important;
    background: rgba(240, 253, 250, 0.62) !important;
    border-color: rgba(20, 184, 166, 0.13) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionBtn {
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 42px !important;
    font-size: 12px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue {
    min-height: 44px !important;
    height: 46px !important;
    max-height: 48px !important;
    padding: 6px 12px !important;
    background: rgba(255, 255, 255, 0.64) !important;
    border-color: rgba(15, 23, 42, 0.05) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue .queue-toolbar button {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 26px !important;
    height: 26px !important;
    max-height: 26px !important;
    opacity: 0.78 !important;
  }
}

/* Trust sprint v232 final authority tail sentinel. */

/* Trust sprint v233: starter template guidance and pro rail labels stay readable. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 253, 245, 0.82)) !important;
    border-color: rgba(20, 184, 166, 0.26) !important;
    box-shadow: inset 3px 0 0 rgba(20, 184, 166, 0.46) !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] > span {
    color: rgba(15, 118, 110, 0.96) !important;
    font-weight: 800 !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] > strong {
    color: rgba(15, 23, 42, 0.94) !important;
    font-size: 18px !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] > small {
    color: rgba(51, 65, 85, 0.82) !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] .template-secondary-row button.active,
  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] .template-secondary-row button:hover {
    background: rgba(15, 118, 110, 0.96) !important;
    color: #fff !important;
    border-color: rgba(15, 118, 110, 0.9) !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] .template-start-guide-detail article {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(20, 184, 166, 0.22) !important;
  }

  html:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] .template-start-guide-detail small {
    color: rgba(30, 41, 59, 0.78) !important;
  }
}

/* Trust sprint v233 final authority tail sentinel. */

/* Trust sprint v234: force starter middle guide heading back into visible hierarchy. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid > .template-workbench-block[data-template-workbench="case"][data-template-start-guide].template-workbench-block > span,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid > .template-workbench-block[data-template-workbench="case"][data-template-start-guide].template-workbench-block > strong,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid > .template-workbench-block[data-template-workbench="case"][data-template-start-guide].template-workbench-block > small {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
    text-indent: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid > .template-workbench-block[data-template-workbench="case"][data-template-start-guide].template-workbench-block > span {
    color: rgba(15, 118, 110, 0.98) !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 900 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid > .template-workbench-block[data-template-workbench="case"][data-template-start-guide].template-workbench-block > strong {
    color: rgba(15, 23, 42, 0.96) !important;
    font-size: 18px !important;
    line-height: 22px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid.template-workbench-grid > .template-workbench-block[data-template-workbench="case"][data-template-start-guide].template-workbench-block > small {
    color: rgba(30, 41, 59, 0.78) !important;
    font-size: 12px !important;
    line-height: 16px !important;
    max-height: 32px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v235 retained: template CTA names the route. */
@media (min-width: 1100px) {
  :root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel [data-template-brief-apply] {
    min-height: 38px !important;
    font-weight: 900 !important;
  }
}

/* Trust sprint v239: account entry stays single-line and draft review becomes a quiet checkpoint. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root[data-active-page] body .app-shell.app-shell .topbar .avatar,
  html:root:root:root:root:root:root[data-active-page] body .app-shell.app-shell .topbar #loginBtn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 68px !important;
    max-width: 98px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 16px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    letter-spacing: 0 !important;
    border-radius: 999px !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock {
    grid-template-columns: minmax(0, 1fr) 156px !important;
    min-height: 50px !important;
    height: 52px !important;
    max-height: 54px !important;
    gap: 8px !important;
    padding: 7px 8px 7px 10px !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    background: rgba(248, 250, 252, 0.76) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock span {
    font-size: 11px !important;
    line-height: 15px !important;
    color: rgba(15, 118, 110, 0.78) !important;
    letter-spacing: 0 !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock small {
    max-width: 100% !important;
    font-size: 11px !important;
    line-height: 15px !important;
    color: rgba(15, 23, 42, 0.48) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock #promptActionBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 128px !important;
    width: 100% !important;
    min-height: 34px !important;
    height: 36px !important;
    max-height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(15, 118, 110, 0.22) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
    color: rgba(15, 118, 110, 0.86) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock {
    border-color: rgba(244, 114, 182, 0.16) !important;
    background: rgba(255, 247, 237, 0.72) !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock #promptActionBtn {
    border-color: rgba(219, 39, 119, 0.22) !important;
    color: rgba(157, 23, 77, 0.86) !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock {
    border-color: rgba(56, 189, 248, 0.16) !important;
    background: rgba(2, 8, 23, 0.5) !important;
  }

  html:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock #promptActionBtn {
    border-color: rgba(125, 211, 252, 0.24) !important;
    background: rgba(8, 47, 73, 0.32) !important;
    color: rgba(186, 230, 253, 0.88) !important;
  }
}

/* Trust sprint v239 final authority tail sentinel. */

/* Trust sprint v240: duplicate ID specificity beats legacy deep-root locks for the review checkpoint. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell .panel.composer #promptActionDock#promptActionDock.prompt-action-dock {
    grid-template-columns: minmax(0, 1fr) 150px !important;
    min-height: 50px !important;
    height: 52px !important;
    max-height: 54px !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer #promptActionDock#promptActionDock.prompt-action-dock #promptActionBtn#promptActionBtn {
    min-width: 122px !important;
    min-height: 34px !important;
    height: 36px !important;
    max-height: 36px !important;
    box-shadow: none !important;
  }
}

/* Trust sprint v240 final authority tail sentinel. */

/* Trust sprint v241: pro left rail keeps two complete technical tags, never clipped half-cards. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .track-panel.track-panel {
    display: grid !important;
    align-content: start !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 38px !important;
    gap: 6px !important;
    min-height: 112px !important;
    height: 118px !important;
    max-height: 124px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .track-panel.track-panel .track-card {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 0 10px !important;
    gap: 8px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .track-panel.track-panel .track-card:nth-child(n + 3) {
    display: none !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .track-panel.track-panel .track-card strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell .panel.composer .track-panel.track-panel .track-card small {
    display: none !important;
  }
}

/* Trust sprint v241 final authority tail sentinel. */

/* Trust sprint v242: template starter gets a first-screen footer rail and tighter content heights. */
@media (min-width: 1100px) {
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-panel.template-workbench-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
    grid-template-rows: 30px 42px 318px 38px !important;
    grid-template-areas:
      "title title"
      "switch switch"
      "desk brief"
      "footer footer" !important;
    gap: 8px 14px !important;
    min-height: 480px !important;
    height: 480px !important;
    max-height: 492px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid.template-workbench-grid {
    grid-area: desk !important;
    display: grid !important;
    grid-template-columns: minmax(330px, 1.08fr) minmax(292px, 0.92fr) !important;
    grid-template-rows: 318px !important;
    min-height: 318px !important;
    height: 318px !important;
    max-height: 318px !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid.template-workbench-grid > .template-workbench-block.template-workbench-block {
    box-sizing: border-box !important;
    min-height: 318px !important;
    height: 318px !important;
    max-height: 318px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid.template-workbench-grid > .template-workbench-block.template-workbench-block:nth-of-type(n + 3) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid.template-workbench-grid .template-workbench-block.strong > .template-choice-row.template-choice-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 92px) !important;
    gap: 10px !important;
    min-height: 194px !important;
    height: 194px !important;
    max-height: 194px !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid.template-workbench-grid .template-workbench-block.strong .template-choice-row button {
    min-height: 92px !important;
    height: 92px !important;
    max-height: 92px !important;
    padding: 10px 12px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid.template-workbench-grid .template-workbench-block:not(.strong) > .template-choice-row.template-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 48px) !important;
    gap: 7px !important;
    min-height: 103px !important;
    height: 103px !important;
    max-height: 103px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid.template-workbench-grid .template-workbench-block:not(.strong) .template-choice-row button {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    grid-area: brief !important;
    display: grid !important;
    grid-template-rows: 44px 46px 44px 58px 28px !important;
    min-height: 318px !important;
    height: 318px !important;
    max-height: 318px !important;
    gap: 6px !important;
    padding: 10px !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-value {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 7px 8px !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-flow {
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    gap: 6px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-flow article {
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 7px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-flow article small,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-guardrail small {
    display: none !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-guardrail {
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-footer[data-template-workbench-footer] {
    grid-area: footer !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.68) !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-footer span,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-footer small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-footer span {
    color: rgba(15, 118, 110, 0.9) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-footer small {
    color: rgba(15, 23, 42, 0.52) !important;
    font-size: 12px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-footer .template-footer-link {
    color: rgba(15, 118, 110, 0.95) !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }
}

@media (max-width: 1099px) {
  .template-workbench-footer[data-template-workbench-footer] {
    display: none !important;
  }
}

/* Trust sprint v242 final authority tail sentinel. */

/* Trust sprint v243: starter template uses true three columns; guide and brief never overlap. */
@media (min-width: 1100px) {
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-panel.template-workbench-panel {
    grid-template-columns: minmax(330px, 0.98fr) minmax(300px, 0.82fr) minmax(340px, 0.92fr) !important;
    grid-template-rows: 30px 42px 318px 38px !important;
    grid-template-areas:
      "title title title"
      "switch switch switch"
      "starter guide brief"
      "footer footer footer" !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid#templateWorkbenchGrid {
    display: contents !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid#templateWorkbenchGrid > .template-workbench-block.strong.template-workbench-block {
    grid-area: starter !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid#templateWorkbenchGrid > .template-workbench-block[data-template-workbench="case"].template-workbench-block {
    grid-area: guide !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid#templateWorkbenchGrid > .template-workbench-block.template-workbench-block:nth-of-type(n + 3) {
    display: none !important;
    visibility: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    grid-area: brief !important;
    grid-column: 3 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-footer[data-template-workbench-footer] {
    grid-area: footer !important;
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
}

/* Trust sprint v243 final authority tail sentinel. */

/* Trust sprint v244: starter template detail text gets readable line boxes, not crushed fragments. */
@media (min-width: 1100px) {
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    grid-template-rows: 42px 48px 58px 58px 28px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-value {
    display: grid !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 7px 10px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary span,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch span,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-value span,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-guardrail span {
    line-height: 14px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary strong,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch strong {
    display: block !important;
    min-height: 18px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-value strong {
    display: block !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 16px !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-flow article span {
    display: block !important;
    min-height: 16px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block[data-template-start-guide] .template-secondary-row button {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    padding: 6px 8px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block[data-template-start-guide] .template-start-guide-detail {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block[data-template-start-guide] .template-start-guide-detail article {
    display: grid !important;
    align-content: center !important;
    min-height: 64px !important;
    height: 64px !important;
    max-height: 64px !important;
    gap: 2px !important;
    padding: 8px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block[data-template-start-guide] .template-start-guide-detail article strong,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block[data-template-start-guide] .template-start-guide-detail article small {
    display: block !important;
    min-height: 15px !important;
    line-height: 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Trust sprint v244 final authority tail sentinel. */

/* Trust sprint v245: starter template right-rail title gets a full line box. */
@media (min-width: 1100px) {
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary strong,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch strong {
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
    line-height: 28px !important;
    overflow: hidden !important;
  }
}

/* Desktop template starter authority: target list, next-step guide, and one primary apply path. */
@media (min-width: 1100px) {
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-panel.template-workbench-panel {
    grid-template-columns: minmax(238px, 0.72fr) minmax(360px, 1fr) minmax(360px, 0.92fr) !important;
    grid-template-rows: 30px 40px 340px 38px !important;
    gap: 8px 12px !important;
    min-height: 504px !important;
    height: 504px !important;
    max-height: 516px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid#templateWorkbenchGrid > .template-workbench-block.template-workbench-block,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    min-height: 340px !important;
    height: 340px !important;
    max-height: 340px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid.template-workbench-grid .template-workbench-block.strong > .template-choice-row.template-choice-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, 54px) !important;
    gap: 8px !important;
    min-height: 240px !important;
    height: 240px !important;
    max-height: 240px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid.template-workbench-grid .template-workbench-block.strong .template-choice-row button {
    display: grid !important;
    align-content: center !important;
    min-height: 54px !important;
    height: 54px !important;
    max-height: 54px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    text-align: left !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-grid.template-workbench-grid .template-workbench-block.strong .template-choice-row button.active {
    box-shadow: inset 4px 0 0 rgba(15, 118, 110, 0.72) !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block[data-template-start-guide] .template-secondary-row button small {
    display: none !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    grid-template-rows: 44px 58px 46px 60px 28px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    gap: 8px !important;
    padding: 7px 10px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch button {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    border-radius: 10px !important;
    font-weight: 950 !important;
  }
}

/* Trust sprint v245 final authority tail sentinel. */

/* Trust sprint v248: desktop create empty queue and transient toast share one quiet status contract. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer {
    min-height: 0 !important;
    height: 540px !important;
    max-height: 540px !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue:has(.queue-list > .empty-queue) {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    padding: 4px 12px !important;
    margin-top: 28px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(15, 23, 42, 0.04) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue:has(.queue-list > .empty-queue) {
    min-height: 46px !important;
    height: 46px !important;
    max-height: 46px !important;
    margin-top: 51px !important;
    background: rgba(2, 8, 23, 0.48) !important;
    border-color: rgba(56, 189, 248, 0.12) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue:has(.queue-list > .empty-queue) .section-title {
    min-height: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    align-items: center !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue:has(.queue-list > .empty-queue) .section-title h3 {
    font-size: 14px !important;
    line-height: 18px !important;
    color: rgba(15, 23, 42, 0.68) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue:has(.queue-list > .empty-queue) .section-title h3 {
    color: rgba(226, 244, 255, 0.86) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue:has(.queue-list > .empty-queue) .queue-list,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue:has(.queue-list > .empty-queue) .queue-list > .empty-queue {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue:has(.queue-list > .empty-queue) .queue-list > .empty-queue {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    opacity: 0.76 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue:has(.queue-list > .empty-queue) .empty-queue small,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue:has(.queue-list > .empty-queue) .queue-empty-steps,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue:has(.queue-list > .empty-queue) .empty-queue .queue-actions {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  :root[data-active-page="create"] .app-toast {
    right: 20px !important;
    bottom: 18px !important;
    left: auto !important;
    width: max-content !important;
    max-width: 214px !important;
    min-height: 28px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 14px !important;
    color: rgba(15, 23, 42, 0.74) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(15, 118, 110, 0.12) !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .app-toast {
    color: rgba(226, 244, 255, 0.76) !important;
    background: rgba(2, 8, 23, 0.58) !important;
    border-color: rgba(56, 189, 248, 0.12) !important;
  }
}

/* Trust sprint v248 final authority tail sentinel. */

/* Trust sprint v249: desktop prompt review entry is secondary, not another generate decision. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell #promptActionDock#promptActionDock[data-review-only="true"] {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 6px 8px !important;
    margin-top: 8px !important;
    border-radius: 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.36) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell #promptActionDock#promptActionDock[data-review-only="true"] {
    background: rgba(2, 8, 23, 0.38) !important;
    border-color: rgba(125, 211, 252, 0.12) !important;
  }

  html[data-active-page="create"] body .app-shell #promptActionDock#promptActionDock[data-review-only="true"] .prompt-action-hint {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 11px !important;
    line-height: 14px !important;
    color: rgba(71, 85, 105, 0.76) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell #promptActionDock#promptActionDock[data-review-only="true"] .prompt-action-hint {
    color: rgba(203, 213, 225, 0.72) !important;
  }

  html[data-active-page="create"] body .app-shell #promptActionDock#promptActionDock[data-review-only="true"] #promptActionBtn#promptActionBtn {
    min-width: 128px !important;
    width: 128px !important;
    max-width: 128px !important;
    min-height: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    color: rgba(15, 23, 42, 0.78) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell #promptActionDock#promptActionDock[data-review-only="true"] #promptActionBtn#promptActionBtn {
    color: rgba(226, 244, 255, 0.82) !important;
    background: rgba(15, 23, 42, 0.52) !important;
    border-color: rgba(125, 211, 252, 0.16) !important;
  }
}

/* Trust sprint v249 final authority tail sentinel. */

/* Trust sprint v250: review-only dock wins over old CTA-sized prompt action rules. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #promptActionDock#promptActionDock#promptActionDock.prompt-action-dock[data-review-only="true"] {
    position: relative !important;
    top: 0 !important;
    grid-template-columns: minmax(0, 1fr) 116px !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 42px !important;
    padding: 5px 8px !important;
    gap: 6px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(15, 23, 42, 0.045) !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock#promptActionDock#promptActionDock.prompt-action-dock[data-review-only="true"] {
    background: rgba(2, 8, 23, 0.42) !important;
    border-color: rgba(125, 211, 252, 0.12) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #promptActionDock#promptActionDock#promptActionDock.prompt-action-dock[data-review-only="true"] span {
    font-size: 11px !important;
    line-height: 15px !important;
    color: rgba(15, 118, 110, 0.72) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #promptActionDock#promptActionDock#promptActionDock.prompt-action-dock[data-review-only="true"] small {
    font-size: 11px !important;
    line-height: 15px !important;
    color: rgba(71, 85, 105, 0.72) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock#promptActionDock#promptActionDock.prompt-action-dock[data-review-only="true"] span,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock#promptActionDock#promptActionDock.prompt-action-dock[data-review-only="true"] small {
    color: rgba(186, 230, 253, 0.76) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #promptActionDock#promptActionDock#promptActionDock.prompt-action-dock[data-review-only="true"] #promptActionBtn#promptActionBtn#promptActionBtn {
    min-width: 116px !important;
    width: 116px !important;
    max-width: 116px !important;
    min-height: 28px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 9px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    color: rgba(15, 23, 42, 0.74) !important;
    background: rgba(255, 255, 255, 0.54) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock#promptActionDock#promptActionDock.prompt-action-dock[data-review-only="true"] #promptActionBtn#promptActionBtn#promptActionBtn {
    color: rgba(226, 244, 255, 0.8) !important;
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(125, 211, 252, 0.16) !important;
  }
}

/* Trust sprint v250 final authority tail sentinel. */

/* Trust sprint v251: pro cockpit reads as a product surface, not a debug wall. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pro-control-matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-height: 44px !important;
    height: 46px !important;
    max-height: 46px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pro-control-matrix article {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    padding: 5px 6px !important;
    border-radius: 9px !important;
    background: rgba(8, 47, 73, 0.46) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pro-control-matrix b,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pro-control-matrix span {
    line-height: 14px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-param-rail.delivery-param-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-height: 22px !important;
    height: 22px !important;
    max-height: 24px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel.track-panel {
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel button,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel.track-panel .track-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v251 final authority tail sentinel. */

/* Trust sprint v254: desktop density pass, pro rail as summary rows. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pro-control-matrix.pro-control-matrix {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 28px !important;
    height: 30px !important;
    max-height: 32px !important;
    padding: 0 9px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: rgba(8, 47, 73, 0.38) !important;
    border: 1px solid rgba(56, 189, 248, 0.12) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pro-control-matrix.pro-control-matrix article,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pro-control-matrix.pro-control-matrix .pro-matrix-item {
    display: contents !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pro-control-matrix.pro-control-matrix b {
    flex: 0 0 auto !important;
    font-size: 10px !important;
    line-height: 14px !important;
    color: rgba(125, 211, 252, 0.92) !important;
    white-space: nowrap !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pro-control-matrix.pro-control-matrix span,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .pro-control-matrix.pro-control-matrix em {
    min-width: 0 !important;
    font-style: normal !important;
    font-size: 11px !important;
    line-height: 14px !important;
    color: rgba(224, 242, 254, 0.84) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Trust sprint v254 final authority tail sentinel. */

/* Trust sprint v256: mobile template brief becomes a compact target summary, not a text block wall. */
@media (max-width: 720px) {
  html[data-active-page="templates"] body .app-shell #templateBriefPanel.template-brief-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: 276px !important;
    padding: 12px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-primary {
    min-height: 52px !important;
    max-height: 60px !important;
    padding: 8px 10px !important;
  }

  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-primary strong {
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-primary small,
  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-value strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-launch {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    max-height: 48px !important;
    padding: 6px 8px !important;
  }

  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-next-label {
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: rgba(15, 118, 110, 0.12) !important;
    color: var(--primary) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-launch button {
    min-height: 38px !important;
    height: 38px !important;
    max-height: 40px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }

  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-value {
    min-height: 38px !important;
    max-height: 42px !important;
    padding: 6px 9px !important;
  }

  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 46px !important;
    max-height: 50px !important;
    gap: 6px !important;
  }

  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-flow article {
    min-height: 44px !important;
    max-height: 48px !important;
    padding: 5px 4px !important;
    gap: 2px !important;
  }

  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-flow b {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-flow span {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-flow small,
  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-guardrail,
  html[data-active-page="templates"] body .app-shell #templateBriefPanel .template-brief-cta-copy {
    display: none !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block.strong {
    gap: 10px !important;
    padding: 18px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block.strong > strong {
    font-size: 22px !important;
    line-height: 1.08 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block.strong .template-choice-row {
    gap: 10px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block.strong .template-choice-row button {
    min-height: 58px !important;
    max-height: 62px !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block.strong .template-choice-row button strong,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell .template-workbench-block.strong .template-choice-row button small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Trust sprint v256: the middle review rail is a quiet status chip, while the right rail remains the only submit surface. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell .panel.composer #promptActionDock.prompt-action-dock {
    min-height: 40px !important;
    height: 42px !important;
    max-height: 44px !important;
    padding: 7px 9px !important;
    gap: 8px !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer #promptActionDock.prompt-action-dock span {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer #promptActionDock.prompt-action-dock small {
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer #promptActionBtn {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 120px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

/* Trust sprint v256 final authority tail sentinel. */

/* Trust sprint v257: desktop confirm rail reads like status, not another button wall. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell .panel.composer .delivery-stage-strip.delivery-stage-strip {
    min-height: 28px !important;
    height: 30px !important;
    max-height: 30px !important;
    gap: 2px !important;
    padding: 2px 4px !important;
    border-radius: 999px !important;
    background: rgba(15, 118, 110, 0.05) !important;
    border: 1px solid rgba(15, 118, 110, 0.08) !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer .delivery-stage-strip.delivery-stage-strip article {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 0 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer .delivery-stage-strip.delivery-stage-strip article.active {
    background: rgba(20, 184, 166, 0.12) !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer .delivery-stage-strip.delivery-stage-strip article b {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    line-height: 16px !important;
    font-size: 10px !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer .delivery-stage-strip.delivery-stage-strip article span {
    display: block !important;
    min-width: 0 !important;
    height: 16px !important;
    max-height: 16px !important;
    line-height: 16px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer .delivery-param-rail.delivery-param-rail {
    min-height: 18px !important;
    height: 20px !important;
    max-height: 22px !important;
    padding: 0 4px !important;
    gap: 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0.78 !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer .delivery-param-rail.delivery-param-rail span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v257 final authority tail sentinel. */

/* Trust sprint v259: compact create rail keeps one quiet review path and a lighter confirm console. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel.delivery-order-panel .delivery-order-main.delivery-order-main {
    grid-template-columns: minmax(0, 1fr) 32px !important;
    gap: 6px !important;
    min-height: 50px !important;
    height: 50px !important;
    max-height: 52px !important;
    padding: 7px 8px 7px 10px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel.delivery-order-panel .delivery-order-score.delivery-order-score {
    box-sizing: border-box !important;
    min-width: 32px !important;
    width: 32px !important;
    max-width: 32px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 2px 3px !important;
    border-radius: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel.delivery-order-panel .delivery-order-score.delivery-order-score b {
    font-size: 16px !important;
    line-height: 16px !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer .desktop-starter-compact.desktop-starter-compact {
    gap: 7px !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer .desktop-starter-compact .desktop-starter-fields {
    grid-template-columns: auto repeat(4, minmax(0, 1fr)) !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer .desktop-starter-compact .desktop-starter-fields button {
    min-height: 26px !important;
    height: 28px !important;
    max-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body .app-shell .panel.composer .starter-quick-head small {
    max-width: 460px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Trust sprint v259 final authority tail sentinel. */

/* Trust sprint v261: keep the right rail submit surface visible without covering its title. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"]::before {
    display: none !important;
  }

  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #generateBtn#generateBtn {
    position: static !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: -24 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 46px !important;
    margin: 0 0 8px !important;
    padding: 0 12px !important;
    transform: none !important;
    z-index: 1 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    border: 1px solid rgba(15, 118, 110, 0.24) !important;
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.14) !important;
  }

  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #generateBtn#generateBtn::after {
    display: none !important;
    content: none !important;
  }

  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #generateBtn#generateBtn:disabled {
    opacity: 0.86 !important;
    cursor: not-allowed !important;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.82), rgba(20, 184, 166, 0.72)) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.1) !important;
  }

  html[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #generateBtn#generateBtn {
    background: linear-gradient(135deg, #db2777, #14b8a6) !important;
    border-color: rgba(219, 39, 119, 0.2) !important;
    color: #fff7fb !important;
    box-shadow: 0 14px 26px rgba(219, 39, 119, 0.12) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #generateBtn#generateBtn {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.9), rgba(20, 184, 166, 0.82)) !important;
    border-color: rgba(125, 211, 252, 0.28) !important;
    color: rgba(240, 253, 255, 0.98) !important;
    box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.16) inset, 0 16px 32px rgba(14, 165, 233, 0.13) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] > #generateBtn#generateBtn.generate-btn {
    position: static !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    opacity: 0.94 !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 46px !important;
    margin: 0 0 8px !important;
    padding: 0 12px !important;
    transform: none !important;
    z-index: 1 !important;
    border: 1px solid rgba(15, 118, 110, 0.28) !important;
    background: linear-gradient(135deg, rgb(15, 118, 110), rgb(20, 184, 166)) !important;
    color: rgb(255, 255, 255) !important;
    visibility: visible !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] > #generateBtn#generateBtn.generate-btn {
    background: linear-gradient(135deg, rgb(219, 39, 119), rgb(20, 184, 166)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] > #generateBtn#generateBtn.generate-btn {
    background: linear-gradient(135deg, rgb(14, 165, 233), rgb(20, 184, 166)) !important;
    border-color: rgba(125, 211, 252, 0.34) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .queue.queue[data-empty="true"] {
    margin-top: 88px !important;
  }

  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] > #deliveryOrderPanel#deliveryOrderPanel.delivery-order-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: -2 !important;
    margin-top: 0 !important;
  }

  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] > #generateBtn#generateBtn#generateBtn.generate-btn {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: -24 !important;
  }

  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] > #deliveryOrderPanel#deliveryOrderPanel#deliveryOrderPanel.delivery-order-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: -2 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    align-content: start !important;
    overflow: visible !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer::after {
    bottom: -88px !important;
    height: 88px !important;
    background:
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.10) 18%, rgba(20, 184, 166, 0.08) 50%, rgba(15, 118, 110, 0.10) 82%, rgba(15, 118, 110, 0)),
      linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(248, 250, 252, 0.26) 64%, rgba(248, 250, 252, 0)) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 1px, 100% 100% !important;
    background-position: 0 34px, 0 0 !important;
  }
}

/* Trust sprint v261 final authority tail sentinel. */

@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer::after {
    bottom: -104px !important;
    height: 104px !important;
    background:
      linear-gradient(90deg, rgba(45, 212, 191, 0), rgba(45, 212, 191, 0.20) 18%, rgba(56, 189, 248, 0.16) 50%, rgba(45, 212, 191, 0.20) 82%, rgba(45, 212, 191, 0)),
      linear-gradient(180deg, rgba(8, 47, 73, 0.24), rgba(8, 47, 73, 0.14) 56%, rgba(8, 47, 73, 0.03)) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 1px, 100% 100% !important;
    background-position: 0 42px, 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(45, 212, 191, 0.10), inset 0 -1px 0 rgba(14, 165, 233, 0.08) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer > .section-title #importPhotoBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 88px !important;
    height: 30px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(56, 189, 248, 0.34) !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(8, 47, 73, 0.96), rgba(14, 116, 144, 0.72)) !important;
    color: rgba(226, 244, 255, 0.94) !important;
    box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.10) inset, 0 10px 24px rgba(8, 47, 73, 0.22) !important;
    font-weight: 800 !important;
  }
}

/* Desktop queue dock authority: current bridge and empty queue fallback. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer {
    position: relative !important;
    overflow: visible !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -88px !important;
    height: 88px !important;
    pointer-events: none !important;
    border-radius: 0 0 26px 26px !important;
    background:
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.10) 18%, rgba(20, 184, 166, 0.08) 50%, rgba(15, 118, 110, 0.10) 82%, rgba(15, 118, 110, 0)),
      linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(248, 250, 252, 0.26) 64%, rgba(248, 250, 252, 0)) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 1px, 100% 100% !important;
    background-position: 0 34px, 0 0 !important;
    box-shadow: 0 34px 58px rgba(15, 23, 42, 0.04) !important;
    z-index: -1 !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer::after {
    bottom: -104px !important;
    height: 104px !important;
    background:
      linear-gradient(90deg, rgba(45, 212, 191, 0), rgba(45, 212, 191, 0.20) 18%, rgba(56, 189, 248, 0.16) 50%, rgba(45, 212, 191, 0.20) 82%, rgba(45, 212, 191, 0)),
      linear-gradient(180deg, rgba(8, 47, 73, 0.24), rgba(8, 47, 73, 0.14) 56%, rgba(8, 47, 73, 0.03)) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 1px, 100% 100% !important;
    background-position: 0 42px, 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(45, 212, 191, 0.10), inset 0 -1px 0 rgba(14, 165, 233, 0.08) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue) {
    width: min(1328px, calc(100vw - 112px)) !important;
    max-width: 1328px !important;
    grid-template-columns: 194px minmax(360px, 1fr) 64px !important;
    justify-content: start !important;
    column-gap: 10px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue) .queue-list {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 360px !important;
    max-width: 760px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue) .queue-list > .empty-queue {
    width: 100% !important;
    max-width: none !important;
    padding-left: 10px !important;
    border-left: 3px solid rgba(15, 118, 110, 0.24) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue) .queue-list > .empty-queue {
    border-left-color: rgba(45, 212, 191, 0.32) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue) .queue-toolbar.queue-toolbar {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue) .queue-toolbar.queue-toolbar > #queueTaskCenterBtn#queueTaskCenterBtn {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    border: 1px solid rgba(15, 118, 110, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.68) !important;
    color: rgba(15, 118, 110, 0.78) !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue) .queue-toolbar.queue-toolbar > #queueTaskCenterBtn#queueTaskCenterBtn {
    border-color: rgba(125, 211, 252, 0.22) !important;
    background: rgba(8, 47, 73, 0.54) !important;
    color: rgba(186, 230, 253, 0.86) !important;
    box-shadow: none !important;
  }
}

/* Desktop template starter authority: target choices are a list, not a card wall. */
@media (min-width: 1100px) {
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block > .template-choice-row.template-choice-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, 54px) !important;
    gap: 8px !important;
    min-height: 240px !important;
    height: 240px !important;
    max-height: 240px !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block .template-choice-row.template-choice-row button {
    display: grid !important;
    align-content: center !important;
    min-height: 54px !important;
    height: 54px !important;
    max-height: 54px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    text-align: left !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block .template-choice-row.template-choice-row button:nth-of-type(n + 5) {
    display: none !important;
    visibility: hidden !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch button {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
  }
}

/* Desktop lower-canvas floor authority: reduce dead first-screen whitespace without adding actions. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    position: relative !important;
    overflow: visible !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -132px !important;
    height: 132px !important;
    pointer-events: none !important;
    border-radius: 0 0 26px 26px !important;
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.045), rgba(15, 118, 110, 0.012) 56%, rgba(15, 118, 110, 0)) !important;
    z-index: -1 !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue.queue::after {
    background:
      linear-gradient(180deg, rgba(14, 165, 233, 0.10), rgba(14, 165, 233, 0.035) 58%, rgba(14, 165, 233, 0)) !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -180px !important;
    height: 180px !important;
    pointer-events: none !important;
    border-radius: 0 0 20px 20px !important;
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.055), rgba(15, 118, 110, 0.018) 60%, rgba(15, 118, 110, 0)) !important;
    z-index: -1 !important;
  }
}

@media (min-width: 900px) {
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel.template-brief-panel {
    gap: 8px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow article {
    min-height: 38px !important;
    padding: 8px 6px !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 6px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-flow article small {
    display: none !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-launch button[data-template-brief-apply] {
    width: 100% !important;
    min-width: 240px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel .template-brief-value strong {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch button[data-template-brief-apply] {
    width: 100% !important;
    min-width: 240px !important;
    max-width: none !important;
    justify-self: stretch !important;
    white-space: nowrap !important;
  }
}

/* Trust sprint v264: right rail confirmation summary is a single scan line, not a card pair. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 28px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(15, 118, 110, 0.055) !important;
    border: 1px solid rgba(15, 118, 110, 0.10) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary {
    background: rgba(8, 47, 73, 0.34) !important;
    border-color: rgba(56, 189, 248, 0.14) !important;
  }

  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary article,
  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary .confirm-summary-item {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary b {
    flex: 0 0 auto !important;
    font-size: 10px !important;
    line-height: 14px !important;
    font-weight: 900 !important;
    color: rgba(15, 118, 110, 0.78) !important;
    white-space: nowrap !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary b {
    color: rgba(125, 211, 252, 0.90) !important;
  }

  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary span,
  html[data-active-page="create"][data-skin] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary em {
    min-width: 0 !important;
    font-style: normal !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 800 !important;
    color: rgba(15, 23, 42, 0.66) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary span,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-confirm-summary.delivery-confirm-summary em {
    color: rgba(224, 242, 254, 0.84) !important;
  }
}

/* Trust sprint v265: desktop lower canvas reads as one continuous workbench. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell.app-shell .queue.queue[data-empty="true"],
  html[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue) {
    margin-top: 54px !important;
    transform: translateY(-44px) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue[data-empty="true"],
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue) {
    margin-top: 64px !important;
    transform: translateY(-48px) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer::after {
    bottom: -52px !important;
    height: 52px !important;
    background-position: 0 18px, 0 0 !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer::after {
    bottom: -60px !important;
    height: 60px !important;
    background-position: 0 24px, 0 0 !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue::after {
    bottom: -252px !important;
    height: 252px !important;
  }
}

/* Trust sprint v265 final authority tail sentinel. */

/* Trust sprint v266: desktop lower canvas floor is visible but remains passive. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue::after {
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.070), rgba(15, 118, 110, 0.026) 42%, rgba(15, 118, 110, 0.006) 78%, rgba(15, 118, 110, 0)) !important;
    border-top: 1px solid rgba(15, 118, 110, 0.075) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
    pointer-events: none !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue.queue::after {
    background:
      linear-gradient(180deg, rgba(14, 165, 233, 0.135), rgba(45, 212, 191, 0.048) 46%, rgba(14, 165, 233, 0.012) 78%, rgba(14, 165, 233, 0)) !important;
    border-top-color: rgba(56, 189, 248, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.14) !important;
  }
}

/* Trust sprint v266 final authority tail sentinel. */

/* Trust sprint v267: desktop create toast belongs to the top chrome, not the empty canvas floor. */
@media (min-width: 1100px) {
  :root[data-active-page="create"] .app-toast {
    top: 72px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: max-content !important;
    max-width: 230px !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: 32px !important;
    padding: 6px 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    contain: paint !important;
    opacity: 0 !important;
    transform: translate(-50%, -6px) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12) !important;
  }

  :root[data-active-page="create"] .app-toast.show {
    opacity: 0.88 !important;
    transform: translate(-50%, 0) !important;
  }

  :root[data-active-page="create"][data-skin="pro"] .app-toast {
    color: rgba(226, 244, 255, 0.80) !important;
    background: rgba(2, 8, 23, 0.64) !important;
    border-color: rgba(56, 189, 248, 0.16) !important;
    box-shadow: 0 10px 28px rgba(2, 8, 23, 0.28) !important;
  }
}

/* Trust sprint v267 final authority tail sentinel. */

/* Trust sprint v268: clean desktop confirm rail footer is low-noise metadata. */
@media (min-width: 1100px) {
  :root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack[data-confirm-console="true"] .settings-summary::after {
    display: none !important;
  }

  :root[data-active-page="create"][data-skin="clean"] body .app-shell .panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack[data-confirm-console="true"] .price-hint {
    text-align: left !important;
  }
}

/* Trust sprint v268 final authority tail sentinel. */

/* Trust sprint v269: pro professional input console keeps the review footnote attached to the textarea. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer:has([data-creation-mode="professional"].active) #promptActionDock#promptActionDock#promptActionDock.prompt-action-dock[data-review-only="true"] {
    margin-top: 0 !important;
  }
}

/* Trust sprint v269 final authority tail sentinel. */

/* Trust sprint v270: clean desktop creation modes read as a left rail, not a white card wall. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel.creation-mode-panel {
    height: 164px !important;
    min-height: 164px !important;
    max-height: 168px !important;
    padding: 7px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(15, 118, 110, 0.045), rgba(255, 255, 255, 0.2)) !important;
    border-color: rgba(15, 118, 110, 0.11) !important;
    box-shadow: inset 3px 0 0 rgba(15, 118, 110, 0.2), 0 14px 28px rgba(15, 23, 42, 0.035) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel.creation-mode-panel button {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    justify-content: flex-start !important;
    background: rgba(15, 118, 110, 0.035) !important;
    border-color: rgba(15, 118, 110, 0.09) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: rgba(15, 23, 42, 0.8) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel.creation-mode-panel button.active {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.9), rgba(20, 184, 166, 0.82)) !important;
    border-color: rgba(15, 118, 110, 0.28) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.34) !important;
  }
}

/* Trust sprint v270 final authority tail sentinel. */

/* Trust sprint v271: clean left rail beats older grid row height locks. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel.creation-mode-panel.creation-mode-panel {
    height: 164px !important;
    min-height: 164px !important;
    max-height: 168px !important;
    grid-template-rows: repeat(4, 30px) !important;
    align-content: start !important;
    row-gap: 6px !important;
    background: linear-gradient(180deg, rgba(15, 118, 110, 0.045), rgba(255, 255, 255, 0.2)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel.creation-mode-panel.creation-mode-panel button[data-creation-mode] {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    align-self: stretch !important;
  }
}

/* Trust sprint v271 final authority tail sentinel. */

/* Trust sprint v272: template starter first screen favors the next-step workbench over a target card wall. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid {
    grid-template-columns: minmax(360px, 0.9fr) minmax(360px, 1.12fr) minmax(260px, 0.78fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  html:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block {
    padding: 14px !important;
    gap: 8px !important;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.76), rgba(255, 255, 255, 0.82)) !important;
    box-shadow: inset 4px 0 0 rgba(15, 118, 110, 0.2) !important;
  }

  html:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block > .template-choice-row.template-choice-row {
    grid-template-rows: repeat(4, 46px) !important;
    gap: 7px !important;
    min-height: 205px !important;
    max-height: 212px !important;
  }

  html:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block .template-choice-row.template-choice-row button {
    min-height: 46px !important;
    height: 46px !important;
    max-height: 46px !important;
    border-radius: 12px !important;
    padding: 6px 12px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(15, 118, 110, 0.14) !important;
  }

  html:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block .template-choice-row.template-choice-row button.active {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.9), rgba(20, 184, 166, 0.82)) !important;
    color: #ffffff !important;
  }

  html:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block[data-template-workbench="case"] {
    border-color: rgba(15, 118, 110, 0.18) !important;
    box-shadow: inset 3px 0 0 rgba(20, 184, 166, 0.22) !important;
  }

  html:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    box-shadow: inset 3px 0 0 rgba(15, 118, 110, 0.14) !important;
  }
}

/* Trust sprint v272 final authority tail sentinel. */

/* Trust sprint v273: template starter top switch becomes a low-noise mode rail. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-view-switch.template-view-switch {
    justify-self: start !important;
    width: min(520px, 100%) !important;
    max-width: 520px !important;
    box-sizing: border-box !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 36px !important;
    padding: 3px !important;
    gap: 4px !important;
    align-items: center !important;
    border-color: rgba(15, 118, 110, 0.1) !important;
    background: rgba(255, 255, 255, 0.38) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-view-switch.template-view-switch button {
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
    box-sizing: border-box !important;
    align-self: center !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-view-switch.template-view-switch button.active {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.86), rgba(20, 184, 166, 0.72)) !important;
    color: #ffffff !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid {
    gap: 8px !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.template-workbench-block,
  html:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    border-color: rgba(15, 118, 110, 0.1) !important;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.68), rgba(255, 255, 255, 0.78)) !important;
    box-shadow: inset 2px 0 0 rgba(15, 118, 110, 0.12), 0 10px 24px rgba(15, 23, 42, 0.026) !important;
  }

  html:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] .template-secondary-row button,
  html:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] .template-start-guide-detail article,
  html:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-flow article {
    border-color: rgba(15, 118, 110, 0.1) !important;
    background: rgba(255, 255, 255, 0.42) !important;
    box-shadow: none !important;
  }
}

/* Trust sprint v273 final authority tail sentinel. */

/* Trust sprint v274: template view switch button height beats older starter locks. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-view-switch.template-view-switch button {
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
    box-sizing: border-box !important;
    align-self: center !important;
    line-height: 28px !important;
    padding: 0 12px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-view-switch.template-view-switch {
    min-height: 34px !important;
    height: 34px !important;
    max-height: 36px !important;
    align-items: center !important;
  }
}

/* Trust sprint v274 final authority tail sentinel. */

/* Trust sprint v275: default create queue reads as the workbench status tail, not a detached island. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue) {
    background: linear-gradient(180deg, rgba(240, 253, 250, 0.82), rgba(255, 255, 255, 0.72)) !important;
    border-color: rgba(15, 118, 110, 0.08) !important;
    border-top-color: rgba(15, 118, 110, 0.045) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 -18px 36px rgba(15, 118, 110, 0.035),
      0 10px 28px rgba(15, 23, 42, 0.028) !important;
  }

  html:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue)::before {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: -44px !important;
    height: 44px !important;
    pointer-events: none !important;
    border-radius: 0 0 18px 18px !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0), rgba(15, 118, 110, 0.038) 68%, rgba(15, 118, 110, 0.052)),
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.07) 18%, rgba(20, 184, 166, 0.05) 50%, rgba(15, 118, 110, 0.07) 82%, rgba(15, 118, 110, 0)) !important;
  }
}

/* Trust sprint v275 final authority tail sentinel. */

/* Trust sprint v276: default create lower canvas reads as a passive status runway, not dead whitespace. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue)::after {
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.084), rgba(15, 118, 110, 0.038) 34%, rgba(15, 118, 110, 0.014) 72%, rgba(15, 118, 110, 0)),
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.052) 16%, rgba(20, 184, 166, 0.038) 50%, rgba(15, 118, 110, 0.052) 84%, rgba(15, 118, 110, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 18%) !important;
    border-top-color: rgba(15, 118, 110, 0.105) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 18px 38px rgba(15, 118, 110, 0.028) !important;
    pointer-events: none !important;
  }
}

/* Trust sprint v276 final authority tail sentinel. */

/* Trust sprint v280: default create middle-lane rhythm authority replaces v277-v279. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #promptActionDock#promptActionDock#promptActionDock.prompt-action-dock[data-review-only="true"] {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(240, 253, 250, 0.58)) !important;
    border-color: rgba(15, 118, 110, 0.09) !important;
    border-bottom-color: rgba(15, 118, 110, 0.14) !important;
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.11),
      0 6px 14px rgba(15, 23, 42, 0.018) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    position: relative !important;
    height: 78px !important;
    min-height: 76px !important;
    max-height: 82px !important;
    margin-top: -2px !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.64), rgba(255, 255, 255, 0.72)) !important;
    border-color: rgba(15, 118, 110, 0.1) !important;
    border-top-color: rgba(15, 118, 110, 0.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 3px 0 0 rgba(20, 184, 166, 0.12),
      0 10px 22px rgba(15, 23, 42, 0.02),
      0 32px 42px rgba(15, 118, 110, 0.035),
      0 46px 72px rgba(20, 184, 166, 0.018) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) #blankStarterQuickPanel#blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden)::before {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: -8px !important;
    height: 8px !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.06), rgba(15, 118, 110, 0.015) 68%, rgba(255, 255, 255, 0)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .starter-action-board.starter-action-board {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .desktop-starter-fields.desktop-starter-fields {
    background: rgba(255, 255, 255, 0.38) !important;
    border-color: rgba(15, 118, 110, 0.09) !important;
    box-shadow: none !important;
  }
}

/* Trust sprint v280 final authority tail sentinel. */

/* Trust sprint v281: default desktop first-screen rhythm is compact, aligned, and calm. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) {
    height: 584px !important;
    min-height: 584px !important;
    max-height: 592px !important;
    align-content: start !important;
    overflow: visible !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] {
    height: 342px !important;
    min-height: 334px !important;
    max-height: 352px !important;
    align-self: start !important;
    justify-content: start !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .prompt-box.prompt-box {
    height: 504px !important;
    min-height: 496px !important;
    max-height: 512px !important;
  }
}

/* Trust sprint v281 final authority tail sentinel. */

/* Trust sprint v282: default desktop controls attach to the workbench instead of floating as islands. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel.creation-mode-panel {
    position: relative !important;
    overflow: visible !important;
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.2),
      0 14px 28px rgba(15, 23, 42, 0.035),
      0 92px 54px rgba(15, 118, 110, 0.028),
      0 196px 96px rgba(20, 184, 166, 0.014) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel.creation-mode-panel::after {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    top: calc(100% + 8px) !important;
    height: 286px !important;
    pointer-events: none !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.052), rgba(15, 118, 110, 0.022) 42%, rgba(15, 118, 110, 0)),
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(20, 184, 166, 0.04) 50%, rgba(15, 118, 110, 0)) !important;
    box-shadow: inset 2px 0 0 rgba(15, 118, 110, 0.05) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .create-skin-row.create-skin-row {
    position: relative !important;
    overflow: visible !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 12px 24px rgba(15, 118, 110, 0.034) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .create-skin-row.create-skin-row::after {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: -14px !important;
    height: 14px !important;
    pointer-events: none !important;
    border-radius: 0 0 999px 999px !important;
    background: linear-gradient(180deg, rgba(15, 118, 110, 0.045), rgba(15, 118, 110, 0)) !important;
  }
}

/* Trust sprint v282 final authority tail sentinel. */

/* Trust sprint v283: template starter reads as navigation rail, main step, and apply console. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 252, 250, 0.84)) !important;
    border-color: rgba(15, 118, 110, 0.09) !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 0.78fr) minmax(430px, 1.16fr) minmax(260px, 0.66fr) !important;
    grid-template-rows: auto 34px auto 38px !important;
    align-items: start !important;
    gap: 12px !important;
    box-shadow:
      0 16px 36px rgba(15, 23, 42, 0.032),
      inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > .section-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > .template-view-switch.template-view-switch {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    width: min(520px, 100%) !important;
    justify-self: start !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    width: 100% !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > #templateBriefPanel#templateBriefPanel.template-brief-panel {
    grid-column: 3 !important;
    grid-row: 3 !important;
    align-self: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > [data-template-workbench-footer] {
    grid-column: 1 / 3 !important;
    grid-row: 4 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel::after {
    height: 146px !important;
    bottom: -146px !important;
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.038), rgba(15, 118, 110, 0.014) 58%, rgba(15, 118, 110, 0)),
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(20, 184, 166, 0.035) 50%, rgba(15, 118, 110, 0)) !important;
    pointer-events: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid {
    grid-template-columns: minmax(280px, 0.66fr) minmax(420px, 1.08fr) minmax(260px, 0.66fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block {
    padding: 12px 12px 12px 14px !important;
    gap: 7px !important;
    background:
      linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(240, 253, 250, 0.62)) !important;
    border-color: rgba(15, 118, 110, 0.12) !important;
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.18),
      0 10px 22px rgba(15, 23, 42, 0.018) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block > .template-choice-row.template-choice-row {
    grid-template-rows: repeat(4, 42px) !important;
    gap: 6px !important;
    min-height: 186px !important;
    max-height: 192px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block .template-choice-row.template-choice-row button {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.46) !important;
    border-color: rgba(15, 118, 110, 0.1) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block[data-template-workbench="case"] {
    padding: 16px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 253, 250, 0.72)) !important;
    border-color: rgba(15, 118, 110, 0.16) !important;
    box-shadow:
      inset 4px 0 0 rgba(20, 184, 166, 0.2),
      0 14px 30px rgba(15, 118, 110, 0.035) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] .template-secondary-row button,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] .template-start-guide-detail article {
    background: rgba(255, 255, 255, 0.58) !important;
    border-color: rgba(15, 118, 110, 0.1) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.78)) !important;
    border-color: rgba(15, 118, 110, 0.12) !important;
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.16),
      0 12px 26px rgba(15, 23, 42, 0.024) !important;
  }
}

/* Trust sprint v283 final authority tail sentinel. */

/* Trust sprint v284: template brief reads as one apply console, not stacked mini cards. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 56px 48px 42px 32px 30px !important;
    align-content: start !important;
    gap: 8px !important;
    padding: 12px 10px !important;
    min-height: 0 !important;
    max-height: 340px !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.7)) !important;
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.18),
      0 10px 22px rgba(15, 23, 42, 0.022) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel > div {
    min-width: 0 !important;
    gap: 3px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary {
    padding: 2px 2px 0 !important;
    height: 42px !important;
    max-height: 42px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary strong {
    font-size: 18px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary small {
    display: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch {
    display: grid !important;
    align-items: center !important;
    padding: 6px !important;
    height: 48px !important;
    max-height: 48px !important;
    overflow: hidden !important;
    border: 1px solid rgba(15, 118, 110, 0.1) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.52) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel button[data-template-brief-apply] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.18) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-value {
    min-height: 34px !important;
    height: 42px !important;
    max-height: 42px !important;
    align-content: center !important;
    overflow: hidden !important;
    padding: 5px 8px !important;
    border: 1px solid rgba(15, 118, 110, 0.08) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.36) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-value strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-flow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-flow article {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 6px !important;
    border-radius: 9px !important;
    background: rgba(15, 118, 110, 0.045) !important;
    border-color: rgba(15, 118, 110, 0.07) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-flow article b {
    font-size: 11px !important;
    line-height: 1 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-flow article span {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-guardrail {
    grid-column: 1 !important;
    min-height: 28px !important;
    height: 30px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    border-color: rgba(15, 118, 110, 0.08) !important;
    background: rgba(240, 253, 250, 0.62) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-guardrail small {
    display: none !important;
  }
}

/* Trust sprint v284 final authority tail sentinel. */

/* Trust sprint v285: empty queue is a compact safety tail with visible steps, not a second submit area. */
@media (min-width: 1100px) {
  html:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue[data-empty="true"] {
    grid-template-columns: 194px minmax(520px, 1fr) 64px !important;
  }

  html:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue[data-empty="true"] .queue-list {
    max-width: 820px !important;
  }

  html:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue[data-empty="true"] .queue-list > .empty-queue[data-empty-queue-tail="true"] {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) 252px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    opacity: 0.9 !important;
  }

  html:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue[data-empty="true"] .queue-list > .empty-queue[data-empty-queue-tail="true"] strong {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue[data-empty="true"] .queue-list > .empty-queue[data-empty-queue-tail="true"] small {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 18px !important;
    color: rgba(15, 23, 42, 0.48) !important;
    font-size: 11px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue[data-empty="true"] .queue-list > .empty-queue[data-empty-queue-tail="true"] small {
    color: rgba(186, 230, 253, 0.48) !important;
  }

  html:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue[data-empty="true"] .queue-empty-steps {
    display: grid !important;
    visibility: visible !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue[data-empty="true"] .queue-empty-steps span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 118, 110, 0.09) !important;
    background: rgba(255, 255, 255, 0.38) !important;
    color: rgba(15, 118, 110, 0.66) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue[data-empty="true"] .queue-empty-steps span {
    border-color: rgba(56, 189, 248, 0.13) !important;
    background: rgba(8, 47, 73, 0.42) !important;
    color: rgba(125, 211, 252, 0.72) !important;
  }

  html:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue[data-empty="true"] .empty-queue .queue-actions {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Trust sprint v285 final authority tail sentinel. */

/* Trust sprint v286: desktop workbench spine and runway read as one quiet surface. */
@media (min-width: 1100px) {
  html:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel.creation-mode-panel::after {
    height: 286px !important;
    bottom: -298px !important;
    border-radius: 22px !important;
    opacity: 0.92 !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.86), rgba(255, 255, 255, 0.18) 70%, rgba(255, 255, 255, 0)),
      repeating-linear-gradient(180deg, rgba(15, 118, 110, 0.075) 0 1px, rgba(15, 118, 110, 0) 1px 28px),
      linear-gradient(90deg, rgba(15, 118, 110, 0.1), rgba(20, 184, 166, 0.035) 48%, rgba(15, 118, 110, 0.05)) !important;
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 16px 34px rgba(15, 118, 110, 0.028) !important;
    pointer-events: none !important;
  }

  html:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel.creation-mode-panel {
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.2),
      0 16px 30px rgba(15, 118, 110, 0.035),
      0 196px 62px -176px rgba(15, 118, 110, 0.075) !important;
  }

  html:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue)::before {
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0), rgba(15, 118, 110, 0.052) 68%, rgba(15, 118, 110, 0.065)),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, 0) 0 28px, rgba(15, 118, 110, 0.045) 28px 29px, rgba(15, 118, 110, 0) 29px 56px),
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.075) 18%, rgba(20, 184, 166, 0.06) 50%, rgba(15, 118, 110, 0.075) 82%, rgba(15, 118, 110, 0)) !important;
    pointer-events: none !important;
  }

  html:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue:has(.queue-list > .empty-queue)::after {
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.084), rgba(15, 118, 110, 0.038) 34%, rgba(15, 118, 110, 0.014) 72%, rgba(15, 118, 110, 0)),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, 0) 0 34px, rgba(15, 118, 110, 0.035) 34px 35px, rgba(15, 118, 110, 0) 35px 70px),
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.052) 16%, rgba(20, 184, 166, 0.038) 50%, rgba(15, 118, 110, 0.052) 84%, rgba(15, 118, 110, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 18%) !important;
    pointer-events: none !important;
  }

  html:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer::after {
    background:
      linear-gradient(180deg, rgba(14, 165, 233, 0.06), rgba(8, 47, 73, 0.055) 64%, rgba(8, 47, 73, 0)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 34px, rgba(56, 189, 248, 0.06) 34px 35px, rgba(56, 189, 248, 0) 35px 70px),
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.07) 20%, rgba(20, 184, 166, 0.07) 50%, rgba(56, 189, 248, 0.07) 80%, rgba(56, 189, 248, 0)) !important;
    pointer-events: none !important;
  }
}

/* Trust sprint v286 final authority tail sentinel. */

/* Trust sprint v286b: beat older high-specificity runway locks without changing layout metrics. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel.creation-mode-panel.creation-mode-panel::after {
    height: 286px !important;
    bottom: -298px !important;
    border-radius: 22px !important;
    opacity: 0.92 !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.86), rgba(255, 255, 255, 0.18) 70%, rgba(255, 255, 255, 0)),
      repeating-linear-gradient(180deg, rgba(15, 118, 110, 0.075) 0 1px, rgba(15, 118, 110, 0) 1px 28px),
      linear-gradient(90deg, rgba(15, 118, 110, 0.1), rgba(20, 184, 166, 0.035) 48%, rgba(15, 118, 110, 0.05)) !important;
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 16px 34px rgba(15, 118, 110, 0.028) !important;
    pointer-events: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .creation-mode-panel.creation-mode-panel.creation-mode-panel {
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.2),
      0 16px 30px rgba(15, 118, 110, 0.035),
      0 196px 62px -176px rgba(15, 118, 110, 0.075) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue.queue:has(.queue-list > .empty-queue)::before {
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0), rgba(15, 118, 110, 0.052) 68%, rgba(15, 118, 110, 0.065)),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, 0) 0 28px, rgba(15, 118, 110, 0.045) 28px 29px, rgba(15, 118, 110, 0) 29px 56px),
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.075) 18%, rgba(20, 184, 166, 0.06) 50%, rgba(15, 118, 110, 0.075) 82%, rgba(15, 118, 110, 0)) !important;
    pointer-events: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .queue.queue.queue.queue:has(.queue-list > .empty-queue)::after {
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.084), rgba(15, 118, 110, 0.038) 34%, rgba(15, 118, 110, 0.014) 72%, rgba(15, 118, 110, 0)),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, 0) 0 34px, rgba(15, 118, 110, 0.035) 34px 35px, rgba(15, 118, 110, 0) 35px 70px),
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.052) 16%, rgba(20, 184, 166, 0.038) 50%, rgba(15, 118, 110, 0.052) 84%, rgba(15, 118, 110, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 18%) !important;
    pointer-events: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer::after {
    background:
      linear-gradient(180deg, rgba(14, 165, 233, 0.06), rgba(8, 47, 73, 0.055) 64%, rgba(8, 47, 73, 0)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 34px, rgba(56, 189, 248, 0.06) 34px 35px, rgba(56, 189, 248, 0) 35px 70px),
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.07) 20%, rgba(20, 184, 166, 0.07) 50%, rgba(56, 189, 248, 0.07) 80%, rgba(56, 189, 248, 0)) !important;
    pointer-events: none !important;
  }
}

/* Trust sprint v286b final authority tail sentinel. */

/* Trust sprint v286c: stable left-rail id wins the passive spine authority. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel::after {
    height: 286px !important;
    bottom: -298px !important;
    top: auto !important;
    border-radius: 22px !important;
    opacity: 0.92 !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.86), rgba(255, 255, 255, 0.18) 70%, rgba(255, 255, 255, 0)),
      repeating-linear-gradient(180deg, rgba(15, 118, 110, 0.075) 0 1px, rgba(15, 118, 110, 0) 1px 28px),
      linear-gradient(90deg, rgba(15, 118, 110, 0.1), rgba(20, 184, 166, 0.035) 48%, rgba(15, 118, 110, 0.05)) !important;
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 16px 34px rgba(15, 118, 110, 0.028) !important;
    pointer-events: none !important;
  }

  html[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel {
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.2),
      0 16px 30px rgba(15, 118, 110, 0.035),
      0 196px 62px -176px rgba(15, 118, 110, 0.075) !important;
  }
}

/* Trust sprint v286c final authority tail sentinel. */

/* Trust sprint v287: pro queue continues as a passive tech runway below the command strip. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue.queue.queue:has(.queue-list > .empty-queue)::before {
    height: 48px !important;
    top: -48px !important;
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0), rgba(14, 165, 233, 0.054) 70%, rgba(14, 165, 233, 0.078)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 30px, rgba(56, 189, 248, 0.055) 30px 31px, rgba(56, 189, 248, 0) 31px 60px),
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.075) 18%, rgba(20, 184, 166, 0.07) 50%, rgba(56, 189, 248, 0.075) 82%, rgba(56, 189, 248, 0)) !important;
    pointer-events: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue.queue.queue:has(.queue-list > .empty-queue)::after {
    height: 268px !important;
    bottom: -268px !important;
    background:
      linear-gradient(180deg, rgba(14, 165, 233, 0.074), rgba(14, 165, 233, 0.033) 34%, rgba(8, 47, 73, 0.018) 72%, rgba(8, 47, 73, 0)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 36px, rgba(56, 189, 248, 0.045) 36px 37px, rgba(56, 189, 248, 0) 37px 72px),
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.05) 16%, rgba(20, 184, 166, 0.044) 50%, rgba(56, 189, 248, 0.05) 84%, rgba(56, 189, 248, 0)),
      linear-gradient(180deg, rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0) 20%) !important;
    border-top-color: rgba(56, 189, 248, 0.105) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.09),
      inset 0 20px 44px rgba(14, 165, 233, 0.035) !important;
    pointer-events: none !important;
  }
}

/* Trust sprint v287 final authority tail sentinel. */

/* Trust sprint v287b: stable queue id wins pro tech runway background authority. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::before {
    content: "" !important;
    height: 48px !important;
    top: -48px !important;
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0), rgba(14, 165, 233, 0.054) 70%, rgba(14, 165, 233, 0.078)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 30px, rgba(56, 189, 248, 0.055) 30px 31px, rgba(56, 189, 248, 0) 31px 60px),
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.075) 18%, rgba(20, 184, 166, 0.07) 50%, rgba(56, 189, 248, 0.075) 82%, rgba(56, 189, 248, 0)) !important;
    pointer-events: none !important;
  }

  html[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    height: 268px !important;
    bottom: -268px !important;
    background:
      linear-gradient(180deg, rgba(14, 165, 233, 0.074), rgba(14, 165, 233, 0.033) 34%, rgba(8, 47, 73, 0.018) 72%, rgba(8, 47, 73, 0)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 36px, rgba(56, 189, 248, 0.045) 36px 37px, rgba(56, 189, 248, 0) 37px 72px),
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.05) 16%, rgba(20, 184, 166, 0.044) 50%, rgba(56, 189, 248, 0.05) 84%, rgba(56, 189, 248, 0)),
      linear-gradient(180deg, rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0) 20%) !important;
    border-top-color: rgba(56, 189, 248, 0.105) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.09),
      inset 0 20px 44px rgba(14, 165, 233, 0.035) !important;
    pointer-events: none !important;
  }
}

/* Trust sprint v287b final authority tail sentinel. */

/* Trust sprint v288: desktop lower canvas becomes one intentional workbench floor. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="clean"] body,
  html[data-active-page="create"][data-skin="cute"] body {
    background-color: #f6fbfa !important;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0 61%, rgba(240, 253, 250, 0.86) 61%, rgba(240, 253, 250, 0.62) 100%),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, 0) 0 42px, rgba(15, 118, 110, 0.03) 42px 43px, rgba(15, 118, 110, 0) 43px 84px),
      radial-gradient(circle at 18% 78%, rgba(20, 184, 166, 0.07), rgba(20, 184, 166, 0) 24%),
      radial-gradient(circle at 83% 76%, rgba(15, 118, 110, 0.045), rgba(15, 118, 110, 0) 26%) !important;
    background-attachment: fixed !important;
  }

  html[data-active-page="create"][data-skin="pro"] body,
  html[data-active-page="create"] body[data-skin="pro"],
  body[data-active-page="create"][data-skin="pro"] {
    background-color: #020617 !important;
    background-image:
      linear-gradient(180deg, rgba(2, 6, 23, 0) 0 58%, rgba(8, 47, 73, 0.62) 58%, rgba(2, 6, 23, 0.98) 100%),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 44px, rgba(56, 189, 248, 0.042) 44px 45px, rgba(56, 189, 248, 0) 45px 88px),
      radial-gradient(circle at 22% 78%, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0) 28%),
      radial-gradient(circle at 78% 74%, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0) 24%) !important;
    background-attachment: fixed !important;
  }

  html:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body {
    background-color: #020617 !important;
    background-image:
      linear-gradient(180deg, rgba(2, 6, 23, 0) 0 58%, rgba(8, 47, 73, 0.62) 58%, rgba(2, 6, 23, 0.98) 100%),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 44px, rgba(56, 189, 248, 0.042) 44px 45px, rgba(56, 189, 248, 0) 45px 88px),
      radial-gradient(circle at 22% 78%, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0) 28%),
      radial-gradient(circle at 78% 74%, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0) 24%) !important;
    background-attachment: fixed !important;
  }

  html[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue {
    backdrop-filter: blur(14px) saturate(1.04) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 16px 34px rgba(15, 118, 110, 0.052),
      0 54px 84px rgba(15, 118, 110, 0.04) !important;
  }

  html[data-active-page="create"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel::after {
    content: "创作路径\A 1 选方式\A 2 写需求\A 3 确认生成" !important;
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
    padding: 18px 18px !important;
    white-space: pre-line !important;
    color: rgba(15, 118, 110, 0.58) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.85 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin="pro"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel::after {
    color: rgba(125, 211, 252, 0.58) !important;
    text-shadow: 0 0 18px rgba(14, 165, 233, 0.18) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue,
  html[data-active-page="create"][data-skin="cute"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(240, 253, 250, 0.86) 50%, rgba(255, 255, 255, 0.82)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 250, 0.68)) !important;
    border-color: rgba(15, 118, 110, 0.12) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue {
    background:
      linear-gradient(90deg, rgba(8, 47, 73, 0.92), rgba(2, 132, 199, 0.12) 50%, rgba(8, 47, 73, 0.92)),
      linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.86)) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.16),
      0 16px 34px rgba(14, 165, 233, 0.08),
      0 54px 96px rgba(8, 47, 73, 0.34) !important;
  }

  html[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    height: 252px !important;
    bottom: -252px !important;
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.095), rgba(15, 118, 110, 0.045) 34%, rgba(15, 118, 110, 0.018) 72%, rgba(15, 118, 110, 0)),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, 0) 0 34px, rgba(15, 118, 110, 0.042) 34px 35px, rgba(15, 118, 110, 0) 35px 70px),
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.062) 16%, rgba(20, 184, 166, 0.05) 50%, rgba(15, 118, 110, 0.062) 84%, rgba(15, 118, 110, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0) 18%) !important;
    pointer-events: none !important;
  }

  html[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    height: 268px !important;
    bottom: -268px !important;
    background:
      linear-gradient(180deg, rgba(14, 165, 233, 0.092), rgba(14, 165, 233, 0.04) 34%, rgba(8, 47, 73, 0.024) 72%, rgba(8, 47, 73, 0)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 36px, rgba(56, 189, 248, 0.052) 36px 37px, rgba(56, 189, 248, 0) 37px 72px),
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.064) 16%, rgba(20, 184, 166, 0.052) 50%, rgba(56, 189, 248, 0.064) 84%, rgba(56, 189, 248, 0)),
      linear-gradient(180deg, rgba(2, 6, 23, 0.24), rgba(2, 6, 23, 0) 20%) !important;
    border-top-color: rgba(56, 189, 248, 0.13) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.12),
      inset 0 20px 44px rgba(14, 165, 233, 0.045) !important;
    pointer-events: none !important;
  }
}

/* Trust sprint v288 final authority tail sentinel. */

/* Trust sprint v289: pro evidence chips and right rail read as scan-first controls. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview {
    min-height: 72px !important;
    height: 72px !important;
    max-height: 76px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-pro-evidence.prompt-live-pro-evidence {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    height: 32px !important;
    max-height: 32px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-pro-evidence article {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 7px !important;
    border-color: rgba(56, 189, 248, 0.17) !important;
    background: linear-gradient(90deg, rgba(8, 47, 73, 0.72), rgba(14, 165, 233, 0.11)) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-pro-evidence article span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    color: rgba(219, 234, 254, 0.66) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-pro-evidence article strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    color: rgba(226, 244, 255, 0.94) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    gap: 6px !important;
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.84), rgba(2, 6, 23, 0.88)),
      linear-gradient(90deg, rgba(56, 189, 248, 0.10), rgba(20, 184, 166, 0.04)) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.18),
      inset 3px 0 0 rgba(20, 184, 166, 0.18),
      0 18px 36px rgba(2, 6, 23, 0.18) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .pro-control-matrix.pro-control-matrix,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-node-status.delivery-node-status,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-param-rail.delivery-param-rail {
    border-color: rgba(56, 189, 248, 0.13) !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-param-rail.delivery-param-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-param-rail.delivery-param-rail span {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-param-rail.delivery-param-rail em {
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}

/* Trust sprint v289 final authority tail sentinel. */

/* Trust sprint v290: pro visible prompt becomes two natural lines plus one state row. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-pro-evidence.prompt-live-pro-evidence {
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-pro-evidence.prompt-live-pro-evidence article[data-role="state"] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    align-items: center !important;
    column-gap: 8px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-pro-evidence.prompt-live-pro-evidence article[data-role="state"] span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1 !important;
  }
}

/* Trust sprint v290 final authority tail sentinel. */

/* Trust sprint v291: template starter workbench pins its choices and guide to the top rhythm. */
@media (min-width: 1100px) {
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-workbench="starter"].template-workbench-block.strong {
    display: grid !important;
    grid-template-rows: auto max-content minmax(0, 1fr) !important;
    align-content: start !important;
    row-gap: 8px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-workbench="starter"].template-workbench-block.strong > .template-choice-row.template-choice-row {
    align-self: start !important;
    justify-self: stretch !important;
    margin-top: 6px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-start-guide].template-workbench-block {
    display: grid !important;
    grid-template-rows: max-content max-content max-content max-content max-content max-content minmax(0, 1fr) !important;
    align-content: start !important;
    row-gap: 8px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-start-guide].template-workbench-block .template-secondary-row {
    align-self: start !important;
    margin-top: 4px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-start-guide].template-workbench-block .template-start-more {
    align-self: start !important;
    margin: 6px 0 0 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-start-guide].template-workbench-block .template-start-guide-detail {
    align-self: start !important;
    margin-top: 2px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-start-guide].template-workbench-block.template-workbench-block {
    grid-template-rows: max-content max-content max-content max-content max-content max-content minmax(0, 1fr) !important;
    row-gap: 8px !important;
    align-content: start !important;
  }
}

/* Trust sprint v291 final authority tail sentinel. */

/* Trust sprint v292: desktop create calm-down pass from real smoke screenshots. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel::after {
    height: 286px !important;
    bottom: -298px !important;
    padding: 12px 16px !important;
    gap: 3px !important;
    line-height: 1.62 !important;
    font-size: 11px !important;
    color: rgba(15, 118, 110, 0.34) !important;
    border-radius: 18px !important;
    border-color: rgba(15, 118, 110, 0.08) !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.34), rgba(255, 255, 255, 0.08) 76%, rgba(255, 255, 255, 0)),
      repeating-linear-gradient(180deg, rgba(15, 118, 110, 0.024) 0 1px, rgba(15, 118, 110, 0) 1px 34px),
      linear-gradient(90deg, rgba(15, 118, 110, 0.038), rgba(20, 184, 166, 0.012)) !important;
    box-shadow:
      inset 2px 0 0 rgba(15, 118, 110, 0.11),
      0 18px 32px rgba(15, 118, 110, 0.028) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel {
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.14),
      0 14px 26px rgba(15, 118, 110, 0.026),
      0 196px 62px -176px rgba(15, 118, 110, 0.03) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-action-dock.prompt-action-dock,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    border-color: rgba(15, 118, 110, 0.075) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.58),
      0 8px 18px rgba(15, 23, 42, 0.018) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview {
    background: linear-gradient(180deg, rgba(240, 253, 250, 0.48), rgba(240, 253, 250, 0.24)) !important;
    min-height: 56px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-action-dock.prompt-action-dock {
    margin-top: 2px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(240, 253, 250, 0.34)) !important;
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.075),
      0 6px 12px rgba(15, 23, 42, 0.012) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    margin-top: -2px !important;
    padding: 8px 10px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(240, 253, 250, 0.4)) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-quick-head,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-style-panel,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-field-panel,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-field-open {
    background: transparent !important;
    border-color: rgba(15, 118, 110, 0.06) !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-quick-variants button,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-field-chips button {
    min-height: 26px !important;
    border-color: transparent !important;
    background: rgba(15, 118, 110, 0.055) !important;
    box-shadow: none !important;
    color: rgba(15, 23, 42, 0.74) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    gap: 5px !important;
    padding: 11px !important;
    border-color: rgba(15, 118, 110, 0.09) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(240, 253, 250, 0.58)),
      linear-gradient(90deg, rgba(15, 118, 110, 0.05), rgba(20, 184, 166, 0.02)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 16px 30px rgba(15, 118, 110, 0.035) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-node-status,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] [data-delivery-confirm-summary],
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    border-color: rgba(15, 118, 110, 0.07) !important;
    background: rgba(255, 255, 255, 0.36) !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] [data-delivery-confirm-summary] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    min-height: 26px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] [data-delivery-confirm-summary] article {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-action-dock.prompt-action-dock,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    border-color: rgba(56, 189, 248, 0.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.1),
      0 8px 18px rgba(2, 6, 23, 0.12) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden),
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-action-dock.prompt-action-dock {
    background: linear-gradient(180deg, rgba(7, 19, 36, 0.88), rgba(8, 47, 73, 0.46)) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-quick-variants button,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-field-chips button {
    background: rgba(14, 165, 233, 0.13) !important;
    color: rgba(226, 244, 255, 0.82) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    border-color: rgba(56, 189, 248, 0.16) !important;
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.78), rgba(2, 6, 23, 0.9)),
      linear-gradient(90deg, rgba(56, 189, 248, 0.08), rgba(20, 184, 166, 0.03)) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-node-status,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] [data-delivery-confirm-summary],
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    border-color: rgba(56, 189, 248, 0.11) !important;
    background: rgba(7, 19, 36, 0.38) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-summary,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-proof,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-blueprint,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-signature,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview .prompt-live-decision {
    visibility: visible !important;
  }
}

/* Trust sprint v292 final authority tail sentinel. */

/* Trust sprint v293: clean left path becomes a compact passive guide, not a tall side banner. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel::after {
    height: 218px !important;
    bottom: -230px !important;
    color: rgba(15, 118, 110, 0.38) !important;
    border-color: rgba(15, 118, 110, 0.07) !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.38), rgba(255, 255, 255, 0.09) 78%, rgba(255, 255, 255, 0)),
      repeating-linear-gradient(180deg, rgba(15, 118, 110, 0.022) 0px, rgba(15, 118, 110, 0.022) 1px, rgba(15, 118, 110, 0) 1px, rgba(15, 118, 110, 0) 32px),
      linear-gradient(90deg, rgba(15, 118, 110, 0.04), rgba(20, 184, 166, 0.01)) !important;
    box-shadow:
      inset 2px 0 0 rgba(15, 118, 110, 0.1),
      0 14px 26px rgba(15, 118, 110, 0.022) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel {
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.14),
      0 14px 26px rgba(15, 118, 110, 0.024),
      0 196px 52px -184px rgba(15, 118, 110, 0.034) !important;
  }
}

/* Trust sprint v293 final authority tail sentinel. */

/* Trust sprint v294: middle prompt lane reads as one connected creation console. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview {
    border-bottom-color: rgba(15, 118, 110, 0.04) !important;
    border-radius: 14px 14px 8px 8px !important;
    box-shadow:
      inset 3px 0 0 rgba(20, 184, 166, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-action-dock.prompt-action-dock {
    border-top-color: rgba(15, 118, 110, 0.05) !important;
    border-bottom-color: rgba(15, 118, 110, 0.045) !important;
    border-radius: 12px 12px 6px 6px !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.46), rgba(255, 255, 255, 0.58)) !important;
    box-shadow:
      inset 3px 0 0 rgba(20, 184, 166, 0.075),
      inset 0 1px 0 rgba(255, 255, 255, 0.58),
      0 4px 10px rgba(15, 23, 42, 0.008) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    border-top-color: rgba(15, 118, 110, 0.045) !important;
    border-radius: 6px 6px 12px 12px !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.46), rgba(255, 255, 255, 0.58)) !important;
    box-shadow:
      inset 3px 0 0 rgba(20, 184, 166, 0.075),
      inset 0 1px 0 rgba(255, 255, 255, 0.66),
      0 8px 18px rgba(15, 118, 110, 0.02) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden)::before {
    opacity: 0.82 !important;
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.045), rgba(15, 118, 110, 0.018) 70%, rgba(255, 255, 255, 0)) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-action-dock.prompt-action-dock,
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    box-shadow:
      inset 3px 0 0 rgba(56, 189, 248, 0.12),
      inset 0 1px 0 rgba(125, 211, 252, 0.1),
      0 8px 18px rgba(2, 6, 23, 0.1) !important;
  }
}

/* Trust sprint v294 final authority tail sentinel. */

/* Trust sprint v295: real-screen polish pass for desktop rhythm and mobile pro density. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel::after {
    height: 202px !important;
    bottom: -214px !important;
    padding: 10px 14px !important;
    color: rgba(15, 118, 110, 0.31) !important;
    border-color: rgba(15, 118, 110, 0.055) !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.28), rgba(255, 255, 255, 0.075) 76%, rgba(255, 255, 255, 0)),
      repeating-linear-gradient(180deg, rgba(15, 118, 110, 0.018) 0px, rgba(15, 118, 110, 0.018) 1px, rgba(15, 118, 110, 0) 1px, rgba(15, 118, 110, 0) 32px),
      linear-gradient(90deg, rgba(15, 118, 110, 0.03), rgba(20, 184, 166, 0.008)) !important;
    box-shadow:
      inset 2px 0 0 rgba(15, 118, 110, 0.075),
      0 10px 22px rgba(15, 118, 110, 0.016) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel {
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.13),
      0 12px 22px rgba(15, 118, 110, 0.02),
      0 196px 44px -188px rgba(15, 118, 110, 0.026) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-action-dock.prompt-action-dock {
    min-height: 36px !important;
    padding: 7px 10px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    padding: 7px 10px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-quick-variants,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel .starter-field-chips {
    gap: 6px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    padding: 18px 18px 14px !important;
    gap: 10px !important;
    border-color: rgba(15, 118, 110, 0.075) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      0 18px 44px rgba(15, 23, 42, 0.035) !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid {
    grid-template-columns: minmax(250px, 0.92fr) minmax(420px, 1.36fr) minmax(250px, 0.78fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.template-workbench-block,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-choice-row.template-choice-row {
    gap: 7px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-choice-row.template-choice-row button {
    min-height: 44px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-choice-row.template-choice-row button strong {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-choice-row.template-choice-row button small {
    font-size: 11px !important;
    line-height: 1.16 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch {
    padding: 8px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel button[data-template-brief-apply] {
    min-height: 36px !important;
    border-radius: 10px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-footer.template-workbench-footer {
    padding: 8px 12px !important;
    margin-top: 2px !important;
    border-color: rgba(15, 118, 110, 0.075) !important;
    background: rgba(240, 253, 250, 0.34) !important;
  }
}

@media (max-width: 720px) {
  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    padding: 18px 14px 82px !important;
    gap: 14px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel > .section-title h2 {
    font-size: 18px !important;
    line-height: 1.18 !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-view-switch.template-view-switch {
    padding: 5px !important;
    gap: 5px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid {
    gap: 12px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.template-workbench-block,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    padding: 15px !important;
    border-radius: 16px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.template-workbench-block > strong,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary strong {
    font-size: 20px !important;
    line-height: 1.12 !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.template-workbench-block > p,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-value,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-guardrail {
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-choice-row.template-choice-row {
    gap: 9px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-choice-row.template-choice-row button {
    min-height: 68px !important;
    padding: 10px 9px !important;
    border-radius: 16px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-choice-row.template-choice-row button strong {
    font-size: 18px !important;
    line-height: 1.08 !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-choice-row.template-choice-row button small {
    font-size: 12px !important;
    line-height: 1.18 !important;
  }

  html[data-active-page="templates"][data-skin="pro"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    background:
      linear-gradient(180deg, rgba(7, 15, 31, 0.96), rgba(3, 7, 18, 0.98)),
      radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.08), transparent 36%) !important;
  }
}

/* Trust sprint v295 final authority tail sentinel. */

/* Trust sprint v296: mobile template pro density reads like a focused picker, not a poster stack. */
@media (max-width: 720px) {
  html[data-active-page="templates"] body .app-shell.app-shell {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
  }

  html[data-active-page="templates"] body .topbar.topbar {
    min-height: 48px !important;
    margin-bottom: 8px !important;
    padding: 7px 10px 8px !important;
  }

  html[data-active-page="templates"] body .topbar.topbar h1 {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  html[data-active-page="templates"] body .topbar.topbar .eyebrow {
    margin-bottom: 1px !important;
    font-size: 9px !important;
    letter-spacing: 0.09em !important;
  }

  html[data-active-page="templates"] body .topbar.topbar .avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    padding: 14px 12px 74px !important;
    gap: 12px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-view-switch.template-view-switch {
    padding: 4px !important;
    border-radius: 18px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel,
  html[data-active-page="templates"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.template-workbench-block {
    padding: 13px !important;
    border-radius: 15px !important;
    box-shadow: none !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-value,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-guardrail {
    padding: 8px !important;
    border-radius: 12px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-choice-row.template-choice-row button {
    min-height: 60px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  html[data-active-page="templates"][data-skin="pro"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel,
  html[data-active-page="templates"][data-skin="pro"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel,
  html[data-active-page="templates"][data-skin="pro"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.template-workbench-block {
    border-color: rgba(56, 189, 248, 0.16) !important;
    background:
      linear-gradient(180deg, rgba(7, 15, 31, 0.9), rgba(3, 7, 18, 0.95)),
      radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.055), transparent 34%) !important;
  }

  html[data-active-page="templates"] body .app-toast.app-toast {
    bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    max-width: min(320px, calc(100vw - 84px)) !important;
    min-height: 28px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    background: rgba(15, 23, 42, 0.82) !important;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.14) !important;
  }
}

/* Trust sprint v296 final authority tail sentinel. */

/* Trust sprint v297: template workbench gets a calmer button hierarchy and mobile pro loses poster weight. */
@media (min-width: 1100px) {
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-view-switch.template-view-switch {
    width: min(420px, 100%) !important;
    height: 32px !important;
    padding: 4px !important;
    background: rgba(255, 255, 255, 0.26) !important;
    border-color: rgba(15, 118, 110, 0.07) !important;
    box-shadow: none !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-view-switch.template-view-switch button {
    min-height: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid {
    grid-template-columns: minmax(242px, 0.86fr) minmax(450px, 1.42fr) minmax(248px, 0.76fr) !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block > strong,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-start-guide].template-workbench-block > strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block > p,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-start-guide].template-workbench-block > p {
    margin-top: 3px !important;
    font-size: 12px !important;
    line-height: 1.28 !important;
    color: rgba(15, 118, 110, 0.62) !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block .template-choice-row.template-choice-row button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    border-color: rgba(15, 118, 110, 0.075) !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block .template-choice-row.template-choice-row button.active {
    background: rgba(15, 118, 110, 0.09) !important;
    border-color: rgba(15, 118, 110, 0.2) !important;
    box-shadow: inset 3px 0 0 rgba(15, 118, 110, 0.42) !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-choice-row.template-choice-row button strong {
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-choice-row.template-choice-row button small {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell [data-template-start-guide].template-workbench-block .template-secondary-row {
    gap: 6px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell [data-template-start-guide].template-workbench-block .template-secondary-row button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: none !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell [data-template-start-guide].template-workbench-block .template-start-guide-detail article {
    min-height: 56px !important;
    padding: 10px 11px !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.54) !important;
    box-shadow: none !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    padding: 11px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-value,
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-guardrail {
    padding: 7px 8px !important;
    box-shadow: none !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary strong {
    font-size: 16px !important;
    line-height: 1.18 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-flow article {
    min-height: 27px !important;
    padding: 5px 6px !important;
    border-color: rgba(15, 118, 110, 0.07) !important;
    background: rgba(255, 255, 255, 0.5) !important;
  }
}

@media (max-width: 720px) {
  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    padding: 12px 11px 70px !important;
    gap: 10px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel > .section-title h2 {
    font-size: 17px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel,
  html[data-active-page="templates"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.template-workbench-block {
    padding: 11px !important;
    border-radius: 14px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-value,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-guardrail {
    padding: 7px !important;
    border-radius: 11px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary strong {
    font-size: 18px !important;
    line-height: 1.08 !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel button[data-template-brief-apply] {
    min-height: 36px !important;
    height: 36px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-choice-row.template-choice-row button {
    min-height: 54px !important;
    padding: 7px !important;
    border-radius: 13px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-choice-row.template-choice-row button strong {
    font-size: 16px !important;
    line-height: 1.08 !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-choice-row.template-choice-row button small {
    font-size: 11px !important;
  }

  html[data-active-page="templates"][data-skin="pro"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel,
  html[data-active-page="templates"][data-skin="pro"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.template-workbench-block {
    border-color: rgba(56, 189, 248, 0.12) !important;
    background:
      linear-gradient(180deg, rgba(7, 15, 31, 0.84), rgba(3, 7, 18, 0.92)),
      radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.04), transparent 32%) !important;
  }
}

/* Trust sprint v297 final authority tail sentinel. */

/* Trust sprint v297 final clamp: beat older root-heavy template authorities. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > .template-view-switch.template-view-switch {
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px !important;
    justify-self: start !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > .template-view-switch.template-view-switch button {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 720px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > .section-title h2 {
    font-size: 18px !important;
    line-height: 1.08 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-workbench="starter"].template-workbench-block.template-workbench-block > strong {
    font-size: 18px !important;
    line-height: 1.08 !important;
  }
}

/* Trust sprint v298: desktop create reads as one workbench surface instead of four pasted panels. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer {
    border-color: rgba(15, 118, 110, 0.08) !important;
    background:
      linear-gradient(90deg, rgba(240, 253, 250, 0.72) 0 15%, rgba(255, 255, 255, 0.86) 15% 77%, rgba(240, 253, 250, 0.78) 77% 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 250, 0.58)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.84),
      inset 0 -1px 0 rgba(15, 118, 110, 0.035),
      0 22px 50px rgba(15, 118, 110, 0.048) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer::before {
    opacity: 0.72 !important;
    background:
      linear-gradient(90deg, rgba(15, 118, 110, 0.08), rgba(15, 118, 110, 0.02) 20%, rgba(15, 118, 110, 0.02) 78%, rgba(15, 118, 110, 0.08)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    border-color: rgba(15, 118, 110, 0.085) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 252, 250, 0.76)),
      linear-gradient(90deg, rgba(15, 118, 110, 0.035), rgba(20, 184, 166, 0.012)) !important;
    box-shadow:
      inset 3px 0 0 rgba(20, 184, 166, 0.09),
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 12px 24px rgba(15, 23, 42, 0.02) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box textarea#prompt {
    border-color: rgba(20, 184, 166, 0.16) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.84),
      0 0 0 3px rgba(20, 184, 166, 0.035) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-action-dock.prompt-action-dock,
  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    border-color: rgba(15, 118, 110, 0.07) !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.62), rgba(255, 255, 255, 0.58)) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    border-color: rgba(15, 118, 110, 0.085) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(240, 253, 250, 0.66)),
      linear-gradient(90deg, rgba(15, 118, 110, 0.055), rgba(20, 184, 166, 0.018)) !important;
    box-shadow:
      inset 3px 0 0 rgba(20, 184, 166, 0.09),
      inset 0 1px 0 rgba(255, 255, 255, 0.76),
      0 14px 28px rgba(15, 118, 110, 0.032) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .queue.queue {
    border-color: rgba(15, 118, 110, 0.075) !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.76), rgba(240, 253, 250, 0.7) 46%, rgba(255, 255, 255, 0.78)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(240, 253, 250, 0.62)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 -1px 0 rgba(15, 118, 110, 0.035),
      0 12px 28px rgba(15, 118, 110, 0.035) !important;
  }

  html[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel {
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.7), rgba(255, 255, 255, 0.42)) !important;
    border-color: rgba(15, 118, 110, 0.075) !important;
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.13),
      0 12px 22px rgba(15, 118, 110, 0.018),
      0 196px 44px -188px rgba(15, 118, 110, 0.026) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer {
    border-color: rgba(56, 189, 248, 0.15) !important;
    background:
      linear-gradient(90deg, rgba(2, 8, 23, 0.86) 0 16%, rgba(7, 19, 36, 0.92) 16% 76%, rgba(2, 8, 23, 0.9) 76% 100%),
      radial-gradient(circle at 82% 0%, rgba(56, 189, 248, 0.08), transparent 36%) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.12),
      inset 0 -1px 0 rgba(56, 189, 248, 0.08),
      0 22px 54px rgba(2, 6, 23, 0.22) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .queue.queue {
    border-color: rgba(56, 189, 248, 0.13) !important;
    background:
      linear-gradient(90deg, rgba(7, 19, 36, 0.88), rgba(8, 47, 73, 0.74) 48%, rgba(7, 19, 36, 0.88)),
      linear-gradient(180deg, rgba(2, 8, 23, 0.82), rgba(8, 47, 73, 0.46)) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.12),
      0 14px 34px rgba(2, 6, 23, 0.2) !important;
  }
}

/* Trust sprint v298 final authority tail sentinel. */

/* Trust sprint v299: desktop create lower canvas has an intentional runway finish, not loose blank space. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0 54%, rgba(240, 253, 250, 0.72) 54% 74%, rgba(230, 247, 245, 0.46) 100%),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, 0) 0 42px, rgba(15, 118, 110, 0.014) 42px 43px, rgba(15, 118, 110, 0) 43px 84px),
      radial-gradient(circle at 18% 78%, rgba(20, 184, 166, 0.045), rgba(20, 184, 166, 0) 24%),
      radial-gradient(circle at 83% 76%, rgba(15, 118, 110, 0.032), rgba(15, 118, 110, 0) 26%) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body {
    background:
      linear-gradient(180deg, rgba(2, 6, 23, 0) 0 52%, rgba(7, 19, 36, 0.86) 52% 76%, rgba(2, 6, 23, 0.92) 100%),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 40px, rgba(56, 189, 248, 0.034) 40px 41px, rgba(56, 189, 248, 0) 41px 80px),
      radial-gradient(circle at 16% 78%, rgba(20, 184, 166, 0.075), rgba(20, 184, 166, 0) 24%),
      radial-gradient(circle at 84% 76%, rgba(56, 189, 248, 0.072), rgba(56, 189, 248, 0) 28%) !important;
  }

  html[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    height: 252px !important;
    bottom: -252px !important;
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.12), rgba(15, 118, 110, 0.054) 28%, rgba(15, 118, 110, 0.022) 68%, rgba(15, 118, 110, 0)),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, 0) 0 30px, rgba(15, 118, 110, 0.052) 30px 31px, rgba(15, 118, 110, 0) 31px 60px),
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.084) 18%, rgba(20, 184, 166, 0.066) 50%, rgba(15, 118, 110, 0.084) 82%, rgba(15, 118, 110, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0) 20%) !important;
    border-top-color: rgba(15, 118, 110, 0.075) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 24px 46px rgba(15, 118, 110, 0.046) !important;
    pointer-events: none !important;
  }

  html[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    height: 268px !important;
    bottom: -268px !important;
    background:
      linear-gradient(180deg, rgba(14, 165, 233, 0.13), rgba(14, 165, 233, 0.058) 30%, rgba(8, 47, 73, 0.034) 70%, rgba(8, 47, 73, 0)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 32px, rgba(56, 189, 248, 0.066) 32px 33px, rgba(56, 189, 248, 0) 33px 66px),
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.082) 18%, rgba(20, 184, 166, 0.066) 50%, rgba(56, 189, 248, 0.082) 82%, rgba(56, 189, 248, 0)),
      linear-gradient(180deg, rgba(2, 6, 23, 0.28), rgba(2, 6, 23, 0) 22%) !important;
    border-top-color: rgba(56, 189, 248, 0.095) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.16),
      inset 0 24px 48px rgba(14, 165, 233, 0.058) !important;
  }
}

/* Trust sprint v299 final authority tail sentinel. */

/* Trust sprint v299b: override older skin-specific body floors with the current runway finish. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body,
  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="cute"] body {
    background-color: #f6fbfa !important;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0 54%, rgba(240, 253, 250, 0.72) 54%, rgba(240, 253, 250, 0.72) 74%, rgba(230, 247, 245, 0.46) 100%),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, 0) 0 42px, rgba(15, 118, 110, 0.014) 42px 43px, rgba(15, 118, 110, 0) 43px 84px),
      radial-gradient(circle at 18% 78%, rgba(20, 184, 166, 0.045), rgba(20, 184, 166, 0) 24%),
      radial-gradient(circle at 83% 76%, rgba(15, 118, 110, 0.032), rgba(15, 118, 110, 0) 26%) !important;
    background-attachment: fixed !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body {
    background-color: #020617 !important;
    background-image:
      linear-gradient(180deg, rgba(2, 6, 23, 0) 0 52%, rgba(7, 19, 36, 0.86) 52%, rgba(7, 19, 36, 0.86) 76%, rgba(2, 6, 23, 0.92) 100%),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 40px, rgba(56, 189, 248, 0.034) 40px 41px, rgba(56, 189, 248, 0) 41px 80px),
      radial-gradient(circle at 16% 78%, rgba(20, 184, 166, 0.075), rgba(20, 184, 166, 0) 24%),
      radial-gradient(circle at 84% 76%, rgba(56, 189, 248, 0.072), rgba(56, 189, 248, 0) 28%) !important;
    background-attachment: fixed !important;
  }
}

/* Trust sprint v299b final authority tail sentinel. */

/* Authority note: candidate duplicate clean blank shell with ID-level specificity. Do not delete without visual smoke on clean/pro create and 920px desktop. */
/* Trust sprint v300b: ID-level desktop create cleanup authority over older high-specificity layers. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel#creationModePanel.creation-mode-panel::after {
    height: 202px !important;
    top: 154px !important;
    color: rgba(15, 118, 110, 0.38) !important;
    opacity: 0.44 !important;
    transform: translateY(3px) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body #promptActionDock#promptActionDock.prompt-action-dock.prompt-action-dock {
    border-bottom-color: transparent !important;
    border-radius: 12px 12px 6px 6px !important;
    margin-bottom: 0 !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.46), rgba(255, 255, 255, 0.58)) !important;
    box-shadow:
      inset 3px 0 0 rgba(20, 184, 166, 0.075),
      inset 0 -1px 0 rgba(255, 255, 255, 0.5),
      0 4px 10px rgba(15, 23, 42, 0.008) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body #blankStarterQuickPanel#blankStarterQuickPanel#blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    margin-top: -3px !important;
    border-top-color: transparent !important;
    border-radius: 6px 6px 12px 12px !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.46), rgba(255, 255, 255, 0.58)) !important;
    box-shadow:
      inset 3px 0 0 rgba(20, 184, 166, 0.075),
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      0 8px 18px rgba(15, 118, 110, 0.02) !important;
  }
}

/* Trust sprint v300b final authority tail sentinel. */

/* Trust sprint v301: pro desktop skin dock and runway read as one command surface. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .create-toolbar-row.create-toolbar-row {
    align-items: start !important;
    height: 30px !important;
    max-height: 30px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 9 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .create-skin-row.create-skin-row {
    position: relative !important;
    width: 258px !important;
    max-width: 258px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 3px !important;
    transform: translate(-14px, 10px) !important;
    border: 1px solid rgba(56, 189, 248, 0.30) !important;
    border-bottom-color: rgba(20, 184, 166, 0.20) !important;
    border-radius: 999px 999px 9px 9px !important;
    background:
      linear-gradient(90deg, rgba(3, 105, 161, 0.30), rgba(15, 23, 42, 0.82) 28%, rgba(8, 47, 73, 0.86) 72%, rgba(20, 184, 166, 0.28)) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.22),
      inset 0 -1px 0 rgba(20, 184, 166, 0.16),
      0 0 0 1px rgba(8, 47, 73, 0.64),
      0 12px 28px rgba(2, 6, 23, 0.34) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .create-skin-row.create-skin-row::before {
    content: "" !important;
    position: absolute !important;
    left: -10px !important;
    right: -10px !important;
    top: -7px !important;
    height: 1px !important;
    background:
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.32), rgba(20, 184, 166, 0.26), rgba(56, 189, 248, 0)) !important;
    pointer-events: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .create-skin-row.create-skin-row::after {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: -12px !important;
    height: 12px !important;
    background:
      linear-gradient(180deg, rgba(56, 189, 248, 0.12), rgba(20, 184, 166, 0.04) 68%, rgba(2, 6, 23, 0)) !important;
    pointer-events: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .create-skin-row.create-skin-row [data-skin] {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    color: rgba(219, 234, 254, 0.86) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .create-skin-row.create-skin-row [data-skin].active {
    background:
      linear-gradient(135deg, rgba(20, 184, 166, 0.98), rgba(14, 165, 233, 0.92)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 0 18px rgba(14, 165, 233, 0.22) !important;
    color: #f8feff !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    background:
      linear-gradient(180deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.066) 30%, rgba(8, 47, 73, 0.038) 70%, rgba(8, 47, 73, 0)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 32px, rgba(56, 189, 248, 0.074) 32px 33px, rgba(56, 189, 248, 0) 33px 66px),
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.10) 18%, rgba(20, 184, 166, 0.074) 50%, rgba(56, 189, 248, 0.10) 82%, rgba(56, 189, 248, 0)),
      linear-gradient(180deg, rgba(2, 6, 23, 0.34), rgba(2, 6, 23, 0) 24%) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.18),
      inset 0 24px 52px rgba(14, 165, 233, 0.070),
      inset 0 -36px 70px rgba(2, 6, 23, 0.18) !important;
  }
}

/* Trust sprint v301 final authority tail sentinel. */

/* Trust sprint v301b: ID-strength pro skin dock beats legacy high-specificity chrome rules. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row.create-skin-row {
    width: 258px !important;
    max-width: 258px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 3px !important;
    transform: translate(-14px, 10px) !important;
    border: 1px solid rgba(56, 189, 248, 0.30) !important;
    border-bottom-color: rgba(20, 184, 166, 0.20) !important;
    border-radius: 999px 999px 9px 9px !important;
    background:
      linear-gradient(90deg, rgba(3, 105, 161, 0.30), rgba(15, 23, 42, 0.82) 28%, rgba(8, 47, 73, 0.86) 72%, rgba(20, 184, 166, 0.28)) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.22),
      inset 0 -1px 0 rgba(20, 184, 166, 0.16),
      0 0 0 1px rgba(8, 47, 73, 0.64),
      0 12px 28px rgba(2, 6, 23, 0.34) !important;
  }
}

/* Trust sprint v301b final authority tail sentinel. */

/* Trust sprint v302: pro prompt utility actions stay available but no longer steal the top chrome. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptToolbar#promptToolbar.prompt-toolbar > div {
    gap: 4px !important;
    opacity: 0.70 !important;
    transform: translateY(1px) !important;
    transition: opacity 0.16s ease !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptToolbar#promptToolbar.prompt-toolbar:hover > div,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptToolbar#promptToolbar.prompt-toolbar:focus-within > div {
    opacity: 0.92 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #copyPromptBtn#copyPromptBtn,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #clearPromptBtn#clearPromptBtn {
    min-height: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
    min-width: 38px !important;
    padding: 0 7px !important;
    border-color: rgba(125, 211, 252, 0.14) !important;
    background: rgba(2, 8, 23, 0.34) !important;
    box-shadow: none !important;
    color: rgba(186, 230, 253, 0.80) !important;
    font-size: 10px !important;
    line-height: 20px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #copyPromptBtn#copyPromptBtn:hover,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #clearPromptBtn#clearPromptBtn:hover,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #copyPromptBtn#copyPromptBtn:focus-visible,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #clearPromptBtn#clearPromptBtn:focus-visible {
    border-color: rgba(56, 189, 248, 0.32) !important;
    background: rgba(8, 47, 73, 0.62) !important;
    color: rgba(240, 249, 255, 0.92) !important;
  }
}

/* Trust sprint v302 final authority tail sentinel. */

/* Trust sprint v303: desktop create lower canvas reads as a finished workbench, not leftover empty space. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    top: -58px !important;
    height: 58px !important;
    border-top: 1px solid rgba(15, 118, 110, 0.055) !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0), rgba(20, 184, 166, 0.025) 58%, rgba(15, 118, 110, 0.042)),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, 0) 0 26px, rgba(15, 118, 110, 0.024) 26px 27px, rgba(15, 118, 110, 0) 27px 52px),
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.045) 15%, rgba(20, 184, 166, 0.036) 50%, rgba(15, 118, 110, 0.045) 85%, rgba(15, 118, 110, 0)) !important;
    box-shadow:
      inset 0 -1px 0 rgba(15, 118, 110, 0.050),
      inset 0 18px 34px rgba(255, 255, 255, 0.22) !important;
    opacity: 0.72 !important;
    pointer-events: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    height: 286px !important;
    bottom: -286px !important;
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.075), rgba(15, 118, 110, 0.034) 28%, rgba(15, 118, 110, 0.014) 70%, rgba(15, 118, 110, 0)),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, 0) 0 28px, rgba(15, 118, 110, 0.022) 28px 29px, rgba(15, 118, 110, 0) 29px 56px),
      linear-gradient(90deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.046) 16%, rgba(20, 184, 166, 0.034) 50%, rgba(15, 118, 110, 0.046) 84%, rgba(15, 118, 110, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 20%) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::before {
    top: -66px !important;
    height: 66px !important;
    border-top-color: rgba(56, 189, 248, 0.105) !important;
    background:
      linear-gradient(180deg, rgba(2, 6, 23, 0), rgba(14, 165, 233, 0.040) 58%, rgba(14, 165, 233, 0.066)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 26px, rgba(56, 189, 248, 0.045) 26px 27px, rgba(56, 189, 248, 0) 27px 52px),
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.078) 15%, rgba(20, 184, 166, 0.052) 50%, rgba(56, 189, 248, 0.078) 85%, rgba(56, 189, 248, 0)) !important;
    box-shadow:
      inset 0 -1px 0 rgba(56, 189, 248, 0.120),
      inset 0 22px 42px rgba(14, 165, 233, 0.022),
      0 -18px 42px rgba(14, 165, 233, 0.018) !important;
    opacity: 0.82 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    height: 302px !important;
    bottom: -302px !important;
    background:
      linear-gradient(180deg, rgba(14, 165, 233, 0.095), rgba(14, 165, 233, 0.044) 30%, rgba(8, 47, 73, 0.024) 72%, rgba(8, 47, 73, 0)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 30px, rgba(56, 189, 248, 0.045) 30px 31px, rgba(56, 189, 248, 0) 31px 60px),
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.068) 18%, rgba(20, 184, 166, 0.048) 50%, rgba(56, 189, 248, 0.068) 82%, rgba(56, 189, 248, 0)),
      linear-gradient(180deg, rgba(2, 6, 23, 0.24), rgba(2, 6, 23, 0) 24%) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.14),
      inset 0 28px 58px rgba(14, 165, 233, 0.046),
      inset 0 -42px 76px rgba(2, 6, 23, 0.16) !important;
  }
}

/* Trust sprint v303 final authority tail sentinel. */

/* Trust sprint v304: pro desktop top chrome breathes and the runway has a visible command boundary. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .create-toolbar-row.create-toolbar-row {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    align-items: start !important;
    overflow: visible !important;
    z-index: 14 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row.create-skin-row {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    transform: translate(-14px, 10px) !important;
    border-color: rgba(56, 189, 248, 0.34) !important;
    border-bottom-color: rgba(45, 212, 191, 0.24) !important;
    background:
      linear-gradient(90deg, rgba(8, 47, 73, 0.86), rgba(15, 23, 42, 0.94) 30%, rgba(8, 47, 73, 0.92) 72%, rgba(20, 184, 166, 0.34)) !important;
    box-shadow:
      inset 0 1px 0 rgba(186, 230, 253, 0.24),
      inset 0 -1px 0 rgba(45, 212, 191, 0.18),
      0 0 0 1px rgba(14, 165, 233, 0.10),
      0 10px 26px rgba(2, 6, 23, 0.38) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row.create-skin-row::before {
    top: -5px !important;
    opacity: 0.72 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row.create-skin-row::after {
    bottom: -12px !important;
    height: 12px !important;
    opacity: 0.72 !important;
    background:
      linear-gradient(180deg, rgba(56, 189, 248, 0.16), rgba(20, 184, 166, 0.055) 68%, rgba(2, 6, 23, 0)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row.create-skin-row [data-skin] {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    line-height: 20px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    transform: translateY(3px) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    background:
      linear-gradient(180deg, rgba(14, 165, 233, 0.105), rgba(14, 165, 233, 0.050) 28%, rgba(8, 47, 73, 0.026) 68%, rgba(8, 47, 73, 0)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 30px, rgba(56, 189, 248, 0.048) 30px 31px, rgba(56, 189, 248, 0) 31px 60px),
      radial-gradient(ellipse at 18% 18%, rgba(45, 212, 191, 0.058), rgba(45, 212, 191, 0) 34%),
      radial-gradient(ellipse at 82% 22%, rgba(56, 189, 248, 0.064), rgba(56, 189, 248, 0) 36%),
      linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.070) 18%, rgba(20, 184, 166, 0.052) 50%, rgba(56, 189, 248, 0.070) 82%, rgba(56, 189, 248, 0)),
      linear-gradient(180deg, rgba(2, 6, 23, 0.25), rgba(2, 6, 23, 0) 24%) !important;
    box-shadow:
      inset 0 1px 0 rgba(186, 230, 253, 0.14),
      inset 0 30px 62px rgba(14, 165, 233, 0.052),
      inset 0 -42px 76px rgba(2, 6, 23, 0.16),
      0 -1px 0 rgba(56, 189, 248, 0.070) !important;
  }
}

/* Trust sprint v304 final authority tail sentinel. */

/* Authority note: current visible owner for create starter main path (#blankStarterQuickPanel, .blank-starter-quick, .starter-action-board, .starter-next-actions, .starter-field-panel, .starter-style-panel). Prefer editing here over appending a new broad tail layer. */
/* Trust sprint v305: desktop create shell convergence, turning scattered panels into one calmer command surface. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body {
    background:
      linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(242, 249, 248, 0.88) 42%, rgba(230, 247, 245, 0.92)),
      radial-gradient(circle at 18% 78%, rgba(20, 184, 166, 0.043), rgba(20, 184, 166, 0) 24%),
      radial-gradient(circle at 83% 76%, rgba(15, 118, 110, 0.030), rgba(15, 118, 110, 0) 26%),
      repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.018) 0 1px, transparent 1px 88px) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body {
    background:
      linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(8, 47, 73, 0.90) 48%, rgba(2, 6, 23, 0.94)),
      radial-gradient(circle at 18% 78%, rgba(20, 184, 166, 0.075), rgba(20, 184, 166, 0) 25%),
      radial-gradient(circle at 83% 76%, rgba(56, 189, 248, 0.11), rgba(56, 189, 248, 0) 28%),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 86px, rgba(56, 189, 248, 0.055) 86px 87px, rgba(56, 189, 248, 0) 87px 172px) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer {
    min-height: 584px !important;
    height: 584px !important;
    max-height: 592px !important;
    align-content: start !important;
    border-color: rgba(15, 118, 110, 0.105) !important;
    background:
      linear-gradient(90deg, rgba(240, 253, 250, 0.88) 0 15%, rgba(255, 255, 255, 0.94) 15% 77%, rgba(240, 253, 250, 0.90) 77% 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 250, 249, 0.84)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      inset 184px 0 0 rgba(240, 253, 250, 0.38),
      inset -304px 0 0 rgba(240, 253, 250, 0.50),
      0 20px 48px rgba(15, 118, 110, 0.055),
      0 1px 0 rgba(15, 118, 110, 0.055) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(240, 253, 250, 0.58)) !important;
    border-color: rgba(15, 118, 110, 0.105) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel::after {
    opacity: 0.49 !important;
    color: rgba(15, 118, 110, 0.46) !important;
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.40), rgba(255, 255, 255, 0.10) 76%, rgba(255, 255, 255, 0)),
      repeating-linear-gradient(180deg, rgba(15, 118, 110, 0.026) 0 1px, rgba(15, 118, 110, 0) 1px 32px),
      linear-gradient(90deg, rgba(15, 118, 110, 0.040), rgba(20, 184, 166, 0.010)) !important;
    filter: saturate(0.96) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel button {
    border-color: rgba(15, 118, 110, 0.09) !important;
    background: rgba(15, 118, 110, 0.035) !important;
    color: rgba(15, 23, 42, 0.72) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel button.active {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(20, 184, 166, 0.86)) !important;
    color: #f8fffd !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 10px 18px rgba(15, 118, 110, 0.11) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .create-skin-row.create-skin-row {
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(240, 253, 250, 0.72)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 8px 18px rgba(15, 118, 110, 0.035) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptBox#promptBox.prompt-box,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(248, 250, 252, 0.62)) !important;
    border-color: rgba(15, 118, 110, 0.085) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      0 14px 32px rgba(15, 118, 110, 0.040) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptBox#promptBox .section-title {
    border-bottom: 1px solid rgba(15, 118, 110, 0.060) !important;
    padding-bottom: 8px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptBox#promptBox textarea {
    border-color: rgba(15, 118, 110, 0.11) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.70)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -18px 36px rgba(240, 253, 250, 0.25) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-action-dock.prompt-action-dock,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel#blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    border-color: rgba(15, 118, 110, 0.075) !important;
    box-shadow:
      inset 3px 0 0 rgba(15, 118, 110, 0.070),
      inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel#blankStarterQuickPanel .starter-field-chips,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel#blankStarterQuickPanel .starter-quick-variants {
    gap: 6px !important;
    padding: 2px !important;
    border-radius: 8px !important;
    background: rgba(15, 118, 110, 0.028) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel#blankStarterQuickPanel .starter-field-chips button,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel#blankStarterQuickPanel .starter-quick-variants button {
    min-height: 25px !important;
    height: 25px !important;
    border-radius: 6px !important;
    border-color: rgba(15, 118, 110, 0.035) !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow: none !important;
    color: rgba(15, 23, 42, 0.72) !important;
    font-size: 11px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(240, 253, 250, 0.58)) !important;
    border-color: rgba(15, 118, 110, 0.105) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(15, 118, 110, 0.045),
      -12px 0 28px rgba(15, 118, 110, 0.030) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #generateBtn#generateBtn {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 12px 22px rgba(15, 118, 110, 0.16) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue {
    border-color: rgba(15, 118, 110, 0.10) !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.88), rgba(240, 253, 250, 0.82) 48%, rgba(255, 255, 255, 0.88)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      0 -1px 0 rgba(15, 118, 110, 0.050),
      0 18px 42px rgba(15, 118, 110, 0.045) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::before {
    opacity: 0.44 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    height: 236px !important;
    bottom: -236px !important;
    opacity: 0.30 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer {
    background:
      linear-gradient(90deg, rgba(2, 6, 23, 0.72) 0 15%, rgba(8, 47, 73, 0.78) 15% 77%, rgba(2, 6, 23, 0.82) 77% 100%),
      radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0) 38%) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.16),
      inset 184px 0 0 rgba(2, 6, 23, 0.24),
      inset -304px 0 0 rgba(2, 6, 23, 0.32),
      0 20px 52px rgba(2, 6, 23, 0.28),
      0 0 0 1px rgba(56, 189, 248, 0.050) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.13),
      inset 0 -1px 0 rgba(20, 184, 166, 0.11),
      -12px 0 28px rgba(14, 165, 233, 0.055) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel button {
    border-color: rgba(56, 189, 248, 0.20) !important;
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.82), rgba(2, 8, 23, 0.72)) !important;
    color: rgba(226, 244, 255, 0.80) !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.08) !important;
    opacity: 1 !important;
    filter: none !important;
    font-weight: 700 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel button.active {
    border-color: rgba(45, 212, 191, 0.54) !important;
    background:
      linear-gradient(135deg, rgba(20, 184, 166, 0.98), rgba(14, 165, 233, 0.92)) !important;
    color: #f8feff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      0 0 16px rgba(14, 165, 233, 0.22) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    height: 302px !important;
    bottom: -302px !important;
    opacity: 0.82 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue {
    border-color: rgba(56, 189, 248, 0.18) !important;
    background:
      linear-gradient(90deg, rgba(2, 6, 23, 0.86), rgba(8, 47, 73, 0.72) 50%, rgba(2, 6, 23, 0.86)) !important;
    color: rgba(226, 244, 255, 0.76) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.16),
      inset 0 -1px 0 rgba(20, 184, 166, 0.10),
      0 -1px 0 rgba(56, 189, 248, 0.070),
      0 18px 42px rgba(2, 6, 23, 0.34) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue .section-title,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue #queueSummary {
    color: rgba(226, 244, 255, 0.78) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue #queueCount,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue .queue-toolbar button {
    border-color: rgba(56, 189, 248, 0.18) !important;
    background: rgba(14, 165, 233, 0.16) !important;
    color: rgba(226, 244, 255, 0.86) !important;
    box-shadow: none !important;
  }
}

@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel::after {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: -118px !important;
    height: 118px !important;
    pointer-events: none !important;
    border-radius: 0 0 22px 22px !important;
    background:
      linear-gradient(180deg, rgba(15, 118, 110, 0.050), rgba(15, 118, 110, 0.018) 48%, rgba(15, 118, 110, 0)),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, 0) 0 30px, rgba(15, 118, 110, 0.022) 30px 31px, rgba(15, 118, 110, 0) 31px 60px) !important;
    opacity: 0.42 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-footer.template-workbench-footer {
    background:
      linear-gradient(90deg, rgba(240, 253, 250, 0.82), rgba(255, 255, 255, 0.72) 48%, rgba(240, 253, 250, 0.78)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.80),
      0 10px 22px rgba(15, 118, 110, 0.035) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-skin="pro"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel::after {
    background:
      linear-gradient(180deg, rgba(14, 165, 233, 0.072), rgba(14, 165, 233, 0.026) 50%, rgba(14, 165, 233, 0)),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0) 0 30px, rgba(56, 189, 248, 0.044) 30px 31px, rgba(56, 189, 248, 0) 31px 60px) !important;
    opacity: 0.58 !important;
  }
}

/* Trust sprint v305 final authority tail sentinel. */

/* Trust sprint v306: desktop UI consolidation after visible-review audit. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body #creationModePanel#creationModePanel#creationModePanel#creationModePanel.creation-mode-panel::after {
    height: 202px !important;
    top: 154px !important;
    color: rgba(15, 118, 110, 0.48) !important;
    opacity: 0.50 !important;
    transform: translateY(3px) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    height: 164px !important;
    bottom: -164px !important;
    opacity: 0.24 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    height: 208px !important;
    bottom: -208px !important;
    opacity: 0.52 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-start-guide].template-workbench-block .template-secondary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 360px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-start-guide].template-workbench-block .template-secondary-row button {
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-start-guide].template-workbench-block .template-start-more {
    max-width: 360px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Trust sprint v306 final authority tail sentinel. */

/* Trust sprint v307: visible-review convergence for desktop right rail, pro hierarchy, and template floor. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    overflow: visible !important;
    align-self: start !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 184px minmax(720px, 1fr) 328px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 328px !important;
    height: 334px !important;
    max-height: 344px !important;
    padding: 10px 11px 12px !important;
    gap: 6px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    min-height: 30px !important;
    max-height: 40px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    margin-bottom: 2px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer {
    border-color: rgba(56, 189, 248, 0.13) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.08),
      0 18px 42px rgba(2, 6, 23, 0.22) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row.create-skin-row {
    transform: translate(-14px, 16px) !important;
    opacity: 0.86 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row.create-skin-row::before,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row.create-skin-row::after {
    opacity: 0.34 !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    border-color: rgba(56, 189, 248, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.10),
      0 0 0 1px rgba(56, 189, 248, 0.045),
      0 18px 34px rgba(2, 6, 23, 0.18) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    min-height: min(690px, calc(100vh - 150px)) !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(318px, 1fr) auto !important;
    align-content: stretch !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid {
    align-self: stretch !important;
    min-height: 318px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel::after {
    height: 172px !important;
    bottom: -172px !important;
    opacity: 0.36 !important;
  }
}

/* Trust sprint v307 final authority tail sentinel. */

/* Trust sprint v308: desktop convergence lock for visible UI debt. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] {
    height: 318px !important;
    min-height: 312px !important;
    max-height: 326px !important;
    overflow: visible !important;
    align-content: start !important;
    gap: 5px !important;
    padding: 10px 11px 10px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint.price-hint {
    min-height: 20px !important;
    height: 22px !important;
    max-height: 24px !important;
    margin-bottom: 0 !important;
    padding: 4px 8px !important;
    line-height: 14px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip.delivery-stage-strip,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer:not(:has([data-creation-mode="professional"].active)) .delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary.settings-summary {
    min-height: 24px !important;
    height: 26px !important;
    max-height: 28px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer {
    grid-template-columns: 250px minmax(620px, 1fr) 388px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    width: 100% !important;
    max-width: 388px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel.template-workbench-panel.template-workbench-panel {
    min-height: 511px !important;
    grid-template-rows: 30px 40px 340px 38px !important;
    align-content: start !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel.template-workbench-panel.template-workbench-panel::after {
    height: 230px !important;
    bottom: -230px !important;
    opacity: 0.32 !important;
  }
}

/* Trust sprint v308 final authority tail sentinel. */

/* Trust sprint v309: template starter uses real guidance content and prompt preview exposes user-driven changes. */
.prompt-live-input-chain {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.prompt-live-input-chain article {
  display: grid;
  gap: 4px;
  min-height: 54px;
  padding: 8px 9px;
  border: 1px solid rgba(20, 184, 166, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.prompt-live-input-chain b {
  color: #0f766e;
  font-size: 11px;
  line-height: 1.2;
}

.prompt-live-input-chain small {
  color: rgba(15, 23, 42, 0.68);
  font-size: 11px;
  line-height: 1.35;
}

.template-workbench-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.template-workbench-next article {
  display: grid;
  gap: 5px;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(240, 253, 250, 0.72));
}

.template-workbench-next b {
  color: #0f766e;
  font-size: 12px;
}

.template-workbench-next small {
  color: rgba(15, 23, 42, 0.64);
  font-size: 11px;
  line-height: 1.42;
}

@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid {
    grid-template-columns: minmax(286px, 0.72fr) minmax(468px, 1.12fr) minmax(320px, 0.82fr) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel.template-workbench-panel.template-workbench-panel {
    min-height: 642px !important;
    grid-template-rows: 30px 40px minmax(352px, auto) 86px 38px !important;
    align-content: start !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel.template-workbench-panel.template-workbench-panel::after {
    height: 64px !important;
    bottom: -64px !important;
    opacity: 0.18 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-next.template-workbench-next {
    display: grid !important;
    grid-row: 4 !important;
    align-self: stretch !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row button {
    display: grid !important;
    min-height: 38px !important;
    height: 40px !important;
    padding: 6px 9px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-grid#templateWorkbenchGrid.template-workbench-grid .template-workbench-block.strong.template-workbench-block .template-choice-row.template-choice-row button:nth-of-type(5) {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block.strong .template-choice-row {
    grid-template-rows: repeat(5, minmax(38px, 40px)) !important;
    gap: 7px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-block[data-template-start-guide] .template-secondary-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    min-width: 320px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel .template-brief-guardrail small {
    display: block !important;
    max-height: 18px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .prompt-live-input-chain,
  .template-workbench-next {
    grid-template-columns: 1fr;
  }
}

/* Trust sprint v309 final authority tail sentinel. */

/* Trust sprint v310: template page convergence layer for real desktop/mobile workbench flow. */
@media (min-width: 1100px) {
  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    min-height: 642px !important;
    grid-template-rows: 30px 32px 340px 86px 38px !important;
    gap: 10px !important;
    align-content: start !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > .template-view-switch.template-view-switch {
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px !important;
    gap: 6px !important;
    align-self: start !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > .template-view-switch.template-view-switch button {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid {
    grid-template-columns: minmax(286px, 0.72fr) minmax(468px, 1.12fr) minmax(320px, 0.82fr) !important;
    min-height: 340px !important;
    align-self: start !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-next.template-workbench-next {
    display: grid !important;
    grid-row: 4 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-next.template-workbench-next article {
    min-height: 76px !important;
    align-content: center !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-footer.template-workbench-footer {
    grid-row: 5 !important;
    min-height: 38px !important;
    height: 38px !important;
    margin-top: 0 !important;
  }

  html[data-active-page="templates"][data-template-view="starter"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel::after {
    height: 64px !important;
    bottom: -64px !important;
    opacity: 0.18 !important;
  }
}

@media (max-width: 760px) {
  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel {
    padding: 12px 11px 92px !important;
    gap: 8px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-next.template-workbench-next {
    order: 5 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 0 !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-next.template-workbench-next article {
    min-height: 42px !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-next.template-workbench-next b {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-next.template-workbench-next small {
    display: none !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > .section-title {
    display: none !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > .template-view-switch.template-view-switch {
    order: 1 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 3px !important;
    gap: 5px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-panel.template-workbench-panel > .template-view-switch.template-view-switch button {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel {
    order: 2 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 178px !important;
    padding: 9px !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-launch,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-value,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-guardrail {
    padding: 6px !important;
    border-radius: 10px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-primary strong {
    font-size: 17px !important;
    line-height: 1.08 !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel button[data-template-brief-apply] {
    min-height: 34px !important;
    height: 34px !important;
    width: fit-content !important;
    padding: 0 14px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-guardrail,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-value small,
  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-flow small {
    display: none !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateBriefPanel#templateBriefPanel.template-brief-panel .template-brief-flow article {
    min-height: 24px !important;
    padding: 4px 5px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid {
    order: 3 !important;
    min-height: 0 !important;
    gap: 8px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-workbench="starter"].template-workbench-block.template-workbench-block {
    padding: 9px !important;
    gap: 8px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell #templateWorkbenchGrid#templateWorkbenchGrid.template-workbench-grid [data-template-workbench="starter"].template-workbench-block.template-workbench-block > span {
    display: none !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-choice-row.template-choice-row button {
    min-height: 48px !important;
    max-height: 52px !important;
    padding: 6px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-choice-row.template-choice-row button strong {
    font-size: 14px !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-footer.template-workbench-footer {
    order: 4 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 9px !important;
    overflow: hidden !important;
  }

  html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-footer.template-workbench-footer span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Trust sprint v310 final authority tail sentinel. */

/* Trust sprint v311: keep cute guided and pro diagnostic surfaces visually distinct. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain {
    display: none !important;
  }

  html[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview {
    min-height: 68px !important;
    height: 76px !important;
    max-height: 92px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview {
    min-height: 112px !important;
    height: 124px !important;
    max-height: 136px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Trust sprint v311 final authority tail sentinel. */

/* Trust sprint v312: desktop narrow create page becomes a compact command surface. */
@media (min-width: 761px) and (max-width: 1099px) {
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview {
    min-height: 72px !important;
    height: 88px !important;
    max-height: 96px !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-main,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-submit-grid,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-blueprint,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-decision,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-signature {
    display: none !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain article {
    min-height: 0 !important;
    height: 68px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain b {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-height: 1.18 !important;
  }
}

/* Trust sprint v312 final authority tail sentinel. */

/* Trust sprint v313: final narrow desktop live-preview clamp for 920px acceptance. */
@media (min-width: 761px) and (max-width: 1099px) {
  html:root:root:root:root body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview {
    min-height: 72px !important;
    height: 88px !important;
    max-height: 96px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: minmax(0, auto) !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview .prompt-live-main,
  html:root:root:root:root body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview .prompt-live-submit-grid,
  html:root:root:root:root body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview .prompt-live-blueprint,
  html:root:root:root:root body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview .prompt-live-decision,
  html:root:root:root:root body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview .prompt-live-signature {
    display: none !important;
  }

  html:root:root:root:root body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview .prompt-live-input-chain {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    height: 70px !important;
    max-height: 70px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview .prompt-live-input-chain article {
    min-height: 0 !important;
    height: 68px !important;
    max-height: 68px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  html:root:root:root:root body .app-shell.app-shell .panel.composer.panel.composer .prompt-live-preview.prompt-live-preview .prompt-live-input-chain small {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v313 final authority tail sentinel. */

/* Trust sprint v315: pro console evidence cards use one dark command language. */
@media (min-width: 1100px) {
  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain {
    height: 64px !important;
    max-height: 64px !important;
    gap: 7px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain article {
    min-height: 62px !important;
    height: 62px !important;
    max-height: 62px !important;
    padding: 8px 9px !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(8, 47, 73, 0.88), rgba(2, 20, 34, 0.86)) !important;
    border: 1px solid rgba(45, 212, 191, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.08) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain b {
    color: rgba(125, 211, 252, 0.92) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain small {
    color: rgba(226, 244, 255, 0.86) !important;
  }
}

/* Trust sprint v315 final authority tail sentinel. */

/* Trust sprint v316: prompt preview shows an input-to-submit evidence chain. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain article {
    position: relative !important;
    align-content: center !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain article::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 3px !important;
    border-radius: 999px !important;
    background: rgba(20, 184, 166, 0.42) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain b,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain small {
    padding-left: 8px !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain article {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 250, 0.78)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain article::before {
    background: linear-gradient(180deg, rgba(45, 212, 191, 0.86), rgba(56, 189, 248, 0.36)) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer {
    background:
      linear-gradient(180deg, rgba(2, 6, 23, 0) 0 64%, rgba(14, 165, 233, 0.045) 64% 78%, rgba(2, 6, 23, 0.12) 100%),
      repeating-linear-gradient(0deg, rgba(56, 189, 248, 0) 0 34px, rgba(56, 189, 248, 0.030) 34px 35px, rgba(56, 189, 248, 0) 35px 70px),
      linear-gradient(90deg, rgba(2, 6, 23, 0.74) 0 15%, rgba(8, 47, 73, 0.76) 15% 77%, rgba(2, 6, 23, 0.84) 77% 100%),
      radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.11), rgba(56, 189, 248, 0) 38%) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.62), rgba(2, 8, 23, 0.50)),
      linear-gradient(90deg, rgba(45, 212, 191, 0.050), rgba(56, 189, 248, 0.018)) !important;
    background-color: rgba(8, 47, 73, 0.62) !important;
    border-color: rgba(56, 189, 248, 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.12),
      inset 4px 0 0 rgba(45, 212, 191, 0.16),
      0 18px 34px rgba(2, 6, 23, 0.18) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box #promptToolbar {
    background: linear-gradient(90deg, rgba(8, 47, 73, 0.38), rgba(2, 8, 23, 0.16)) !important;
    background-color: rgba(8, 47, 73, 0.38) !important;
    border-color: rgba(56, 189, 248, 0.12) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"]::before {
    visibility: hidden !important;
    color: transparent !important;
    text-shadow: none !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(240, 253, 250, 0.76)),
      linear-gradient(90deg, rgba(15, 118, 110, 0.040), rgba(20, 184, 166, 0.014)) !important;
    border-color: rgba(15, 118, 110, 0.11) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel {
    margin-top: 14px !important;
    min-height: 132px !important;
    height: 136px !important;
    max-height: 142px !important;
    padding: 10px 8px 8px !important;
    gap: 6px !important;
    align-self: start !important;
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.56), rgba(2, 8, 23, 0.62)),
      linear-gradient(90deg, rgba(56, 189, 248, 0.05), rgba(45, 212, 191, 0.02)) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.10),
      inset 3px 0 0 rgba(45, 212, 191, 0.18),
      0 12px 26px rgba(2, 6, 23, 0.16) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body #creationModePanel#creationModePanel#creationModePanel.creation-mode-panel button {
    min-height: 25px !important;
    height: 25px !important;
    max-height: 26px !important;
    padding: 0 10px !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 8px !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(125, 211, 252, 0.08),
      inset 2px 0 0 rgba(56, 189, 248, 0.10) !important;
  }
}

/* Trust sprint v317: emergency UI stop-the-bleed pass for the create confirmation rail. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    align-content: start !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 276px !important;
    height: 286px !important;
    max-height: 296px !important;
    padding: 9px 10px !important;
    gap: 4px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 292px !important;
    height: 304px !important;
    max-height: 318px !important;
    padding: 9px 10px !important;
    gap: 4px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel {
    gap: 4px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel {
    grid-template-rows: 46px 28px 24px 20px !important;
    height: 126px !important;
    max-height: 128px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel {
    grid-template-rows: 48px 26px 32px 22px !important;
    height: 136px !important;
    max-height: 138px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-order-main {
    min-height: 46px !important;
    height: 48px !important;
    max-height: 50px !important;
    padding: 6px 8px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-order-main small,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-node-status small,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip small,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary small,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint small {
    display: none !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-node-status {
    min-height: 28px !important;
    height: 30px !important;
    max-height: 32px !important;
    padding: 4px 8px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-node-status strong,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-node-status b {
    max-width: 86px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] [data-delivery-confirm-summary] {
    min-height: 26px !important;
    height: 28px !important;
    max-height: 30px !important;
    padding: 0 8px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip {
    min-height: 24px !important;
    height: 26px !important;
    max-height: 28px !important;
    gap: 2px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip article {
    padding: 3px 5px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-param-rail {
    margin-top: 0 !important;
    min-height: 22px !important;
    height: 24px !important;
    max-height: 26px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary {
    min-height: 22px !important;
    height: 24px !important;
    max-height: 26px !important;
    padding: 3px 8px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    min-height: 18px !important;
    height: 20px !important;
    max-height: 22px !important;
    padding: 2px 8px !important;
    margin: 0 !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .queue.queue {
    min-height: 38px !important;
    height: 40px !important;
    max-height: 44px !important;
  }
}

/* Trust sprint v317 final authority tail sentinel. */

/* Trust sprint v318: desktop create page reads as one quiet workflow instead of three competing panels. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 188px minmax(700px, 1fr) 304px !important;
    gap: 18px !important;
    padding: 18px 20px 16px !important;
    align-items: start !important;
    background:
      linear-gradient(90deg, rgba(240, 253, 250, 0.72) 0 16%, rgba(255, 255, 255, 0.92) 16% 77%, rgba(240, 253, 250, 0.70) 77% 100%) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    min-height: 468px !important;
    height: 492px !important;
    max-height: 520px !important;
    padding: 12px 12px 10px !important;
    gap: 8px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)) !important;
    border-color: rgba(15, 118, 110, 0.12) !important;
    box-shadow:
      0 16px 34px rgba(15, 118, 110, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #prompt {
    min-height: 106px !important;
    height: 112px !important;
    max-height: 128px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(15, 118, 110, 0.04) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptToolbar,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick {
    border-color: rgba(15, 118, 110, 0.10) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview {
    min-height: 74px !important;
    height: 86px !important;
    max-height: 96px !important;
    background: linear-gradient(90deg, rgba(240, 253, 250, 0.82), rgba(255, 255, 255, 0.72)) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain {
    height: 58px !important;
    max-height: 58px !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain article {
    height: 56px !important;
    max-height: 56px !important;
    padding: 7px 8px !important;
    background: rgba(255, 255, 255, 0.72) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 286px !important;
    height: 296px !important;
    max-height: 310px !important;
    padding: 10px !important;
    gap: 5px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(240, 253, 250, 0.52)) !important;
    border-color: rgba(15, 118, 110, 0.09) !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] #generateBtn#generateBtn {
    min-height: 40px !important;
    height: 42px !important;
    max-height: 44px !important;
    box-shadow: none !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-node-status,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] [data-delivery-confirm-summary],
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    background: rgba(255, 255, 255, 0.34) !important;
    border-color: rgba(15, 118, 110, 0.07) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 230px minmax(650px, 1fr) 338px !important;
    gap: 16px !important;
    padding: 16px 18px !important;
    background:
      linear-gradient(90deg, rgba(2, 6, 23, 0.88) 0 17%, rgba(7, 19, 36, 0.92) 17% 77%, rgba(2, 6, 23, 0.90) 77% 100%),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.035) 0 1px, transparent 1px 68px) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    min-height: 438px !important;
    height: 462px !important;
    max-height: 486px !important;
    padding: 12px !important;
    gap: 8px !important;
    background:
      linear-gradient(180deg, rgba(5, 22, 38, 0.94), rgba(2, 8, 23, 0.90)),
      linear-gradient(90deg, rgba(45, 212, 191, 0.06), rgba(56, 189, 248, 0.018)) !important;
    background-color: rgba(5, 22, 38, 0.94) !important;
    border-color: rgba(56, 189, 248, 0.26) !important;
    box-shadow:
      inset 4px 0 0 rgba(45, 212, 191, 0.18),
      inset 0 1px 0 rgba(125, 211, 252, 0.13),
      0 18px 38px rgba(0, 0, 0, 0.18) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #prompt {
    min-height: 116px !important;
    height: 126px !important;
    max-height: 140px !important;
    background: rgba(2, 8, 23, 0.60) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
    color: rgba(226, 244, 255, 0.94) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview {
    min-height: 96px !important;
    height: 106px !important;
    max-height: 118px !important;
    background: linear-gradient(180deg, rgba(8, 47, 73, 0.52), rgba(2, 8, 23, 0.40)) !important;
    border-color: rgba(56, 189, 248, 0.20) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 306px !important;
    height: 318px !important;
    max-height: 336px !important;
    padding: 10px !important;
    gap: 5px !important;
    background:
      linear-gradient(180deg, rgba(8, 47, 73, 0.76), rgba(2, 6, 23, 0.88)),
      linear-gradient(90deg, rgba(45, 212, 191, 0.04), rgba(56, 189, 248, 0.025)) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
  }

  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] #deliveryOrderPanel,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-node-status,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] [data-delivery-confirm-summary],
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] .delivery-stage-strip,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    background: rgba(2, 8, 23, 0.42) !important;
    border-color: rgba(56, 189, 248, 0.12) !important;
    box-shadow: none !important;
  }
}

/* Trust sprint v318 final authority tail sentinel. */

/* Trust sprint v319: logged-in desktop create page acceptance layout. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 250px minmax(720px, 1fr) 388px !important;
    grid-template-rows: 34px 34px 138px 132px 1fr !important;
    grid-auto-rows: minmax(0, auto) !important;
    gap: 12px !important;
    align-items: start !important;
    box-sizing: border-box !important;
    min-height: 640px !important;
    height: 640px !important;
    max-height: 660px !important;
    padding: 16px 18px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer > .section-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    position: static !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 96px !important;
    min-height: 32px !important;
    height: 34px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer > .section-title h3 {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #importPhotoBtn#importPhotoBtn {
    justify-self: end !important;
    align-self: center !important;
    min-width: 88px !important;
    width: 88px !important;
    max-width: 96px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 32px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    z-index: 5 !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row.create-toolbar-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    align-self: start !important;
    position: static !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    min-height: 30px !important;
    height: 32px !important;
    max-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row > span {
    display: none !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row {
    justify-self: end !important;
    align-self: center !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 360px !important;
    min-width: 0 !important;
    max-width: 360px !important;
    min-height: 28px !important;
    height: 30px !important;
    max-height: 32px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row .skin {
    min-width: 0 !important;
    min-height: 22px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 0 8px !important;
    line-height: 24px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row .skin small,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row .skin em {
    display: none !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #creationModePanel#creationModePanel.creation-mode-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    position: static !important;
    align-self: start !important;
    min-height: 132px !important;
    height: 136px !important;
    max-height: 138px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel.track-panel {
    grid-column: 1 !important;
    grid-row: 4 !important;
    position: static !important;
    align-self: start !important;
    min-height: 126px !important;
    height: 132px !important;
    max-height: 136px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel .track-card {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 32px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel .track-card small {
    display: none !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    grid-column: 2 !important;
    grid-row: 3 / 6 !important;
    align-self: start !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: 520px !important;
    max-height: 530px !important;
    margin: 0 !important;
    padding: 12px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    grid-column: 3 !important;
    grid-row: 3 / 6 !important;
    position: static !important;
    align-self: start !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptToolbar {
    min-height: 26px !important;
    height: 28px !important;
    max-height: 30px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #skinWorkbenchCue {
    min-height: 34px !important;
    height: 38px !important;
    max-height: 42px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #prompt {
    min-height: 104px !important;
    height: 112px !important;
    max-height: 124px !important;
    overflow: auto !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptActionDock.prompt-action-dock {
    min-height: 38px !important;
    height: 42px !important;
    max-height: 44px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview {
    min-height: 86px !important;
    height: 96px !important;
    max-height: 108px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-main,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-submit-grid,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-blueprint,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-decision,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-signature,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-professional {
    display: none !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-pro-evidence,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-understanding-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    height: 72px !important;
    max-height: 72px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-input-chain article,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-live-pro-evidence article,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview .prompt-understanding-grid article {
    min-height: 0 !important;
    height: 70px !important;
    max-height: 70px !important;
    padding: 7px 8px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview small,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview em,
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-height: 1.18 !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #blankStarterQuickPanel.blank-starter-quick:not(.hidden) {
    min-height: 66px !important;
    height: 72px !important;
    max-height: 76px !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer #deliveryOrderPanel {
    overflow: hidden !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 250px minmax(720px, 1fr) 388px !important;
    background:
      linear-gradient(90deg, rgba(2, 6, 23, 0.88) 0 17%, rgba(7, 19, 36, 0.92) 17% 77%, rgba(2, 6, 23, 0.90) 77% 100%),
      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.035) 0 1px, transparent 1px 68px) !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 276px !important;
    height: 286px !important;
    max-height: 300px !important;
    padding: 9px !important;
    gap: 8px !important;
  }

  html[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer,
  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer {
    grid-template-columns: 188px minmax(760px, 1fr) 340px !important;
  }

  html[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"],
  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 300px !important;
    height: 316px !important;
    max-height: 328px !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  html[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer #promptLivePreview.prompt-live-preview {
    min-height: 86px !important;
    height: 96px !important;
    max-height: 106px !important;
  }

  html[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer #deliveryOrderPanel,
  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer #deliveryOrderPanel {
    height: 150px !important;
    max-height: 154px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .queue.queue {
    min-height: 44px !important;
    height: 46px !important;
    max-height: 48px !important;
    overflow: hidden !important;
  }
}

/* Trust sprint v319 final authority tail sentinel. */

/* Trust sprint v320: real-state desktop create page scroll-height cleanup. */
@media (min-width: 1100px) {
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::before,
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    top: auto !important;
    bottom: auto !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Trust sprint v320 final authority tail sentinel. */

/* Trust sprint v321: visible acceptance lock for the create workbench. */
@media (min-width: 1100px) {
  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .create-toolbar-row.create-toolbar-row {
    grid-template-columns: minmax(0, 1fr) 276px !important;
    min-height: 32px !important;
    height: 34px !important;
    max-height: 36px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .create-skin-row.create-skin-row {
    width: 276px !important;
    max-width: 276px !important;
    height: 28px !important;
    max-height: 30px !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel {
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.06), inset 0 196px 0 rgba(15, 118, 110, 0.035) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell .panel.composer.panel.composer .creation-mode-panel.creation-mode-panel button {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 32px !important;
  }

  html[data-active-page="create"][data-skin="clean"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel.track-panel {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
  }

  html[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer .track-panel.track-panel {
    min-height: 204px !important;
    height: 210px !important;
    max-height: 216px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer {
    min-height: 640px !important;
    height: 640px !important;
    max-height: 660px !important;
    grid-template-rows: 34px 34px 184px 108px 1fr !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .prompt-box.prompt-box {
    height: 460px !important;
    max-height: 468px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer #prompt#prompt {
    min-height: 132px !important;
    height: 138px !important;
    max-height: 146px !important;
  }

  html[data-active-page="create"][data-skin="pro"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    height: 276px !important;
    max-height: 286px !important;
  }

  html[data-active-page="create"][data-skin="cute"] body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 360px !important;
    height: 366px !important;
    max-height: 372px !important;
  }

  html[data-active-page="create"] body #createQueuePanel#createQueuePanel.queue .queue-safety-note {
    display: block !important;
    visibility: visible !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 26px !important;
    max-height: 28px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .generation-settings-panel,
  html[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .settings-summary,
  html[data-active-page="create"]:not([data-skin="pro"]) body .app-shell.app-shell .panel.composer.panel.composer .delivery-stack.delivery-stack[data-confirm-console="true"] .price-hint {
    display: grid !important;
    visibility: visible !important;
  }
}

/* Trust sprint v321 final authority tail sentinel. */

/* Launch cleanup v1: one usable create workflow, no competing button walls. */
@media (min-width: 900px) {
  html[data-active-page="create"] body .app-shell {
    max-width: 1320px !important;
    padding-bottom: 40px !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    grid-template-rows: auto auto auto !important;
    gap: 16px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 20px !important;
    overflow: visible !important;
    align-items: start !important;
    background: #f7fbfa !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer::before,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer::after,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer .create-toolbar-row,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer .mode-row,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModeSummary,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #blankStarterPanel,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #mobileFlow,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer .track-panel,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #trackGuide,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #skinWorkbenchCue,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptActionDock,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #createShortcutDock,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptPreflight {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer > .section-title {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 0 2px 4px !important;
    border-bottom: 1px solid rgba(15, 118, 110, 0.12) !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer > .section-title h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #importPhotoBtn {
    min-width: 96px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f766e !important;
    border: 1px solid rgba(15, 118, 110, 0.22) !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 6px !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #eaf6f3 !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel button {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #28433f !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel button.active {
    background: #0f766e !important;
    color: #ffffff !important;
    border-color: #0f766e !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel button small {
    display: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer .prompt-box.prompt-box {
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-height: 500px !important;
    height: auto !important;
    max-height: none !important;
    padding: 16px !important;
    gap: 12px !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptToolbar {
    min-height: 34px !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 0 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 118, 110, 0.10) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptToolbar button {
    min-width: 56px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: #f2f7f5 !important;
    color: #0f766e !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #prompt#prompt {
    min-height: 190px !important;
    height: 210px !important;
    max-height: 260px !important;
    padding: 16px !important;
    overflow: auto !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    background: #fbfdfc !important;
    border: 1px solid rgba(15, 118, 110, 0.14) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(15, 118, 110, 0.04) !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptLivePreview.prompt-live-preview:not(.hidden) {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 170px !important;
    overflow: auto !important;
    padding: 10px !important;
    background: #f5faf8 !important;
    border: 1px solid rgba(15, 118, 110, 0.10) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptLivePreview.prompt-live-preview .prompt-live-main,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptLivePreview.prompt-live-preview .prompt-live-submit-grid,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptLivePreview.prompt-live-preview .prompt-live-blueprint,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptLivePreview.prompt-live-preview .prompt-live-decision,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptLivePreview.prompt-live-preview .prompt-live-signature,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptLivePreview.prompt-live-preview .prompt-live-professional {
    display: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptLivePreview.prompt-live-preview .prompt-live-input-chain,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptLivePreview.prompt-live-preview .prompt-live-pro-evidence,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptLivePreview.prompt-live-preview .prompt-understanding-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    height: auto !important;
    max-height: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptLivePreview.prompt-live-preview article {
    min-height: 54px !important;
    height: auto !important;
    max-height: 72px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 118, 110, 0.09) !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #blankStarterQuickPanel.blank-starter-quick {
    display: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    grid-column: 2 !important;
    grid-row: 3 !important;
    position: sticky !important;
    top: 16px !important;
    align-self: start !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 14px !important;
    gap: 10px !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #generateBtn#generateBtn {
    min-height: 46px !important;
    height: 46px !important;
    max-height: 48px !important;
    border-radius: 10px !important;
    background: #0f766e !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #deliveryOrderPanel,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer .delivery-order-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer .delivery-node-status,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer [data-delivery-confirm-summary],
  html[data-active-page="create"] body #createComposer#createComposer#createComposer .delivery-stage-strip,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer .settings-summary,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer .price-hint {
    height: auto !important;
    max-height: none !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    background: #f7fbfa !important;
    border: 1px solid rgba(15, 118, 110, 0.10) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer .pricing-controls {
    display: none !important;
  }

  html[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    height: auto !important;
    max-height: none !important;
    max-width: 1320px !important;
    margin: 14px auto 0 !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 118, 110, 0.10) !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue .queue-toolbar {
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    gap: 6px !important;
  }

  html[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue .queue-toolbar button:not(#queueTaskCenterBtn) {
    display: none !important;
  }

  html[data-active-page="create"] body #createQueuePanel#createQueuePanel#createQueuePanel.queue .queue-safety-note {
    display: block !important;
    height: auto !important;
    max-height: 32px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 899px) {
  html[data-active-page="create"] body #createComposer#createComposer#createComposer {
    gap: 12px !important;
    padding: 14px !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer .create-toolbar-row,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer .mode-row,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModeSummary,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #blankStarterPanel,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer .track-panel,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #trackGuide,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #skinWorkbenchCue,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptActionDock,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #createShortcutDock,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #promptPreflight {
    display: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 6px !important;
    height: auto !important;
    max-height: none !important;
    background: #eaf6f3 !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel button {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 10px !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel button small {
    display: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer .prompt-box.prompt-box,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    height: auto !important;
    max-height: none !important;
    padding: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #prompt#prompt {
    min-height: 180px !important;
    height: 190px !important;
    max-height: 240px !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #blankStarterQuickPanel.blank-starter-quick {
    display: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer .pricing-controls {
    display: none !important;
  }
}

/* Launch cleanup v1 final authority tail sentinel. */

/* Launch cleanup v2: remove old decorative mode-panel spine that still made the first screen look crowded. */
@media (min-width: 900px) {
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel#creationModePanel::before,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel#creationModePanel::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel#creationModePanel {
    min-height: 54px !important;
    height: 56px !important;
    max-height: 58px !important;
    grid-auto-rows: 42px !important;
    align-content: center !important;
    background: #eaf6f3 !important;
    border-radius: 10px !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel#creationModePanel button {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
  }
}

@media (max-width: 899px) {
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel#creationModePanel::before,
  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel#creationModePanel::after {
    content: none !important;
    display: none !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel#creationModePanel {
    min-height: 96px !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Launch cleanup v2 final authority tail sentinel. */

/* Launch cleanup v3: collapse the create-mode band into a compact segmented row. */
@media (min-width: 900px) {
  html[data-active-page="create"] body #createComposer#createComposer#createComposer {
    grid-template-rows: auto 56px auto !important;
    gap: 14px !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel#creationModePanel {
    min-height: 54px !important;
    height: 56px !important;
    max-height: 58px !important;
    align-self: start !important;
    align-content: center !important;
    grid-auto-rows: 42px !important;
    overflow: hidden !important;
    background: #f2faf7 !important;
    border-color: rgba(15, 118, 110, 0.14) !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer #creationModePanel#creationModePanel#creationModePanel button {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
  }

  html[data-active-page="create"] body #createComposer#createComposer#createComposer .delivery-stack.delivery-stack[data-confirm-console="true"] {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Launch cleanup v3 final authority tail sentinel. */

/* Launch cleanup v4: remove the legacy skin switcher from the create page. */
html[data-active-page="create"] body #createComposer#createComposer#createComposer .create-toolbar-row.create-toolbar-row,
html[data-active-page="create"] body #createComposer#createComposer#createComposer .create-skin-row.create-skin-row,
html[data-active-page="create"] body #createComposer#createComposer#createComposer .create-skin-row.create-skin-row [data-skin] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Launch cleanup v4 final authority tail sentinel. */

/* Launch cleanup v5: keep the mine page account-first for launch. */
html[data-active-page="mine"] body .guide-row[data-page="mine"],
html[data-active-page="mine"] body .panel[data-page="mine"]:has(.skin-row) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Launch cleanup v5 final authority tail sentinel. */
/* Launch cleanup v322: mobile create page should not have fixed tabbar covering the confirm console. */
@media (max-width: 899px) {
  html[data-active-page="create"] body .tabbar.tabbar {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    margin: 14px 18px 20px !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
  }

  html[data-active-page="create"] body .app-shell.app-shell {
    padding-bottom: 24px !important;
  }
}

/* Launch cleanup v323: keep template footer actions large enough for launch QA. */
html[data-active-page="templates"] body .app-shell.app-shell .template-workbench-footer.template-workbench-footer .template-footer-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 68px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}