/* Dr.Prompt overseas release overrides.
   Loaded after the legacy stylesheet so the public web theme remains stable
   while the workflow DOM and its behavior stay untouched. */

:root {
  --release-bg: #09090b;
  --release-surface: #111115;
  --release-surface-strong: #151519;
  --release-line: #2b2b32;
  --release-line-strong: #36363e;
  --release-ink: #f4f4f1;
  --release-muted: #9a9a9d;
  --release-purple: #7658e8;
  --release-purple-soft: rgba(118, 88, 232, .16);
  --release-red: #d94b5b;
}

body {
  background: var(--release-bg);
}

#app:not([data-active-view="home"]),
#app:not([data-active-view="home"]) > .shell,
#app:not([data-active-view="home"]) .view {
  min-width: 0;
  max-width: 100%;
  background: var(--release-bg);
  color: var(--release-ink);
}

#app:not([data-active-view="home"]) > .sidebar > .sidebar-shell,
#app:not([data-active-view="home"]) .topbar {
  background: rgba(9, 9, 11, .94);
  border-color: var(--release-line);
  box-shadow: none;
  color: var(--release-ink);
}

#app:not([data-active-view="home"]) .topbar h1,
#app:not([data-active-view="home"]) .topbar .eyebrow {
  color: var(--release-ink);
}

#app:not([data-active-view="home"]) .topbar p:last-child,
#app:not([data-active-view="home"]) .topbar .topbar-copy > p:last-child {
  color: var(--release-muted);
}

#app:not([data-active-view="home"]) .panel,
#app:not([data-active-view="home"]) .page-hero,
#app:not([data-active-view="home"]) .schema-card,
#app:not([data-active-view="home"]) .library-card,
#app:not([data-active-view="home"]) .template-card,
#app:not([data-active-view="home"]) .agent-map-card,
#app:not([data-active-view="home"]) .band-card,
#app:not([data-active-view="home"]) .api-card,
#app:not([data-active-view="home"]) .task-session-board {
  border-color: var(--release-line);
  background: var(--release-surface);
  box-shadow: none;
  color: var(--release-ink);
}

#app:not([data-active-view="home"]) input,
#app:not([data-active-view="home"]) textarea,
#app:not([data-active-view="home"]) select {
  border-color: var(--release-line-strong);
  background: var(--release-surface);
  color: var(--release-ink);
}

#app:not([data-active-view="home"]) input::placeholder,
#app:not([data-active-view="home"]) textarea::placeholder {
  color: #818188;
  opacity: 1;
}

#app:not([data-active-view="home"]) .reactor-shell,
#app:not([data-active-view="home"]) .reactor-flow-map,
#app:not([data-active-view="home"]) .reactor-core,
#app:not([data-active-view="home"]) .composer-card,
#app:not([data-active-view="home"]) .output-panel {
  min-width: 0;
  max-width: 100%;
  border-color: var(--release-line) !important;
  background: #0d0d10 !important;
  background-image: none !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .reactor-flow-map::before,
#app:not([data-active-view="home"]) .reactor-flow-map::after,
#app:not([data-active-view="home"]) .reactor-flow-map .reactor-halo,
#app:not([data-active-view="home"]) .reactor-flow-map .reactor-ring,
#app:not([data-active-view="home"]) .reactor-flow-map .reactor-scanline {
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .reactor-core-top,
#app:not([data-active-view="home"]) .composer-stage,
#app:not([data-active-view="home"]) .composer-bottombar,
#app:not([data-active-view="home"]) .reactor-core-status {
  border-color: var(--release-line) !important;
  background: transparent !important;
}

#app:not([data-active-view="home"]) .composer-card .composer-first-frame-prompt-toggle,
#app:not([data-active-view="home"]) .composer-card .first-frame-size-selector,
#app:not([data-active-view="home"]) .composer-card .first-frame-size-selector button,
#app:not([data-active-view="home"]) .composer-card .composer-launcher,
#app:not([data-active-view="home"]) .composer-card .composer-reference-strip {
  border-color: var(--release-line-strong);
  background: var(--release-surface-strong);
  color: #dedee2;
}

#app:not([data-active-view="home"]) .composer-first-frame-prompt-copy,
#app:not([data-active-view="home"]) .composer-first-frame-prompt-copy strong {
  color: var(--release-ink) !important;
}

#app:not([data-active-view="home"]) .composer-first-frame-prompt-copy small,
#app:not([data-active-view="home"]) .composer-first-frame-size-control > span,
#app:not([data-active-view="home"]) .composer-control-label,
#app:not([data-active-view="home"]) .reactor-core-status,
#app:not([data-active-view="home"]) .composer-bottombar {
  color: var(--release-muted) !important;
}

#app:not([data-active-view="home"]) .composer-first-frame-prompt-toggle input {
  accent-color: var(--release-purple);
}

#app:not([data-active-view="home"]) .first-frame-size-selector button[aria-checked="true"],
#app:not([data-active-view="home"]) .first-frame-size-selector button.active,
#app:not([data-active-view="home"]) .primary-btn,
#app:not([data-active-view="home"]) .composer-send-btn {
  border-color: var(--release-purple) !important;
  background: var(--release-purple) !important;
  color: #fff !important;
}

#app:not([data-active-view="home"]) .primary-btn:hover,
#app:not([data-active-view="home"]) .composer-send-btn:hover {
  background: #8d73f2 !important;
}

/* Keep the six Creative Engine nodes and the ten review skills visible, but
   replace the legacy gold/cyan lighting with neutral surfaces and purple
   selection states. */
#app[data-creation-mode="fast"] .fast-flow-rail {
  min-width: 0;
  max-width: 100%;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-color: rgba(118, 88, 232, .5) transparent;
}

#app[data-creation-mode="fast"] .fast-flow-rail::before,
#app[data-creation-mode="fast"] .fast-flow-rail::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

#app[data-creation-mode="fast"] .fast-flow-node {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  color: #b8b8c0 !important;
  box-shadow: none !important;
}

#app[data-creation-mode="fast"] .fast-flow-node::before,
#app[data-creation-mode="fast"] .fast-flow-node::after,
#app[data-creation-mode="fast"] .review-skill-chip[data-status="running"]::after {
  content: none !important;
  animation: none !important;
}

#app[data-creation-mode="fast"] .fast-flow-node > span {
  border-color: rgba(118, 88, 232, .58) !important;
  background: #17151d !important;
  background-image: none !important;
  color: #c4b9ff !important;
  box-shadow: 0 0 0 4px rgba(118, 88, 232, .08) !important;
}

#app[data-creation-mode="fast"] .fast-flow-node strong,
#app[data-creation-mode="fast"] .fast-flow-node small {
  color: inherit !important;
}

#app[data-creation-mode="fast"] .fast-flow-node:hover,
#app[data-creation-mode="fast"] .fast-flow-node[data-status="running"],
#app[data-creation-mode="fast"] .fast-flow-node[data-status="done"] {
  color: var(--release-ink) !important;
}

#app[data-creation-mode="fast"] .fast-flow-node:hover > span,
#app[data-creation-mode="fast"] .fast-flow-node[data-status="running"] > span {
  border-color: var(--release-purple) !important;
  background: #241b38 !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px rgba(118, 88, 232, .14) !important;
}

#app[data-creation-mode="fast"] .fast-flow-node[data-status="error"] > span,
#app[data-creation-mode="fast"] .review-skill-chip[data-status="error"] {
  border-color: rgba(217, 75, 91, .72) !important;
  background: #241317 !important;
  color: #ffd9de !important;
}

#app[data-creation-mode="fast"] .review-console,
#app[data-creation-mode="fast"] .review-skill-chip {
  border-color: var(--release-line-strong) !important;
  background: var(--release-surface) !important;
  background-image: none !important;
  color: #b8b8c0 !important;
  box-shadow: none !important;
}

#app[data-creation-mode="fast"] .review-console[data-status="running"],
#app[data-creation-mode="fast"] .review-skill-chip[data-status="running"] {
  border-color: rgba(118, 88, 232, .62) !important;
  background: #17151d !important;
  color: var(--release-ink) !important;
  box-shadow: 0 0 0 1px rgba(118, 88, 232, .12) !important;
  animation: none !important;
}

#app[data-creation-mode="fast"] .review-skill-chip[data-status="running"] small::before {
  background: #9b7bff !important;
  box-shadow: 0 0 8px rgba(155, 123, 255, .7) !important;
}

#app[data-creation-mode="fast"] .review-skill-grid {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
  scrollbar-color: rgba(118, 88, 232, .5) transparent;
}

/* Quick Start keeps its compact inline style dock. Creative Engine retains
   the detailed style launcher and panel; the duplicate dock is hidden there. */
#app[data-creation-mode="fast"] .quick-start-style-dock {
  display: none !important;
}

#app:not([data-active-view="home"]) .composer-launcher[data-composer-panel="styles"] {
  border-color: #3a354b !important;
  background: transparent !important;
  color: #ded9ff !important;
}

#app:not([data-active-view="home"]) .composer-launcher[data-composer-panel="styles"]:hover,
#app:not([data-active-view="home"]) .composer-launcher[data-composer-panel="styles"]:focus-visible {
  border-color: var(--release-purple) !important;
  background: rgba(118, 88, 232, .08) !important;
}

/* On desktop the ten-dimension review remains a single readable rail. The
   mobile rule below intentionally switches back to fixed-width horizontal
   scrolling so every label remains legible on narrow screens. */
@media (min-width: 861px) {
  #app[data-creation-mode="fast"] .review-skill-chip {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* Prevent toolbar labels from forcing the page wider than a phone viewport. */
#app:not([data-active-view="home"]) .prompt-stage-card .prompt-head,
#app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar {
  min-width: 0;
  max-width: 100%;
}

#app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar {
  overflow-x: visible !important;
  flex-wrap: wrap !important;
  white-space: normal !important;
}

#app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar .small {
  white-space: normal !important;
}

@media (max-width: 860px) {
  #app[data-creation-mode="fast"] .fast-flow-rail {
    display: flex !important;
    gap: 10px;
    padding: 14px 12px 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: stretch;
  }

  #app[data-creation-mode="fast"] .fast-flow-node {
    flex: 0 0 132px;
    grid-template-rows: 48px auto auto !important;
    min-height: 112px;
  }

  #app[data-creation-mode="fast"] .fast-flow-node > span {
    width: 48px !important;
    height: 48px !important;
    font-size: 11px;
  }

  #app[data-creation-mode="fast"] .review-skill-grid {
    display: flex !important;
    gap: 8px;
    overflow-x: auto !important;
    overflow-y: hidden;
    padding-bottom: 5px;
  }

  #app[data-creation-mode="fast"] .review-skill-chip {
    flex: 0 0 124px;
  }
}

@media (max-width: 640px) {
  #app:not([data-active-view="home"]) .output-panel,
  #app:not([data-active-view="home"]) .output-overview,
  #app:not([data-active-view="home"]) .output-overview > *,
  #app:not([data-active-view="home"]) .support-grid,
  #app:not([data-active-view="home"]) .support-grid > *,
  #app:not([data-active-view="home"]) .workbench-action-strip,
  #app:not([data-active-view="home"]) .prompt-stage-card,
  #app:not([data-active-view="home"]) .prompt-stage-card .prompt-head,
  #app:not([data-active-view="home"]) .prompt-stage-card .prompt-body,
  #app:not([data-active-view="home"]) .first-frame-workspace,
  #app:not([data-active-view="home"]) .first-frame-pane {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #app:not([data-active-view="home"]) .output-panel {
    overflow: hidden !important;
  }

  #app:not([data-active-view="home"]) .output-overview {
    align-self: stretch;
  }

  #app:not([data-active-view="home"]) .prompt-stage-card {
    padding: 14px !important;
  }

  #app:not([data-active-view="home"]) .prompt-stage-card .prompt-head > div:first-child {
    min-width: 0 !important;
  }

  #app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  #app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar .small {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 6px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }

  #app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar .small {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding-inline: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 640px) {
  #app[data-creation-mode="fast"] .reactor-core {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #app[data-creation-mode="fast"] .reactor-core > *,
  #app[data-creation-mode="fast"] .reactor-core .composer-bottombar,
  #app[data-creation-mode="fast"] .reactor-core .composer-bottom-left,
  #app[data-creation-mode="fast"] .reactor-core .composer-bottom-right,
  #app[data-creation-mode="fast"] .reactor-core .composer-inline-control,
  #app[data-creation-mode="fast"] .reactor-core .segmented.compact {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #app[data-creation-mode="fast"] .reactor-core .composer-bottombar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #app[data-creation-mode="fast"] .reactor-core .composer-bottom-left {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #app[data-creation-mode="fast"] .reactor-core .composer-bottom-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  #app[data-creation-mode="fast"] .reactor-core .composer-inline-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #app[data-creation-mode="fast"] .reactor-core .segmented.compact {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    width: 100% !important;
    gap: 6px !important;
  }

  #app[data-creation-mode="fast"] .reactor-core .segmented.compact > .segment,
  #app[data-creation-mode="fast"] .reactor-core .segment-value-option {
    min-width: 0 !important;
  }

  #app[data-creation-mode="fast"] .reactor-core .segmented.compact > .segment {
    flex: 1 1 0 !important;
    padding-inline: 8px !important;
    white-space: nowrap;
  }

  #app[data-creation-mode="fast"] .reactor-core .segment-value-option {
    display: inline-flex !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #app[data-creation-mode="fast"] .reactor-core .segment-value-option > .segment {
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 8px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #app[data-creation-mode="fast"] .reactor-core .segment-value-option .duration-row.compact {
    flex: 0 0 auto !important;
    min-width: 75px !important;
    padding-right: 5px !important;
  }

  #app[data-creation-mode="fast"] .reactor-core .composer-bottom-right .composer-meta-readout {
    width: auto !important;
    min-width: 0 !important;
  }

  #app[data-creation-mode="fast"] .reactor-core .composer-bottom-right .composer-send-btn {
    width: 100% !important;
  }
}

/* Prompt Library stays dense and scannable. Full prompt text remains in the
   editor, so cards only carry selection metadata and short summaries. */
#app:not([data-active-view="home"]) .template-use-workspace,
#app:not([data-active-view="home"]) .template-use-editor-card,
#app:not([data-active-view="home"]) .template-choice-card,
#app:not([data-active-view="home"]) .asset-kpi-strip div,
#app:not([data-active-view="home"]) .asset-management-panel,
#app:not([data-active-view="home"]) .asset-filter-chip,
#app:not([data-active-view="home"]) .asset-category-card {
  border-color: var(--release-line) !important;
  background: var(--release-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--release-ink) !important;
}

#app:not([data-active-view="home"]) .template-use-workspace {
  border-radius: 0 !important;
}

#app:not([data-active-view="home"]) .template-use-editor-card,
#app:not([data-active-view="home"]) .template-choice-card {
  border-radius: 5px !important;
}

#app:not([data-active-view="home"]) .template-editor {
  border-color: var(--release-line-strong) !important;
  background: #0d0d10 !important;
  color: var(--release-ink) !important;
  min-height: 280px !important;
}

#app:not([data-active-view="home"]) .template-choice-grid {
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#app:not([data-active-view="home"]) .template-choice-card {
  min-width: 0;
  min-height: 0;
  gap: 8px !important;
  padding: 12px !important;
}

#app:not([data-active-view="home"]) .template-choice-card:hover,
#app:not([data-active-view="home"]) .template-choice-card.active {
  border-color: rgba(118, 88, 232, .72) !important;
  background: #17151d !important;
}

#app:not([data-active-view="home"]) .template-choice-body,
#app:not([data-active-view="home"]) .template-choice-facts {
  min-height: 0 !important;
}

#app:not([data-active-view="home"]) .template-choice-body h3 {
  margin-bottom: 5px !important;
  color: var(--release-ink) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

#app:not([data-active-view="home"]) .template-choice-body p {
  color: var(--release-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 2 !important;
}

#app:not([data-active-view="home"]) .template-choice-facts {
  border-color: var(--release-line) !important;
  background: var(--release-line) !important;
}

#app:not([data-active-view="home"]) .template-choice-facts > span {
  padding: 7px 8px !important;
  background: var(--release-surface-strong) !important;
  color: #d8d8dd !important;
  font-size: 10px !important;
}

#app:not([data-active-view="home"]) .template-choice-facts small,
#app:not([data-active-view="home"]) .template-choice-card .template-tag {
  color: var(--release-muted) !important;
  font-size: 9px !important;
}

#app:not([data-active-view="home"]) .template-choice-card .template-meta {
  display: flex;
  min-height: 20px;
  gap: 4px;
  overflow: hidden;
}

#app:not([data-active-view="home"]) .template-choice-card .template-tag {
  max-width: 33%;
  overflow: hidden;
  border-color: var(--release-line-strong) !important;
  background: #17171c !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app:not([data-active-view="home"]) .template-choice-actions {
  gap: 6px !important;
}

#app:not([data-active-view="home"]) .template-choice-actions .ghost-btn,
#app:not([data-active-view="home"]) .template-choice-actions .primary-btn {
  min-height: 30px !important;
  padding-inline: 8px !important;
  font-size: 10px !important;
}

@media (min-width: 1181px) {
  #app:not([data-active-view="home"]) .template-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  #app:not([data-active-view="home"]) .template-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #app:not([data-active-view="home"]) .template-choice-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app:not([data-active-view="home"]) .template-choice-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app:not([data-active-view="home"]) .template-choice-actions .ghost-btn,
  #app:not([data-active-view="home"]) .template-choice-actions .primary-btn {
    width: 100%;
  }

  #app:not([data-active-view="home"]) .template-use-workspace {
    gap: 12px !important;
    margin-block: 14px 18px !important;
    padding: 14px !important;
  }

  #app:not([data-active-view="home"]) .template-use-copy {
    gap: 8px !important;
  }

  #app:not([data-active-view="home"]) .template-use-copy h3 {
    font-size: clamp(1.65rem, 7.2vw, 2.25rem) !important;
    line-height: 1.02 !important;
  }

  #app:not([data-active-view="home"]) .template-use-copy p {
    line-height: 1.5 !important;
  }

  #app:not([data-active-view="home"]) .template-use-editor-card {
    gap: 9px !important;
    padding: 12px !important;
  }

  #app:not([data-active-view="home"]) .template-editor {
    min-height: 220px !important;
    height: 220px !important;
    padding: 12px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  #app:not([data-active-view="home"]) .template-choice-facts {
    min-height: 38px !important;
  }

  #app:not([data-active-view="home"]) .template-choice-card .template-meta {
    flex-wrap: nowrap !important;
    min-height: 20px !important;
    max-height: 20px !important;
  }

  #app:not([data-active-view="home"]) .template-choice-card .template-tag {
    flex: 0 1 auto;
    max-width: 31% !important;
  }

  #app:not([data-active-view="home"]) .template-choice-card .template-tag:nth-child(n + 4) {
    display: none;
  }

  #app:not([data-active-view="home"]) .template-choice-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #app:not([data-active-view="home"]) .template-choice-actions .ghost-btn,
  #app:not([data-active-view="home"]) .template-choice-actions .primary-btn {
    min-height: 30px !important;
    padding-inline: 4px !important;
    font-size: 9px !important;
    white-space: nowrap;
  }
}

/* Run History is a text log in this release, not a media thumbnail grid. */
#app[data-active-view="logs"] .project-log-toolbar,
#app[data-active-view="logs"] .project-log-selection-bar,
#app[data-active-view="logs"] .project-log-card,
#app[data-active-view="logs"] .project-log-empty-copy {
  border-color: var(--release-line) !important;
  background: var(--release-surface) !important;
  background-image: none !important;
  color: var(--release-ink) !important;
  box-shadow: none !important;
}

#app[data-active-view="logs"] .project-log-toolbar h2,
#app[data-active-view="logs"] .project-log-toolbar p,
#app[data-active-view="logs"] .project-log-toolbar label,
#app[data-active-view="logs"] .project-log-toolbar label > span,
#app[data-active-view="logs"] .project-log-toolbar .eyebrow,
#app[data-active-view="logs"] .project-log-card-copy h3,
#app[data-active-view="logs"] .project-log-empty-copy strong {
  color: var(--release-ink) !important;
}

#app[data-active-view="logs"] .project-log-toolbar p:last-child,
#app[data-active-view="logs"] .project-log-card-copy > div:first-child,
#app[data-active-view="logs"] .project-log-card-copy p,
#app[data-active-view="logs"] .project-log-card-meta,
#app[data-active-view="logs"] .project-log-empty-copy {
  color: var(--release-muted) !important;
}

#app[data-active-view="logs"] .project-log-card {
  border-left: 0 !important;
  border-right: 0 !important;
}

#app[data-active-view="logs"] .project-log-card-open:hover {
  background: #17171c !important;
}

#app[data-active-view="logs"] .project-log-status-mark,
#app[data-active-view="logs"] .project-log-status-mark[data-tone="good"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="warning"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="error"] {
  border: 1px solid var(--release-line-strong) !important;
  background: #17171c !important;
  color: #b8b8c0 !important;
}

#app[data-active-view="logs"] .project-log-status-mark[data-tone="warning"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="error"] {
  border-color: rgba(217, 75, 91, .5) !important;
  color: #ffb9c1 !important;
}

#app[data-active-view="logs"] .project-log-card-open > strong {
  color: #9b7bff !important;
}

@media (max-width: 640px) {
  #app[data-active-view="logs"] .project-log-page {
    padding-inline: 14px;
  }

  #app[data-active-view="logs"] .project-log-card-open {
    min-height: 92px;
    padding-block: 14px;
  }
}

/* --------------------------------------------------------------------------
   Overseas workspace shell
   The product navigation is a fixed horizontal rail. Keep the underlying
   sidebar DOM so existing view routing and keyboard behavior remain intact.
   -------------------------------------------------------------------------- */
:root {
  --release-nav-height: 70px;
  --release-topbar-height: 78px;
  --release-bg: #09090b;
  --release-surface: #111115;
  --release-surface-strong: #17171c;
  --release-line: #292930;
  --release-line-strong: #3b3b44;
  --release-ink: #f4f4f1;
  --release-muted: #a0a0a6;
  --release-purple: #9b7bff;
  --release-purple-soft: rgba(155, 123, 255, .16);
  --release-red: #f05b67;
}

#app {
  display: block;
  min-height: 100dvh;
  background: var(--release-bg);
  transform: none;
}

#app > .sidebar {
  display: none !important;
}

#app[data-active-view="home"] > .shell {
  padding-top: 0;
}

#app[data-active-view="home"] .topbar {
  display: none !important;
}

#app:not([data-active-view="home"]) > .sidebar {
  display: none !important;
}

#app:not([data-active-view="home"]) > .sidebar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  width: 100%;
  height: var(--release-nav-height);
  min-height: 0;
  padding: 0 clamp(14px, 3vw, 42px);
  overflow: visible;
  background: rgba(9, 9, 11, .94);
  border-bottom: 1px solid var(--release-line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

#app:not([data-active-view="home"]) > .sidebar > .sidebar-shell {
  position: relative;
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
  width: 100%;
  min-height: var(--release-nav-height);
  height: var(--release-nav-height);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app:not([data-active-view="home"]) > .sidebar > .sidebar-shell::before,
#app:not([data-active-view="home"]) .sidebar-topline,
#app:not([data-active-view="home"]) .sidebar-exit-area {
  display: none !important;
}

#app:not([data-active-view="home"]) .brand {
  flex: 0 0 auto;
  gap: 9px;
  min-width: 150px;
  padding: 0;
  border: 0;
  color: var(--release-ink);
}

#app:not([data-active-view="home"]) .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--release-ink);
  color: var(--release-bg);
  box-shadow: none;
  font-size: 11px;
}

#app:not([data-active-view="home"]) .brand strong {
  font-size: 14px;
  letter-spacing: 0;
}

#app:not([data-active-view="home"]) .brand span {
  color: var(--release-muted);
  font-size: 9px;
  letter-spacing: .03em;
}

#app:not([data-active-view="home"]) .sidebar-nav {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

#app:not([data-active-view="home"]) .sidebar-nav::-webkit-scrollbar {
  display: none;
}

#app:not([data-active-view="home"]) .nav-item {
  flex: 0 0 auto;
  gap: 0;
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 4px;
  color: var(--release-muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  transform: none;
}

#app:not([data-active-view="home"]) .nav-item::before,
#app:not([data-active-view="home"]) .nav-icon {
  display: none;
}

#app:not([data-active-view="home"]) .nav-item:hover,
#app:not([data-active-view="home"]) .nav-item.active {
  background: var(--release-purple-soft);
  color: var(--release-ink);
  box-shadow: none;
}

#app:not([data-active-view="home"]) .nav-item.active::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 4px;
  left: 11px;
  height: 2px;
  background: var(--release-purple);
}

#app:not([data-active-view="home"]) .workspace-account-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

#app:not([data-active-view="home"]) .workspace-account-link {
  min-height: 34px;
  padding: 0 9px;
  border-radius: 4px;
  color: var(--release-muted);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

#app:not([data-active-view="home"]) .workspace-account-link:hover,
#app:not([data-active-view="home"]) .workspace-account-link:focus-visible {
  color: var(--release-ink);
}

#app:not([data-active-view="home"]) .workspace-account-primary {
  border: 1px solid var(--release-purple);
  background: var(--release-purple);
  color: #fff;
}

#app:not([data-active-view="home"]) .workspace-account-primary:hover,
#app:not([data-active-view="home"]) .workspace-account-primary:focus-visible {
  background: #ad96ff;
  color: #fff;
}

#app:not([data-active-view="home"]) > .shell {
  min-height: 100dvh;
  padding-top: var(--release-topbar-height);
  background: var(--release-bg);
}

#app:not([data-active-view="home"]) .topbar {
  display: grid;
  grid-template-columns: minmax(180px, .78fr) minmax(0, 1.55fr) auto;
  align-items: center;
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: var(--release-topbar-height);
  min-height: var(--release-topbar-height);
  min-width: 0;
  box-sizing: border-box;
  padding: 12px clamp(18px, 4vw, 54px);
  border-bottom: 1px solid var(--release-line);
  background: rgba(9, 9, 11, .96);
  box-shadow: none;
}

#app:not([data-active-view="home"]) .topbar-copy {
  min-width: 0;
}

#app:not([data-active-view="home"]) .topbar .topbar-copy > p:last-child {
  display: none !important;
}

#app:not([data-active-view="home"]) .topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app:not([data-active-view="home"]) .topbar-actions > .workbench-task-context,
#app:not([data-active-view="home"]) .topbar-actions > #jump-to-output,
#app:not([data-active-view="home"]) .topbar-actions > #jump-to-logs {
  display: none !important;
}

#app:not([data-active-view="home"]) .workspace-topbar-account {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: max-content;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link {
  min-height: 32px;
  padding: 0 9px;
  border-radius: 4px;
  color: var(--release-muted);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:hover,
#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:focus-visible {
  color: var(--release-ink);
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary {
  border: 1px solid var(--release-purple);
  background: var(--release-purple);
  color: #fff;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary:hover,
#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary:focus-visible {
  background: #ad96ff;
  color: #fff;
}

#app:not([data-active-view="home"]) .workspace-topnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

#app:not([data-active-view="home"]) .workspace-topnav::-webkit-scrollbar {
  display: none;
}

#app:not([data-active-view="home"]) .workspace-topnav-item {
  position: relative;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 9px;
  border-radius: 4px;
  color: var(--release-muted);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

#app:not([data-active-view="home"]) .workspace-topnav-item:hover,
#app:not([data-active-view="home"]) .workspace-topnav-item:focus-visible,
#app:not([data-active-view="home"]) .workspace-topnav-item.active {
  background: var(--release-purple-soft);
  color: var(--release-ink);
}

#app:not([data-active-view="home"]) .workspace-topnav-item.active::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 2px;
  left: 9px;
  height: 2px;
  background: var(--release-purple);
}

#app:not([data-active-view="home"]) .workspace-topnav-settings {
  color: #77777e;
}

#app:not([data-active-view="home"]) .topbar h1 {
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1.06;
  letter-spacing: -.03em;
}

#app:not([data-active-view="home"]) .topbar .eyebrow {
  margin-bottom: 6px;
  color: var(--release-purple);
  font-size: 9px;
  letter-spacing: .14em;
}

#app:not([data-active-view="home"]) .topbar p:last-child,
#app:not([data-active-view="home"]) .topbar .topbar-copy > p:last-child {
  max-width: 720px;
  color: var(--release-muted);
  font-size: 12px;
  line-height: 1.55;
}

#app:not([data-active-view="home"]) .page-scroll {
  height: auto;
  min-height: calc(100dvh - var(--release-topbar-height));
  padding: 28px clamp(18px, 4vw, 54px) 52px;
  background: var(--release-bg);
}

#app:not([data-active-view="home"]) .workbench-grid {
  height: auto;
  min-height: calc(100dvh - var(--release-topbar-height));
  padding: 24px clamp(18px, 4vw, 54px) 48px;
  overflow: visible;
}

#app:not([data-active-view="home"]) .panel,
#app:not([data-active-view="home"]) .page-hero,
#app:not([data-active-view="home"]) .schema-card,
#app:not([data-active-view="home"]) .library-card,
#app:not([data-active-view="home"]) .template-card,
#app:not([data-active-view="home"]) .agent-map-card,
#app:not([data-active-view="home"]) .band-card,
#app:not([data-active-view="home"]) .api-card,
#app:not([data-active-view="home"]) .task-session-board {
  border-color: var(--release-line);
  background: var(--release-surface);
  box-shadow: none;
}

#app:not([data-active-view="home"]) .panel h2,
#app:not([data-active-view="home"]) .panel h3,
#app:not([data-active-view="home"]) .page-hero h2,
#app:not([data-active-view="home"]) .section-intro h3 {
  color: var(--release-ink);
}

#app:not([data-active-view="home"]) .panel p,
#app:not([data-active-view="home"]) .page-hero p,
#app:not([data-active-view="home"]) .section-intro p {
  color: var(--release-muted);
}

#app:not([data-active-view="home"]) .ghost-btn,
#app:not([data-active-view="home"]) .text-btn {
  border-color: var(--release-line-strong);
  background: transparent;
  color: var(--release-ink);
  box-shadow: none;
}

#app:not([data-active-view="home"]) .ghost-btn:hover,
#app:not([data-active-view="home"]) .text-btn:hover {
  border-color: var(--release-purple);
  background: var(--release-purple-soft);
  color: #fff;
  box-shadow: none;
}

/* The local release has no media-production surface. Keep any legacy DOM
   inert if an old cached session or template tries to reinsert it. */
#app[data-edition="overseas-prompt-only"] #media-production-card,
#app[data-edition="overseas-prompt-only"] #image-studio-view,
#app[data-edition="overseas-prompt-only"] [data-view-panel="image"],
#app[data-edition="overseas-prompt-only"] [data-view-panel="frames"],
#app[data-edition="overseas-prompt-only"] [data-view="image"],
#app[data-edition="overseas-prompt-only"] [data-view="frames"] {
  display: none !important;
}

/* Landing typography: keep the editorial scale, but fit a normal browser
   viewport without oversized wraps or hero content pushing the fold away. */
#app[data-active-view="home"] .home-shell {
  width: min(1320px, 100%);
  padding-inline: clamp(18px, 4.5vw, 64px);
}

#app[data-active-view="home"] .home-nav {
  margin-inline: calc(clamp(18px, 4.5vw, 64px) * -1);
  padding-inline: clamp(18px, 4.5vw, 64px);
}

#app[data-active-view="home"] .home-section {
  min-height: min(660px, calc(100dvh - 74px));
  padding-block: clamp(54px, 7vw, 96px);
}

#app[data-active-view="home"] .home-hero {
  gap: clamp(34px, 6vw, 86px);
  padding-top: clamp(62px, 8vw, 112px);
}

#app[data-active-view="home"] .home-hero h1 {
  max-width: 540px;
  font-size: clamp(38px, 4.25vw, 58px);
  line-height: 1.02;
  letter-spacing: 0;
}

#app[data-active-view="home"] .home-hero-subtitle {
  margin-top: 18px;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.2;
  letter-spacing: 0;
}

#app[data-active-view="home"] .home-lede {
  max-width: 390px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
}

#app[data-active-view="home"] .home-demo-canvas {
  min-height: 0;
  aspect-ratio: 16 / 10;
}

#app[data-active-view="home"] .home-entry {
  min-height: 88px;
  padding-block: 14px;
}

#app[data-active-view="home"] .home-feature {
  gap: clamp(36px, 7vw, 96px);
}

#app[data-active-view="home"] .home-feature h2 {
  max-width: 520px;
  font-size: clamp(30px, 3.45vw, 48px);
  line-height: 1.02;
  letter-spacing: 0;
}

#app[data-active-view="home"] .home-feature-copy > p:not(.home-kicker) {
  max-width: 410px;
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.65;
}

#app[data-active-view="home"] .home-quick-compose textarea {
  min-height: 150px;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.35;
  letter-spacing: 0;
}

#app[data-active-view="home"] .home-library-wall strong {
  font-size: clamp(86px, 13vw, 176px);
}

/* Keep the six Creative Engine steps on one deliberate desktop rail. The
   legacy percentages total more than 100% once margins are included, which
   pushes the final Export node onto a second row. */
@media (min-width: 801px) {
  #app[data-active-view="home"] .home-engine-map {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: clamp(8px, 1.35vw, 18px);
    row-gap: 0;
    align-items: start;
  }

  #app[data-active-view="home"] .home-engine-node {
    width: auto;
    min-width: 0;
    margin-right: 0;
  }

  #app[data-active-view="home"] .home-engine-node b,
  #app[data-active-view="home"] .home-engine-node small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #app[data-active-view="home"] .home-engine-foot {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  :root {
    --release-topbar-height: 116px;
  }

  #app:not([data-active-view="home"]) .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "copy account"
      "nav nav";
    height: var(--release-topbar-height);
    min-height: var(--release-topbar-height);
    align-content: center;
    row-gap: 4px;
    padding: 12px 16px 10px;
  }

  #app:not([data-active-view="home"]) .topbar-copy {
    grid-area: copy;
  }

  #app:not([data-active-view="home"]) .workspace-topnav {
    grid-area: nav;
    justify-content: flex-start;
    width: 100%;
  }

  #app:not([data-active-view="home"]) .topbar-actions {
    grid-area: account;
    align-self: start;
  }

  #app:not([data-active-view="home"]) > .sidebar > .sidebar-shell {
    gap: 12px;
  }

  #app:not([data-active-view="home"]) .brand {
    min-width: 126px;
  }

  #app:not([data-active-view="home"]) .brand span {
    display: none;
  }

  #app:not([data-active-view="home"]) .workspace-account-link {
    padding-inline: 7px;
  }
}

@media (max-width: 640px) {
  :root {
    --release-nav-height: 62px;
    --release-topbar-height: 122px;
  }

  #app:not([data-active-view="home"]) > .sidebar,
  #app:not([data-active-view="home"]) > .sidebar > .sidebar-shell {
    height: var(--release-nav-height);
    min-height: var(--release-nav-height);
  }

  #app:not([data-active-view="home"]) > .sidebar {
    padding-inline: 12px;
  }

  #app:not([data-active-view="home"]) .brand {
    min-width: 36px;
  }

  #app:not([data-active-view="home"]) .brand > div:last-child,
  #app:not([data-active-view="home"]) .workspace-account-link:not(.workspace-account-primary) {
    display: none;
  }

  #app:not([data-active-view="home"]) .sidebar-nav {
    order: 2;
  }

  #app:not([data-active-view="home"]) .workspace-account-actions {
    order: 3;
  }

  #app:not([data-active-view="home"]) .topbar {
    padding: 12px 14px 10px;
  }

  #app:not([data-active-view="home"]) .topbar-actions {
    gap: 6px;
  }

  #app:not([data-active-view="home"]) .workspace-topnav {
    justify-content: flex-start;
  }

  #app:not([data-active-view="home"]) .workspace-topnav-settings {
    display: none;
  }

  #app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-plans {
    display: none;
  }

  #app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link {
    min-height: 30px;
    padding-inline: 7px;
    font-size: 9px;
  }

  #app:not([data-active-view="home"]) .page-scroll,
  #app:not([data-active-view="home"]) .workbench-grid {
    padding-inline: 14px;
  }

  #app[data-active-view="home"] .home-section {
    padding-block: 70px;
  }

  #app[data-active-view="home"] .home-hero h1 {
    max-width: 380px;
    font-size: clamp(38px, 10.5vw, 46px);
    letter-spacing: 0;
  }

  #app[data-active-view="home"] .home-entry-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app[data-active-view="home"] .home-entry {
    min-height: 94px;
  }

  #app[data-active-view="home"] .home-feature h2 {
    max-width: 380px;
    font-size: clamp(32px, 8.8vw, 44px);
    letter-spacing: 0;
  }

  #app[data-active-view="home"] .home-demo-prompt-card {
    width: min(72%, 300px);
  }
}

/* --------------------------------------------------------------------------
   Functional product surfaces v2
   The landing page has its own editorial system above. The workspace pages
   use the same monochrome language, but prioritize scanability, compact
   controls, readable output, and visible workflow state. This is a visual
   layer only: existing DOM, data attributes, handlers, and routing remain
   untouched.
   -------------------------------------------------------------------------- */

:root {
  --release-bg: #09090b;
  --release-surface: #111115;
  --release-surface-2: #15151a;
  --release-surface-3: #0d0d10;
  --release-line: rgba(244, 244, 241, .14);
  --release-line-strong: rgba(244, 244, 241, .24);
  --release-ink: #f5f5f2;
  --release-muted: #a5a5ab;
  --release-dim: #72727a;
  --release-purple: #9b7bff;
  --release-purple-strong: #b39dff;
  --release-purple-soft: rgba(155, 123, 255, .14);
  --release-red: #f06470;
  --release-red-soft: rgba(240, 100, 112, .13);
  --release-radius: 14px;
}

#app:not([data-active-view="home"]) {
  background: var(--release-bg) !important;
  color: var(--release-ink);
}

#app:not([data-active-view="home"]) .view,
#app:not([data-active-view="home"]) .page-scroll,
#app:not([data-active-view="home"]) .workbench-grid {
  background: transparent !important;
}

#app:not([data-active-view="home"]) .topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  display: grid;
  grid-template-columns: minmax(170px, .78fr) minmax(0, 1.55fr) auto;
  align-items: center;
  gap: 22px;
  width: 100%;
  height: var(--release-topbar-height);
  min-height: var(--release-topbar-height);
  margin: 0 !important;
  padding: 0 clamp(18px, 4vw, 56px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: rgba(9, 9, 11, .93) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
}

#app:not([data-active-view="home"]) .topbar-copy {
  min-width: 0;
}

#app:not([data-active-view="home"]) .topbar .eyebrow {
  display: block !important;
  margin: 0 0 4px !important;
  color: var(--release-purple) !important;
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1;
}

#app:not([data-active-view="home"]) .topbar h1 {
  margin: 0 !important;
  color: var(--release-ink) !important;
  font-size: clamp(22px, 2.25vw, 30px) !important;
  font-weight: 720;
  line-height: 1.05;
  letter-spacing: -.04em;
  white-space: nowrap;
}

#app:not([data-active-view="home"]) .topbar .topbar-copy > p:last-child {
  display: none !important;
}

/* The nav is a restrained segmented rail. Hairline dividers separate the
   creation tools, library/history, and service settings without adding a
   second bulky panel. */
#app:not([data-active-view="home"]) .workspace-topnav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--release-line) !important;
  border-radius: 10px;
  background: rgba(17, 17, 21, .74);
  scrollbar-width: none;
}

#app:not([data-active-view="home"]) .workspace-topnav::-webkit-scrollbar {
  display: none;
}

#app:not([data-active-view="home"]) .workspace-topnav-item {
  position: relative;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 7px;
  color: var(--release-muted) !important;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

#app:not([data-active-view="home"]) .workspace-topnav-item:nth-child(4),
#app:not([data-active-view="home"]) .workspace-topnav-item:nth-child(6) {
  margin-left: 8px;
  padding-left: 17px;
}

#app:not([data-active-view="home"]) .workspace-topnav-item:nth-child(4)::before,
#app:not([data-active-view="home"]) .workspace-topnav-item:nth-child(6)::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 1px;
  background: var(--release-line-strong);
}

#app:not([data-active-view="home"]) .workspace-topnav-item:hover,
#app:not([data-active-view="home"]) .workspace-topnav-item:focus-visible,
#app:not([data-active-view="home"]) .workspace-topnav-item.active {
  color: var(--release-ink) !important;
  background: var(--release-purple-soft) !important;
  outline: none;
}

#app:not([data-active-view="home"]) .workspace-topnav-item:active {
  transform: translateY(1px);
}

#app:not([data-active-view="home"]) .workspace-topnav-item.active::after {
  right: 10px;
  bottom: 3px;
  left: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--release-purple) !important;
}

#app:not([data-active-view="home"]) .topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .workspace-topbar-account {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: max-content;
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--release-line-strong);
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link,
#app:not([data-active-view="home"]) .workspace-account-actions .workspace-account-link {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  color: var(--release-muted) !important;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:hover,
#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:focus-visible,
#app:not([data-active-view="home"]) .workspace-account-actions .workspace-account-link:hover,
#app:not([data-active-view="home"]) .workspace-account-actions .workspace-account-link:focus-visible {
  color: var(--release-ink) !important;
  background: rgba(255, 255, 255, .06);
  outline: none;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary,
#app:not([data-active-view="home"]) .workspace-account-actions .workspace-account-primary {
  border: 1px solid var(--release-purple) !important;
  background: var(--release-purple) !important;
  color: #fff !important;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary:hover,
#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary:focus-visible,
#app:not([data-active-view="home"]) .workspace-account-actions .workspace-account-primary:hover,
#app:not([data-active-view="home"]) .workspace-account-actions .workspace-account-primary:focus-visible {
  background: var(--release-purple-strong) !important;
  color: #fff !important;
}

#app:not([data-active-view="home"]) .page-scroll,
#app:not([data-active-view="home"]) .workbench-grid {
  width: min(1440px, 100%);
  margin-inline: auto;
}

#app:not([data-active-view="home"]) .page-scroll {
  min-height: calc(100dvh - var(--release-topbar-height));
  padding: 30px clamp(20px, 4vw, 56px) 64px !important;
}

#app[data-active-view="workbench"] .workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 28px !important;
  min-height: 0;
  padding: 30px clamp(20px, 4vw, 56px) 64px !important;
}

/* One primary surface per functional area. Legacy wrappers stay in the DOM
   for behavior, but no longer read as nested boxes. */
#app[data-active-view="workbench"] .setup-panel,
#app[data-active-view="workbench"] .output-panel {
  min-width: 0;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .setup-shell,
#app[data-active-view="workbench"] .setup-content-grid,
#app[data-active-view="workbench"] .setup-main-column,
#app[data-active-view="workbench"] .field-textarea,
#app[data-active-view="workbench"] .composer-shell {
  display: block;
  width: 100%;
  min-width: 0;
}

#app[data-active-view="workbench"] .composer-card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  overflow: visible;
  border: 1px solid var(--release-line) !important;
  border-radius: 18px !important;
  background: var(--release-surface) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18) !important;
}

#app[data-active-view="workbench"] .reactor-shell,
#app[data-active-view="workbench"] .reactor-flow-map {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .reactor-flow-map::before,
#app[data-active-view="workbench"] .reactor-flow-map::after {
  display: none !important;
}

#app[data-active-view="workbench"] .reactor-core {
  order: 0;
  display: block !important;
  width: 100% !important;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .reactor-core-top {
  width: 100%;
  min-width: 0;
  padding: 20px 24px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .composer-launcher-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
}

#app[data-active-view="workbench"] .composer-launcher,
#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle,
#app[data-active-view="workbench"] .composer-first-frame-size-control {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 62px;
  padding: 11px 13px !important;
  border: 1px solid var(--release-line) !important;
  border-radius: 11px !important;
  background: var(--release-surface-2) !important;
  color: var(--release-ink) !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .composer-launcher:hover,
#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle:hover,
#app[data-active-view="workbench"] .composer-first-frame-size-control:hover {
  border-color: var(--release-line-strong) !important;
  background: #1a1a20 !important;
}

#app[data-active-view="workbench"] .composer-launcher {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 3px;
  text-align: left;
}

#app[data-active-view="workbench"] .composer-launcher-glyph {
  grid-row: 1 / -1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(155, 123, 255, .34);
  border-radius: 8px;
  background: rgba(155, 123, 255, .09);
  color: var(--release-purple-strong);
  font-size: 11px;
  font-weight: 750;
}

#app[data-active-view="workbench"] .composer-launcher-upload .composer-launcher-glyph {
  border-color: rgba(240, 100, 112, .32);
  background: var(--release-red-soft);
  color: #ff9da6;
}

#app[data-active-view="workbench"] .composer-launcher strong,
#app[data-active-view="workbench"] .composer-first-frame-prompt-copy strong,
#app[data-active-view="workbench"] .composer-first-frame-size-control > span {
  min-width: 0;
  overflow: hidden;
  color: var(--release-ink) !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-active-view="workbench"] .composer-launcher small,
#app[data-active-view="workbench"] .composer-first-frame-prompt-copy small {
  min-width: 0;
  overflow: hidden;
  color: var(--release-muted) !important;
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle {
  gap: 10px;
  cursor: pointer;
}

#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--release-purple);
}

#app[data-active-view="workbench"] .composer-first-frame-prompt-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#app[data-active-view="workbench"] .composer-first-frame-size-control {
  justify-content: space-between;
  gap: 10px;
}

#app[data-active-view="workbench"] .first-frame-size-selector {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--release-line) !important;
  border-radius: 8px;
  background: var(--release-surface-3) !important;
}

#app[data-active-view="workbench"] .first-frame-size-selector button {
  min-width: 39px;
  min-height: 28px;
  padding: 0 7px;
  border: 0 !important;
  border-radius: 5px;
  color: var(--release-muted) !important;
  background: transparent !important;
  font-size: 11px;
  font-weight: 700;
}

#app[data-active-view="workbench"] .first-frame-size-selector button.active,
#app[data-active-view="workbench"] .first-frame-size-selector button[aria-checked="true"] {
  color: #fff !important;
  background: var(--release-purple) !important;
}

#app[data-active-view="workbench"] .composer-reference-strip {
  width: 100%;
  min-height: 0;
  padding: 0 24px !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .composer-reference-strip:not(:has(.reference-preview:not(.empty))) {
  display: none;
}

#app[data-active-view="workbench"] .composer-stage {
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  padding: 20px 24px 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .idea-input.studio-input {
  display: block;
  width: 100%;
  min-height: 156px !important;
  padding: 4px 0 18px !important;
  resize: vertical;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  outline: 0;
  background: transparent !important;
  color: var(--release-ink) !important;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .idea-input.studio-input::placeholder {
  color: var(--release-dim) !important;
  opacity: 1;
}

#app[data-active-view="workbench"] .idea-input.studio-input:focus {
  border-bottom-color: var(--release-purple) !important;
  box-shadow: 0 1px 0 var(--release-purple) !important;
}

#app[data-active-view="workbench"] .quick-start-style-dock {
  width: 100%;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .quick-start-wheel-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 2px;
  border: 0 !important;
  border-radius: 0;
  color: var(--release-muted) !important;
  background: transparent !important;
  font-size: 11px;
}

#app[data-active-view="workbench"] .quick-start-wheel-trigger:hover,
#app[data-active-view="workbench"] .quick-start-wheel-trigger:focus-visible {
  color: var(--release-ink) !important;
  outline: none;
}

#app[data-active-view="workbench"] .quick-start-wheel-trigger small {
  color: var(--release-dim) !important;
}

#app[data-active-view="workbench"] .composer-bottombar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  padding: 13px 24px !important;
  border: 0 !important;
  border-top: 1px solid var(--release-line) !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .composer-bottom-left,
#app[data-active-view="workbench"] .composer-bottom-right {
  min-width: 0;
}

#app[data-active-view="workbench"] .composer-bottom-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-left: auto;
}

#app[data-active-view="workbench"] .composer-control-label,
#app[data-active-view="workbench"] .composer-meta-readout,
#app[data-active-view="workbench"] .reactor-core-status,
#app[data-active-view="workbench"] .reactor-core-status small {
  color: var(--release-muted) !important;
}

#app[data-active-view="workbench"] .segmented.compact {
  border-color: var(--release-line) !important;
  background: var(--release-surface-2) !important;
}

#app[data-active-view="workbench"] .segmented.compact .segment {
  min-height: 30px;
  border-radius: 6px;
  color: var(--release-muted) !important;
  background: transparent !important;
  font-size: 11px;
}

#app[data-active-view="workbench"] .segmented.compact .segment.active {
  color: #fff !important;
  background: var(--release-purple) !important;
}

#app[data-active-view="workbench"] .composer-send-btn {
  display: inline-grid;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  place-items: center;
  border: 1px solid var(--release-purple) !important;
  border-radius: 10px !important;
  background: var(--release-purple) !important;
  color: #fff !important;
  font-size: 21px;
  box-shadow: 0 8px 22px rgba(155, 123, 255, .18) !important;
}

#app[data-active-view="workbench"] .composer-send-btn:hover {
  background: var(--release-purple-strong) !important;
  transform: translateY(-1px);
}

#app[data-active-view="workbench"] .reactor-core-status {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px !important;
  min-height: 56px;
  padding: 12px 24px 15px !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .reactor-progress-track {
  grid-column: 1 / -1;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: rgba(244, 244, 241, .1) !important;
}

#app[data-active-view="workbench"] .reactor-progress-track i {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--release-purple), var(--release-red)) !important;
}

/* Creative Engine keeps the visual chain, but turns it into one readable
   rail instead of six oversized cards. */
#app[data-creation-mode="fast"] .fast-flow-rail {
  order: 1;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px;
  align-items: start;
  width: 100%;
  min-height: 0;
  padding: 22px 24px 18px !important;
  overflow: visible;
  border: 0 !important;
  border-top: 1px solid var(--release-line) !important;
  background: transparent !important;
}

#app[data-creation-mode="fast"] .fast-flow-rail::before {
  content: "" !important;
  left: 9%;
  right: 9%;
  top: 49px;
  height: 1px;
  background: linear-gradient(90deg, var(--release-purple), rgba(244, 244, 241, .18) 50%, var(--release-red)) !important;
  box-shadow: none !important;
}

#app[data-creation-mode="fast"] .fast-flow-rail::after {
  top: 49px;
  left: 9%;
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--release-purple-strong), transparent) !important;
  filter: drop-shadow(0 0 6px rgba(155, 123, 255, .6));
  animation: releaseRailSweep 4.6s ease-in-out infinite !important;
}

#app[data-creation-mode="fast"] .fast-flow-node {
  display: grid;
  grid-template-rows: 56px minmax(28px, auto) minmax(24px, auto);
  justify-items: center;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 106px;
  padding: 0 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--release-muted) !important;
  text-align: center;
  box-shadow: none !important;
}

#app[data-creation-mode="fast"] .fast-flow-node > span {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid rgba(155, 123, 255, .7) !important;
  border-radius: 50%;
  background: #0f0f14 !important;
  color: var(--release-purple-strong) !important;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 0 0 5px rgba(155, 123, 255, .07) !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

#app[data-creation-mode="fast"] .fast-flow-node:nth-child(3) > span,
#app[data-creation-mode="fast"] .fast-flow-node:nth-child(6) > span {
  border-color: rgba(240, 100, 112, .72) !important;
  color: #ff9da6 !important;
  box-shadow: 0 0 0 5px rgba(240, 100, 112, .07) !important;
}

#app[data-creation-mode="fast"] .fast-flow-node:hover,
#app[data-creation-mode="fast"] .fast-flow-node:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

#app[data-creation-mode="fast"] .fast-flow-node:hover > span,
#app[data-creation-mode="fast"] .fast-flow-node:focus-visible > span,
#app[data-creation-mode="fast"] .fast-flow-node[data-status="running"] > span {
  border-color: var(--release-purple-strong) !important;
  background: #1a1530 !important;
  color: #fff !important;
  box-shadow: 0 0 0 7px rgba(155, 123, 255, .1), 0 0 22px rgba(155, 123, 255, .22) !important;
}

#app[data-creation-mode="fast"] .fast-flow-node[data-status="done"] > span {
  background: #19152a !important;
  border-color: var(--release-purple) !important;
}

#app[data-creation-mode="fast"] .fast-flow-node[data-status="error"] > span,
#app[data-creation-mode="fast"] .fast-flow-node[data-warning="true"] > span {
  border-color: var(--release-red) !important;
  background: #241317 !important;
  color: #ffd9de !important;
  box-shadow: 0 0 0 7px rgba(240, 100, 112, .08) !important;
}

#app[data-creation-mode="fast"] .fast-flow-node strong,
#app[data-creation-mode="fast"] .fast-flow-node small {
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  text-wrap: balance;
}

#app[data-creation-mode="fast"] .fast-flow-node strong {
  color: var(--release-ink) !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

#app[data-creation-mode="fast"] .fast-flow-node small {
  color: var(--release-dim) !important;
  font-size: 10px;
  line-height: 1.25;
}

#app[data-creation-mode="fast"] .review-console {
  order: 2;
  display: grid !important;
  width: 100%;
  min-width: 0;
  gap: 12px;
  padding: 16px 24px 18px !important;
  border: 0 !important;
  border-top: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-creation-mode="fast"] .review-console-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 !important;
  border: 0 !important;
}

#app[data-creation-mode="fast"] .review-console-head span {
  color: var(--release-red) !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

#app[data-creation-mode="fast"] .review-console-head strong {
  color: var(--release-ink) !important;
  font-size: 13px;
  font-weight: 700;
}

#app[data-creation-mode="fast"] .review-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 7px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

#app[data-creation-mode="fast"] .review-skill-chip {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 64px;
  padding: 8px 6px !important;
  border: 1px solid var(--release-line) !important;
  border-radius: 9px !important;
  background: var(--release-surface-2) !important;
  color: var(--release-muted) !important;
  box-shadow: none !important;
}

#app[data-creation-mode="fast"] .review-skill-chip:hover,
#app[data-creation-mode="fast"] .review-skill-chip:focus-visible,
#app[data-creation-mode="fast"] .review-skill-chip[data-status="running"] {
  border-color: rgba(155, 123, 255, .62) !important;
  background: #19152a !important;
  color: var(--release-ink) !important;
  outline: none;
}

#app[data-creation-mode="fast"] .review-skill-chip[data-status="error"] {
  border-color: rgba(240, 100, 112, .62) !important;
  background: #241317 !important;
  color: #ffd9de !important;
}

#app[data-creation-mode="fast"] .review-skill-chip span {
  color: var(--release-purple-strong) !important;
  font-size: 9px;
}

#app[data-creation-mode="fast"] .review-skill-chip strong,
#app[data-creation-mode="fast"] .review-skill-chip small {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-creation-mode="fast"] .review-skill-chip strong {
  color: inherit !important;
  font-size: 10px;
  line-height: 1.2;
}

#app[data-creation-mode="fast"] .review-skill-chip small {
  color: var(--release-dim) !important;
  font-size: 9px;
}

#app[data-creation-mode="fast"] .review-console-foot {
  margin: 0;
  color: var(--release-dim) !important;
  font-size: 10px;
  text-align: right;
}

@keyframes releaseRailSweep {
  0%, 20% { transform: translateX(0); opacity: .3; }
  55% { transform: translateX(620%); opacity: .9; }
  80%, 100% { transform: translateX(920%); opacity: 0; }
}

/* Output is a readable document surface, not a stack of giant colored cards. */
#app[data-active-view="workbench"] .output-stage,
#app[data-active-view="workbench"] .output-overview,
#app[data-active-view="workbench"] .support-grid {
  display: grid;
  width: 100%;
  min-width: 0;
}

#app[data-active-view="workbench"] .output-stage {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

#app[data-active-view="workbench"] .output-panel > .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 8px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--release-line);
}

#app[data-active-view="workbench"] .output-panel > .panel-head h2 {
  margin: 0;
  color: var(--release-ink) !important;
  font-size: 22px;
  letter-spacing: -.03em;
}

#app[data-active-view="workbench"] .quality-badge,
#app[data-active-view="workbench"] .export-status {
  color: var(--release-muted) !important;
  background: var(--release-surface-2) !important;
  border-color: var(--release-line) !important;
}

#app[data-active-view="workbench"] .output-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--release-line);
  border-bottom: 1px solid var(--release-line);
}

#app[data-active-view="workbench"] .overview-card {
  min-width: 0;
  min-height: 86px;
  padding: 15px 18px !important;
  border: 0 !important;
  border-right: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .overview-card:last-child {
  border-right: 0 !important;
}

#app[data-active-view="workbench"] .overview-card .summary-label {
  color: var(--release-purple-strong) !important;
  font-size: 9px;
  letter-spacing: .12em;
}

#app[data-active-view="workbench"] .overview-card strong {
  color: var(--release-ink) !important;
  font-size: 14px;
}

#app[data-active-view="workbench"] .overview-card p,
#app[data-active-view="workbench"] .overview-card .pill-row {
  color: var(--release-muted) !important;
}

#app[data-active-view="workbench"] .prompt-stage-card {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 20px !important;
  border: 1px solid var(--release-line) !important;
  border-radius: 16px !important;
  background: var(--release-surface) !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .prompt-stage-card .prompt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}

#app[data-active-view="workbench"] .prompt-stage-card .prompt-head > div:first-child {
  min-width: 0;
}

#app[data-active-view="workbench"] .prompt-stage-card .prompt-head > div:first-child > span {
  color: var(--release-ink) !important;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.025em;
}

#app[data-active-view="workbench"] .prompt-caption {
  margin: 4px 0 0;
  color: var(--release-muted) !important;
  font-size: 11px;
}

#app[data-active-view="workbench"] .prompt-toolbar {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap !important;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  overflow: visible !important;
  white-space: normal !important;
}

#app[data-active-view="workbench"] .prompt-toolbar .small {
  min-height: 33px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 10px;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"] .prompt-toolbar .primary-btn.small {
  border-color: var(--release-purple) !important;
  background: var(--release-purple) !important;
  color: #fff !important;
}

#app[data-active-view="workbench"] .prompt-export-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--release-line);
  border-radius: 8px;
  background: var(--release-surface-3);
  color: var(--release-muted);
  font-size: 10px;
}

#app[data-active-view="workbench"] .prompt-body {
  width: 100%;
  min-width: 0;
  min-height: 240px;
  max-height: 480px;
  margin: 10px 0 0;
  padding: 18px !important;
  overflow: auto;
  border: 1px solid var(--release-line) !important;
  border-radius: 10px !important;
  background: var(--release-surface-3) !important;
  color: var(--release-ink) !important;
  font: 13px/1.72 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#app[data-active-view="workbench"] .prompt-body.muted {
  color: var(--release-muted) !important;
}

#app[data-active-view="workbench"] .first-frame-workspace {
  display: block !important;
  width: 100%;
  min-width: 0;
}

#app[data-active-view="workbench"] .first-frame-pane {
  display: block;
  width: 100%;
  min-width: 0;
}

#app[data-active-view="workbench"] .first-frame-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  color: var(--release-ink);
}

#app[data-active-view="workbench"] .first-frame-pane-head small {
  color: var(--release-muted) !important;
  font-size: 10px;
}

#app[data-active-view="workbench"] .first-frame-prompt {
  min-height: 220px !important;
  max-height: 420px;
  margin-top: 8px;
  font-size: 13px !important;
  line-height: 1.72 !important;
}

#app[data-active-view="workbench"] .workbench-action-strip {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 0 0;
  border-top: 1px solid var(--release-line);
  border-radius: 0;
  background: transparent !important;
}

#app[data-active-view="workbench"] .workbench-action-strip .primary-btn,
#app[data-active-view="workbench"] .workbench-action-strip .ghost-btn {
  min-height: 36px;
  border-radius: 7px;
  font-size: 11px;
}

/* Shared SaaS button and form language. */
#app:not([data-active-view="home"]) .primary-btn,
#app:not([data-active-view="home"]) .ghost-btn,
#app:not([data-active-view="home"]) .text-btn,
#app:not([data-active-view="home"]) .text-danger-btn {
  min-height: 36px;
  border-radius: 7px;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 680;
}

#app:not([data-active-view="home"]) .primary-btn {
  border: 1px solid var(--release-purple) !important;
  background: var(--release-purple) !important;
  color: #fff !important;
}

#app:not([data-active-view="home"]) .primary-btn:hover {
  border-color: var(--release-purple-strong) !important;
  background: var(--release-purple-strong) !important;
  transform: translateY(-1px);
}

#app:not([data-active-view="home"]) .ghost-btn,
#app:not([data-active-view="home"]) .text-btn {
  border: 1px solid var(--release-line-strong) !important;
  background: transparent !important;
  color: var(--release-ink) !important;
}

#app:not([data-active-view="home"]) .ghost-btn:hover,
#app:not([data-active-view="home"]) .ghost-btn:focus-visible,
#app:not([data-active-view="home"]) .text-btn:hover,
#app:not([data-active-view="home"]) .text-btn:focus-visible {
  border-color: var(--release-purple) !important;
  background: var(--release-purple-soft) !important;
  color: #fff !important;
  outline: none;
}

#app:not([data-active-view="home"]) .text-danger-btn {
  color: #ff9da6 !important;
}

#app:not([data-active-view="home"]) input,
#app:not([data-active-view="home"]) select,
#app:not([data-active-view="home"]) textarea {
  border-color: var(--release-line-strong) !important;
  border-radius: 8px;
  background: var(--release-surface-3) !important;
  color: var(--release-ink) !important;
}

#app:not([data-active-view="home"]) input::placeholder,
#app:not([data-active-view="home"]) textarea::placeholder {
  color: var(--release-dim) !important;
  opacity: 1;
}

#app:not([data-active-view="home"]) input:focus,
#app:not([data-active-view="home"]) select:focus,
#app:not([data-active-view="home"]) textarea:focus {
  border-color: var(--release-purple) !important;
  outline: 2px solid rgba(155, 123, 255, .12);
  outline-offset: 1px;
}

/* Workbench task list: a compact text-first list instead of a large card. */
#app[data-active-view="sessions"] .task-session-page {
  max-width: 1360px;
  padding: 34px clamp(20px, 4vw, 56px) 64px !important;
}

#app[data-active-view="sessions"] .task-session-toolbar {
  align-items: flex-end;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--release-line);
}

#app[data-active-view="sessions"] .task-session-heading {
  align-items: baseline;
  gap: 16px;
}

#app[data-active-view="sessions"] .task-session-heading .eyebrow {
  color: var(--release-purple) !important;
}

#app[data-active-view="sessions"] .task-session-heading h2 {
  color: var(--release-ink) !important;
  font-size: clamp(30px, 3.3vw, 44px);
  line-height: 1;
}

#app[data-active-view="sessions"] .task-session-heading p:not(.eyebrow) {
  color: var(--release-muted) !important;
}

#app[data-active-view="sessions"] .task-session-board {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="sessions"] .task-session-board-head {
  padding: 18px 0 12px;
  border-bottom: 1px solid var(--release-line);
}

#app[data-active-view="sessions"] .session-filter-bar button {
  min-height: 32px;
  border-radius: 6px;
  color: var(--release-muted);
}

#app[data-active-view="sessions"] .session-filter-bar button.active,
#app[data-active-view="sessions"] .session-filter-bar button:hover {
  color: var(--release-ink);
  background: var(--release-purple-soft);
}

#app[data-active-view="sessions"] .session-active-summary span {
  color: var(--release-dim) !important;
}

#app[data-active-view="sessions"] .session-active-summary strong {
  color: var(--release-ink) !important;
}

#app[data-active-view="sessions"] .task-session-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--release-line);
}

#app[data-active-view="sessions"] .task-session-list .session-card.session-row {
  min-height: 88px;
  padding: 16px 0;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="sessions"] .task-session-list .session-card.session-row:hover,
#app[data-active-view="sessions"] .task-session-list .session-card.session-row:focus-within {
  background: rgba(155, 123, 255, .035) !important;
}

#app[data-active-view="sessions"] .task-session-list .session-card.session-row.active {
  background: linear-gradient(90deg, rgba(155, 123, 255, .08), transparent 42%) !important;
}

#app[data-active-view="sessions"] .session-index,
#app[data-active-view="sessions"] .session-card .session-mode,
#app[data-active-view="sessions"] .session-card time {
  color: var(--release-dim) !important;
}

#app[data-active-view="sessions"] .session-card h3,
#app[data-active-view="sessions"] .session-card strong {
  color: var(--release-ink) !important;
}

#app[data-active-view="sessions"] .session-card p,
#app[data-active-view="sessions"] .session-card small {
  color: var(--release-muted) !important;
}

/* Prompt Library: compact editorial grid with the full prompt kept in the
   editor, so each card carries only enough information to scan and choose. */
#app[data-active-view="templates"] .page-scroll {
  max-width: 1480px;
  padding-top: 28px !important;
}

#app[data-active-view="templates"] .template-use-workspace {
  grid-template-columns: minmax(220px, .34fr) minmax(0, .66fr) !important;
  gap: 30px;
  margin: 0 0 22px;
  padding: 4px 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="templates"] .template-use-copy {
  align-content: start;
  gap: 10px;
}

#app[data-active-view="templates"] .template-use-copy h3 {
  max-width: 12ch;
  color: var(--release-ink) !important;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.03;
}

#app[data-active-view="templates"] .template-use-copy p:not(.eyebrow) {
  max-width: 38rem;
  color: var(--release-muted) !important;
  line-height: 1.6;
}

#app[data-active-view="templates"] .template-use-editor-card {
  gap: 10px;
  padding: 16px !important;
  border: 1px solid var(--release-line) !important;
  border-radius: 14px !important;
  background: var(--release-surface) !important;
  box-shadow: none !important;
}

#app[data-active-view="templates"] .template-editor {
  height: 250px;
  min-height: 250px !important;
  padding: 14px !important;
  border: 1px solid var(--release-line) !important;
  border-radius: 9px !important;
  background: var(--release-surface-3) !important;
  color: var(--release-ink) !important;
  font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#app[data-active-view="templates"] .template-library-toolbar {
  gap: 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--release-line);
}

#app[data-active-view="templates"] .template-library-heading h3,
#app[data-active-view="templates"] .template-results-head strong {
  color: var(--release-ink) !important;
}

#app[data-active-view="templates"] .template-library-heading > span,
#app[data-active-view="templates"] .template-results-head span {
  color: var(--release-muted) !important;
}

#app[data-active-view="templates"] .template-search-field input,
#app[data-active-view="templates"] .template-filter-select-field select {
  height: 38px;
  border: 1px solid var(--release-line-strong) !important;
  border-radius: 8px;
  background: var(--release-surface-3) !important;
  color: var(--release-ink) !important;
}

#app[data-active-view="templates"] .template-primary-filter {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

#app[data-active-view="templates"] .template-primary-tab {
  flex: 0 0 auto;
  height: 34px;
  padding-inline: 10px;
  border: 1px solid var(--release-line) !important;
  border-radius: 7px;
  background: transparent !important;
  color: var(--release-muted) !important;
  font-size: 10px;
}

#app[data-active-view="templates"] .template-primary-tab:hover,
#app[data-active-view="templates"] .template-primary-tab.active {
  border-color: rgba(155, 123, 255, .62) !important;
  background: var(--release-purple-soft) !important;
  color: var(--release-ink) !important;
}

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

#app[data-active-view="templates"] .template-choice-card {
  display: grid;
  min-height: 208px;
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid var(--release-line) !important;
  border-radius: 11px !important;
  background: var(--release-surface) !important;
  box-shadow: none !important;
}

#app[data-active-view="templates"] .template-choice-card:hover,
#app[data-active-view="templates"] .template-choice-card.active {
  transform: translateY(-1px);
  border-color: rgba(155, 123, 255, .68) !important;
  background: #17151f !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
}

#app[data-active-view="templates"] .template-choice-index,
#app[data-active-view="templates"] .template-choice-category {
  color: var(--release-dim) !important;
  font-size: 10px;
}

#app[data-active-view="templates"] .template-choice-body {
  min-height: 76px !important;
}

#app[data-active-view="templates"] .template-choice-body h3 {
  display: -webkit-box;
  margin: 0 0 6px;
  overflow: hidden;
  color: var(--release-ink) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#app[data-active-view="templates"] .template-choice-body p {
  color: var(--release-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 2 !important;
}

#app[data-active-view="templates"] .template-choice-facts {
  gap: 0;
  border: 0 !important;
  border-top: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="templates"] .template-choice-facts > span {
  padding: 7px 6px 0 !important;
  background: transparent !important;
  color: var(--release-ink) !important;
  font-size: 10px;
}

#app[data-active-view="templates"] .template-choice-facts small,
#app[data-active-view="templates"] .template-choice-card .template-tag {
  color: var(--release-dim) !important;
  font-size: 9px !important;
}

#app[data-active-view="templates"] .template-choice-actions {
  gap: 6px !important;
}

#app[data-active-view="templates"] .template-choice-actions .ghost-btn,
#app[data-active-view="templates"] .template-choice-actions .primary-btn {
  min-height: 30px !important;
  padding-inline: 8px !important;
  border-radius: 6px;
  font-size: 9px !important;
}

/* Run History is an operational text log. No thumbnail treatment and no
   repeated card-in-card framing. */
#app[data-active-view="logs"] .project-log-page {
  max-width: 1400px;
  padding: 32px clamp(20px, 4vw, 56px) 64px !important;
  overflow: visible !important;
}

#app[data-active-view="logs"] .project-log-toolbar {
  grid-template-columns: minmax(210px, .75fr) minmax(0, 1.8fr) auto;
  gap: 18px;
  padding: 0 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="logs"] .project-log-summary h2 {
  color: var(--release-ink) !important;
  font-size: 20px;
}

#app[data-active-view="logs"] .project-log-summary .eyebrow {
  color: var(--release-red) !important;
}

#app[data-active-view="logs"] .project-log-summary > p:last-child,
#app[data-active-view="logs"] .project-log-filters label > span {
  color: var(--release-muted) !important;
}

#app[data-active-view="logs"] .project-log-filters {
  gap: 8px;
}

#app[data-active-view="logs"] .project-log-filters input,
#app[data-active-view="logs"] .project-log-filters select,
#app[data-active-view="logs"] .project-log-more > summary {
  min-height: 36px;
  border: 1px solid var(--release-line-strong) !important;
  border-radius: 7px;
  background: var(--release-surface-3) !important;
  color: var(--release-ink) !important;
}

#app[data-active-view="logs"] .project-log-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0 !important;
  overflow: visible !important;
  border-top: 1px solid var(--release-line);
}

#app[data-active-view="logs"] .project-log-card {
  height: auto;
  min-height: 116px;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="logs"] .project-log-card-open {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  gap: 18px;
  min-height: 116px;
  padding: 16px 0 !important;
  background: transparent !important;
}

#app[data-active-view="logs"] .project-log-card-open:hover,
#app[data-active-view="logs"] .project-log-card-open:focus-visible {
  background: rgba(155, 123, 255, .035) !important;
  outline: none;
}

#app[data-active-view="logs"] .project-log-status-mark {
  display: grid;
  min-height: 48px;
  place-items: center start;
  padding: 0 10px;
  border: 1px solid var(--release-line) !important;
  border-radius: 7px;
  background: var(--release-surface-2) !important;
  color: var(--release-muted) !important;
}

#app[data-active-view="logs"] .project-log-status-mark[data-tone="warning"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="error"] {
  border-color: rgba(240, 100, 112, .5) !important;
  background: var(--release-red-soft) !important;
  color: #ffadb5 !important;
}

#app[data-active-view="logs"] .project-log-card-copy > div:first-child,
#app[data-active-view="logs"] .project-log-card-copy p,
#app[data-active-view="logs"] .project-log-card-meta {
  color: var(--release-muted) !important;
}

#app[data-active-view="logs"] .project-log-card-copy h3 {
  margin: 6px 0 4px;
  color: var(--release-ink) !important;
  font-size: 16px;
}

#app[data-active-view="logs"] .project-log-card-open > strong {
  color: var(--release-purple-strong) !important;
  font-size: 11px;
  white-space: nowrap;
}

#app[data-active-view="logs"] .history-empty {
  min-height: 220px;
  padding: 28px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="logs"] .history-empty strong {
  color: var(--release-ink) !important;
  font-size: 22px;
}

#app[data-active-view="logs"] .history-empty p {
  color: var(--release-muted) !important;
}

/* Model Services: a quiet settings console with one navigation rail and one
   focused configuration surface. */
#app[data-active-view="setup"] .setup-service-scroll {
  max-width: 1400px;
  padding: 30px clamp(20px, 4vw, 56px) 64px !important;
  gap: 20px;
}

#app[data-active-view="setup"] .model-service-commandbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 0 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="setup"] .setup-overall-state small {
  color: var(--release-dim) !important;
}

#app[data-active-view="setup"] .setup-overall-state strong {
  color: var(--release-ink) !important;
}

#app[data-active-view="setup"] .model-service-workspace {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
}

#app[data-active-view="setup"] .model-service-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="setup"] .model-service-nav-item {
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 74px;
  padding: 12px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--release-muted) !important;
}

#app[data-active-view="setup"] .model-service-nav-item.is-active,
#app[data-active-view="setup"] .model-service-nav-item:hover {
  background: linear-gradient(90deg, var(--release-purple-soft), transparent) !important;
  color: var(--release-ink) !important;
}

#app[data-active-view="setup"] .model-service-nav-index {
  color: var(--release-purple-strong) !important;
}

#app[data-active-view="setup"] .model-service-nav-item strong {
  color: inherit !important;
  font-size: 12px;
}

#app[data-active-view="setup"] .model-service-nav-item small,
#app[data-active-view="setup"] .model-service-nav-note {
  color: var(--release-dim) !important;
}

#app[data-active-view="setup"] .model-service-nav-note {
  margin-top: auto;
  padding: 18px 8px 0;
  border: 0 !important;
  background: transparent !important;
  font-size: 10px;
  line-height: 1.5;
}

#app[data-active-view="setup"] .model-service-nav-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--release-muted) !important;
}

#app[data-active-view="setup"] .model-service-detail-stack {
  min-width: 0;
}

#app[data-active-view="setup"] .setup-provider-band {
  grid-template-columns: 250px minmax(0, 1fr);
  min-width: 0;
  border: 1px solid var(--release-line) !important;
  border-radius: 16px !important;
  background: var(--release-surface) !important;
  box-shadow: none !important;
}

#app[data-active-view="setup"] .provider-guide {
  min-width: 0;
  padding: 22px 20px !important;
  border-right: 1px solid var(--release-line) !important;
  background: transparent !important;
}

#app[data-active-view="setup"] .provider-guide .eyebrow {
  color: var(--release-purple-strong) !important;
}

#app[data-active-view="setup"] .provider-guide h3,
#app[data-active-view="setup"] .provider-config-head h3 {
  color: var(--release-ink) !important;
}

#app[data-active-view="setup"] .provider-summary,
#app[data-active-view="setup"] .provider-test-result {
  color: var(--release-muted) !important;
}

#app[data-active-view="setup"] .provider-external-link {
  border-color: var(--release-line-strong) !important;
  background: transparent !important;
  color: var(--release-ink) !important;
}

#app[data-active-view="setup"] .provider-config {
  min-width: 0;
  padding: 22px 24px 24px !important;
  background: transparent !important;
}

#app[data-active-view="setup"] .provider-config-head {
  border-bottom-color: var(--release-line) !important;
}

#app[data-active-view="setup"] .model-lockup small,
#app[data-active-view="setup"] .setup-field > span {
  color: var(--release-muted) !important;
}

#app[data-active-view="setup"] .model-lockup strong {
  color: var(--release-purple-strong) !important;
}

#app[data-active-view="setup"] .provider-actions {
  border-top-color: var(--release-line) !important;
}

#app[data-active-view="setup"] .provider-actions .text-danger-btn {
  color: #ff9da6 !important;
}

/* Responsive contract: preserve the same hierarchy, never let labels or
   output controls push the page wider than the viewport. */
@media (max-width: 1180px) {
  #app:not([data-active-view="home"]) .topbar {
    grid-template-columns: minmax(150px, .7fr) minmax(0, 1fr) auto;
    gap: 12px;
    padding-inline: 18px !important;
  }

  #app:not([data-active-view="home"]) .workspace-topnav-item {
    padding-inline: 8px;
    font-size: 10px;
  }

  #app:not([data-active-view="home"]) .workspace-topnav-item:nth-child(4),
  #app:not([data-active-view="home"]) .workspace-topnav-item:nth-child(6) {
    margin-left: 5px;
    padding-left: 13px;
  }

  #app[data-active-view="templates"] .template-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #app[data-active-view="setup"] .model-service-workspace {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  #app:not([data-active-view="home"]) .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "copy account" "nav nav";
    height: 112px;
    min-height: 112px;
    align-content: center;
    row-gap: 5px;
    padding: 10px 16px !important;
  }

  #app:not([data-active-view="home"]) > .shell {
    padding-top: 112px !important;
  }

  #app:not([data-active-view="home"]) .topbar-copy {
    grid-area: copy;
  }

  #app:not([data-active-view="home"]) .topbar-actions {
    grid-area: account;
  }

  #app:not([data-active-view="home"]) .workspace-topnav {
    grid-area: nav;
    justify-content: flex-start;
    width: 100%;
  }

  #app[data-active-view="workbench"] .composer-launcher-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app[data-active-view="workbench"] .output-overview {
    grid-template-columns: 1fr;
  }

  #app[data-active-view="workbench"] .overview-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--release-line) !important;
  }

  #app[data-active-view="workbench"] .overview-card:last-child {
    border-bottom: 0 !important;
  }

  #app[data-creation-mode="fast"] .fast-flow-rail {
    grid-template-columns: repeat(6, minmax(132px, 1fr)) !important;
    overflow-x: auto;
    padding-inline: 24px !important;
  }

  #app[data-creation-mode="fast"] .review-skill-grid {
    grid-template-columns: repeat(10, minmax(108px, 1fr)) !important;
  }

  #app[data-active-view="templates"] .template-use-workspace,
  #app[data-active-view="setup"] .model-service-workspace {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="setup"] .provider-guide {
    border-right: 0 !important;
    border-bottom: 1px solid var(--release-line) !important;
  }

  #app[data-active-view="logs"] .project-log-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #app[data-active-view="logs"] .project-log-more {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  #app:not([data-active-view="home"]) .topbar {
    padding-inline: 12px !important;
  }

  #app:not([data-active-view="home"]) .topbar h1 {
    font-size: 21px !important;
  }

  #app:not([data-active-view="home"]) .workspace-topbar-account {
    margin-left: 3px;
    padding-left: 7px;
  }

  #app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link {
    padding-inline: 7px;
    font-size: 10px;
  }

  #app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-plans {
    display: none;
  }

  #app:not([data-active-view="home"]) .page-scroll,
  #app[data-active-view="workbench"] .workbench-grid {
    padding-inline: 14px !important;
  }

  #app[data-active-view="workbench"] .composer-card {
    border-radius: 14px !important;
  }

  #app[data-active-view="workbench"] .reactor-core-top,
  #app[data-active-view="workbench"] .composer-stage,
  #app[data-active-view="workbench"] .composer-bottombar,
  #app[data-active-view="workbench"] .reactor-core-status,
  #app[data-creation-mode="fast"] .fast-flow-rail,
  #app[data-creation-mode="fast"] .review-console {
    padding-inline: 14px !important;
  }

  #app[data-active-view="workbench"] .composer-launcher-row {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="workbench"] .composer-bottombar {
    align-items: stretch;
    flex-direction: column;
  }

  #app[data-active-view="workbench"] .composer-bottom-right {
    width: 100%;
    justify-content: flex-end;
  }

  #app[data-active-view="workbench"] .prompt-stage-card {
    padding: 14px !important;
    border-radius: 13px !important;
  }

  #app[data-active-view="workbench"] .prompt-stage-card .prompt-head {
    flex-direction: column;
  }

  #app[data-active-view="workbench"] .prompt-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #app[data-active-view="workbench"] .prompt-toolbar .small {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #app[data-active-view="workbench"] .prompt-body {
    min-height: 200px;
    padding: 14px !important;
    font-size: 12px;
  }

  #app[data-active-view="templates"] .template-choice-grid {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="templates"] .template-choice-card {
    min-height: 0;
  }

  #app[data-active-view="templates"] .template-editor {
    height: 220px;
    min-height: 220px !important;
  }

  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
  }

  #app[data-active-view="logs"] .project-log-card-open > strong {
    grid-column: 2;
  }

  #app[data-active-view="logs"] .project-log-status-mark {
    min-height: 42px;
  }

  #app[data-active-view="setup"] .model-service-commandbar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #app[data-active-view="setup"] .model-service-command-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #app[data-active-view="setup"] .provider-config {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  #app[data-active-view="setup"] .provider-config > *,
  #app[data-active-view="setup"] .setup-field:has(input[type="password"]) {
    grid-column: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app[data-creation-mode="fast"] .fast-flow-rail::after,
  #app[data-creation-mode="fast"] .fast-flow-node[data-status="running"] > span {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Shared product header

   Landing and workspace now use the same header node. It stays in normal
   document flow on every route; only the page title copy changes when the
   route is a functional surface.
   -------------------------------------------------------------------------- */

#app > .shell {
  width: 100% !important;
  min-height: 100dvh !important;
  padding-top: 0 !important;
}

#app .topbar,
#app[data-active-view="home"] .topbar {
  position: relative !important;
  inset: auto !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  height: auto !important;
  min-height: var(--dp-topbar-height) !important;
  margin: 0 !important;
  padding: 12px clamp(20px, 4vw, 54px) 11px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: var(--dp-bg) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app[data-active-view="home"] .topbar {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

#app[data-active-view="home"] .topbar-copy {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

#app[data-active-view="home"] .topbar-copy > .eyebrow,
#app[data-active-view="home"] .topbar-copy > h1,
#app[data-active-view="home"] .topbar-copy > p:last-child {
  display: none !important;
}

#app[data-active-view="home"] .topbar-home-link {
  min-height: 40px !important;
}

#app[data-active-view="home"] .workspace-topnav,
#app[data-active-view="home"] .topbar-actions {
  min-width: 0 !important;
}

#app[data-active-view="home"] .workspace-topnav {
  display: flex !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 0 !important;
  overflow-x: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
}

#app[data-active-view="home"] .workspace-topnav::-webkit-scrollbar {
  display: none !important;
}

#app[data-active-view="home"] .workspace-topnav-item {
  position: relative !important;
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease !important;
}

#app[data-active-view="home"] .workspace-topnav-item:nth-child(4),
#app[data-active-view="home"] .workspace-topnav-item:nth-child(6) {
  margin-left: 10px !important;
  padding-left: 18px !important;
}

#app[data-active-view="home"] .workspace-topnav-item:nth-child(4)::before,
#app[data-active-view="home"] .workspace-topnav-item:nth-child(6)::before {
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 1px !important;
  content: "" !important;
  background: var(--dp-line-strong) !important;
}

#app[data-active-view="home"] .workspace-topnav-item:hover,
#app[data-active-view="home"] .workspace-topnav-item:focus-visible {
  color: var(--dp-ink) !important;
  background: rgba(244, 244, 242, .06) !important;
  outline: none !important;
  transform: translateY(-1px);
}

#app[data-active-view="home"] .topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="home"] .topbar-actions > .workbench-task-context,
#app[data-active-view="home"] .topbar-actions > #jump-to-output,
#app[data-active-view="home"] .topbar-actions > #jump-to-logs {
  display: none !important;
}

#app[data-active-view="home"] .workspace-topbar-account {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: max-content !important;
  margin-left: 10px !important;
  padding-left: 14px !important;
  border-left: 1px solid var(--dp-line-strong) !important;
}

#app[data-active-view="home"] .workspace-topbar-account .workspace-account-link {
  min-height: 36px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  white-space: nowrap !important;
}

#app[data-active-view="home"] .workspace-topbar-account .workspace-account-link:hover,
#app[data-active-view="home"] .workspace-topbar-account .workspace-account-link:focus-visible {
  color: var(--dp-ink) !important;
  background: rgba(244, 244, 242, .06) !important;
  outline: none !important;
}

#app[data-active-view="home"] .workspace-topbar-account .workspace-account-primary {
  border: 1px solid var(--dp-purple) !important;
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app[data-active-view="home"] .workspace-topbar-account .workspace-account-primary:hover,
#app[data-active-view="home"] .workspace-topbar-account .workspace-account-primary:focus-visible {
  border-color: var(--dp-purple-bright) !important;
  background: var(--dp-purple-bright) !important;
  color: #fff !important;
}

#app[data-active-view="home"] .home-shell {
  width: min(1320px, 100%) !important;
  margin-inline: auto !important;
  padding: 0 clamp(20px, 4vw, 54px) 26px !important;
}

@media (max-width: 860px) {
  #app[data-active-view="home"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "copy account" "nav nav" !important;
    min-height: 112px !important;
    padding: 10px 16px !important;
    row-gap: 4px !important;
  }

  #app[data-active-view="home"] .topbar-copy {
    grid-area: copy !important;
  }

  #app[data-active-view="home"] .workspace-topnav {
    grid-area: nav !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #app[data-active-view="home"] .topbar-actions {
    grid-area: account !important;
  }
}

@media (max-width: 640px) {
  #app[data-active-view="home"] .topbar-home-name {
    display: none !important;
  }

  #app[data-active-view="home"] .workspace-topbar-account .workspace-account-link {
    padding-inline: 6px !important;
    font-size: 10px !important;
  }

  #app[data-active-view="home"] .workspace-topbar-account .workspace-account-plans {
    display: none !important;
  }

  #app[data-active-view="home"] .home-shell {
    padding-inline: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   Functional surfaces v3
   Final visual authority for the overseas web release. This block deliberately
   stays in the overseas override file: the CN stylesheet, baseline directory,
   data layer, handlers, routes, and prompt contracts remain untouched.

   Direction: dark editorial SaaS, restrained white surfaces, one purple
   interaction accent, one red execution accent, and hairline separators.
   -------------------------------------------------------------------------- */

:root {
  --dp-bg: #08080a;
  --dp-surface: #101014;
  --dp-surface-2: #141419;
  --dp-surface-3: #0c0c10;
  --dp-ink: #f4f4f1;
  --dp-muted: #a5a5ad;
  --dp-dim: #73737d;
  --dp-line: rgba(244, 244, 241, .12);
  --dp-line-soft: rgba(244, 244, 241, .075);
  --dp-line-strong: rgba(244, 244, 241, .23);
  --dp-purple: #a27dff;
  --dp-purple-bright: #b69aff;
  --dp-purple-soft: rgba(162, 125, 255, .14);
  --dp-red: #f16a75;
  --dp-red-soft: rgba(241, 106, 117, .13);
  --dp-radius: 14px;
  --dp-topbar-height: 74px;
  --dp-content-width: 1360px;
}

html {
  background: var(--dp-bg) !important;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--dp-bg) !important;
  color: var(--dp-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

#app:not([data-active-view="home"]) {
  min-width: 0 !important;
  width: 100% !important;
  background: var(--dp-bg) !important;
  color: var(--dp-ink) !important;
}

#app:not([data-active-view="home"]) > .sidebar {
  display: none !important;
}

#app:not([data-active-view="home"]) > .shell {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-top: var(--dp-topbar-height) !important;
  background: var(--dp-bg) !important;
}

#app:not([data-active-view="home"]) .view,
#app:not([data-active-view="home"]) .page-scroll,
#app:not([data-active-view="home"]) .workbench-grid {
  min-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
}

/* Compact fixed navigation. The page name is an anchor, not a second hero. */
#app:not([data-active-view="home"]) .topbar {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 500 !important;
  display: grid !important;
  grid-template-columns: minmax(180px, .76fr) minmax(0, 1.34fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  height: var(--dp-topbar-height) !important;
  min-height: var(--dp-topbar-height) !important;
  margin: 0 !important;
  padding: 0 clamp(22px, 3.6vw, 52px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line-soft) !important;
  border-radius: 0 !important;
  background: rgba(8, 8, 10, .94) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  backdrop-filter: blur(20px) saturate(115%);
}

#app:not([data-active-view="home"]) .topbar-copy {
  min-width: 0 !important;
}

#app:not([data-active-view="home"]) .topbar .eyebrow {
  display: block !important;
  margin: 0 0 5px !important;
  overflow: hidden;
  color: var(--dp-purple-bright) !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  letter-spacing: .14em !important;
  line-height: 1 !important;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

#app:not([data-active-view="home"]) .topbar h1 {
  margin: 0 !important;
  overflow: hidden;
  color: var(--dp-ink) !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 720 !important;
  letter-spacing: -.045em !important;
  line-height: 1.04 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app:not([data-active-view="home"]) .topbar .topbar-copy > p:last-child {
  display: none !important;
}

/* The navigation is open on the page, with separators between product groups. */
#app:not([data-active-view="home"]) .workspace-topnav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow-x: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none;
}

#app:not([data-active-view="home"]) .workspace-topnav::-webkit-scrollbar {
  display: none;
}

#app:not([data-active-view="home"]) .workspace-topnav-item {
  position: relative;
  flex: 0 0 auto;
  min-height: 38px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  letter-spacing: -.01em;
  line-height: 1 !important;
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

#app:not([data-active-view="home"]) .workspace-topnav-item:nth-of-type(4),
#app:not([data-active-view="home"]) .workspace-topnav-item:nth-of-type(6) {
  margin-left: 10px !important;
  padding-left: 18px !important;
}

#app:not([data-active-view="home"]) .workspace-topnav-item:nth-of-type(4)::before,
#app:not([data-active-view="home"]) .workspace-topnav-item:nth-of-type(6)::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 1px;
  content: "";
  background: var(--dp-line-strong);
}

#app:not([data-active-view="home"]) .workspace-topnav-item:hover,
#app:not([data-active-view="home"]) .workspace-topnav-item:focus-visible {
  color: var(--dp-ink) !important;
  background: rgba(244, 244, 241, .06) !important;
  outline: none !important;
}

/* Reset stale server-side/first-paint active classes, then derive the active
   state from the route attributes as a fallback while JS finishes booting. */
#app:not([data-active-view="home"]) .workspace-topnav-item.active {
  color: var(--dp-muted) !important;
  background: transparent !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .workspace-topnav-item[data-view="quick-start"],
#app[data-active-view="workbench"][data-creation-entry="fast"] .workspace-topnav-item[data-view="fast"],
#app[data-active-view="sessions"] .workspace-topnav-item[data-view="sessions"],
#app[data-active-view="templates"] .workspace-topnav-item[data-view="templates"],
#app[data-active-view="logs"] .workspace-topnav-item[data-view="logs"],
#app[data-active-view="setup"] .workspace-topnav-item[data-view="setup"] {
  color: var(--dp-ink) !important;
  background: var(--dp-purple-soft) !important;
}

#app:not([data-active-view="home"]) .workspace-topnav-item.active::after,
#app:not([data-active-view="home"]) .workspace-topnav-item::after {
  right: 10px !important;
  bottom: 1px !important;
  left: 10px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: transparent !important;
  content: "" !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .workspace-topnav-item[data-view="quick-start"]::after,
#app[data-active-view="workbench"][data-creation-entry="fast"] .workspace-topnav-item[data-view="fast"]::after,
#app[data-active-view="sessions"] .workspace-topnav-item[data-view="sessions"]::after,
#app[data-active-view="templates"] .workspace-topnav-item[data-view="templates"]::after,
#app[data-active-view="logs"] .workspace-topnav-item[data-view="logs"]::after,
#app[data-active-view="setup"] .workspace-topnav-item[data-view="setup"]::after {
  background: var(--dp-purple) !important;
}

#app:not([data-active-view="home"]) .topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Context shortcuts are useful inside the workbench but visually compete with
   the primary nav. The same actions remain available in the output footer. */
#app:not([data-active-view="home"]) .topbar-actions > .workbench-task-context,
#app:not([data-active-view="home"]) .topbar-actions > #jump-to-output,
#app:not([data-active-view="home"]) .topbar-actions > #jump-to-logs {
  display: none !important;
}

#app:not([data-active-view="home"]) .workspace-topbar-account {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: max-content !important;
  margin-left: 10px !important;
  padding-left: 14px !important;
  border-left: 1px solid var(--dp-line-strong) !important;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link {
  min-height: 36px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  white-space: nowrap;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:hover,
#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:focus-visible {
  color: var(--dp-ink) !important;
  background: rgba(244, 244, 241, .06) !important;
  outline: none !important;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary {
  border: 1px solid var(--dp-purple) !important;
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary:hover,
#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary:focus-visible {
  border-color: var(--dp-purple-bright) !important;
  background: var(--dp-purple-bright) !important;
  color: #fff !important;
}

/* Shared neutral foundation. Remove the inherited teal/cyan surfaces and the
   extra wrapper treatments; page-specific primary surfaces are restored below. */
#app:not([data-active-view="home"]) .setup-shell,
#app:not([data-active-view="home"]) .output-stage,
#app:not([data-active-view="home"]) .reactor-shell,
#app:not([data-active-view="home"]) .reactor-flow-map,
#app:not([data-active-view="home"]) .reactor-core,
#app:not([data-active-view="home"]) .composer-stage,
#app:not([data-active-view="home"]) .composer-bottombar,
#app:not([data-active-view="home"]) .reactor-core-status {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .setup-shell::before,
#app:not([data-active-view="home"]) .setup-shell::after,
#app:not([data-active-view="home"]) .output-stage::before,
#app:not([data-active-view="home"]) .output-stage::after,
#app:not([data-active-view="home"]) .composer-card::before,
#app:not([data-active-view="home"]) .composer-card::after,
#app:not([data-active-view="home"]) .composer-stage::before,
#app:not([data-active-view="home"]) .composer-stage::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .panel,
#app:not([data-active-view="home"]) .page-hero,
#app:not([data-active-view="home"]) .schema-card,
#app:not([data-active-view="home"]) .library-card,
#app:not([data-active-view="home"]) .template-card,
#app:not([data-active-view="home"]) .agent-map-card,
#app:not([data-active-view="home"]) .band-card,
#app:not([data-active-view="home"]) .api-card,
#app:not([data-active-view="home"]) .task-session-board {
  border-color: var(--dp-line) !important;
  color: var(--dp-ink) !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .panel h2,
#app:not([data-active-view="home"]) .panel h3,
#app:not([data-active-view="home"]) .page-hero h2,
#app:not([data-active-view="home"]) .section-intro h3,
#app:not([data-active-view="home"]) .panel strong {
  color: var(--dp-ink) !important;
}

#app:not([data-active-view="home"]) .panel p,
#app:not([data-active-view="home"]) .page-hero p,
#app:not([data-active-view="home"]) .section-intro p {
  color: var(--dp-muted) !important;
}

#app:not([data-active-view="home"]) input,
#app:not([data-active-view="home"]) textarea,
#app:not([data-active-view="home"]) select {
  border-color: var(--dp-line-strong) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-3) !important;
  color: var(--dp-ink) !important;
}

#app:not([data-active-view="home"]) input::placeholder,
#app:not([data-active-view="home"]) textarea::placeholder {
  color: var(--dp-dim) !important;
  opacity: 1 !important;
}

#app:not([data-active-view="home"]) input:focus,
#app:not([data-active-view="home"]) textarea:focus,
#app:not([data-active-view="home"]) select:focus {
  border-color: var(--dp-purple) !important;
  outline: 2px solid rgba(162, 125, 255, .16) !important;
  outline-offset: 1px;
}

#app:not([data-active-view="home"]) button:focus-visible,
#app:not([data-active-view="home"]) [role="button"]:focus-visible {
  outline: 2px solid rgba(182, 154, 255, .85) !important;
  outline-offset: 2px;
}

/* Content rhythm for every functional page. */
#app:not([data-active-view="home"]) .page-scroll {
  width: min(var(--dp-content-width), 100%) !important;
  margin-inline: auto !important;
  padding: 30px clamp(20px, 3.4vw, 48px) 72px !important;
}

/* --------------------------------------------------------------------------
   Workbench, Quick Start, and Creative Engine
   -------------------------------------------------------------------------- */

#app[data-active-view="workbench"] .workbench-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(var(--dp-content-width), 100%) !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 28px clamp(20px, 3.4vw, 48px) 72px !important;
  gap: 30px !important;
}

#app[data-active-view="workbench"] .setup-panel,
#app[data-active-view="workbench"] .output-panel {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .setup-shell,
#app[data-active-view="workbench"] .setup-content-grid,
#app[data-active-view="workbench"] .setup-main-column,
#app[data-active-view="workbench"] .field-textarea,
#app[data-active-view="workbench"] .composer-shell {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#app[data-active-view="workbench"] .composer-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 16px !important;
  background: var(--dp-surface) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .2) !important;
}

#app[data-active-view="workbench"] .reactor-shell,
#app[data-active-view="workbench"] .reactor-flow-map {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#app[data-active-view="workbench"] .reactor-core {
  order: 0 !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#app[data-active-view="workbench"] .reactor-core-top {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 18px 22px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  background: transparent !important;
}

/* Four controls on Creative Engine, three on Quick Start after its Style
   launcher is intentionally replaced by the inline style dock. */
#app[data-active-view="workbench"] .composer-launcher-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#app[data-creation-entry="quick-start"] .composer-launcher-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#app[data-active-view="workbench"] .composer-launcher,
#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle,
#app[data-active-view="workbench"] .composer-first-frame-size-control {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 10px !important;
  background: var(--dp-surface-2) !important;
  color: var(--dp-ink) !important;
  box-shadow: none !important;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

#app[data-active-view="workbench"] .composer-launcher:hover,
#app[data-active-view="workbench"] .composer-launcher:focus-within,
#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle:hover,
#app[data-active-view="workbench"] .composer-first-frame-size-control:hover {
  border-color: var(--dp-line-strong) !important;
  background: #19191f !important;
}

#app[data-active-view="workbench"] .composer-launcher {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 9px !important;
  row-gap: 3px !important;
  text-align: left !important;
}

#app[data-active-view="workbench"] .composer-launcher-glyph {
  display: grid !important;
  grid-row: 1 / -1 !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border: 1px solid rgba(162, 125, 255, .42) !important;
  border-radius: 8px !important;
  background: rgba(162, 125, 255, .1) !important;
  color: var(--dp-purple-bright) !important;
  font-size: 10px !important;
  font-weight: 760 !important;
}

#app[data-active-view="workbench"] .composer-launcher-upload .composer-launcher-glyph {
  border-color: rgba(241, 106, 117, .42) !important;
  background: var(--dp-red-soft) !important;
  color: #ff9ca5 !important;
}

#app[data-active-view="workbench"] .composer-launcher strong,
#app[data-active-view="workbench"] .composer-first-frame-prompt-copy strong,
#app[data-active-view="workbench"] .composer-first-frame-size-control > span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--dp-ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"] .composer-launcher small,
#app[data-active-view="workbench"] .composer-first-frame-prompt-copy small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--dp-muted) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle {
  gap: 9px !important;
  cursor: pointer;
}

#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle input {
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: var(--dp-purple) !important;
}

#app[data-active-view="workbench"] .composer-first-frame-prompt-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

#app[data-active-view="workbench"] .composer-first-frame-size-control {
  justify-content: space-between !important;
  gap: 10px !important;
}

#app[data-active-view="workbench"] .first-frame-size-selector {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  gap: 2px !important;
  min-width: 0 !important;
  padding: 3px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-3) !important;
}

#app[data-active-view="workbench"] .first-frame-size-selector button {
  min-width: 38px !important;
  min-height: 27px !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#app[data-active-view="workbench"] .first-frame-size-selector button.active,
#app[data-active-view="workbench"] .first-frame-size-selector button[aria-checked="true"] {
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app[data-active-view="workbench"] .composer-reference-strip {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .composer-reference-strip .reference-preview {
  padding: 10px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .composer-stage {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 16px 22px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--dp-surface-3) !important;
}

#app[data-active-view="workbench"] .idea-input.studio-input {
  display: block !important;
  width: 100% !important;
  min-height: 132px !important;
  margin: 0 !important;
  padding: 0 0 16px !important;
  resize: vertical !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.58 !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .idea-input.studio-input:focus {
  border-bottom-color: var(--dp-purple) !important;
  outline: 0 !important;
  box-shadow: 0 1px 0 var(--dp-purple) !important;
}

/* Quick Start's style selector remains available, but reads as an inline tool
   rather than a fourth dashboard card. */
#app[data-creation-entry="quick-start"] .quick-start-style-dock {
  display: block !important;
  width: 100% !important;
  min-height: 32px !important;
  margin: 8px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-creation-entry="quick-start"] .quick-start-wheel-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 32px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
}

#app[data-creation-entry="quick-start"] .quick-start-wheel-trigger:hover,
#app[data-creation-entry="quick-start"] .quick-start-wheel-trigger:focus-visible {
  color: var(--dp-ink) !important;
  outline: none !important;
}

#app[data-creation-entry="quick-start"] .quick-start-wheel-trigger small {
  color: var(--dp-dim) !important;
}

#app[data-active-view="workbench"] .composer-bottombar {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 12px 22px !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
}

#app[data-active-view="workbench"] .composer-bottom-left {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  min-width: 0 !important;
}

#app[data-active-view="workbench"] .composer-bottom-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin-left: auto !important;
}

#app[data-active-view="workbench"] .composer-inline-control {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#app[data-active-view="workbench"] .composer-control-label,
#app[data-active-view="workbench"] .composer-meta-readout {
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  white-space: nowrap;
}

#app[data-active-view="workbench"] .segmented.compact {
  display: inline-flex !important;
  gap: 2px !important;
  min-width: 0 !important;
  padding: 2px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-2) !important;
}

#app[data-active-view="workbench"] .segmented.compact .segment {
  min-height: 29px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  white-space: nowrap;
}

#app[data-active-view="workbench"] .segmented.compact .segment.active {
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app[data-active-view="workbench"] .composer-send-btn {
  display: inline-grid !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  place-items: center !important;
  border: 1px solid var(--dp-purple) !important;
  border-radius: 10px !important;
  background: var(--dp-purple) !important;
  color: #fff !important;
  font-size: 21px !important;
  box-shadow: 0 8px 20px rgba(162, 125, 255, .16) !important;
  transition: transform 180ms ease, background 180ms ease;
}

#app[data-active-view="workbench"] .composer-send-btn:hover,
#app[data-active-view="workbench"] .composer-send-btn:focus-visible {
  background: var(--dp-purple-bright) !important;
  transform: translateY(-1px);
}

#app[data-active-view="workbench"] .reactor-core-status {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 4px 12px !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 9px 22px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--dp-surface) !important;
  color: var(--dp-muted) !important;
}

#app[data-active-view="workbench"] .reactor-core-status > div:first-child {
  display: grid !important;
  gap: 2px !important;
  min-width: 0;
}

#app[data-active-view="workbench"] .reactor-core-status span,
#app[data-active-view="workbench"] .reactor-core-status small {
  overflow: hidden;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-active-view="workbench"] .reactor-core-status small {
  color: var(--dp-dim) !important;
  font-size: 10px !important;
}

#app[data-active-view="workbench"] .reactor-core-status > strong {
  color: var(--dp-ink) !important;
  font-size: 15px !important;
  font-variant-numeric: tabular-nums;
}

#app[data-active-view="workbench"] .reactor-progress-track {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 2px !important;
  overflow: hidden;
  border-radius: 999px !important;
  background: rgba(244, 244, 241, .1) !important;
}

#app[data-active-view="workbench"] .reactor-progress-track i {
  height: 100% !important;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dp-purple), var(--dp-red)) !important;
  box-shadow: none !important;
}

/* Creative Engine rail: six nodes stay in one readable line on desktop and
   become a contained horizontal rail before labels are forced to wrap. */
#app[data-creation-entry="fast"] .fast-flow-rail {
  order: 1 !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px 22px 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
  background: transparent !important;
  scrollbar-color: rgba(162, 125, 255, .45) transparent;
}

#app[data-creation-entry="fast"] .fast-flow-rail::before {
  position: absolute !important;
  top: 44px !important;
  right: 9% !important;
  left: 9% !important;
  z-index: 0 !important;
  height: 1px !important;
  content: "" !important;
  background: linear-gradient(90deg, rgba(162, 125, 255, .78), rgba(244, 244, 241, .2) 50%, rgba(241, 106, 117, .78)) !important;
  box-shadow: none !important;
}

#app[data-creation-entry="fast"] .fast-flow-rail::after {
  position: absolute !important;
  top: 42px !important;
  left: 9% !important;
  z-index: 1 !important;
  width: 42px !important;
  height: 4px !important;
  border-radius: 999px !important;
  content: "" !important;
  background: linear-gradient(90deg, transparent, var(--dp-purple-bright), transparent) !important;
  filter: drop-shadow(0 0 5px rgba(162, 125, 255, .48));
  animation: dpRailSweep 4.8s ease-in-out infinite !important;
}

#app[data-creation-entry="fast"] .fast-flow-node {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-rows: 48px 22px 28px !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 0 3px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  text-align: center !important;
  box-shadow: none !important;
}

#app[data-creation-entry="fast"] .fast-flow-node::before,
#app[data-creation-entry="fast"] .fast-flow-node::after {
  display: none !important;
  content: none !important;
}

#app[data-creation-entry="fast"] .fast-flow-node > span {
  position: relative !important;
  display: grid !important;
  width: 48px !important;
  height: 48px !important;
  place-items: center !important;
  border: 1px solid rgba(162, 125, 255, .72) !important;
  border-radius: 50% !important;
  background: #101016 !important;
  color: var(--dp-purple-bright) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  box-shadow: 0 0 0 4px rgba(162, 125, 255, .07) !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

#app[data-creation-entry="fast"] .fast-flow-node:nth-of-type(3) > span,
#app[data-creation-entry="fast"] .fast-flow-node:nth-of-type(6) > span {
  border-color: rgba(241, 106, 117, .72) !important;
  color: #ff9ca5 !important;
  box-shadow: 0 0 0 4px rgba(241, 106, 117, .07) !important;
}

#app[data-creation-entry="fast"] .fast-flow-node strong,
#app[data-creation-entry="fast"] .fast-flow-node small {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-creation-entry="fast"] .fast-flow-node strong {
  color: var(--dp-ink) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

#app[data-creation-entry="fast"] .fast-flow-node small {
  color: var(--dp-dim) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

#app[data-creation-entry="fast"] .fast-flow-node:hover,
#app[data-creation-entry="fast"] .fast-flow-node:focus-visible {
  transform: translateY(-2px);
  outline: none !important;
}

#app[data-creation-entry="fast"] .fast-flow-node:hover > span,
#app[data-creation-entry="fast"] .fast-flow-node:focus-visible > span,
#app[data-creation-entry="fast"] .fast-flow-node[data-status="running"] > span {
  border-color: var(--dp-purple-bright) !important;
  background: #1b1530 !important;
  color: #fff !important;
  box-shadow: 0 0 0 6px rgba(162, 125, 255, .1), 0 0 20px rgba(162, 125, 255, .2) !important;
}

#app[data-creation-entry="fast"] .fast-flow-node[data-status="done"] > span {
  background: #1b1630 !important;
  border-color: var(--dp-purple) !important;
}

#app[data-creation-entry="fast"] .fast-flow-node[data-status="error"] > span,
#app[data-creation-entry="fast"] .fast-flow-node[data-warning="true"] > span {
  border-color: var(--dp-red) !important;
  background: #281419 !important;
  color: #ffd9de !important;
  box-shadow: 0 0 0 6px rgba(241, 106, 117, .08) !important;
}

#app[data-creation-entry="fast"] .review-console {
  order: 2 !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 11px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 15px 22px 17px !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-creation-entry="fast"] .review-console-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
}

#app[data-creation-entry="fast"] .review-console-head span {
  color: var(--dp-red) !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

#app[data-creation-entry="fast"] .review-console-head strong {
  color: var(--dp-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#app[data-creation-entry="fast"] .review-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
}

#app[data-creation-entry="fast"] .review-skill-chip {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 7px 5px !important;
  overflow: hidden !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-2) !important;
  color: var(--dp-muted) !important;
  box-shadow: none !important;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

#app[data-creation-entry="fast"] .review-skill-chip:hover,
#app[data-creation-entry="fast"] .review-skill-chip:focus-visible,
#app[data-creation-entry="fast"] .review-skill-chip[data-status="running"] {
  border-color: rgba(162, 125, 255, .72) !important;
  background: #1b1630 !important;
  color: var(--dp-ink) !important;
  outline: none !important;
  transform: translateY(-1px);
}

#app[data-creation-entry="fast"] .review-skill-chip[data-status="error"] {
  border-color: rgba(241, 106, 117, .72) !important;
  background: #281419 !important;
  color: #ffd9de !important;
}

#app[data-creation-entry="fast"] .review-skill-chip span {
  color: var(--dp-purple-bright) !important;
  font-size: 9px !important;
  font-variant-numeric: tabular-nums;
}

#app[data-creation-entry="fast"] .review-skill-chip strong,
#app[data-creation-entry="fast"] .review-skill-chip small {
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-creation-entry="fast"] .review-skill-chip strong {
  color: inherit !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

#app[data-creation-entry="fast"] .review-skill-chip small {
  color: var(--dp-dim) !important;
  font-size: 9px !important;
}

#app[data-creation-entry="fast"] .review-console-foot {
  margin: 0 !important;
  color: var(--dp-dim) !important;
  font-size: 10px !important;
  text-align: right !important;
}

@keyframes dpRailSweep {
  0%, 18% { transform: translateX(0); opacity: .25; }
  55% { transform: translateX(900%); opacity: .85; }
  78%, 100% { transform: translateX(1700%); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Prompt output
   -------------------------------------------------------------------------- */

#app[data-active-view="workbench"] .output-panel {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

#app[data-active-view="workbench"] .output-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

#app[data-active-view="workbench"] .output-panel > .panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 8px !important;
  padding: 0 2px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
}

#app[data-active-view="workbench"] .output-panel > .panel-head h2 {
  margin: 0 !important;
  color: var(--dp-ink) !important;
  font-size: 22px !important;
  letter-spacing: -.035em;
}

#app[data-active-view="workbench"] .quality-badge,
#app[data-active-view="workbench"] .export-status {
  border: 1px solid var(--dp-line) !important;
  border-radius: 7px !important;
  background: var(--dp-surface-2) !important;
  color: var(--dp-muted) !important;
  font-size: 10px !important;
}

#app[data-active-view="workbench"] .output-overview {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
  border-bottom: 1px solid var(--dp-line) !important;
}

#app[data-active-view="workbench"] .overview-card {
  min-width: 0 !important;
  min-height: 78px !important;
  padding: 13px 16px !important;
  border: 0 !important;
  border-right: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .overview-card:last-child {
  border-right: 0 !important;
}

#app[data-active-view="workbench"] .overview-card .summary-label {
  color: var(--dp-purple-bright) !important;
  font-size: 10px !important;
  letter-spacing: .1em;
}

#app[data-active-view="workbench"] .overview-card strong {
  color: var(--dp-ink) !important;
  font-size: 13px !important;
}

#app[data-active-view="workbench"] .overview-card p,
#app[data-active-view="workbench"] .overview-card .pill-row {
  color: var(--dp-muted) !important;
}

#app[data-active-view="workbench"] .prompt-stage-card {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 14px !important;
  background: var(--dp-surface) !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .prompt-stage-card .prompt-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin: 0 0 10px !important;
}

#app[data-active-view="workbench"] .prompt-stage-card .prompt-head > div:first-child {
  min-width: 0 !important;
}

#app[data-active-view="workbench"] .prompt-stage-card .prompt-head > div:first-child > span {
  color: var(--dp-ink) !important;
  font-size: 17px !important;
  font-weight: 720 !important;
  letter-spacing: -.025em;
}

#app[data-active-view="workbench"] .prompt-caption {
  margin: 4px 0 0 !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
}

#app[data-active-view="workbench"] .prompt-toolbar {
  display: flex !important;
  flex: 0 1 auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#app[data-active-view="workbench"] .prompt-toolbar .small {
  min-height: 33px !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"] .prompt-toolbar .primary-btn.small {
  border-color: var(--dp-purple) !important;
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app[data-active-view="workbench"] .prompt-export-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid var(--dp-line-soft) !important;
  border-radius: 7px !important;
  background: var(--dp-surface-3) !important;
  color: var(--dp-muted) !important;
  font-size: 10px !important;
}

#app[data-active-view="workbench"] .prompt-body {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 218px !important;
  max-height: 480px !important;
  margin: 9px 0 0 !important;
  padding: 16px !important;
  overflow: auto !important;
  border: 1px solid var(--dp-line-soft) !important;
  border-radius: 9px !important;
  background: var(--dp-surface-3) !important;
  color: var(--dp-ink) !important;
  font: 12.5px/1.72 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .prompt-body.muted {
  color: var(--dp-muted) !important;
}

#app[data-active-view="workbench"] .first-frame-workspace,
#app[data-active-view="workbench"] .first-frame-pane {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

#app[data-active-view="workbench"] .first-frame-pane-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 26px !important;
  color: var(--dp-ink) !important;
}

#app[data-active-view="workbench"] .first-frame-pane-head small {
  color: var(--dp-muted) !important;
  font-size: 10px !important;
}

#app[data-active-view="workbench"] .first-frame-prompt {
  min-height: 200px !important;
  max-height: 420px !important;
  margin-top: 7px !important;
  font-size: 12.5px !important;
  line-height: 1.72 !important;
}

#app[data-active-view="workbench"] .workbench-action-strip {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Buttons use one compact SaaS grammar across all functional pages. */
#app:not([data-active-view="home"]) .primary-btn,
#app:not([data-active-view="home"]) .ghost-btn,
#app:not([data-active-view="home"]) .text-btn,
#app:not([data-active-view="home"]) .text-danger-btn {
  min-height: 36px !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

#app:not([data-active-view="home"]) .primary-btn {
  border: 1px solid var(--dp-purple) !important;
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app:not([data-active-view="home"]) .primary-btn:hover,
#app:not([data-active-view="home"]) .primary-btn:focus-visible {
  border-color: var(--dp-purple-bright) !important;
  background: var(--dp-purple-bright) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

#app:not([data-active-view="home"]) .ghost-btn,
#app:not([data-active-view="home"]) .text-btn {
  border: 1px solid var(--dp-line-strong) !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
}

#app:not([data-active-view="home"]) .ghost-btn:hover,
#app:not([data-active-view="home"]) .ghost-btn:focus-visible,
#app:not([data-active-view="home"]) .text-btn:hover,
#app:not([data-active-view="home"]) .text-btn:focus-visible {
  border-color: var(--dp-purple) !important;
  background: var(--dp-purple-soft) !important;
  color: #fff !important;
}

#app:not([data-active-view="home"]) .text-danger-btn {
  color: #ff9da6 !important;
}

/* --------------------------------------------------------------------------
   Workbench task list
   -------------------------------------------------------------------------- */

#app[data-active-view="sessions"] .task-session-page {
  width: min(1220px, 100%) !important;
  padding-top: 34px !important;
}

#app[data-active-view="sessions"] .task-session-toolbar {
  align-items: flex-end !important;
  gap: 20px !important;
  padding: 0 0 20px !important;
  border-bottom: 1px solid var(--dp-line) !important;
}

#app[data-active-view="sessions"] .task-session-heading {
  align-items: flex-end !important;
  gap: 16px !important;
}

#app[data-active-view="sessions"] .task-session-heading .eyebrow {
  color: var(--dp-purple-bright) !important;
}

#app[data-active-view="sessions"] .task-session-heading h2 {
  color: var(--dp-ink) !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1 !important;
}

#app[data-active-view="sessions"] .task-session-heading p:not(.eyebrow) {
  color: var(--dp-muted) !important;
}

#app[data-active-view="sessions"] .task-session-board {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="sessions"] .task-session-board-head {
  padding: 17px 0 11px !important;
  border-bottom: 1px solid var(--dp-line) !important;
}

#app[data-active-view="sessions"] .session-filter-bar button {
  min-height: 33px !important;
  border-radius: 7px !important;
  color: var(--dp-muted) !important;
}

#app[data-active-view="sessions"] .session-filter-bar button.active,
#app[data-active-view="sessions"] .session-filter-bar button:hover {
  color: var(--dp-ink) !important;
  background: var(--dp-purple-soft) !important;
}

#app[data-active-view="sessions"] .session-active-summary span {
  color: var(--dp-dim) !important;
}

#app[data-active-view="sessions"] .session-active-summary strong {
  color: var(--dp-ink) !important;
}

#app[data-active-view="sessions"] .task-session-list {
  display: grid !important;
  gap: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
}

#app[data-active-view="sessions"] .task-session-list .session-card.session-row {
  min-height: 94px !important;
  padding: 16px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="sessions"] .task-session-list .session-card.session-row:hover,
#app[data-active-view="sessions"] .task-session-list .session-card.session-row:focus-within {
  background: rgba(162, 125, 255, .035) !important;
}

#app[data-active-view="sessions"] .task-session-list .session-card.session-row.active {
  background: linear-gradient(90deg, rgba(162, 125, 255, .08), transparent 44%) !important;
}

#app[data-active-view="sessions"] .session-index,
#app[data-active-view="sessions"] .session-card .session-mode,
#app[data-active-view="sessions"] .session-card time {
  color: var(--dp-dim) !important;
}

#app[data-active-view="sessions"] .session-card-title,
#app[data-active-view="sessions"] .session-card h3,
#app[data-active-view="sessions"] .session-card strong {
  color: var(--dp-ink) !important;
}

#app[data-active-view="sessions"] .session-card-idea,
#app[data-active-view="sessions"] .session-card p,
#app[data-active-view="sessions"] .session-card small {
  color: var(--dp-muted) !important;
}

#app[data-active-view="sessions"] .session-progress-track {
  background: rgba(244, 244, 241, .1) !important;
}

#app[data-active-view="sessions"] .session-progress-track i {
  background: var(--dp-purple) !important;
}

#app[data-active-view="sessions"] .session-card[data-status="failed"] .session-progress-track i,
#app[data-active-view="sessions"] .session-card[data-status="needs_review"] .session-progress-track i {
  background: var(--dp-red) !important;
}

/* --------------------------------------------------------------------------
   Prompt Library
   -------------------------------------------------------------------------- */

#app[data-active-view="templates"] .page-scroll {
  width: min(1480px, 100%) !important;
  padding-top: 28px !important;
}

#app[data-active-view="templates"] .template-use-workspace {
  grid-template-columns: minmax(230px, .38fr) minmax(0, .62fr) !important;
  gap: 28px !important;
  margin: 0 0 22px !important;
  padding: 2px 0 22px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="templates"] .template-use-copy {
  align-content: start !important;
  gap: 9px !important;
}

#app[data-active-view="templates"] .template-use-copy h3 {
  max-width: 11ch !important;
  color: var(--dp-ink) !important;
  font-size: clamp(30px, 3.2vw, 44px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em;
}

#app[data-active-view="templates"] .template-use-copy p:not(.eyebrow) {
  max-width: 38rem !important;
  color: var(--dp-muted) !important;
  line-height: 1.55 !important;
}

#app[data-active-view="templates"] .template-use-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#app[data-active-view="templates"] .template-use-meta > span {
  padding: 5px 8px !important;
  border: 1px solid var(--dp-line-soft) !important;
  border-radius: 6px !important;
  background: var(--dp-surface-2) !important;
  color: var(--dp-muted) !important;
  font-size: 10px !important;
}

#app[data-active-view="templates"] .template-use-editor-card {
  gap: 9px !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 13px !important;
  background: var(--dp-surface) !important;
  box-shadow: none !important;
}

#app[data-active-view="templates"] .template-use-editor-head {
  min-width: 0 !important;
}

#app[data-active-view="templates"] .template-use-editor-head strong {
  display: -webkit-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--dp-ink) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#app[data-active-view="templates"] .template-editor {
  height: 216px !important;
  min-height: 216px !important;
  padding: 13px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-3) !important;
  color: var(--dp-ink) !important;
  font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

#app[data-active-view="templates"] .template-editor-foot {
  color: var(--dp-muted) !important;
  font-size: 10px !important;
}

#app[data-active-view="templates"] .template-library-toolbar {
  gap: 11px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--dp-line) !important;
}

#app[data-active-view="templates"] .template-library-heading h3,
#app[data-active-view="templates"] .template-results-head strong {
  color: var(--dp-ink) !important;
}

#app[data-active-view="templates"] .template-library-heading > span,
#app[data-active-view="templates"] .template-results-head span {
  color: var(--dp-muted) !important;
}

#app[data-active-view="templates"] .template-search-field input,
#app[data-active-view="templates"] .template-filter-select-field select {
  height: 38px !important;
  border: 1px solid var(--dp-line-strong) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-3) !important;
  color: var(--dp-ink) !important;
}

#app[data-active-view="templates"] .template-filter-toggle {
  min-height: 38px !important;
  border-color: var(--dp-line-strong) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
}

#app[data-active-view="templates"] .template-primary-filter {
  display: flex !important;
  gap: 5px !important;
  overflow-x: auto !important;
  padding-bottom: 1px !important;
  scrollbar-width: thin;
}

#app[data-active-view="templates"] .template-primary-tab {
  flex: 0 0 auto !important;
  min-height: 33px !important;
  padding: 0 10px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 10px !important;
}

#app[data-active-view="templates"] .template-primary-tab:hover,
#app[data-active-view="templates"] .template-primary-tab.active {
  border-color: rgba(162, 125, 255, .7) !important;
  background: var(--dp-purple-soft) !important;
  color: var(--dp-ink) !important;
}

#app[data-active-view="templates"] .template-results-head {
  padding: 16px 0 10px !important;
}

#app[data-active-view="templates"] .template-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  min-width: 0 !important;
}

#app[data-active-view="templates"] .template-choice-card {
  display: grid !important;
  min-width: 0 !important;
  min-height: 176px !important;
  gap: 8px !important;
  padding: 12px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 10px !important;
  background: var(--dp-surface) !important;
  box-shadow: none !important;
}

#app[data-active-view="templates"] .template-choice-card:hover,
#app[data-active-view="templates"] .template-choice-card.active {
  border-color: rgba(162, 125, 255, .72) !important;
  background: #17151f !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16) !important;
  transform: translateY(-1px);
}

#app[data-active-view="templates"] .template-choice-index,
#app[data-active-view="templates"] .template-choice-category {
  color: var(--dp-dim) !important;
  font-size: 10px !important;
}

#app[data-active-view="templates"] .template-choice-body {
  min-height: 64px !important;
}

#app[data-active-view="templates"] .template-choice-body h3 {
  display: -webkit-box !important;
  margin: 0 0 5px !important;
  overflow: hidden !important;
  color: var(--dp-ink) !important;
  font-size: 12px !important;
  line-height: 1.28 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#app[data-active-view="templates"] .template-choice-body p {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--dp-muted) !important;
  font-size: 10.5px !important;
  line-height: 1.42 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#app[data-active-view="templates"] .template-choice-facts {
  gap: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="templates"] .template-choice-facts > span {
  min-width: 0 !important;
  padding: 6px 5px 0 !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
  font-size: 9px !important;
}

#app[data-active-view="templates"] .template-choice-facts small,
#app[data-active-view="templates"] .template-choice-card .template-tag {
  color: var(--dp-dim) !important;
  font-size: 8.5px !important;
}

#app[data-active-view="templates"] .template-choice-card .template-meta {
  display: flex !important;
  min-height: 18px !important;
  gap: 4px !important;
  overflow: hidden !important;
}

#app[data-active-view="templates"] .template-choice-card .template-tag {
  max-width: 29% !important;
  overflow: hidden !important;
  padding: 3px 5px !important;
  border: 1px solid var(--dp-line-soft) !important;
  border-radius: 5px !important;
  background: var(--dp-surface-2) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="templates"] .template-choice-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

#app[data-active-view="templates"] .template-choice-actions .ghost-btn,
#app[data-active-view="templates"] .template-choice-actions .primary-btn {
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 0 5px !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Run History: text-first operational log, never a thumbnail gallery
   -------------------------------------------------------------------------- */

#app[data-active-view="logs"] .project-log-page {
  width: min(1240px, 100%) !important;
  min-height: 0 !important;
  padding-top: 32px !important;
  overflow: visible !important;
}

#app[data-active-view="logs"] .project-log-toolbar {
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.8fr) auto !important;
  gap: 18px !important;
  padding: 0 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="logs"] .project-log-summary .eyebrow {
  color: var(--dp-red) !important;
}

#app[data-active-view="logs"] .project-log-summary h2 {
  color: var(--dp-ink) !important;
  font-size: 20px !important;
}

#app[data-active-view="logs"] .project-log-summary > p:last-child,
#app[data-active-view="logs"] .project-log-filters label > span {
  color: var(--dp-muted) !important;
}

#app[data-active-view="logs"] .project-log-filters {
  gap: 8px !important;
}

#app[data-active-view="logs"] .project-log-filters input,
#app[data-active-view="logs"] .project-log-filters select,
#app[data-active-view="logs"] .project-log-more > summary {
  min-height: 38px !important;
  border: 1px solid var(--dp-line-strong) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-3) !important;
  color: var(--dp-ink) !important;
}

#app[data-active-view="logs"] .project-log-more > summary {
  min-width: 72px !important;
}

#app[data-active-view="logs"] .project-log-more > div {
  border-color: var(--dp-line) !important;
  border-radius: 10px !important;
  background: var(--dp-surface) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .34) !important;
}

#app[data-active-view="logs"] .project-log-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border-top: 1px solid var(--dp-line) !important;
}

#app[data-active-view="logs"] .project-log-card {
  height: auto !important;
  min-height: 108px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="logs"] .project-log-card figure {
  display: none !important;
}

#app[data-active-view="logs"] .project-log-card-open {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 12px 18px !important;
  min-height: 108px !important;
  padding: 15px 0 !important;
  background: transparent !important;
}

#app[data-active-view="logs"] .project-log-card-open:hover,
#app[data-active-view="logs"] .project-log-card-open:focus-visible {
  background: rgba(162, 125, 255, .035) !important;
  outline: none !important;
}

#app[data-active-view="logs"] .project-log-card-copy > div:first-child,
#app[data-active-view="logs"] .project-log-card-copy p,
#app[data-active-view="logs"] .project-log-card-meta {
  color: var(--dp-muted) !important;
}

#app[data-active-view="logs"] .project-log-card-copy h3 {
  margin: 5px 0 4px !important;
  color: var(--dp-ink) !important;
  font-size: 16px !important;
}

#app[data-active-view="logs"] .project-log-card-open > strong {
  color: var(--dp-purple-bright) !important;
  font-size: 11px !important;
  white-space: nowrap;
}

#app[data-active-view="logs"] .project-log-status-mark {
  display: inline-flex !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 7px !important;
  background: var(--dp-surface-2) !important;
  color: var(--dp-muted) !important;
}

#app[data-active-view="logs"] .history-empty {
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 7px !important;
  min-height: 168px !important;
  padding: 24px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="logs"] .history-empty strong {
  color: var(--dp-ink) !important;
  font-size: 20px !important;
}

#app[data-active-view="logs"] .history-empty p {
  color: var(--dp-muted) !important;
}

#app[data-active-view="logs"] .project-log-detail {
  border-left-color: var(--dp-line) !important;
  background: var(--dp-surface) !important;
}

/* --------------------------------------------------------------------------
   Model Services: content-sized configuration, not a viewport-height card
   -------------------------------------------------------------------------- */

#app[data-active-view="setup"] .setup-service-scroll {
  display: flex !important;
  width: min(1240px, 100%) !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: 30px !important;
  overflow: visible !important;
}

#app[data-active-view="setup"] .model-service-commandbar {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  min-height: 58px !important;
  padding: 0 0 17px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="setup"] .setup-overall-state {
  min-width: 170px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="setup"] .setup-overall-state small {
  color: var(--dp-muted) !important;
}

#app[data-active-view="setup"] .setup-overall-state strong {
  color: var(--dp-ink) !important;
}

#app[data-active-view="setup"] .setup-state-dot {
  box-shadow: 0 0 0 4px rgba(162, 125, 255, .1) !important;
}

#app[data-active-view="setup"] .model-service-command-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#app[data-active-view="setup"] .model-service-workspace {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 20px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

#app[data-active-view="setup"] .model-service-nav,
#app[data-active-view="setup"] .model-service-detail-stack {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

#app[data-active-view="setup"] .model-service-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="setup"] .model-service-nav-item {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  min-height: 70px !important;
  padding: 11px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
}

#app[data-active-view="setup"] .model-service-nav-item.is-active,
#app[data-active-view="setup"] .model-service-nav-item:hover {
  background: linear-gradient(90deg, var(--dp-purple-soft), transparent) !important;
  color: var(--dp-ink) !important;
}

#app[data-active-view="setup"] .model-service-nav-index {
  color: var(--dp-purple-bright) !important;
}

#app[data-active-view="setup"] .model-service-nav-item strong {
  color: inherit !important;
  font-size: 12px !important;
}

#app[data-active-view="setup"] .model-service-nav-item small,
#app[data-active-view="setup"] .model-service-nav-note {
  color: var(--dp-dim) !important;
}

#app[data-active-view="setup"] .model-service-nav-note {
  margin-top: auto !important;
  padding: 16px 8px 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}

#app[data-active-view="setup"] .model-service-nav-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--dp-muted) !important;
}

#app[data-active-view="setup"] .setup-provider-band {
  display: grid !important;
  grid-template-columns: 238px minmax(0, 1fr) !important;
  align-self: start !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 14px !important;
  background: var(--dp-surface) !important;
  box-shadow: none !important;
}

#app[data-active-view="setup"] .provider-guide {
  display: grid !important;
  align-content: start !important;
  min-width: 0 !important;
  padding: 20px 18px !important;
  border: 0 !important;
  border-right: 1px solid var(--dp-line) !important;
  background: transparent !important;
}

#app[data-active-view="setup"] .provider-guide .eyebrow {
  color: var(--dp-purple-bright) !important;
}

#app[data-active-view="setup"] .provider-guide h3,
#app[data-active-view="setup"] .provider-config-head h3 {
  color: var(--dp-ink) !important;
}

#app[data-active-view="setup"] .provider-summary,
#app[data-active-view="setup"] .provider-test-result {
  color: var(--dp-muted) !important;
}

#app[data-active-view="setup"] .provider-external-link {
  width: fit-content;
  border-color: var(--dp-line-strong) !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
}

#app[data-active-view="setup"] .provider-config {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  min-width: 0 !important;
  padding: 20px 22px 21px !important;
  background: transparent !important;
}

#app[data-active-view="setup"] .provider-config-head,
#app[data-active-view="setup"] .provider-actions,
#app[data-active-view="setup"] .provider-test-result {
  grid-column: 1 / -1 !important;
}

#app[data-active-view="setup"] .provider-config-head {
  min-width: 0 !important;
  padding-bottom: 11px !important;
  border-bottom-color: var(--dp-line) !important;
}

#app[data-active-view="setup"] .provider-config-head h3 {
  font-size: 15px !important;
}

#app[data-active-view="setup"] .model-lockup small,
#app[data-active-view="setup"] .setup-field > span {
  color: var(--dp-muted) !important;
}

#app[data-active-view="setup"] .model-lockup strong {
  color: var(--dp-purple-bright) !important;
}

#app[data-active-view="setup"] .setup-field {
  gap: 6px !important;
  min-width: 0 !important;
}

#app[data-active-view="setup"] .setup-field input,
#app[data-active-view="setup"] .setup-field select {
  min-height: 38px !important;
}

#app[data-active-view="setup"] .provider-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding-top: 12px !important;
  border-top-color: var(--dp-line) !important;
}

#app[data-active-view="setup"] .provider-actions .text-danger-btn {
  margin-right: auto;
  color: #ff9da6 !important;
}

/* Generic hidden/diagnostic pages inherit the same readable palette if opened
   directly, without changing their information architecture. */
#app[data-active-view="rag"] .page-scroll,
#app[data-active-view="agents"] .page-scroll,
#app[data-active-view="prd"] .page-scroll,
#app[data-active-view="api"] .page-scroll {
  width: min(1240px, 100%) !important;
}

#app[data-active-view="rag"] .schema-card,
#app[data-active-view="agents"] .agent-map-card,
#app[data-active-view="prd"] .band-card,
#app[data-active-view="api"] .schema-card,
#app[data-active-view="api"] .api-card {
  background: var(--dp-surface) !important;
}

/* Responsive rules: containment first, then readable stacking. */
@media (max-width: 1180px) {
  #app:not([data-active-view="home"]) .topbar {
    grid-template-columns: minmax(170px, .7fr) minmax(0, 1.3fr) auto !important;
    gap: 14px !important;
    padding-inline: 20px !important;
  }

  #app:not([data-active-view="home"]) .workspace-topnav-item {
    padding-inline: 8px !important;
    font-size: 10px !important;
  }

  #app:not([data-active-view="home"]) .workspace-topnav-item:nth-of-type(4),
  #app:not([data-active-view="home"]) .workspace-topnav-item:nth-of-type(6) {
    margin-left: 7px !important;
    padding-left: 14px !important;
  }

  #app[data-creation-entry="fast"] .fast-flow-rail {
    grid-template-columns: repeat(6, minmax(148px, 1fr)) !important;
  }

  #app[data-creation-entry="fast"] .review-skill-grid {
    grid-template-columns: repeat(10, minmax(110px, 1fr)) !important;
  }

  #app[data-active-view="templates"] .template-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #app[data-active-view="setup"] .model-service-workspace {
    grid-template-columns: 190px minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  #app:not([data-active-view="home"]) .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "copy account" "nav nav" !important;
    height: 112px !important;
    min-height: 112px !important;
    align-content: center !important;
    row-gap: 5px !important;
    padding: 9px 16px !important;
  }

  #app:not([data-active-view="home"]) > .shell {
    padding-top: 112px !important;
  }

  #app:not([data-active-view="home"]) .topbar-copy {
    grid-area: copy !important;
  }

  #app:not([data-active-view="home"]) .topbar-actions {
    grid-area: account !important;
  }

  #app:not([data-active-view="home"]) .workspace-topnav {
    grid-area: nav !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #app[data-active-view="workbench"] .composer-launcher-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #app[data-active-view="workbench"] .output-overview {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="workbench"] .overview-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--dp-line) !important;
  }

  #app[data-active-view="workbench"] .overview-card:last-child {
    border-bottom: 0 !important;
  }

  #app[data-active-view="templates"] .template-use-workspace,
  #app[data-active-view="setup"] .model-service-workspace {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="setup"] .setup-provider-band {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="setup"] .provider-guide {
    border-right: 0 !important;
    border-bottom: 1px solid var(--dp-line) !important;
  }

  #app[data-active-view="logs"] .project-log-toolbar {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  #app[data-active-view="logs"] .project-log-more {
    justify-self: start !important;
  }
}

@media (max-width: 640px) {
  #app:not([data-active-view="home"]) .topbar {
    padding-inline: 12px !important;
  }

  #app:not([data-active-view="home"]) .topbar h1 {
    font-size: 21px !important;
  }

  #app:not([data-active-view="home"]) .workspace-topbar-account {
    margin-left: 3px !important;
    padding-left: 6px !important;
  }

  #app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link {
    padding-inline: 6px !important;
    font-size: 10px !important;
  }

  #app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-plans {
    display: none !important;
  }

  #app:not([data-active-view="home"]) .page-scroll,
  #app[data-active-view="workbench"] .workbench-grid {
    padding-inline: 14px !important;
  }

  #app[data-active-view="workbench"] .reactor-core-top,
  #app[data-active-view="workbench"] .composer-stage,
  #app[data-active-view="workbench"] .composer-bottombar,
  #app[data-active-view="workbench"] .reactor-core-status,
  #app[data-creation-entry="fast"] .fast-flow-rail,
  #app[data-creation-entry="fast"] .review-console {
    padding-inline: 14px !important;
  }

  #app[data-active-view="workbench"] .composer-launcher-row {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="workbench"] .composer-bottombar {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #app[data-active-view="workbench"] .composer-bottom-left,
  #app[data-active-view="workbench"] .composer-bottom-right {
    width: 100% !important;
  }

  #app[data-active-view="workbench"] .composer-bottom-right {
    justify-content: flex-end !important;
  }

  #app[data-active-view="workbench"] .prompt-stage-card {
    padding: 14px !important;
  }

  #app[data-active-view="workbench"] .prompt-stage-card .prompt-head {
    flex-direction: column !important;
  }

  #app[data-active-view="workbench"] .prompt-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  #app[data-active-view="workbench"] .prompt-toolbar .small {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #app[data-creation-entry="fast"] .fast-flow-rail {
    grid-template-columns: repeat(6, minmax(132px, 1fr)) !important;
  }

  #app[data-creation-entry="fast"] .review-skill-grid {
    grid-template-columns: repeat(10, 112px) !important;
  }

  #app[data-active-view="templates"] .template-choice-grid {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="templates"] .template-editor {
    height: 210px !important;
    min-height: 210px !important;
  }

  #app[data-active-view="templates"] .template-choice-card {
    min-height: 0 !important;
  }

  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > strong {
    justify-self: start !important;
  }

  #app[data-active-view="setup"] .provider-config {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  #app[data-active-view="setup"] .provider-config > *,
  #app[data-active-view="setup"] .setup-field:has(input[type="password"]) {
    grid-column: 1 !important;
  }

  #app[data-active-view="setup"] .provider-actions {
    justify-content: flex-start !important;
  }

  #app[data-active-view="setup"] .provider-actions .text-danger-btn {
    width: 100% !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app[data-creation-entry="fast"] .fast-flow-rail::after,
  #app[data-creation-entry="fast"] .fast-flow-node[data-status="running"] > span {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Functional surfaces v4

   Final embedded-workspace pass for the overseas web release. The navigation
   intentionally stays in normal document flow (not sticky/fixed), so the page
   header belongs to the same surface as the active feature page. The existing
   DOM, workflow handlers, six-node Creative Engine chain, ten review skills,
   and prompt-only feature boundary are left intact.
   -------------------------------------------------------------------------- */

:root {
  --dp-bg: #09090b;
  --dp-surface: #111116;
  --dp-surface-raised: #15151b;
  --dp-surface-inset: #0d0d11;
  --dp-ink: #f4f4f2;
  --dp-muted: #a6a6ae;
  --dp-dim: #777780;
  --dp-line: rgba(244, 244, 242, .13);
  --dp-line-soft: rgba(244, 244, 242, .075);
  --dp-line-strong: rgba(244, 244, 242, .24);
  --dp-purple: #9b7bff;
  --dp-purple-bright: #b9a4ff;
  --dp-purple-soft: rgba(155, 123, 255, .14);
  --dp-red: #e2636f;
  --dp-red-bright: #ff9aa3;
  --dp-red-soft: rgba(226, 99, 111, .13);
  --dp-radius: 14px;
  --dp-topbar-height: 72px;
  --dp-content-width: 1320px;
}

html,
body {
  min-width: 320px !important;
  overflow-x: hidden !important;
  background: var(--dp-bg) !important;
  color: var(--dp-ink) !important;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", sans-serif !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* The landing page has its own visual system. Everything else shares this
   neutral foundation so no legacy teal, gold, or pale surface can leak into
   the functional product. */
#app:not([data-active-view="home"]),
#app:not([data-active-view="home"]) > .shell,
#app:not([data-active-view="home"]) .view,
#app:not([data-active-view="home"]) .page-scroll,
#app:not([data-active-view="home"]) .workbench-grid {
  min-width: 0 !important;
  max-width: none !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--dp-ink) !important;
}

#app:not([data-active-view="home"]) > .sidebar {
  display: none !important;
}

#app:not([data-active-view="home"]) > .shell {
  width: 100% !important;
  margin: 0 !important;
  padding-top: 0 !important;
  overflow-x: hidden !important;
}

/* Embedded, non-sticky workspace header. The new brand control is the visible
   return path to the landing page on every functional route. */
#app:not([data-active-view="home"]) .topbar {
  position: relative !important;
  inset: auto !important;
  z-index: 10 !important;
  display: grid !important;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  height: auto !important;
  min-height: var(--dp-topbar-height) !important;
  margin: 0 !important;
  padding: 12px clamp(20px, 4vw, 54px) 11px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: var(--dp-bg) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app:not([data-active-view="home"]) .topbar-copy {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 11px !important;
  min-width: 0 !important;
}

#app:not([data-active-view="home"]) .topbar-home-link {
  display: inline-flex !important;
  grid-row: 1 / -1 !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: color 220ms cubic-bezier(.22, 1, .36, 1), transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

#app:not([data-active-view="home"]) .topbar-home-link:hover,
#app:not([data-active-view="home"]) .topbar-home-link:focus-visible {
  color: var(--dp-purple-bright) !important;
  outline: none !important;
  transform: translateY(-1px);
}

#app:not([data-active-view="home"]) .topbar-home-mark {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border-radius: 7px !important;
  background: var(--dp-ink) !important;
  color: var(--dp-bg) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
}

#app:not([data-active-view="home"]) .topbar-home-name {
  font-size: 12px !important;
  font-weight: 760 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
}

#app:not([data-active-view="home"]) .topbar-copy > .eyebrow {
  grid-column: 2 !important;
  min-width: 0 !important;
  margin: 0 0 3px !important;
  overflow: hidden !important;
  color: var(--dp-purple-bright) !important;
  font-size: 9px !important;
  font-weight: 780 !important;
  letter-spacing: .14em !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#app:not([data-active-view="home"]) .topbar h1 {
  grid-column: 2 !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--dp-ink) !important;
  font-size: clamp(20px, 1.9vw, 26px) !important;
  font-weight: 740 !important;
  letter-spacing: -.055em !important;
  line-height: 1.04 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app:not([data-active-view="home"]) .topbar-copy > p:last-child {
  display: none !important;
}

#app:not([data-active-view="home"]) .workspace-topnav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow-x: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
}

#app:not([data-active-view="home"]) .workspace-topnav::-webkit-scrollbar {
  display: none !important;
}

#app:not([data-active-view="home"]) .workspace-topnav-item {
  position: relative !important;
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: color 220ms cubic-bezier(.22, 1, .36, 1), background 220ms cubic-bezier(.22, 1, .36, 1), transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

#app:not([data-active-view="home"]) .workspace-topnav-item:nth-child(4),
#app:not([data-active-view="home"]) .workspace-topnav-item:nth-child(6) {
  margin-left: 10px !important;
  padding-left: 18px !important;
}

#app:not([data-active-view="home"]) .workspace-topnav-item:nth-child(4)::before,
#app:not([data-active-view="home"]) .workspace-topnav-item:nth-child(6)::before {
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 1px !important;
  content: "" !important;
  background: var(--dp-line-strong) !important;
}

#app:not([data-active-view="home"]) .workspace-topnav-item:hover,
#app:not([data-active-view="home"]) .workspace-topnav-item:focus-visible {
  color: var(--dp-ink) !important;
  background: rgba(244, 244, 242, .06) !important;
  outline: none !important;
  transform: translateY(-1px);
}

#app:not([data-active-view="home"]) .workspace-topnav-item.active {
  color: var(--dp-ink) !important;
  background: transparent !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .workspace-topnav-item[data-view="quick-start"],
#app[data-active-view="workbench"][data-creation-entry="fast"] .workspace-topnav-item[data-view="fast"],
#app[data-active-view="sessions"] .workspace-topnav-item[data-view="sessions"],
#app[data-active-view="templates"] .workspace-topnav-item[data-view="templates"],
#app[data-active-view="logs"] .workspace-topnav-item[data-view="logs"],
#app[data-active-view="setup"] .workspace-topnav-item[data-view="setup"] {
  color: var(--dp-ink) !important;
  background: var(--dp-purple-soft) !important;
}

#app:not([data-active-view="home"]) .workspace-topnav-item::after {
  right: 10px !important;
  bottom: 1px !important;
  left: 10px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: transparent !important;
  content: "" !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .workspace-topnav-item[data-view="quick-start"]::after,
#app[data-active-view="workbench"][data-creation-entry="fast"] .workspace-topnav-item[data-view="fast"]::after,
#app[data-active-view="sessions"] .workspace-topnav-item[data-view="sessions"]::after,
#app[data-active-view="templates"] .workspace-topnav-item[data-view="templates"]::after,
#app[data-active-view="logs"] .workspace-topnav-item[data-view="logs"]::after,
#app[data-active-view="setup"] .workspace-topnav-item[data-view="setup"]::after {
  background: var(--dp-purple) !important;
}

#app:not([data-active-view="home"]) .topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  min-width: max-content !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .topbar-actions > .workbench-task-context,
#app:not([data-active-view="home"]) .topbar-actions > #jump-to-output,
#app:not([data-active-view="home"]) .topbar-actions > #jump-to-logs {
  display: none !important;
}

#app:not([data-active-view="home"]) .workspace-topbar-account {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: max-content !important;
  margin-left: 10px !important;
  padding-left: 14px !important;
  border-left: 1px solid var(--dp-line-strong) !important;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link {
  min-height: 36px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  white-space: nowrap !important;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:hover,
#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:focus-visible {
  color: var(--dp-ink) !important;
  background: rgba(244, 244, 242, .06) !important;
  outline: none !important;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary {
  border: 1px solid var(--dp-purple) !important;
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary:hover,
#app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary:focus-visible {
  border-color: var(--dp-purple-bright) !important;
  background: var(--dp-purple-bright) !important;
  color: #fff !important;
}

/* Shared content frame. Functional pages now flow below the header rather
   than underneath it, which also makes browser back/forward and deep links
   visually predictable. */
#app:not([data-active-view="home"]) .page-scroll {
  width: min(var(--dp-content-width), 100%) !important;
  margin-inline: auto !important;
  padding: 30px clamp(20px, 4vw, 50px) 72px !important;
  overflow: visible !important;
}

/* Remove legacy color surfaces and pseudo-lighting from the functional DOM. */
#app:not([data-active-view="home"]) .panel,
#app:not([data-active-view="home"]) .setup-shell,
#app:not([data-active-view="home"]) .setup-content-grid,
#app:not([data-active-view="home"]) .setup-main-column,
#app:not([data-active-view="home"]) .reactor-shell,
#app:not([data-active-view="home"]) .reactor-flow-map,
#app:not([data-active-view="home"]) .reactor-core,
#app:not([data-active-view="home"]) .composer-stage,
#app:not([data-active-view="home"]) .composer-bottombar,
#app:not([data-active-view="home"]) .reactor-core-status,
#app:not([data-active-view="home"]) .output-stage,
#app:not([data-active-view="home"]) .output-panel,
#app:not([data-active-view="home"]) .review-console,
#app:not([data-active-view="home"]) .setup-provider-band,
#app:not([data-active-view="home"]) .provider-guide,
#app:not([data-active-view="home"]) .provider-config,
#app:not([data-active-view="home"]) .template-use-workspace,
#app:not([data-active-view="home"]) .template-library-toolbar,
#app:not([data-active-view="home"]) .project-log-toolbar {
  background-image: none !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .setup-shell::before,
#app:not([data-active-view="home"]) .setup-shell::after,
#app:not([data-active-view="home"]) .composer-card::before,
#app:not([data-active-view="home"]) .composer-card::after,
#app:not([data-active-view="home"]) .composer-stage::before,
#app:not([data-active-view="home"]) .composer-stage::after,
#app:not([data-active-view="home"]) .output-stage::before,
#app:not([data-active-view="home"]) .output-stage::after,
#app:not([data-active-view="home"]) .review-console::before,
#app:not([data-active-view="home"]) .review-console::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .panel h2,
#app:not([data-active-view="home"]) .panel h3,
#app:not([data-active-view="home"]) .page-hero h2,
#app:not([data-active-view="home"]) .section-intro h3,
#app:not([data-active-view="home"]) .panel strong {
  color: var(--dp-ink) !important;
}

#app:not([data-active-view="home"]) .panel p,
#app:not([data-active-view="home"]) .page-hero p,
#app:not([data-active-view="home"]) .section-intro p {
  color: var(--dp-muted) !important;
}

#app:not([data-active-view="home"]) input,
#app:not([data-active-view="home"]) textarea,
#app:not([data-active-view="home"]) select {
  border-color: var(--dp-line-strong) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-inset) !important;
  color: var(--dp-ink) !important;
}

#app:not([data-active-view="home"]) input::placeholder,
#app:not([data-active-view="home"]) textarea::placeholder {
  color: var(--dp-dim) !important;
  opacity: 1 !important;
}

#app:not([data-active-view="home"]) input:focus,
#app:not([data-active-view="home"]) textarea:focus,
#app:not([data-active-view="home"]) select:focus {
  border-color: var(--dp-purple) !important;
  outline: 2px solid rgba(155, 123, 255, .16) !important;
  outline-offset: 1px !important;
}

#app:not([data-active-view="home"]) button:focus-visible,
#app:not([data-active-view="home"]) [role="button"]:focus-visible {
  outline: 2px solid rgba(185, 164, 255, .9) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   Creation surface: one embedded studio, not a stack of nested dashboards.
   -------------------------------------------------------------------------- */

#app[data-active-view="workbench"] .workbench-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(var(--dp-content-width), 100%) !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 28px clamp(20px, 4vw, 50px) 72px !important;
  gap: 34px !important;
}

#app[data-active-view="workbench"] .setup-panel,
#app[data-active-view="workbench"] .output-panel {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .setup-shell,
#app[data-active-view="workbench"] .setup-content-grid,
#app[data-active-view="workbench"] .setup-main-column,
#app[data-active-view="workbench"] .field-textarea,
#app[data-active-view="workbench"] .composer-shell {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#app[data-active-view="workbench"] .composer-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 16px !important;
  background: var(--dp-surface) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18) !important;
}

#app[data-active-view="workbench"] .reactor-shell,
#app[data-active-view="workbench"] .reactor-flow-map {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#app[data-active-view="workbench"] .reactor-core {
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .reactor-core-top {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 18px 22px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  background: transparent !important;
}

/* Explicit four-column Creative Engine controls and three-column Quick Start
   controls. This selector wins over the legacy three-column first-paint rule. */
#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-core .composer-launcher-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .reactor-core .composer-launcher-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-launcher[data-composer-panel="styles"],
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-style-tray,
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .fast-flow-rail,
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .flow-rail-main,
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .flow-rail-review,
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .review-console,
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .reactor-node {
  display: none !important;
}

#app[data-active-view="workbench"] .composer-launcher,
#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle,
#app[data-active-view="workbench"] .composer-first-frame-size-control {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 10px !important;
  background: var(--dp-surface-raised) !important;
  color: var(--dp-ink) !important;
  box-shadow: none !important;
  transition: border-color 220ms cubic-bezier(.22, 1, .36, 1), background 220ms cubic-bezier(.22, 1, .36, 1), transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

/* The style launcher is a secondary control, not a separate card. Keep it
   visually embedded in the composer while preserving its detailed panel. */
#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-launcher[data-composer-panel="styles"] {
  border-color: var(--dp-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-launcher[data-composer-panel="styles"]:hover,
#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-launcher[data-composer-panel="styles"]:focus-visible {
  border-color: var(--dp-line-strong) !important;
  background: rgba(155, 123, 255, .07) !important;
}

/* --------------------------------------------------------------------------
   20260910 · solid controls and boundary pass · phase 1

   Shared visual tokens and interaction states for Quick Start and Creative
   Engine. This phase deliberately leaves panel layout and module boundaries
   untouched; those are handled in the page-specific follow-up phases.
   -------------------------------------------------------------------------- */

:root {
  --dp-canvas: #09090b;
  --dp-surface-1: #111116;
  --dp-surface-2: #17171d;
  --dp-surface-selected: #211c35;
  --dp-control-fill: #25252d;
  --dp-control-fill-hover: #30303a;
  --dp-control-fill-pressed: #1e1e25;
  --dp-border-default: rgba(244, 244, 242, .18);
  --dp-border-strong: rgba(244, 244, 242, .30);
  --dp-primary-fill: #6949cf;
  --dp-primary-fill-hover: #7658e8;
  --dp-primary-fill-pressed: #5f47a8;
  --dp-primary-border: #8368e5;
  --dp-focus-ring: rgba(155, 123, 255, .48);
  --dp-danger-fill: #b53c4c;
  --dp-danger-fill-hover: #c64a5a;
  --dp-danger-tonal: rgba(181, 60, 76, .18);
  --dp-text-primary: #f4f4f2;
  --dp-text-muted: #b0adb8;
  --dp-radius-button: 8px;
  --dp-radius-control: 10px;
  --dp-radius-panel: 12px;
  --dp-control-height: 40px;
  --dp-control-height-compact: 36px;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) :is(
  .primary-btn,
  .ghost-btn,
  .text-btn,
  .text-danger-btn,
  .composer-send-btn
) {
  min-height: var(--dp-control-height) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: var(--dp-radius-button) !important;
  box-shadow: none !important;
  font-weight: 650 !important;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    opacity 180ms ease,
    transform 120ms ease !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) :is(.primary-btn, .composer-send-btn) {
  border-color: var(--dp-primary-border) !important;
  background: var(--dp-primary-fill) !important;
  color: #fff !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) :is(.primary-btn, .composer-send-btn):hover {
  border-color: #9178ea !important;
  background: var(--dp-primary-fill-hover) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) :is(.primary-btn, .composer-send-btn):active {
  border-color: var(--dp-primary-fill-pressed) !important;
  background: var(--dp-primary-fill-pressed) !important;
  transform: translateY(1px) !important;
}

/* Existing ghost buttons become quiet solid controls. Truly transparent text
   actions remain available through .text-btn for low-priority navigation. */
#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) .ghost-btn {
  border-color: var(--dp-border-default) !important;
  background: var(--dp-control-fill) !important;
  color: var(--dp-text-primary) !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) .ghost-btn:hover {
  border-color: var(--dp-border-strong) !important;
  background: var(--dp-control-fill-hover) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) .ghost-btn:active {
  background: var(--dp-control-fill-pressed) !important;
  transform: translateY(1px) !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) .text-btn {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--dp-text-muted) !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) .text-btn:hover {
  border-color: transparent !important;
  background: rgba(244, 244, 242, .07) !important;
  color: var(--dp-text-primary) !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) .text-danger-btn {
  border-color: rgba(181, 60, 76, .52) !important;
  background: var(--dp-danger-tonal) !important;
  color: #ffb5bd !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) .text-danger-btn:hover {
  border-color: var(--dp-danger-fill-hover) !important;
  background: var(--dp-danger-fill) !important;
  color: #fff !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) :is(
  .primary-btn,
  .ghost-btn,
  .text-btn,
  .text-danger-btn,
  .composer-send-btn
):focus-visible {
  outline: 2px solid var(--dp-focus-ring) !important;
  outline-offset: 2px !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) :is(
  .primary-btn,
  .ghost-btn,
  .text-btn,
  .text-danger-btn,
  .composer-send-btn
):is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed !important;
  opacity: .48 !important;
  transform: none !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) :is(
  .primary-btn,
  .ghost-btn,
  .text-btn,
  .text-danger-btn,
  .composer-send-btn
):is(.is-loading, [aria-busy="true"]) {
  cursor: progress !important;
  opacity: .74 !important;
  pointer-events: none !important;
}

#app[data-active-view="workbench"]:is(
  [data-creation-entry="quick-start"],
  [data-creation-entry="fast"]
) :is(.primary-btn, .ghost-btn, .text-btn, .text-danger-btn).small {
  min-height: var(--dp-control-height-compact) !important;
}

@media (max-width: 760px) {
  #app[data-active-view="workbench"]:is(
    [data-creation-entry="quick-start"],
    [data-creation-entry="fast"]
  ) :is(
    .primary-btn,
    .ghost-btn,
    .text-btn,
    .text-danger-btn,
    .composer-send-btn
  ) {
    min-height: 44px !important;
  }
}

/* --------------------------------------------------------------------------
   20260913 · Creative Engine composer structure + title hierarchy
   References live beside the generation controls, the textarea owns a full
   visible boundary, and the workflow disclosure becomes a strong brand bar.
   -------------------------------------------------------------------------- */

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-stage {
  padding-top: 2px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .idea-input.studio-input {
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  padding: 18px !important;
  border: 1px solid rgba(151, 133, 194, .52) !important;
  border-radius: 16px !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .idea-input.studio-input:focus {
  border-color: #9278f2 !important;
  box-shadow: 0 0 0 2px rgba(118,88,232,.2), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 10px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group {
  display: flex !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-heading {
  display: flex !important;
  flex: 0 0 auto !important;
  min-width: 74px !important;
  min-height: 0 !important;
  align-items: center !important;
  align-self: center !important;
  padding: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-heading::before {
  display: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-heading strong {
  color: #eeeaf8 !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-heading small {
  color: #9f97b0 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .composer-reference-strip {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-preview {
  display: grid !important;
  grid-template-columns: repeat(3, 42px) !important;
  align-items: center !important;
  align-self: center !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group :is(.reference-thumb, .reference-thumb-main, .reference-upload-slot) {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 9px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-slot {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 15px auto !important;
  place-items: center !important;
  gap: 1px !important;
  padding: 5px 2px 4px !important;
  border: 1px dashed rgba(181, 163, 246, .56) !important;
  background: rgba(116, 91, 190, .1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-slot > span {
  font-size: 15px !important;
  line-height: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-slot > small {
  font-size: 7px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
  min-height: 46px !important;
  padding: 7px 16px !important;
  background: #553a98 !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.14) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary:hover {
  background: #6247a8 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary:focus-visible {
  outline: 2px solid #b8a7ff !important;
  outline-offset: 2px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy strong {
  color: #fff !important;
  font-size: clamp(15px, 1.35vw, 17px) !important;
  font-weight: 780 !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action {
  color: rgba(255,255,255,.92) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action i {
  border-color: currentColor !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-title-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-title-icon {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  place-items: center !important;
  border: 1px solid rgba(181, 163, 246, .44) !important;
  border-radius: 9px !important;
  background: #553a98 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(53, 33, 99, .24) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-title-icon svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-primary .prompt-head > div:first-child > span {
  color: #f7f3ff !important;
  font-size: clamp(18px, 1.55vw, 21px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .prompt-head {
  align-items: center !important;
}

@media (max-width: 980px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottombar {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 620px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group {
    width: 100% !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-heading {
    min-width: 82px !important;
  }
}

/* Account expansion: local mock identity with a production-ready drawer shell. */
.workspace-account-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(151, 125, 255, .52);
  border-radius: 50%;
  background: #7658e8;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(72, 47, 164, .28);
}

.workspace-account-avatar:hover,
.workspace-account-avatar:focus-visible { background: #8a6ff0; transform: translateY(-1px); }

.account-layer,
.signin-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.account-layer[hidden],
.signin-layer[hidden] { display: none; }

.account-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 7, .64);
  backdrop-filter: blur(5px);
}

.account-drawer {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(430px, 100vw);
  height: 100%;
  border-left: 1px solid rgba(157, 132, 255, .32);
  background: #111115;
  color: var(--release-ink);
  box-shadow: -24px 0 70px rgba(0, 0, 0, .42);
  animation: account-drawer-in .24s ease-out;
}

@keyframes account-drawer-in { from { transform: translateX(28px); opacity: .5; } to { transform: translateX(0); opacity: 1; } }

.account-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 25px 26px 18px;
  border-bottom: 1px solid var(--release-line);
}

.account-drawer-head h2 { margin: 5px 0 0; font-size: 25px; letter-spacing: -.03em; }
.account-close { width: 34px; height: 34px; border: 1px solid var(--release-line-strong); border-radius: 10px; background: #1b1b21; color: var(--release-muted); font-size: 23px; line-height: 1; cursor: pointer; }
.account-close:hover, .account-close:focus-visible { border-color: #8d75ed; color: #fff; background: #2a2345; }
.account-drawer-scroll { overflow: auto; padding: 20px 26px 32px; }

.account-identity-card,
.account-membership-card,
.account-stat-card,
.account-panel-view,
.invite-code-card {
  border: 1px solid var(--release-line);
  border-radius: 16px;
  background: #17171d;
}

.account-identity-card { display: flex; align-items: center; gap: 12px; padding: 15px; }
.account-avatar-large { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: #7658e8; color: #fff; font-size: 14px; font-weight: 800; }
.account-identity-copy { min-width: 0; flex: 1; }
.account-identity-copy strong, .account-identity-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity-copy strong { font-size: 15px; }
.account-identity-copy span { margin-top: 4px; color: var(--release-muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.account-plan-pill, .account-status-dot { display: inline-flex; align-items: center; border-radius: 999px; white-space: nowrap; }
.account-plan-pill { padding: 5px 8px; background: rgba(63, 196, 172, .13); color: #7ce3cf; font-size: 10px; font-weight: 750; }

.account-membership-card { margin-top: 12px; padding: 17px; background: #24194a; border-color: rgba(145, 117, 248, .48); }
.account-section-kicker, .account-membership-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-section-kicker { color: #bcaeff; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.account-status-dot { padding: 4px 7px; background: rgba(88, 226, 193, .12); color: #75e0c8; font-size: 10px; letter-spacing: 0; text-transform: none; }
.account-membership-row { margin-top: 18px; align-items: baseline; }
.account-membership-row strong { font-size: 20px; }
.account-membership-row span { color: #c2b9df; font-size: 11px; text-align: right; }
.account-membership-actions { display: flex; gap: 8px; margin-top: 16px; }
.account-primary-btn, .account-secondary-btn { min-height: 36px; border-radius: 9px; padding: 0 12px; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.account-primary-btn { border: 1px solid #8a6ff0; background: #7658e8; color: #fff; }
.account-primary-btn:hover, .account-primary-btn:focus-visible { background: #8a6ff0; }
.account-secondary-btn { border: 1px solid #484450; background: #202027; color: #eeeef4; }
.account-secondary-btn:hover, .account-secondary-btn:focus-visible { border-color: #8370c7; background: #2a2640; }
.account-membership-actions .account-primary-btn { flex: 1; }

.account-usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.account-stat-card { padding: 14px; }
.account-stat-card span, .account-stat-card small { display: block; color: var(--release-muted); font-size: 11px; }
.account-stat-card strong { display: block; margin: 8px 0 3px; color: #fff; font-size: 25px; letter-spacing: -.04em; }
.account-menu { display: grid; gap: 7px; margin-top: 18px; }
.account-menu-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--release-ink); text-align: left; cursor: pointer; }
.account-menu-item:hover, .account-menu-item:focus-visible, .account-menu-item.active { border-color: rgba(133, 108, 230, .45); background: #1a1825; }
.account-menu-item.active { box-shadow: inset 3px 0 #7658e8; }
.account-menu-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #27232f; color: #b8a6ff; font-size: 14px; }
.account-menu-item strong, .account-menu-item small { display: block; }
.account-menu-item strong { font-size: 12px; }
.account-menu-item small { margin-top: 3px; color: var(--release-muted); font-size: 10px; }
.account-menu-item i { color: #8e82aa; font-style: normal; font-size: 18px; }
.account-panel-view { margin-top: 15px; padding: 17px; background: #141419; }
.account-drawer-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--release-line); }
.account-signout-btn { width: 100%; justify-content: center; color: #d2cde0; }
.account-signout-btn:hover, .account-signout-btn:focus-visible { border-color: rgba(255, 145, 165, .5); background: rgba(106, 42, 63, .28); color: #fff; }
.account-panel-head h3 { margin: 6px 0; font-size: 18px; letter-spacing: -.02em; }
.account-panel-head p { margin: 0; color: var(--release-muted); font-size: 11px; line-height: 1.55; }
.account-panel-label { color: #9f8bf1; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.account-detail-list { display: grid; gap: 0; margin: 16px 0; border-top: 1px solid var(--release-line); }
.account-detail-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--release-line); font-size: 11px; }
.account-detail-list span { color: var(--release-muted); }
.account-detail-list strong { color: #fff; text-align: right; }
.account-muted-value { color: #8e8d95 !important; font-weight: 600; }
.account-footnote, .account-form-message { color: var(--release-muted); font-size: 10px; line-height: 1.5; }
.account-shortcut-grid { display: grid; gap: 8px; margin-top: 15px; }
.account-shortcut-grid button { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--release-line); border-radius: 10px; background: #19191f; color: #fff; text-align: left; cursor: pointer; }
.account-shortcut-grid button:hover { border-color: #725fd0; background: #211d32; }
.account-shortcut-grid span { color: var(--release-muted); font-size: 10px; }
.invite-code-card { display: grid; gap: 8px; margin-top: 16px; padding: 14px; background: #1d1a2e; border-color: rgba(133, 108, 230, .4); }
.invite-code-card span { color: var(--release-muted); font-size: 10px; }
.invite-code-card strong { color: #d5cbff; font: 700 18px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }
.invite-code-card .account-secondary-btn { justify-self: start; }
.account-redeem-form, .account-settings-form { display: grid; gap: 11px; margin-top: 16px; }
.account-redeem-form label, .account-settings-form label, .signin-field { display: grid; gap: 6px; color: var(--release-muted); font-size: 11px; }
.account-redeem-form input, .account-settings-form input, .account-settings-form textarea, .signin-field input { width: 100%; box-sizing: border-box; min-height: 38px; border: 1px solid var(--release-line-strong); border-radius: 9px; padding: 9px 10px; background: #0f0f13; color: #fff; font: inherit; }
.account-settings-form textarea { min-height: 76px; resize: vertical; }
.account-settings-form small { color: #8d8b95; font-size: 9px; }
.account-settings-links { display: grid; gap: 8px; margin-top: 14px; }
.signin-layer { display: grid; place-items: center; padding: 20px; }
.signin-dialog { position: relative; width: min(390px, 100%); padding: 30px; border: 1px solid rgba(142, 117, 242, .42); border-radius: 20px; background: #15151b; color: #fff; box-shadow: 0 26px 90px rgba(0,0,0,.5); animation: account-dialog-in .22s ease-out; }
@keyframes account-dialog-in { from { transform: translateY(10px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
.signin-dialog > .account-close { position: absolute; top: 16px; right: 16px; }
.signin-dialog h2 { margin: 7px 0 8px; font-size: 25px; letter-spacing: -.04em; }
.signin-copy { margin: 0 0 20px; color: var(--release-muted); font-size: 12px; line-height: 1.55; }
.signin-submit { width: 100%; margin-top: 7px; }
.signin-demo { width: 100%; margin-top: 9px; }
.signin-note { display: block; margin-top: 18px; color: #77767f; font-size: 10px; line-height: 1.45; text-align: center; }
.signin-error { min-height: 16px; margin: 2px 0 0; color: #ff9ba9; font-size: 10px; }
.account-layer-open { overflow: hidden; }

@media (max-width: 620px) {
  .account-drawer { width: 100%; border-left: 0; }
  .account-drawer-scroll { padding-inline: 18px; }
  .account-drawer-head { padding-inline: 18px; }
}

/* 20260913 · Final compactness pass for the Creative Engine composer. */
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
  min-height: 48px !important;
  height: 48px !important;
  padding: 8px 18px !important;
  box-sizing: border-box !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy,
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action {
  min-height: 0 !important;
  line-height: 1.15 !important;
}

/* Keep the progress charge full-bleed while tightening the action to the
   actual label + arrow footprint. The label remains geometrically centered. */
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] #run-demo-btn,
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn {
  width: auto !important;
  min-width: 178px !important;
  max-width: 178px !important;
  height: 44px !important;
  padding: 0 38px 0 20px !important;
}

/* When Styles is open, give the drawer a little more vertical runway so the
   lower rows remain visible instead of being clipped by the original orb
   height. Closed state keeps the compact composer height unchanged. */
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open),
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open) .reactor-flow-map {
  min-height: 520px !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .reactor-flow-map:has(> .composer-style-tray.open) {
  height: 520px !important;
  overflow: hidden !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio .reactor-flow-map > .composer-style-tray.open {
  height: 520px !important;
  min-height: 520px !important;
  max-height: min(88vh, 860px) !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-style-tray.open .chip-wrap {
  max-height: 468px !important;
  padding-bottom: 28px !important;
}

@media (max-width: 780px) {
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .composer-card.composer-studio:has(.composer-style-tray.open),
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .composer-card.composer-studio:has(.composer-style-tray.open) .reactor-flow-map,
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .reactor-flow-map:has(> .composer-style-tray.open),
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .composer-card.composer-studio .reactor-flow-map > .composer-style-tray.open {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .composer-style-tray.open .chip-wrap {
    max-height: none !important;
  }

  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] #run-demo-btn,
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn {
    max-width: none !important;
  }
}

/* 20260913 · Final pass: keep the requested deeper workflow purple last in
   the cascade so legacy theme layers cannot lighten the control again. */
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
  background: #402779 !important;
  color: #fff !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary:hover {
  background: #4b2f8c !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy strong,
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action {
  color: #fff !important;
}

/* 20260913 · Final pass: keep the requested deeper workflow purple last in
   the cascade so legacy theme layers cannot lighten the control again. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
  background: #402779 !important;
  color: #fff !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary:hover {
  background: #4b2f8c !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy strong,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action {
  color: #fff !important;
}

/* 20260913 · Final composer sizing and inline character counter. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .workbench-grid > .setup-panel,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .workbench-grid > .output-panel,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-card,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-panel {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-stage {
  padding-inline: clamp(12px, 2.2vw, 24px) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-meta-readout-inline {
  position: absolute !important;
  right: clamp(18px, 3vw, 30px) !important;
  bottom: 12px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(174, 153, 255, .42) !important;
  border-radius: 999px !important;
  background: rgba(71, 48, 132, .78) !important;
  color: rgba(237, 232, 255, .78) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  box-shadow: 0 5px 12px rgba(29, 17, 67, .18) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-meta-readout-inline strong {
  margin: 0 3px 0 0 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
  background: #402779 !important;
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, .16) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary:hover {
  background: #4b2f8c !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy strong,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action {
  color: #fff !important;
}

/* 20260913 · Reference/tool alignment and simplified output headings. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left {
  align-items: center !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group {
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  align-items: center !important;
  align-self: center !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-heading,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-preview {
  min-width: 0 !important;
  align-items: center !important;
  align-self: center !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .composer-reference-strip {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 44px !important;
  margin: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-preview {
  margin: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .composer-more-control,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .composer-more-control .composer-more-trigger,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .composer-styles-trigger,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .first-frame-toggle-compact {
  flex: 0 0 auto !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-primary .prompt-head > div:first-child > span {
  font-size: clamp(18px, 1.55vw, 21px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .prompt-head {
  align-items: center !important;
}

@media (max-width: 620px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left::-webkit-scrollbar {
    display: none !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group {
    flex: 0 0 auto !important;
  }
}

/* -------------------------------------------------------------------------
   Run History · Clarity pass + Phase 3
   Increase contrast, create predictable boundaries, and keep the detail
   drawer readable at narrow widths. This is intentionally the final layer.
   ------------------------------------------------------------------------- */
#app[data-active-view="logs"] {
  --history-ink: #17201b;
  --history-muted: #56625a;
  --history-subtle: #68736b;
  --history-line: rgba(23, 30, 26, .16);
  --history-line-soft: rgba(23, 30, 26, .1);
  --history-accent: #8a5b34;
}

#app[data-active-view="logs"] .project-log-summary h2,
#app[data-active-view="logs"] .project-log-card-copy h3 {
  color: var(--history-ink) !important;
  font-family: var(--body-font, Inter, system-ui, sans-serif) !important;
  font-weight: 760 !important;
  letter-spacing: -.02em !important;
}

#app[data-active-view="logs"] .project-log-summary > p:last-child,
#app[data-active-view="logs"] .project-log-card-copy p {
  color: var(--history-muted) !important;
}

#app[data-active-view="logs"] .project-log-card {
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
  border-bottom-color: var(--history-line) !important;
}

#app[data-active-view="logs"] .project-log-card-open {
  position: relative !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  padding-right: 58px !important;
  color: var(--history-ink) !important;
}

#app[data-active-view="logs"] .project-log-card-check {
  top: 14px !important;
  left: 14px !important;
}

#app[data-active-view="logs"] .project-log-card-kicker {
  color: #536158 !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .035em !important;
}

#app[data-active-view="logs"] .project-log-card-kicker time {
  color: #5f6c63 !important;
  font-variant-numeric: tabular-nums !important;
}

#app[data-active-view="logs"] .project-log-card-copy p {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

#app[data-active-view="logs"] .project-log-card-meta {
  gap: 9px !important;
  color: var(--history-muted) !important;
  font-size: 10px !important;
}

#app[data-active-view="logs"] .project-log-card-meta > span {
  color: var(--history-muted) !important;
  font-variant-numeric: tabular-nums !important;
}

#app[data-active-view="logs"] .project-log-card-meta > span + span::before {
  display: none !important;
}

#app[data-active-view="logs"] .project-log-card-meta > span + span {
  padding-left: 9px !important;
  border-left: 1px solid var(--history-line-soft) !important;
}

#app[data-active-view="logs"] .project-log-card-meta > span.has-errors {
  color: #984b3f !important;
  font-weight: 700 !important;
}

#app[data-active-view="logs"] .project-log-card-cta {
  min-width: 0 !important;
  max-width: 132px !important;
  padding-left: 12px !important;
  border-left-color: var(--history-line) !important;
  color: var(--history-accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#app[data-active-view="logs"] .project-log-card-delete {
  z-index: 4 !important;
  top: 8px !important;
  right: 8px !important;
  color: #7c5147 !important;
  background: rgba(242, 242, 237, .94) !important;
}

#app[data-active-view="logs"] .project-log-detail {
  width: min(720px, 92vw) !important;
  max-width: 100vw !important;
  border-left: 1px solid var(--history-line) !important;
  background: #f7f7f2 !important;
  color: var(--history-ink) !important;
  box-shadow: -22px 0 56px rgba(23, 30, 26, .18) !important;
}

#app[data-active-view="logs"] .project-log-detail > header {
  gap: 16px !important;
  padding: 20px 22px 16px !important;
  border-bottom: 1px solid var(--history-line) !important;
  background: #fbfbf7 !important;
}

#app[data-active-view="logs"] .project-log-detail > header h2 {
  color: var(--history-ink) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}

#app[data-active-view="logs"] .project-log-detail > header p:last-child {
  color: var(--history-muted) !important;
  line-height: 1.45 !important;
}

#app[data-active-view="logs"] .project-log-detail-body {
  gap: 18px !important;
  padding: 18px 22px 28px !important;
  color: var(--history-ink) !important;
}

#app[data-active-view="logs"] .project-run-list,
#app[data-active-view="logs"] .project-level-errors {
  gap: 10px !important;
}

#app[data-active-view="logs"] .project-run-list-head,
#app[data-active-view="logs"] .project-level-errors > div:first-child {
  padding: 0 2px 2px !important;
}

#app[data-active-view="logs"] .project-run-list-head h3,
#app[data-active-view="logs"] .project-level-errors h3 {
  color: var(--history-ink) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

#app[data-active-view="logs"] .project-run-list-head span,
#app[data-active-view="logs"] .project-level-errors > div:first-child span {
  color: var(--history-muted) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

#app[data-active-view="logs"] .project-run-card {
  border-color: var(--history-line) !important;
  border-radius: 10px !important;
  background: #fffefa !important;
  box-shadow: 0 3px 12px rgba(23, 30, 26, .045) !important;
}

#app[data-active-view="logs"] .project-run-card > summary {
  min-height: 66px !important;
  padding: 11px 13px !important;
  gap: 10px !important;
}

#app[data-active-view="logs"] .project-run-card > summary strong {
  color: var(--history-ink) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

#app[data-active-view="logs"] .project-run-card > summary small {
  color: var(--history-muted) !important;
  line-height: 1.35 !important;
}

#app[data-active-view="logs"] .project-run-card > summary em {
  color: #5f6c63 !important;
  font-variant-numeric: tabular-nums !important;
}

#app[data-active-view="logs"] .project-run-body {
  gap: 16px !important;
  padding: 15px !important;
  border-top: 0 !important;
}

#app[data-active-view="logs"] .project-run-facts > span {
  min-height: 34px !important;
  align-items: center !important;
  border: 1px solid var(--history-line-soft) !important;
  border-radius: 8px !important;
  color: var(--history-muted) !important;
  background: #f6f6f0 !important;
  line-height: 1.35 !important;
}

#app[data-active-view="logs"] .project-run-facts strong,
#app[data-active-view="logs"] .project-run-facts code {
  color: var(--history-ink) !important;
  font-weight: 700 !important;
}

#app[data-active-view="logs"] .project-run-errors,
#app[data-active-view="logs"] .project-run-output,
#app[data-active-view="logs"] .project-run-actions {
  padding-top: 2px !important;
}

#app[data-active-view="logs"] .project-run-errors h4,
#app[data-active-view="logs"] .project-run-output h4,
#app[data-active-view="logs"] .project-run-actions h4 {
  color: var(--history-ink) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

#app[data-active-view="logs"] .project-run-output > div span {
  color: var(--history-muted) !important;
  font-variant-numeric: tabular-nums !important;
}

#app[data-active-view="logs"] .project-run-output pre {
  border-color: var(--history-line) !important;
  border-radius: 8px !important;
  color: #28352d !important;
  background: #f5f5ef !important;
  font-size: 10px !important;
  line-height: 1.6 !important;
}

#app[data-active-view="logs"] .project-log-error-event {
  gap: 8px 12px !important;
  padding: 11px !important;
  border-color: rgba(152, 75, 63, .28) !important;
  border-radius: 9px !important;
  background: #fff3f0 !important;
}

#app[data-active-view="logs"] .project-log-error-event > div:first-child strong {
  color: #8f4438 !important;
  font-weight: 760 !important;
}

#app[data-active-view="logs"] .project-log-error-event > div:first-child span,
#app[data-active-view="logs"] .project-log-error-event code {
  color: #7b625e !important;
}

#app[data-active-view="logs"] .project-log-error-event > p {
  color: #4f3b37 !important;
}

#app[data-active-view="logs"] .project-log-error-event > details {
  border-top-color: rgba(152, 75, 63, .18) !important;
}

#app[data-active-view="logs"] .project-run-action-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 9px !important;
  padding: 10px !important;
  overflow: visible !important;
  border-color: var(--history-line) !important;
  border-radius: 9px !important;
  background: #f6f6f0 !important;
}

#app[data-active-view="logs"] .project-run-action-group {
  gap: 6px !important;
  min-width: 0 !important;
  padding: 0 9px 0 0 !important;
}

#app[data-active-view="logs"] .project-run-action-group > span {
  overflow: hidden !important;
  color: var(--history-muted) !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
}

#app[data-active-view="logs"] .project-run-action-group > div {
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#app[data-active-view="logs"] .project-run-actions button {
  min-height: 32px !important;
  border-color: var(--history-line) !important;
  color: var(--history-ink) !important;
  background: #fffefa !important;
  font-size: 10px !important;
}

@media (max-width: 720px) {
  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 9px !important;
    padding: 14px 58px 14px 0 !important;
  }

  #app[data-active-view="logs"] .project-log-card-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #app[data-active-view="logs"] .project-log-card-cta {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    max-width: none !important;
    padding: 7px 0 0 !important;
    border-top: 1px solid var(--history-line-soft) !important;
    border-left: 0 !important;
  }

  #app[data-active-view="logs"] .project-log-card-meta {
    flex-wrap: wrap !important;
    max-height: none !important;
    overflow: visible !important;
    row-gap: 6px !important;
  }

  #app[data-active-view="logs"] .project-log-detail {
    width: 100vw !important;
    height: 100dvh !important;
  }

  #app[data-active-view="logs"] .project-log-detail > header,
  #app[data-active-view="logs"] .project-log-detail-body {
    padding-inline: 14px !important;
  }

  #app[data-active-view="logs"] .project-run-card > summary {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }

  #app[data-active-view="logs"] .project-run-card > summary .history-badge,
  #app[data-active-view="logs"] .project-run-card > summary em {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  #app[data-active-view="logs"] .project-run-action-strip {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="logs"] .project-run-action-group:not(:last-child)::after {
    top: auto !important;
    right: 0 !important;
    bottom: -5px !important;
    left: 0 !important;
    width: auto !important;
    height: 1px !important;
  }
}

/* 20260920 · Keep first-frame help copy inside its own boundary. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-bottom-left .first-frame-info-anchor > .first-frame-info-popover {
  box-sizing: border-box !important;
  width: min(264px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-bottom-left .first-frame-info-anchor > .first-frame-info-popover strong,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-bottom-left .first-frame-info-anchor > .first-frame-info-popover span {
  display: block !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
}

/* 20260914 · Final compactness pass for the workflow disclosure. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
  min-height: 36px !important;
  padding: 2px 16px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy strong {
  line-height: 1.12 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy small {
  line-height: 1.1 !important;
}

/* 20260914 · Styles viewport fit — final cascade guard.
   This intentionally changes only the open panel's outer viewport and
   scrolling boundary. The existing groups, rows, chips, and typography stay
   untouched. */
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
  --styles-tray-open-height: clamp(360px, calc(100dvh - 164px), 760px);
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open),
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open) .reactor-shell,
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open) .reactor-flow-map {
  height: var(--styles-tray-open-height) !important;
  min-height: var(--styles-tray-open-height) !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open) .reactor-shell,
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .reactor-flow-map:has(> .composer-style-tray.open) {
  overflow: visible !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio .reactor-flow-map > .composer-style-tray.open {
  height: var(--styles-tray-open-height) !important;
  min-height: var(--styles-tray-open-height) !important;
  max-height: var(--styles-tray-open-height) !important;
  overflow: hidden !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-style-tray.open .chip-wrap {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding-bottom: 14px !important;
  scroll-padding-bottom: 14px !important;
  overflow-y: auto !important;
}

@supports not (height: 100dvh) {
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
    --styles-tray-open-height: clamp(360px, calc(100vh - 164px), 760px);
  }
}

/* 20260914 · Final desktop Styles viewport fit.
   Outer viewport only; internal style taxonomy and chip layout remain unchanged. */
@media (min-width: 781px) {
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
    --styles-tray-open-height: clamp(520px, calc(100dvh - 80px), 860px);
  }

  @supports not (height: 100dvh) {
    html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
      --styles-tray-open-height: clamp(520px, calc(100vh - 80px), 860px);
    }
  }
}

/* 20260914 · Final desktop Styles viewport fit.
   Outer viewport only; internal style taxonomy and chip layout remain unchanged. */
@media (min-width: 781px) {
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
    --styles-tray-open-height: clamp(520px, calc(100dvh - 80px), 860px);
  }

  @supports not (height: 100dvh) {
    html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
      --styles-tray-open-height: clamp(520px, calc(100vh - 80px), 860px);
    }
  }
}

/* 20260914 · Desktop Styles viewport fit.
   The desktop composer starts near the top of the viewport, so the previous
   mobile-safe inset left an unnecessary blank band below the tray. Keep the
   tray's existing internal layout and scrolling behavior; only reclaim the
   unused outer viewport on wider screens. */
@media (min-width: 781px) {
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
    --styles-tray-open-height: clamp(520px, calc(100dvh - 80px), 860px);
  }

  @supports not (height: 100dvh) {
    html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
      --styles-tray-open-height: clamp(520px, calc(100vh - 80px), 860px);
    }
  }
}

/* 20260914 · Styles viewport fit.
   Preserve the existing style taxonomy and chip layout; only give the open
   selector the vertical room that remains below the composer and remove the
   legacy parent clipping that made its lower edge look masked. */
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
  --styles-tray-open-height: clamp(360px, calc(100dvh - 164px), 760px);
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open),
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open) .reactor-shell,
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open) .reactor-flow-map {
  height: var(--styles-tray-open-height) !important;
  min-height: var(--styles-tray-open-height) !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open) .reactor-shell,
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .reactor-flow-map:has(> .composer-style-tray.open) {
  overflow: visible !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio .reactor-flow-map > .composer-style-tray.open {
  height: var(--styles-tray-open-height) !important;
  min-height: var(--styles-tray-open-height) !important;
  max-height: var(--styles-tray-open-height) !important;
  overflow: hidden !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-style-tray.open .chip-wrap {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding-bottom: 14px !important;
  scroll-padding-bottom: 14px !important;
  overflow-y: auto !important;
}

@supports not (height: 100dvh) {
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
    --styles-tray-open-height: clamp(360px, calc(100vh - 164px), 760px);
  }
}

/* 20260914 · Final compactness pass for the workflow disclosure.
   Keep the review board content and six-node rail unchanged; only reduce the
   summary control's vertical footprint so the composer can breathe. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
  min-height: 40px !important;
  padding: 4px 16px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy strong {
  line-height: 1.12 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy small {
  line-height: 1.1 !important;
}

/* -------------------------------------------------------------------------
   Run History — compact status, readable issues, restrained detail heading
   ------------------------------------------------------------------------- */
#app[data-active-view="logs"] .project-log-card-open {
  grid-template-columns: 92px minmax(0, 1fr) max-content !important;
  column-gap: 14px !important;
}

#app[data-active-view="logs"] .project-log-status-mark,
#app[data-active-view="logs"] .project-log-status-mark[data-tone="good"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="warning"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="error"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  justify-self: start !important;
  gap: 7px !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 92px !important;
  min-height: 28px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#app[data-active-view="logs"] .project-log-status-mark::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

#app[data-active-view="logs"] .project-log-status-mark span {
  display: block !important;
  min-width: 0 !important;
  max-width: 68px !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-run-errors {
  color: #352724 !important;
}

#app[data-active-view="logs"] .project-run-errors > h4 {
  color: var(--history-ink) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  letter-spacing: .035em !important;
}

#app[data-active-view="logs"] .project-log-error-event {
  color: #352724 !important;
  border-color: rgba(152, 75, 63, .34) !important;
  background: #fff3f0 !important;
}

#app[data-active-view="logs"] .project-log-error-event > div:first-child span {
  color: #725650 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

#app[data-active-view="logs"] .project-log-error-event > div:first-child strong {
  color: #8b3f34 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
}

#app[data-active-view="logs"] .project-log-error-event > p {
  color: #3f2e2a !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  line-height: 1.55 !important;
}

#app[data-active-view="logs"] .project-log-error-facts span {
  color: #654840 !important;
  border: 1px solid rgba(137, 72, 61, .24) !important;
  background: rgba(137, 72, 61, .08) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

#app[data-active-view="logs"] .project-log-error-file,
#app[data-active-view="logs"] .project-log-error-file code,
#app[data-active-view="logs"] .project-log-error-event > details,
#app[data-active-view="logs"] .project-log-error-event > details summary,
#app[data-active-view="logs"] .project-log-error-event > details pre {
  color: #513b36 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

#app[data-active-view="logs"] .project-log-error-event > details summary {
  font-weight: 720 !important;
}

#app[data-active-view="logs"] .project-log-error-event > div:last-child button {
  color: #67443d !important;
  border-color: rgba(137, 72, 61, .34) !important;
  background: rgba(255, 255, 255, .56) !important;
}

#app[data-active-view="logs"] .project-log-error-event > div:last-child button:hover,
#app[data-active-view="logs"] .project-log-error-event > div:last-child button:focus-visible {
  color: #fff !important;
  border-color: #8f4438 !important;
  background: #8f4438 !important;
}

#app[data-active-view="logs"] .project-log-detail > header > div {
  min-width: 0 !important;
  overflow: hidden !important;
}

#app[data-active-view="logs"] #project-log-detail-title {
  display: -webkit-box !important;
  max-width: 100% !important;
  max-height: 2.5em !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  color: var(--history-ink) !important;
  font-size: 20px !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
  overflow-wrap: anywhere !important;
  text-overflow: ellipsis !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#app[data-active-view="logs"] #project-log-detail-meta {
  display: block !important;
  overflow: hidden !important;
  color: var(--history-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 10px !important;
  }

  #app[data-active-view="logs"] .project-log-status-mark {
    grid-row: auto !important;
    max-width: 92px !important;
  }
}

/* -------------------------------------------------------------------------
   Run History · Phase 1
   Stabilise long-content boundaries without changing the data model or
   interaction flow. Keep this block last so it is the single final layer for
   overflow, grid sizing, and responsive containment.
   ------------------------------------------------------------------------- */
#app[data-active-view="logs"] .project-log-page,
#app[data-active-view="logs"] .project-log-toolbar,
#app[data-active-view="logs"] .project-log-filters,
#app[data-active-view="logs"] .project-log-grid,
#app[data-active-view="logs"] .project-log-card,
#app[data-active-view="logs"] .project-log-card-open,
#app[data-active-view="logs"] .project-log-card-copy,
#app[data-active-view="logs"] .project-log-card-meta,
#app[data-active-view="logs"] .project-log-detail,
#app[data-active-view="logs"] .project-log-detail-body,
#app[data-active-view="logs"] .project-run-card,
#app[data-active-view="logs"] .project-run-body,
#app[data-active-view="logs"] .project-run-facts,
#app[data-active-view="logs"] .project-run-output-grid,
#app[data-active-view="logs"] .project-run-output,
#app[data-active-view="logs"] .project-run-actions,
#app[data-active-view="logs"] .project-run-action-strip,
#app[data-active-view="logs"] .project-log-error-event {
  min-width: 0 !important;
  max-width: 100% !important;
}

#app[data-active-view="logs"] .project-log-page {
  overflow-x: hidden !important;
}

#app[data-active-view="logs"] .project-log-toolbar {
  min-width: 0 !important;
}

#app[data-active-view="logs"] .project-log-filters {
  min-width: 0 !important;
  grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(112px, 140px)) !important;
}

#app[data-active-view="logs"] .project-log-search,
#app[data-active-view="logs"] .project-log-filters label {
  min-width: 0 !important;
}

#app[data-active-view="logs"] .project-log-filters input,
#app[data-active-view="logs"] .project-log-filters select,
#app[data-active-view="logs"] .project-log-more > summary {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-log-card {
  position: relative !important;
  overflow: hidden !important;
}

#app[data-active-view="logs"] .project-log-card-open {
  grid-template-columns: minmax(108px, 132px) minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#app[data-active-view="logs"] .project-log-status-mark {
  min-width: 0 !important;
  overflow: hidden !important;
}

#app[data-active-view="logs"] .project-log-status-mark span,
#app[data-active-view="logs"] .project-log-card-open > strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-log-card-copy > div:first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 10px !important;
}

#app[data-active-view="logs"] .project-log-card-copy > div:first-child > span,
#app[data-active-view="logs"] .project-log-card-copy > div:first-child > time {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-log-card-copy h3,
#app[data-active-view="logs"] .project-log-card-copy p {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
}

#app[data-active-view="logs"] .project-log-card-copy h3 {
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-log-card-copy p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  text-overflow: ellipsis !important;
}

#app[data-active-view="logs"] .project-log-card-meta {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#app[data-active-view="logs"] .project-log-card-meta > span {
  min-width: 0 !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-log-card-check,
#app[data-active-view="logs"] .project-log-card-delete {
  z-index: 2 !important;
}

#app[data-active-view="logs"] .project-log-detail-shell {
  overflow: hidden !important;
}

#app[data-active-view="logs"] .project-log-detail {
  display: flex !important;
  flex-direction: column !important;
  width: min(560px, 100vw) !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#app[data-active-view="logs"] .project-log-detail > header {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

#app[data-active-view="logs"] .project-log-detail > header > div,
#app[data-active-view="logs"] #project-log-detail-title,
#app[data-active-view="logs"] #project-log-detail-meta {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#app[data-active-view="logs"] #project-log-detail-title,
#app[data-active-view="logs"] #project-log-detail-meta {
  overflow-wrap: anywhere !important;
}

#app[data-active-view="logs"] .project-log-detail-body {
  flex: 1 1 auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#app[data-active-view="logs"] .project-run-card > summary {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) minmax(80px, 140px) auto !important;
  align-items: center !important;
  min-width: 0 !important;
}

#app[data-active-view="logs"] .project-run-card > summary > span,
#app[data-active-view="logs"] .project-run-card > summary > span:nth-child(2),
#app[data-active-view="logs"] .project-run-card > summary strong,
#app[data-active-view="logs"] .project-run-card > summary small,
#app[data-active-view="logs"] .project-run-card > summary .history-badge,
#app[data-active-view="logs"] .project-run-card > summary em {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#app[data-active-view="logs"] .project-run-card > summary > span:nth-child(2) {
  display: grid !important;
  gap: 3px !important;
}

#app[data-active-view="logs"] .project-run-card > summary small,
#app[data-active-view="logs"] .project-run-card > summary em {
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-run-facts > span {
  min-width: 0 !important;
  overflow: hidden !important;
}

#app[data-active-view="logs"] .project-run-facts > span > strong,
#app[data-active-view="logs"] .project-run-facts > span > code {
  min-width: 0 !important;
  max-width: 68% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-run-output pre,
#app[data-active-view="logs"] .project-log-error-event > details pre {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
  overflow-wrap: anywhere !important;
  white-space: pre-wrap !important;
}

#app[data-active-view="logs"] .project-run-output pre {
  max-height: 220px !important;
}

#app[data-active-view="logs"] .project-log-error-event > p,
#app[data-active-view="logs"] .project-log-error-file,
#app[data-active-view="logs"] .project-log-error-event code {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

#app[data-active-view="logs"] .project-log-error-event > div:last-child,
#app[data-active-view="logs"] .project-run-action-strip,
#app[data-active-view="logs"] .project-run-action-group,
#app[data-active-view="logs"] .project-run-action-group > div {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 900px) {
  #app[data-active-view="logs"] .project-log-filters {
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(96px, 1fr)) !important;
  }

  #app[data-active-view="logs"] .project-run-card > summary {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
  }

  #app[data-active-view="logs"] .project-run-card > summary .history-badge {
    display: none !important;
  }
}

@media (max-width: 720px) {
  #app[data-active-view="logs"] .project-log-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #app[data-active-view="logs"] .project-log-search {
    grid-column: 1 / -1 !important;
  }

  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px 12px !important;
    padding-right: 14px !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > strong {
    align-self: end !important;
    max-width: 120px !important;
  }

  #app[data-active-view="logs"] .project-log-card-meta {
    flex-wrap: wrap !important;
    max-height: 34px !important;
  }

  #app[data-active-view="logs"] .project-run-output-grid,
  #app[data-active-view="logs"] .project-run-facts {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app[data-active-view="logs"] .project-run-card > summary {
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    gap: 7px !important;
  }

  #app[data-active-view="logs"] .project-run-card > summary em {
    max-width: 96px !important;
  }
}

/* -------------------------------------------------------------------------
   Run History · Phase 2
   Clarify the project-card hierarchy: compact status, readable project copy,
   and a dedicated action rail. The existing data attributes and event hooks
   remain unchanged.
   ------------------------------------------------------------------------- */
#app[data-active-view="logs"] .project-log-card-open {
  grid-template-columns: 116px minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: 18px !important;
  padding: 16px 18px 16px 0 !important;
}

#app[data-active-view="logs"] .project-log-status-mark {
  display: flex !important;
  min-height: 44px !important;
  align-self: start !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 10px !important;
  border: 1px solid currentColor !important;
  border-radius: 8px !important;
  background: transparent !important;
}

#app[data-active-view="logs"] .project-log-status-mark[data-tone="good"] {
  border-color: rgba(56, 112, 82, .36) !important;
  background: rgba(228, 238, 230, .76) !important;
}

#app[data-active-view="logs"] .project-log-status-mark[data-tone="warning"] {
  border-color: rgba(154, 105, 49, .36) !important;
  background: rgba(244, 234, 219, .8) !important;
}

#app[data-active-view="logs"] .project-log-status-mark[data-tone="error"] {
  border-color: rgba(164, 78, 88, .36) !important;
  background: rgba(240, 225, 226, .82) !important;
}

#app[data-active-view="logs"] .project-log-card-copy {
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
}

#app[data-active-view="logs"] .project-log-card-kicker {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: #7d877f !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

#app[data-active-view="logs"] .project-log-card-kicker > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-log-card-kicker time {
  color: #8a938b !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-log-card-copy h3 {
  margin: 0 !important;
  color: #17201b !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
}

#app[data-active-view="logs"] .project-log-card-copy p {
  max-width: 720px !important;
  color: #68736b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#app[data-active-view="logs"] .project-log-card-meta {
  margin-top: 3px !important;
  padding-top: 7px !important;
  border-top: 1px solid rgba(23, 30, 26, .08) !important;
  color: #8a938b !important;
  font-size: 10px !important;
}

#app[data-active-view="logs"] .project-log-card-meta > span {
  position: relative !important;
}

#app[data-active-view="logs"] .project-log-card-meta > span + span::before {
  content: "·" !important;
  position: absolute !important;
  left: -7px !important;
  color: rgba(23, 30, 26, .28) !important;
}

#app[data-active-view="logs"] .project-log-card-cta {
  display: inline-flex !important;
  align-self: center !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 8px 0 8px 14px !important;
  border-left: 1px solid rgba(23, 30, 26, .1) !important;
  color: #a36d40 !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-log-card-cta strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
}

#app[data-active-view="logs"] .project-log-card-cta > span {
  transition: transform 160ms ease !important;
}

#app[data-active-view="logs"] .project-log-card-open:hover .project-log-card-cta > span,
#app[data-active-view="logs"] .project-log-card-open:focus-visible .project-log-card-cta > span {
  transform: translateX(3px) !important;
}

#app[data-active-view="logs"] .project-log-card-delete {
  top: 6px !important;
  right: 8px !important;
  padding: 2px 5px !important;
  font-size: 9px !important;
}

@media (max-width: 900px) {
  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: 96px minmax(0, 1fr) auto !important;
    gap: 13px !important;
  }

  #app[data-active-view="logs"] .project-log-card-cta {
    padding-left: 10px !important;
  }
}

@media (max-width: 720px) {
  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px 12px !important;
    padding: 14px 14px 14px 0 !important;
  }

  #app[data-active-view="logs"] .project-log-status-mark {
    display: none !important;
  }

  #app[data-active-view="logs"] .project-log-card-copy {
    grid-column: 1 !important;
  }

  #app[data-active-view="logs"] .project-log-card-cta {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    max-width: 108px !important;
    padding-left: 9px !important;
  }

  #app[data-active-view="logs"] .project-log-card-meta {
    max-height: 34px !important;
    overflow: hidden !important;
  }
}

/* --------------------------------------------------------------------------
   20260910 · Creative Engine compact workflow disclosure + More settings
   -------------------------------------------------------------------------- */

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .creative-workflow-disclosure {
  display: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-disclosure {
  order: 0 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-panel) !important;
  background: var(--dp-surface-1) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .14) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
  display: flex !important;
  min-height: 64px !important;
  padding: 12px 16px !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  list-style: none !important;
  background: var(--dp-surface-2) !important;
  user-select: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary::-webkit-details-marker {
  display: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary:hover {
  background: var(--dp-control-fill-hover) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary:focus-visible {
  outline: 2px solid var(--dp-focus-ring) !important;
  outline-offset: -2px !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-icon {
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  place-items: center !important;
  border: 1px solid rgba(155, 123, 255, .66) !important;
  border-radius: 50% !important;
  background: rgba(155, 123, 255, .12) !important;
  color: var(--dp-purple-bright) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy strong {
  color: var(--dp-text-primary) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy small {
  overflow: hidden !important;
  color: var(--dp-text-muted) !important;
  font-size: 10px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action {
  display: inline-flex !important;
  margin-left: auto !important;
  align-items: center !important;
  gap: 9px !important;
  color: var(--dp-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action i,
#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger-chevron {
  width: 8px !important;
  height: 8px !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform 180ms ease !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-disclosure[open] .creative-workflow-summary {
  border-bottom: 1px solid var(--dp-border-default) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-disclosure[open] .creative-workflow-summary-action i {
  transform: rotate(225deg) translate(-2px, -2px) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel {
  display: grid !important;
  min-width: 0 !important;
  background: var(--dp-surface-1) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-disclosure[open] .creative-workflow-panel {
  animation: dpCreativeWorkflowReveal 220ms cubic-bezier(.22, 1, .36, 1) both !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .fast-flow-rail {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(92px, 1fr)) !important;
  gap: 8px !important;
  padding: 18px 16px 12px !important;
  overflow-x: auto !important;
  border: 0 !important;
  background: transparent !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .fast-flow-rail::before {
  top: 41px !important;
  right: 8% !important;
  left: 8% !important;
  display: block !important;
  height: 2px !important;
  border-radius: 999px !important;
  content: "" !important;
  background: linear-gradient(90deg, rgba(155, 123, 255, .72), rgba(155, 123, 255, .2) 43%, rgba(226, 99, 111, .58)) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .fast-flow-rail::after {
  top: 39px !important;
  display: block !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .fast-flow-node {
  display: grid !important;
  grid-template: 48px auto / 1fr !important;
  min-height: 78px !important;
  padding: 0 3px !important;
  justify-items: center !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .fast-flow-node > span {
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .fast-flow-node strong {
  grid-row: 2 !important;
  grid-column: 1 !important;
  color: var(--dp-text-secondary) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .fast-flow-node small {
  display: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-console {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 12px 16px 14px !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-border-default) !important;
  border-radius: 0 !important;
  background: var(--dp-surface-2) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(72px, 1fr)) !important;
  gap: 6px !important;
  overflow-x: auto !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-skill-chip {
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 5px 4px !important;
  gap: 2px !important;
  border-radius: 7px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-skill-chip span {
  font-size: 8px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-skill-chip strong {
  font-size: 9px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-skill-chip small {
  display: none !important;
}

/* Quick Start keeps the original inline settings. Creative Engine condenses
   the three setting groups into one solid More button and a vertical card. */
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-more-control {
  display: contents !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-more-trigger {
  display: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-more-panel {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-control {
  position: relative !important;
  display: block !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger {
  display: inline-flex !important;
  min-width: 190px !important;
  min-height: 44px !important;
  padding: 7px 11px !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid var(--dp-border-strong) !important;
  border-radius: var(--dp-radius-button) !important;
  background: var(--dp-control-fill) !important;
  color: var(--dp-text-primary) !important;
  text-align: left !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger:hover,
#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger:focus-visible,
#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-control.is-open .composer-more-trigger {
  border-color: var(--dp-primary-border) !important;
  background: var(--dp-control-fill-hover) !important;
  outline: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--dp-focus-ring) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger-icon {
  display: inline-flex !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border-radius: 7px !important;
  background: var(--dp-primary-fill) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger-icon i {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #fff !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 1px !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger-copy strong {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger-copy small {
  overflow: hidden !important;
  color: var(--dp-text-muted) !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger-chevron {
  margin-left: auto !important;
  color: var(--dp-text-muted) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-control.is-open .composer-more-trigger-chevron {
  transform: rotate(225deg) translate(-2px, -2px) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-panel {
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  z-index: 80 !important;
  display: none !important;
  width: min(540px, calc(100vw - 72px)) !important;
  padding: 6px 14px !important;
  overflow: visible !important;
  border: 1px solid var(--dp-border-strong) !important;
  border-radius: var(--dp-radius-panel) !important;
  background: var(--dp-surface-2) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .34) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-control.is-open .composer-more-panel {
  display: grid !important;
  animation: dpComposerMoreReveal 160ms cubic-bezier(.22, 1, .36, 1) both !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-panel .composer-more-section {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 9px 0 !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-panel .composer-more-section:last-child {
  border-bottom: 0 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-panel .composer-control-label {
  color: var(--dp-text-primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-panel .segmented.compact {
  justify-self: start !important;
}

@keyframes dpCreativeWorkflowReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dpComposerMoreReveal {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  #app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
    padding: 11px 12px !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action {
    font-size: 0 !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .fast-flow-rail {
    grid-template-columns: repeat(6, 92px) !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-skill-grid {
    grid-template-columns: repeat(10, 78px) !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger {
    width: 100% !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-panel {
    width: min(520px, calc(100vw - 32px)) !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-panel .composer-more-section {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }
}

/* --------------------------------------------------------------------------
   20260910 · solid controls and boundary pass · phase 3 · Creative Engine
   -------------------------------------------------------------------------- */

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .workbench-grid {
  gap: 28px !important;
}

/* Composer: one primary boundary with clearly separated internal regions. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-card {
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-panel) !important;
  background: var(--dp-surface-1) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail {
  position: relative !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 16px !important;
  overflow-x: auto !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
  border-radius: 0 !important;
  background: var(--dp-surface-2) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail::before,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail::after {
  display: none !important;
  content: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node {
  position: relative !important;
  display: grid !important;
  grid-template: auto auto auto / 28px minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 92px !important;
  padding: 12px !important;
  align-content: start !important;
  justify-items: start !important;
  gap: 4px 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-control) !important;
  background: var(--dp-control-fill) !important;
  color: var(--dp-text-secondary) !important;
  text-align: left !important;
  transform: none !important;
  transition: border-color 180ms ease, background-color 180ms ease, transform 120ms ease !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node > span {
  grid-row: 1 / span 2 !important;
  grid-column: 1 !important;
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border: 1px solid var(--dp-border-strong) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-inset) !important;
  color: var(--dp-text-secondary) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node strong,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node small {
  grid-column: 2 !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  text-align: left !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node strong {
  color: var(--dp-text-primary) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node small {
  color: var(--dp-text-muted) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 2 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:hover:not(:disabled) {
  border-color: var(--dp-border-strong) !important;
  background: var(--dp-control-fill-hover) !important;
  transform: translateY(-1px) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:focus-visible {
  border-color: var(--dp-border-strong) !important;
  outline: 2px solid var(--dp-focus-ring) !important;
  outline-offset: 2px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="running"] {
  border-color: var(--dp-primary-border) !important;
  background: var(--dp-surface-selected) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="running"] > span {
  border-color: var(--dp-primary-border) !important;
  background: var(--dp-primary-fill) !important;
  color: #fff !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="done"],
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="skipped"] {
  border-color: rgba(85, 175, 127, .42) !important;
  background: rgba(85, 175, 127, .1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="done"] > span,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="skipped"] > span {
  border-color: rgba(85, 175, 127, .55) !important;
  background: rgba(85, 175, 127, .17) !important;
  color: #9be1b8 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="error"],
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-warning="true"] {
  border-color: var(--dp-danger-border) !important;
  background: var(--dp-danger-fill-soft) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="error"] > span,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-warning="true"] > span {
  border-color: var(--dp-danger-border) !important;
  background: rgba(226, 99, 111, .16) !important;
  color: #ff9ba5 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:disabled {
  opacity: .56 !important;
  cursor: default !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-core-top {
  padding: 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
  background: var(--dp-surface-1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .reactor-core .composer-launcher-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  :is(.composer-launcher, .composer-first-frame-prompt-toggle) {
  min-height: 66px !important;
  padding: 11px 13px !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-control) !important;
  background: var(--dp-control-fill) !important;
  box-shadow: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  :is(.composer-launcher, .composer-first-frame-prompt-toggle):hover {
  border-color: var(--dp-border-strong) !important;
  background: var(--dp-control-fill-hover) !important;
  transform: translateY(-1px) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-first-frame-prompt-toggle:has(input:checked) {
  border-color: rgba(131, 104, 229, .78) !important;
  background: var(--dp-surface-selected) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-reference-strip {
  padding: 0 16px !important;
  background: var(--dp-surface-1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-reference-strip:not(:has(.empty)) {
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-stage {
  padding: 16px !important;
  border: 0 !important;
  background: var(--dp-surface-1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-stage .idea-input,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-stage textarea {
  min-height: 210px !important;
  padding: 18px !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-control) !important;
  background: var(--dp-surface-inset) !important;
  box-shadow: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-stage .idea-input:focus,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-stage textarea:focus {
  border-color: var(--dp-border-strong) !important;
  outline: 2px solid var(--dp-focus-ring) !important;
  outline-offset: 2px !important;
}

/* Segmented controls use a filled track and an unmistakable selected value. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottombar {
  min-height: 78px !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-border-default) !important;
  background: var(--dp-surface-2) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .segmented.compact {
  min-height: 40px !important;
  padding: 3px !important;
  gap: 2px !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-control) !important;
  background: var(--dp-surface-inset) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  :is(.segmented.compact .segment, .first-frame-size-selector button) {
  min-height: 32px !important;
  padding: 0 11px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: var(--dp-control-fill) !important;
  color: var(--dp-text-secondary) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  :is(.segmented.compact .segment, .first-frame-size-selector button):hover:not(:disabled) {
  border-color: var(--dp-border-default) !important;
  background: var(--dp-control-fill-hover) !important;
  color: var(--dp-text-primary) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  :is(.segmented.compact .segment.active, .first-frame-size-selector button[aria-checked="true"]) {
  border-color: var(--dp-primary-border) !important;
  background: var(--dp-primary-fill) !important;
  color: #fff !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  :is(.segmented.compact .segment, .first-frame-size-selector button):focus-visible {
  outline: 2px solid var(--dp-focus-ring) !important;
  outline-offset: 2px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-reset-btn {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--dp-text-muted) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-reset-btn:hover {
  border-color: var(--dp-border-default) !important;
  background: var(--dp-control-fill) !important;
  color: var(--dp-text-primary) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn {
  display: inline-flex !important;
  width: auto !important;
  min-width: 168px !important;
  height: 44px !important;
  padding: 0 16px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-arrow {
  font-size: 18px !important;
  line-height: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-core-status {
  min-height: 58px !important;
  padding: 12px 16px 14px !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-border-default) !important;
  background: var(--dp-surface-1) !important;
}

/* Review: a distinct module with solid, readable skill controls. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console {
  margin: 0 !important;
  padding: 16px !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-border-default) !important;
  border-radius: 0 !important;
  background: var(--dp-surface-2) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console-head {
  padding: 0 0 12px !important;
  border: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 0 4px !important;
  overflow-x: auto !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip {
  display: grid !important;
  grid-template: auto auto / 24px minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 70px !important;
  padding: 10px !important;
  align-content: start !important;
  justify-items: start !important;
  gap: 3px 8px !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-button) !important;
  background: var(--dp-control-fill) !important;
  text-align: left !important;
  transform: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip span {
  grid-row: 1 / span 2 !important;
  display: grid !important;
  width: 24px !important;
  height: 24px !important;
  place-items: center !important;
  border-radius: 7px !important;
  background: var(--dp-surface-inset) !important;
  color: var(--dp-text-secondary) !important;
  font-size: 9px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip strong,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip small {
  grid-column: 2 !important;
  overflow: visible !important;
  white-space: normal !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip strong {
  color: var(--dp-text-primary) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip small {
  color: var(--dp-text-muted) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip:hover:not(:disabled) {
  border-color: var(--dp-border-strong) !important;
  background: var(--dp-control-fill-hover) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip:focus-visible {
  border-color: var(--dp-border-strong) !important;
  outline: 2px solid var(--dp-focus-ring) !important;
  outline-offset: 2px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .review-skill-chip:is([data-status="running"], [data-selected="true"]) {
  border-color: var(--dp-primary-border) !important;
  background: var(--dp-surface-selected) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip[data-status="done"] {
  border-color: rgba(85, 175, 127, .42) !important;
  background: rgba(85, 175, 127, .1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .review-skill-chip:is([data-status="error"], [data-status="fallback"]) {
  border-color: var(--dp-danger-border) !important;
  background: var(--dp-danger-fill-soft) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip:disabled {
  opacity: .56 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console-foot {
  margin: 10px 0 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--dp-border-default) !important;
}

/* Output: one bounded result module, with filled internal reading surfaces. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-panel {
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-panel) !important;
  background: var(--dp-surface-1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-panel > .panel-head {
  min-height: 62px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
  background: var(--dp-surface-2) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage {
  padding: 0 !important;
  background: var(--dp-surface-1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-overview {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
  background: var(--dp-surface-inset) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .overview-card {
  padding: 16px 18px !important;
  border-right: 1px solid var(--dp-border-default) !important;
  background: transparent !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .overview-card:last-child {
  border-right: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-stage-card {
  margin: 0 !important;
  padding: 20px 18px 22px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
  border-radius: 0 !important;
  background: var(--dp-surface-1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-stage-card .prompt-head {
  padding: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-body {
  min-height: 180px !important;
  margin-top: 14px !important;
  padding: 16px !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-control) !important;
  background: var(--dp-surface-inset) !important;
  color: var(--dp-text-primary) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .workbench-action-strip {
  padding: 16px 18px !important;
  border-top: 0 !important;
  background: var(--dp-surface-2) !important;
}

@media (max-width: 960px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail {
    grid-template-columns: repeat(6, minmax(164px, 1fr)) !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-grid {
    grid-template-columns: repeat(10, 150px) !important;
  }
}

@media (max-width: 760px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail {
    padding: 12px !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-core-top,
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-stage,
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console {
    padding: 12px !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .reactor-core .composer-launcher-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    :is(.composer-launcher, .composer-first-frame-prompt-toggle) {
    min-height: 60px !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottombar {
    padding: 12px !important;
    align-items: stretch !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    :is(.segmented.compact .segment, .first-frame-size-selector button) {
    min-height: 44px !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-right {
    width: 100% !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-overview {
    grid-template-columns: 1fr !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .overview-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--dp-border-default) !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .overview-card:last-child {
    border-bottom: 0 !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-stage-card {
    padding: 18px 14px 20px !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-toolbar {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-toolbar .small {
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app[data-active-view="workbench"]:is(
    [data-creation-entry="quick-start"],
    [data-creation-entry="fast"]
  ) :is(
    .primary-btn,
    .ghost-btn,
    .text-btn,
    .text-danger-btn,
    .composer-send-btn
  ) {
    transition-duration: .01ms !important;
  }
}

/* Frame is a Creative Engine control only. Quick Start stays text-first and
   lets the server infer the cinematic default or an explicitly written ratio. */
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-frame-control,
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-frame-control .first-frame-size-selector {
  display: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-frame-control {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-frame-control .composer-control-label {
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-frame-control .first-frame-size-selector {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  gap: 2px !important;
  padding: 3px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 8px !important;
  background: transparent !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-frame-control .first-frame-size-selector button {
  min-width: 38px !important;
  min-height: 27px !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-frame-control .first-frame-size-selector button:hover,
#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-frame-control .first-frame-size-selector button:focus-visible {
  background: rgba(155, 123, 255, .1) !important;
  color: var(--dp-ink) !important;
  outline: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-frame-control .first-frame-size-selector button.active,
#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-frame-control .first-frame-size-selector button[aria-checked="true"] {
  background: var(--dp-purple) !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  #app[data-active-view="workbench"][data-creation-entry="fast"] .composer-frame-control {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--release-line) !important;
  }
}

#app[data-active-view="workbench"] .composer-launcher:hover,
#app[data-active-view="workbench"] .composer-launcher:focus-within,
#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle:hover,
#app[data-active-view="workbench"] .composer-first-frame-size-control:hover {
  border-color: var(--dp-line-strong) !important;
  background: #1a1a21 !important;
  transform: translateY(-1px);
}

#app[data-active-view="workbench"] .composer-launcher {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 9px !important;
  row-gap: 3px !important;
  text-align: left !important;
}

#app[data-active-view="workbench"] .composer-launcher-glyph {
  display: grid !important;
  grid-row: 1 / -1 !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border: 1px solid rgba(155, 123, 255, .45) !important;
  border-radius: 8px !important;
  background: rgba(155, 123, 255, .1) !important;
  color: var(--dp-purple-bright) !important;
  font-size: 10px !important;
  font-weight: 760 !important;
}

#app[data-active-view="workbench"] .composer-launcher-upload .composer-launcher-glyph {
  border-color: rgba(226, 99, 111, .45) !important;
  background: var(--dp-red-soft) !important;
  color: var(--dp-red-bright) !important;
}

#app[data-active-view="workbench"] .composer-launcher strong,
#app[data-active-view="workbench"] .composer-first-frame-prompt-copy strong,
#app[data-active-view="workbench"] .composer-first-frame-size-control > span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--dp-ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"] .composer-launcher small,
#app[data-active-view="workbench"] .composer-first-frame-prompt-copy small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--dp-muted) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle {
  gap: 9px !important;
  cursor: pointer !important;
}

#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle input {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: var(--dp-purple) !important;
}

#app[data-active-view="workbench"] .composer-first-frame-prompt-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

#app[data-active-view="workbench"] .composer-first-frame-size-control {
  justify-content: space-between !important;
  gap: 10px !important;
}

#app[data-active-view="workbench"] .first-frame-size-selector {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  gap: 2px !important;
  min-width: 0 !important;
  padding: 3px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-inset) !important;
}

#app[data-active-view="workbench"] .first-frame-size-selector button {
  min-width: 38px !important;
  min-height: 27px !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#app[data-active-view="workbench"] .first-frame-size-selector button.active,
#app[data-active-view="workbench"] .first-frame-size-selector button[aria-checked="true"] {
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app[data-active-view="workbench"] .composer-reference-strip {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .composer-reference-strip .reference-preview {
  padding: 10px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .composer-stage {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 16px 22px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--dp-surface-inset) !important;
}

#app[data-active-view="workbench"] .idea-input.studio-input {
  display: block !important;
  width: 100% !important;
  min-height: 148px !important;
  max-height: 330px !important;
  margin: 0 !important;
  padding: 0 0 16px !important;
  resize: vertical !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.58 !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .idea-input.studio-input:focus {
  border-bottom-color: var(--dp-purple) !important;
  outline: 0 !important;
  box-shadow: 0 1px 0 var(--dp-purple) !important;
}

/* Quick Start keeps one lightweight style utility under the editor; Creative
   Engine uses the dedicated Style launcher above. */
#app[data-creation-entry="quick-start"] .quick-start-style-dock {
  display: block !important;
  width: 100% !important;
  min-height: 30px !important;
  margin: 8px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-creation-entry="quick-start"] .quick-start-wheel-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
}

#app[data-creation-entry="quick-start"] .quick-start-wheel-trigger:hover,
#app[data-creation-entry="quick-start"] .quick-start-wheel-trigger:focus-visible {
  color: var(--dp-ink) !important;
  outline: none !important;
}

#app[data-creation-entry="quick-start"] .quick-start-wheel-trigger small {
  color: var(--dp-dim) !important;
}

#app[data-active-view="workbench"] .composer-bottombar {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 12px 22px !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .composer-bottom-left,
#app[data-active-view="workbench"] .composer-bottom-right {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

#app[data-active-view="workbench"] .composer-bottom-left {
  flex-wrap: wrap !important;
  gap: 16px !important;
}

#app[data-active-view="workbench"] .composer-bottom-right {
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-left: auto !important;
}

#app[data-active-view="workbench"] .composer-inline-control {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#app[data-active-view="workbench"] .composer-control-label,
#app[data-active-view="workbench"] .composer-meta-readout {
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"] .segmented.compact {
  display: inline-flex !important;
  gap: 2px !important;
  min-width: 0 !important;
  padding: 2px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-raised) !important;
}

#app[data-active-view="workbench"] .segmented.compact .segment {
  min-height: 29px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"] .segmented.compact .segment.active {
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app[data-active-view="workbench"] .composer-send-btn {
  display: inline-grid !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  place-items: center !important;
  border: 1px solid var(--dp-purple) !important;
  border-radius: 10px !important;
  background: var(--dp-purple) !important;
  color: #fff !important;
  font-size: 21px !important;
  box-shadow: 0 8px 20px rgba(155, 123, 255, .15) !important;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), background 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

#app[data-active-view="workbench"] .composer-send-btn:hover,
#app[data-active-view="workbench"] .composer-send-btn:focus-visible {
  background: var(--dp-purple-bright) !important;
  transform: translateY(-2px) !important;
}

#app[data-active-view="workbench"] .reactor-core-status {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 4px 12px !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 9px 22px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
}

#app[data-active-view="workbench"] .reactor-core-status > div:first-child {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#app[data-active-view="workbench"] .reactor-core-status span,
#app[data-active-view="workbench"] .reactor-core-status small {
  overflow: hidden !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"] .reactor-core-status small {
  color: var(--dp-dim) !important;
  font-size: 10px !important;
}

#app[data-active-view="workbench"] .reactor-core-status > strong {
  color: var(--dp-ink) !important;
  font-size: 15px !important;
  font-variant-numeric: tabular-nums !important;
}

#app[data-active-view="workbench"] .reactor-progress-track {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 2px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(244, 244, 242, .1) !important;
}

#app[data-active-view="workbench"] .reactor-progress-track i {
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--dp-purple), var(--dp-red)) !important;
  box-shadow: none !important;
}

/* Creative Engine rail: one compact visual chain with contained overflow and
   two-line labels instead of clipped single-line ellipses. */
#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail {
  order: 2 !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px 22px 15px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: var(--dp-surface) !important;
  scrollbar-color: rgba(155, 123, 255, .45) transparent !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail::before {
  position: absolute !important;
  top: 44px !important;
  right: 8% !important;
  left: 8% !important;
  z-index: 0 !important;
  height: 1px !important;
  content: "" !important;
  background: linear-gradient(90deg, rgba(155, 123, 255, .72), rgba(244, 244, 242, .18) 50%, rgba(226, 99, 111, .72)) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail::after {
  position: absolute !important;
  top: 42px !important;
  left: 8% !important;
  z-index: 1 !important;
  width: 36px !important;
  height: 4px !important;
  border-radius: 999px !important;
  content: "" !important;
  background: linear-gradient(90deg, transparent, var(--dp-purple-bright), transparent) !important;
  filter: drop-shadow(0 0 5px rgba(155, 123, 255, .42));
  animation: dpRailSweepV4 5.4s cubic-bezier(.22, 1, .36, 1) infinite !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-rows: 48px auto auto !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 101px !important;
  padding: 0 3px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  text-align: center !important;
  transition: color 220ms cubic-bezier(.22, 1, .36, 1), transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node::before,
#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node::after {
  display: none !important;
  content: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node > span {
  position: relative !important;
  display: grid !important;
  width: 48px !important;
  height: 48px !important;
  place-items: center !important;
  border: 1px solid rgba(155, 123, 255, .72) !important;
  border-radius: 50% !important;
  background: var(--dp-surface-inset) !important;
  color: var(--dp-purple-bright) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  box-shadow: 0 0 0 4px rgba(155, 123, 255, .07) !important;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), border-color 220ms cubic-bezier(.22, 1, .36, 1), background 220ms cubic-bezier(.22, 1, .36, 1), box-shadow 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:nth-child(3) > span,
#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:nth-child(6) > span {
  border-color: rgba(226, 99, 111, .72) !important;
  color: var(--dp-red-bright) !important;
  box-shadow: 0 0 0 4px rgba(226, 99, 111, .07) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node strong,
#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node small {
  display: -webkit-box !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: clip !important;
  -webkit-box-orient: vertical !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node strong {
  min-height: 26px !important;
  color: var(--dp-ink) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  -webkit-line-clamp: 2 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node small {
  min-height: 25px !important;
  color: var(--dp-dim) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:hover,
#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:focus-visible {
  color: var(--dp-ink) !important;
  outline: none !important;
  transform: translateY(-2px) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:hover > span,
#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:focus-visible > span,
#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="running"] > span {
  border-color: var(--dp-purple-bright) !important;
  background: #1c1630 !important;
  color: #fff !important;
  box-shadow: 0 0 0 6px rgba(155, 123, 255, .1), 0 0 18px rgba(155, 123, 255, .2) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="done"] > span {
  background: #1b1630 !important;
  border-color: var(--dp-purple) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="error"] > span,
#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-warning="true"] > span {
  border-color: var(--dp-red) !important;
  background: #281419 !important;
  color: #ffd9de !important;
  box-shadow: 0 0 0 6px rgba(226, 99, 111, .08) !important;
}

/* Ten review dimensions remain visible as a compact specialist strip. */
#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console {
  order: 3 !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 22px 15px !important;
  gap: 10px !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: var(--dp-surface) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console-head span {
  color: var(--dp-red) !important;
  font-size: 10px !important;
  font-weight: 780 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console-head strong {
  color: var(--dp-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
  scrollbar-color: rgba(155, 123, 255, .35) transparent !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 60px !important;
  padding: 7px 5px !important;
  overflow: hidden !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-raised) !important;
  color: var(--dp-muted) !important;
  box-shadow: none !important;
  transition: border-color 220ms cubic-bezier(.22, 1, .36, 1), background 220ms cubic-bezier(.22, 1, .36, 1), transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip:hover,
#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip:focus-visible,
#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip[data-status="running"] {
  border-color: rgba(155, 123, 255, .72) !important;
  background: #1b1630 !important;
  color: var(--dp-ink) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip[data-status="error"] {
  border-color: rgba(226, 99, 111, .72) !important;
  background: #281419 !important;
  color: #ffd9de !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip span {
  color: var(--dp-purple-bright) !important;
  font-size: 9px !important;
  font-variant-numeric: tabular-nums !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip strong,
#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip small {
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip strong {
  color: inherit !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip small {
  color: var(--dp-dim) !important;
  font-size: 9px !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console-foot {
  margin: 0 !important;
  color: var(--dp-dim) !important;
  font-size: 10px !important;
  text-align: right !important;
}

@keyframes dpRailSweepV4 {
  0%, 18% { transform: translateX(0); opacity: .24; }
  56% { transform: translateX(900%); opacity: .82; }
  78%, 100% { transform: translateX(1700%); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Prompt output: compact, readable, and text-first.
   -------------------------------------------------------------------------- */

#app[data-active-view="workbench"] .output-panel {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

#app[data-active-view="workbench"] .output-panel > .panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 8px !important;
  padding: 0 2px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .output-panel > .panel-head h2 {
  margin: 0 !important;
  color: var(--dp-ink) !important;
  font-size: 21px !important;
  letter-spacing: -.04em !important;
}

#app[data-active-view="workbench"] .quality-badge,
#app[data-active-view="workbench"] .export-status {
  border: 1px solid var(--dp-line) !important;
  border-radius: 7px !important;
  background: var(--dp-surface-raised) !important;
  color: var(--dp-muted) !important;
  font-size: 10px !important;
}

#app[data-active-view="workbench"] .output-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

#app[data-active-view="workbench"] .output-overview {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
  border-bottom: 1px solid var(--dp-line) !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .overview-card {
  min-width: 0 !important;
  min-height: 72px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-right: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .overview-card:last-child {
  border-right: 0 !important;
}

#app[data-active-view="workbench"] .overview-card .summary-label {
  color: var(--dp-purple-bright) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
}

#app[data-active-view="workbench"] .overview-card strong {
  color: var(--dp-ink) !important;
  font-size: 13px !important;
}

#app[data-active-view="workbench"] .overview-card p,
#app[data-active-view="workbench"] .overview-card .pill-row {
  color: var(--dp-muted) !important;
}

#app[data-active-view="workbench"] .prompt-stage-card {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 17px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 14px !important;
  background: var(--dp-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .prompt-stage-card .prompt-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin: 0 0 8px !important;
}

#app[data-active-view="workbench"] .prompt-stage-card .prompt-head > div:first-child {
  min-width: 0 !important;
}

#app[data-active-view="workbench"] .prompt-stage-card .prompt-head > div:first-child > span {
  color: var(--dp-ink) !important;
  font-size: 16px !important;
  font-weight: 720 !important;
  letter-spacing: -.03em !important;
}

#app[data-active-view="workbench"] .prompt-caption {
  margin: 4px 0 0 !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
}

#app[data-active-view="workbench"] .prompt-toolbar {
  display: flex !important;
  flex: 0 1 auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#app[data-active-view="workbench"] .prompt-toolbar .small {
  min-height: 32px !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"] .prompt-export-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 28px !important;
  padding: 7px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 10px !important;
}

#app[data-active-view="workbench"] .prompt-body {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 184px !important;
  max-height: 430px !important;
  margin: 0 !important;
  padding: 15px !important;
  overflow: auto !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-line-soft) !important;
  border-radius: 0 0 8px 8px !important;
  background: var(--dp-surface-inset) !important;
  color: var(--dp-ink) !important;
  font: 12.5px/1.72 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .prompt-body.muted {
  color: var(--dp-muted) !important;
}

#app[data-active-view="workbench"] .first-frame-workspace,
#app[data-active-view="workbench"] .first-frame-pane {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

#app[data-active-view="workbench"] .first-frame-pane-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 25px !important;
  color: var(--dp-ink) !important;
}

#app[data-active-view="workbench"] .first-frame-pane-head small {
  color: var(--dp-muted) !important;
  font-size: 10px !important;
}

#app[data-active-view="workbench"] .first-frame-prompt {
  min-height: 184px !important;
  max-height: 430px !important;
  margin-top: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.72 !important;
}

#app[data-active-view="workbench"] .first-frame-card {
  border-left: 2px solid rgba(155, 123, 255, .55) !important;
}

#app[data-active-view="workbench"] .workbench-action-strip {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   Shared SaaS controls.
   -------------------------------------------------------------------------- */

#app:not([data-active-view="home"]) .primary-btn,
#app:not([data-active-view="home"]) .ghost-btn,
#app:not([data-active-view="home"]) .text-btn,
#app:not([data-active-view="home"]) .text-danger-btn {
  min-height: 36px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  transition: color 220ms cubic-bezier(.22, 1, .36, 1), border-color 220ms cubic-bezier(.22, 1, .36, 1), background 220ms cubic-bezier(.22, 1, .36, 1), transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

#app:not([data-active-view="home"]) .primary-btn {
  border: 1px solid var(--dp-purple) !important;
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app:not([data-active-view="home"]) .primary-btn:hover,
#app:not([data-active-view="home"]) .primary-btn:focus-visible {
  border-color: var(--dp-purple-bright) !important;
  background: var(--dp-purple-bright) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

#app:not([data-active-view="home"]) .ghost-btn,
#app:not([data-active-view="home"]) .text-btn {
  border: 1px solid var(--dp-line-strong) !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
}

#app:not([data-active-view="home"]) .ghost-btn:hover,
#app:not([data-active-view="home"]) .ghost-btn:focus-visible,
#app:not([data-active-view="home"]) .text-btn:hover,
#app:not([data-active-view="home"]) .text-btn:focus-visible {
  border-color: var(--dp-purple) !important;
  background: var(--dp-purple-soft) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

#app:not([data-active-view="home"]) .text-danger-btn {
  color: var(--dp-red-bright) !important;
}

/* --------------------------------------------------------------------------
   Workbench list, Prompt Library, Run History, and Model Services.
   -------------------------------------------------------------------------- */

#app[data-active-view="sessions"] .task-session-page {
  width: min(1220px, 100%) !important;
  min-height: 0 !important;
  padding-top: 34px !important;
}

#app[data-active-view="sessions"] .task-session-toolbar {
  align-items: flex-end !important;
  gap: 20px !important;
  padding: 0 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  background: transparent !important;
}

#app[data-active-view="sessions"] .task-session-heading {
  align-items: flex-end !important;
  gap: 16px !important;
}

#app[data-active-view="sessions"] .task-session-heading .eyebrow {
  color: var(--dp-purple-bright) !important;
}

#app[data-active-view="sessions"] .task-session-heading h2 {
  color: var(--dp-ink) !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1 !important;
}

#app[data-active-view="sessions"] .task-session-heading p:not(.eyebrow) {
  color: var(--dp-muted) !important;
}

#app[data-active-view="sessions"] .task-session-board {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="sessions"] .task-session-board-head {
  padding: 17px 0 11px !important;
  border-bottom: 1px solid var(--dp-line) !important;
}

#app[data-active-view="sessions"] .task-session-list {
  display: grid !important;
  gap: 0 !important;
  border-top: 1px solid var(--dp-line) !important;
}

#app[data-active-view="sessions"] .task-session-list .session-card.session-row {
  min-height: 94px !important;
  padding: 16px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="sessions"] .task-session-list .session-card.session-row:hover,
#app[data-active-view="sessions"] .task-session-list .session-card.session-row:focus-within {
  background: rgba(155, 123, 255, .035) !important;
}

#app[data-active-view="sessions"] .task-session-list .session-card.session-row.active {
  background: linear-gradient(90deg, rgba(155, 123, 255, .08), transparent 44%) !important;
}

#app[data-active-view="templates"] .page-scroll {
  width: min(1400px, 100%) !important;
  padding-top: 30px !important;
}

#app[data-active-view="templates"] .template-use-workspace {
  grid-template-columns: minmax(230px, .34fr) minmax(0, .66fr) !important;
  gap: 28px !important;
  margin: 0 0 20px !important;
  padding: 2px 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="templates"] .template-use-copy h3 {
  max-width: 12ch !important;
  color: var(--dp-ink) !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
}

#app[data-active-view="templates"] .template-use-editor-card {
  gap: 8px !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 12px !important;
  background: var(--dp-surface) !important;
  box-shadow: none !important;
}

#app[data-active-view="templates"] .template-editor {
  height: 190px !important;
  min-height: 190px !important;
  padding: 13px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-inset) !important;
  color: var(--dp-ink) !important;
  font: 12px/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

#app[data-active-view="templates"] .template-library-toolbar {
  gap: 10px !important;
  padding: 0 0 13px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
}

#app[data-active-view="templates"] .template-choice-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 9px !important;
  min-width: 0 !important;
}

#app[data-active-view="templates"] .template-choice-card {
  display: grid !important;
  grid-template-rows: auto auto auto 20px 30px !important;
  min-width: 0 !important;
  min-height: 188px !important;
  gap: 7px !important;
  padding: 11px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 10px !important;
  background: var(--dp-surface) !important;
  box-shadow: none !important;
  transition: border-color 220ms cubic-bezier(.22, 1, .36, 1), background 220ms cubic-bezier(.22, 1, .36, 1), transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

#app[data-active-view="templates"] .template-choice-card:hover,
#app[data-active-view="templates"] .template-choice-card.active {
  border-color: rgba(155, 123, 255, .72) !important;
  background: #17151f !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

#app[data-active-view="templates"] .template-choice-topline {
  min-width: 0 !important;
  overflow: hidden !important;
}

#app[data-active-view="templates"] .template-choice-index,
#app[data-active-view="templates"] .template-choice-category {
  color: var(--dp-dim) !important;
  font-size: 9px !important;
}

#app[data-active-view="templates"] .template-choice-body {
  min-height: 56px !important;
  overflow: hidden !important;
}

#app[data-active-view="templates"] .template-choice-body h3 {
  display: -webkit-box !important;
  margin: 0 0 4px !important;
  overflow: hidden !important;
  color: var(--dp-ink) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#app[data-active-view="templates"] .template-choice-body p {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--dp-muted) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#app[data-active-view="templates"] .template-choice-facts {
  gap: 0 !important;
  min-height: 30px !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="templates"] .template-choice-facts > span {
  min-width: 0 !important;
  padding: 5px 4px 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
  font-size: 8.5px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="templates"] .template-choice-facts small {
  display: block !important;
  overflow: hidden !important;
  color: var(--dp-dim) !important;
  font-size: 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="templates"] .template-choice-card .template-meta {
  display: flex !important;
  align-items: center !important;
  min-height: 20px !important;
  gap: 4px !important;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
}

#app[data-active-view="templates"] .template-choice-card .template-tag {
  flex: 0 1 auto !important;
  max-width: 32% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 3px 5px !important;
  border: 1px solid var(--dp-line-soft) !important;
  border-radius: 5px !important;
  background: var(--dp-surface-raised) !important;
  color: var(--dp-dim) !important;
  font-size: 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="templates"] .template-choice-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
  min-width: 0 !important;
}

#app[data-active-view="templates"] .template-choice-actions .ghost-btn,
#app[data-active-view="templates"] .template-choice-actions .primary-btn {
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 0 4px !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-log-page {
  width: min(1240px, 100%) !important;
  min-height: 0 !important;
  padding-top: 34px !important;
  overflow: visible !important;
}

#app[data-active-view="logs"] .project-log-toolbar {
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.8fr) auto !important;
  gap: 18px !important;
  padding: 0 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="logs"] .project-log-summary .eyebrow {
  color: var(--dp-red) !important;
}

#app[data-active-view="logs"] .project-log-summary h2 {
  color: var(--dp-ink) !important;
  font-size: 20px !important;
}

#app[data-active-view="logs"] .project-log-filters input,
#app[data-active-view="logs"] .project-log-filters select,
#app[data-active-view="logs"] .project-log-more > summary {
  min-height: 38px !important;
  border: 1px solid var(--dp-line-strong) !important;
  border-radius: 8px !important;
  background: var(--dp-surface-inset) !important;
  color: var(--dp-ink) !important;
}

#app[data-active-view="logs"] .project-log-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border-top: 1px solid var(--dp-line) !important;
}

#app[data-active-view="logs"] .project-log-card {
  height: auto !important;
  min-height: 104px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="logs"] .project-log-card figure {
  display: none !important;
}

#app[data-active-view="logs"] .project-log-card-open {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px 18px !important;
  min-height: 104px !important;
  padding: 15px 0 !important;
  background: transparent !important;
}

#app[data-active-view="logs"] .project-log-card-open:hover,
#app[data-active-view="logs"] .project-log-card-open:focus-visible {
  background: rgba(155, 123, 255, .035) !important;
  outline: none !important;
}

#app[data-active-view="logs"] .project-log-detail {
  border-left-color: var(--dp-line) !important;
  background: var(--dp-surface) !important;
}

#app[data-active-view="setup"] .setup-service-scroll {
  display: flex !important;
  width: min(1240px, 100%) !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: 30px !important;
  overflow: visible !important;
}

#app[data-active-view="setup"] .model-service-commandbar {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  min-height: 58px !important;
  padding: 0 0 17px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="setup"] .model-service-workspace {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 20px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

#app[data-active-view="setup"] .model-service-nav,
#app[data-active-view="setup"] .model-service-detail-stack {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

#app[data-active-view="setup"] .model-service-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="setup"] .model-service-nav-item {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  min-height: 70px !important;
  padding: 11px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
}

#app[data-active-view="setup"] .model-service-nav-item.is-active,
#app[data-active-view="setup"] .model-service-nav-item:hover {
  background: linear-gradient(90deg, var(--dp-purple-soft), transparent) !important;
  color: var(--dp-ink) !important;
}

#app[data-active-view="setup"] .model-service-nav-index {
  color: var(--dp-purple-bright) !important;
}

#app[data-active-view="setup"] .setup-provider-band {
  display: grid !important;
  grid-template-columns: 290px minmax(0, 1fr) !important;
  align-self: start !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 14px !important;
  background: var(--dp-surface) !important;
  box-shadow: none !important;
}

#app[data-active-view="setup"] .provider-guide {
  display: grid !important;
  align-content: start !important;
  min-width: 0 !important;
  padding: 20px 19px !important;
  border: 0 !important;
  border-right: 1px solid var(--dp-line) !important;
  background: transparent !important;
}

#app[data-active-view="setup"] .provider-guide .eyebrow {
  color: var(--dp-purple-bright) !important;
}

#app[data-active-view="setup"] .provider-guide h3,
#app[data-active-view="setup"] .provider-config-head h3 {
  color: var(--dp-ink) !important;
}

#app[data-active-view="setup"] .provider-summary,
#app[data-active-view="setup"] .provider-test-result {
  color: var(--dp-muted) !important;
}

#app[data-active-view="setup"] .provider-config {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  min-width: 0 !important;
  padding: 20px 22px 21px !important;
  background: transparent !important;
}

#app[data-active-view="setup"] .provider-config-head,
#app[data-active-view="setup"] .provider-actions,
#app[data-active-view="setup"] .provider-test-result {
  grid-column: 1 / -1 !important;
}

#app[data-active-view="setup"] .provider-config-head {
  min-width: 0 !important;
  padding-bottom: 11px !important;
  border-bottom-color: var(--dp-line) !important;
}

#app[data-active-view="setup"] .model-lockup small,
#app[data-active-view="setup"] .setup-field > span {
  color: var(--dp-muted) !important;
}

#app[data-active-view="setup"] .model-lockup strong {
  color: var(--dp-purple-bright) !important;
}

#app[data-active-view="setup"] .provider-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding-top: 12px !important;
  border-top-color: var(--dp-line) !important;
}

#app[data-active-view="setup"] .provider-actions .text-danger-btn {
  margin-right: auto !important;
  color: var(--dp-red-bright) !important;
}

/* Startup splash is not part of the product experience; if a launcher injects
   the legacy layer, skip it and reveal the actual workspace immediately. */
#startup-splash {
  display: none !important;
}

/* Make the landing reveal fail-safe without removing its motion when the
   optional animation bundle is unavailable. */
#app[data-active-view="home"] .home-reveal {
  animation-name: dpHomeRevealSafe !important;
  animation-duration: 520ms !important;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
  animation-fill-mode: both !important;
}

@keyframes dpHomeRevealSafe {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive contract: the header remains in flow, rails scroll internally,
   and no page-level horizontal overflow is introduced. */
@media (max-width: 1180px) {
  #app:not([data-active-view="home"]) .topbar {
    grid-template-columns: minmax(210px, .62fr) minmax(0, 1.38fr) auto !important;
    gap: 14px !important;
    padding-inline: 20px !important;
  }

  #app:not([data-active-view="home"]) .workspace-topnav-item {
    padding-inline: 8px !important;
    font-size: 10px !important;
  }

  #app:not([data-active-view="home"]) .workspace-topnav-item:nth-child(4),
  #app:not([data-active-view="home"]) .workspace-topnav-item:nth-child(6) {
    margin-left: 7px !important;
    padding-left: 14px !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail {
    grid-template-columns: repeat(6, minmax(150px, 1fr)) !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-grid {
    grid-template-columns: repeat(10, minmax(112px, 1fr)) !important;
  }

  #app[data-active-view="templates"] .template-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #app[data-active-view="setup"] .model-service-workspace {
    grid-template-columns: 190px minmax(0, 1fr) !important;
  }

  #app[data-active-view="setup"] .setup-provider-band {
    grid-template-columns: 250px minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  #app:not([data-active-view="home"]) .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "copy account" "nav nav" !important;
    min-height: 108px !important;
    padding: 10px 16px !important;
    row-gap: 5px !important;
  }

  #app:not([data-active-view="home"]) .topbar-copy {
    grid-area: copy !important;
  }

  #app:not([data-active-view="home"]) .topbar-actions {
    grid-area: account !important;
  }

  #app:not([data-active-view="home"]) .workspace-topnav {
    grid-area: nav !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-core .composer-launcher-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="quick-start"] .reactor-core .composer-launcher-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #app[data-active-view="workbench"] .output-overview {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="workbench"] .overview-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--dp-line) !important;
  }

  #app[data-active-view="workbench"] .overview-card:last-child {
    border-bottom: 0 !important;
  }

  #app[data-active-view="templates"] .template-use-workspace,
  #app[data-active-view="setup"] .model-service-workspace {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="setup"] .setup-provider-band {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="setup"] .provider-guide {
    border-right: 0 !important;
    border-bottom: 1px solid var(--dp-line) !important;
  }

  #app[data-active-view="logs"] .project-log-toolbar {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  #app[data-active-view="logs"] .project-log-more {
    justify-self: start !important;
  }
}

@media (max-width: 640px) {
  #app:not([data-active-view="home"]) .topbar {
    padding-inline: 12px !important;
  }

  #app:not([data-active-view="home"]) .topbar-home-name {
    display: none !important;
  }

  #app:not([data-active-view="home"]) .topbar h1 {
    font-size: 21px !important;
  }

  #app:not([data-active-view="home"]) .workspace-topbar-account {
    margin-left: 3px !important;
    padding-left: 6px !important;
  }

  #app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link {
    padding-inline: 6px !important;
    font-size: 10px !important;
  }

  #app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-plans {
    display: none !important;
  }

  #app:not([data-active-view="home"]) .page-scroll,
  #app[data-active-view="workbench"] .workbench-grid {
    padding-inline: 14px !important;
  }

  #app[data-active-view="workbench"] .reactor-core-top,
  #app[data-active-view="workbench"] .composer-stage,
  #app[data-active-view="workbench"] .composer-bottombar,
  #app[data-active-view="workbench"] .reactor-core-status,
  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail,
  #app[data-active-view="workbench"][data-creation-entry="fast"] .review-console {
    padding-inline: 14px !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-core .composer-launcher-row,
  #app[data-active-view="workbench"][data-creation-entry="quick-start"] .reactor-core .composer-launcher-row {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="workbench"] .composer-bottombar {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #app[data-active-view="workbench"] .composer-bottom-left,
  #app[data-active-view="workbench"] .composer-bottom-right {
    width: 100% !important;
  }

  #app[data-active-view="workbench"] .composer-bottom-right {
    justify-content: flex-end !important;
  }

  #app[data-active-view="workbench"] .prompt-stage-card {
    padding: 14px !important;
  }

  #app[data-active-view="workbench"] .prompt-stage-card .prompt-head {
    flex-direction: column !important;
  }

  #app[data-active-view="workbench"] .prompt-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  #app[data-active-view="workbench"] .prompt-toolbar .small {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail {
    grid-template-columns: repeat(6, minmax(142px, 1fr)) !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-grid {
    grid-template-columns: repeat(10, 112px) !important;
  }

  #app[data-active-view="templates"] .template-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #app[data-active-view="templates"] .template-use-editor-card {
    padding: 12px !important;
  }

  #app[data-active-view="templates"] .template-editor {
    height: 210px !important;
    min-height: 210px !important;
  }

  #app[data-active-view="templates"] .template-choice-card {
    min-height: 190px !important;
  }

  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > strong {
    justify-self: start !important;
  }

  #app[data-active-view="setup"] .provider-config {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  #app[data-active-view="setup"] .provider-config > *,
  #app[data-active-view="setup"] .setup-field:has(input[type="password"]) {
    grid-column: 1 !important;
  }

  #app[data-active-view="setup"] .provider-actions {
    justify-content: flex-start !important;
  }

  #app[data-active-view="setup"] .provider-actions .text-danger-btn {
    width: 100% !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail::after,
  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node,
  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node > span,
  #app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip,
  #app[data-active-view="home"] .home-reveal {
    animation: none !important;
    transition: none !important;
  }
}

#app .topbar-navigation {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#app .topbar-navigation > .workspace-topnav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow-x: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
}

#app .topbar-navigation > .workspace-topnav::-webkit-scrollbar {
  display: none !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item {
  position: relative !important;
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:nth-child(4),
#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:nth-child(6) {
  margin-left: 10px !important;
  padding-left: 18px !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:nth-child(4)::before,
#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:nth-child(6)::before {
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 1px !important;
  content: "" !important;
  background: var(--dp-line-strong) !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:hover,
#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:focus-visible,
#app .topbar-navigation > .workspace-topnav .workspace-topnav-item.active {
  color: var(--dp-ink) !important;
  background: var(--dp-purple-soft) !important;
  outline: none !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:active {
  transform: translateY(1px);
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item::after {
  position: absolute !important;
  right: 10px !important;
  bottom: 1px !important;
  left: 10px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: transparent !important;
  content: "" !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="quick-start"]::after,
#app[data-active-view="workbench"][data-creation-entry="fast"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="fast"]::after,
#app[data-active-view="sessions"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="sessions"]::after,
#app[data-active-view="templates"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"]::after,
#app[data-active-view="logs"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="logs"]::after,
#app[data-active-view="setup"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]::after {
  background: var(--dp-purple) !important;
}

#app[data-active-view="home"] .topbar-copy {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

#app[data-active-view="home"] .topbar-home-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
  cursor: pointer !important;
  text-align: left !important;
}

#app[data-active-view="home"] .topbar-home-link:hover,
#app[data-active-view="home"] .topbar-home-link:focus-visible {
  color: var(--dp-purple-bright) !important;
  outline: none !important;
}

#app[data-active-view="home"] .topbar-home-mark {
  display: grid !important;
  width: 29px !important;
  height: 29px !important;
  place-items: center !important;
  border-radius: 7px !important;
  background: var(--dp-ink) !important;
  color: var(--dp-bg) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
}

#app[data-active-view="home"] .topbar-home-name {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
}

#app[data-active-view="home"] .home-section {
  scroll-margin-top: 0 !important;
}

@media (max-width: 860px) {
  #app .topbar-navigation {
    grid-area: nav !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #app .topbar-navigation > .workspace-topnav {
    justify-content: flex-start !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  #app[data-active-view="home"] .topbar-home-name {
    display: none !important;
  }
}

#app > .shell {
  width: 100% !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding-top: 0 !important;
}

#app .topbar {
  position: relative !important;
  inset: auto !important;
  z-index: 10 !important;
  display: grid !important;
  grid-template-columns: minmax(150px, .58fr) minmax(0, 1.52fr) auto !important;
  align-items: center !important;
  gap: clamp(14px, 2.5vw, 32px) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 72px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px clamp(16px, 4vw, 54px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: var(--dp-bg) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app .topbar-copy {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#app .topbar-home-link {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: color 180ms ease, transform 180ms ease !important;
}

#app .topbar-home-link:hover,
#app .topbar-home-link:focus-visible {
  color: var(--dp-purple-bright) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

#app .topbar-home-mark {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  place-items: center !important;
  border-radius: 7px !important;
  background: var(--dp-ink) !important;
  color: var(--dp-bg) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
}

#app .topbar-home-name {
  overflow: hidden !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  letter-spacing: -.02em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app .topbar-route-context {
  display: inline-flex !important;
  min-width: 0 !important;
  max-width: 180px !important;
  align-items: center !important;
  min-height: 24px !important;
  padding-left: 12px !important;
  overflow: hidden !important;
  border-left: 1px solid var(--dp-line-strong) !important;
  color: var(--dp-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#app .topbar-route-context[hidden] {
  display: none !important;
}

#app .topbar .eyebrow,
#app .topbar #view-title,
#app .topbar #view-desc {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

#app .topbar-navigation {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#app .topbar-navigation > .workspace-topnav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow-x: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
}

#app .topbar-navigation > .workspace-topnav::-webkit-scrollbar {
  display: none !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item {
  position: relative !important;
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:nth-child(4),
#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:nth-child(6) {
  margin-left: 10px !important;
  padding-left: 18px !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:nth-child(4)::before,
#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:nth-child(6)::before {
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 1px !important;
  content: "" !important;
  background: var(--dp-line-strong) !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:hover,
#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:focus-visible {
  color: var(--dp-ink) !important;
  background: rgba(244, 244, 242, .06) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item.active {
  color: var(--dp-ink) !important;
  background: var(--dp-purple-soft) !important;
}

#app[data-active-view="home"] .topbar-navigation > .workspace-topnav .workspace-topnav-item.active {
  color: var(--dp-muted) !important;
  background: transparent !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item::after {
  position: absolute !important;
  right: 10px !important;
  bottom: 1px !important;
  left: 10px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: transparent !important;
  content: "" !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="quick-start"]::after,
#app[data-active-view="workbench"][data-creation-entry="fast"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="fast"]::after,
#app[data-active-view="sessions"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="sessions"]::after,
#app[data-active-view="templates"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"]::after,
#app[data-active-view="logs"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="logs"]::after,
#app[data-active-view="setup"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]::after {
  background: var(--dp-purple) !important;
}

#app .topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app .topbar-actions > .workbench-task-context,
#app .topbar-actions > #jump-to-output,
#app .topbar-actions > #jump-to-logs {
  display: none !important;
}

#app .workspace-topbar-account {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: max-content !important;
  margin-left: 10px !important;
  padding-left: 14px !important;
  border-left: 1px solid var(--dp-line-strong) !important;
}

#app .workspace-topbar-account .workspace-account-link {
  min-height: 36px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  white-space: nowrap !important;
}

#app .workspace-topbar-account .workspace-account-link:hover,
#app .workspace-topbar-account .workspace-account-link:focus-visible {
  color: var(--dp-ink) !important;
  background: rgba(244, 244, 242, .06) !important;
  outline: none !important;
}

#app .workspace-topbar-account .workspace-account-primary {
  border: 1px solid var(--dp-purple) !important;
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app .workspace-topbar-account .workspace-account-primary:hover,
#app .workspace-topbar-account .workspace-account-primary:focus-visible {
  border-color: var(--dp-purple-bright) !important;
  background: var(--dp-purple-bright) !important;
  color: #fff !important;
}

@media (max-width: 980px) {
  #app .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "copy account" "nav nav" !important;
    min-height: 110px !important;
    row-gap: 4px !important;
    padding: 10px clamp(14px, 3vw, 24px) !important;
  }

  #app .topbar-copy {
    grid-area: copy !important;
  }

  #app .topbar-navigation {
    grid-area: nav !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #app .topbar-navigation > .workspace-topnav {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #app .topbar-actions {
    grid-area: account !important;
  }
}

@media (max-width: 480px) {
  #app .topbar {
    min-height: 108px !important;
    padding: 9px 12px !important;
  }

  #app .topbar-route-context {
    display: none !important;
  }

  #app .topbar-home-name,
  #app:not([data-active-view="home"]) .topbar-home-name {
    display: inline !important;
  }

  #app .workspace-topbar-account {
    margin-left: 4px !important;
    padding-left: 6px !important;
  }

  #app .workspace-topbar-account .workspace-account-link {
    padding-inline: 6px !important;
    font-size: 10px !important;
  }

  #app .workspace-topbar-account .workspace-account-plans {
    display: none !important;
  }

  #app .topbar-navigation > .workspace-topnav {
    justify-content: flex-start !important;
  }
}

#app .topbar {
  position: relative !important;
  inset: auto !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr) auto !important;
  grid-template-areas: "copy nav actions" !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 10px clamp(16px, 3vw, 42px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: var(--dp-bg) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app .topbar-copy {
  position: relative !important;
  display: flex !important;
  grid-area: copy !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
}

#app .topbar-home-link {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: color 160ms ease, transform 160ms ease !important;
}

#app .topbar-home-link:hover,
#app .topbar-home-link:focus-visible {
  color: var(--dp-purple-bright) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

#app .topbar-home-mark {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  place-items: center !important;
  border-radius: 7px !important;
  background: var(--dp-ink) !important;
  color: var(--dp-bg) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
}

#app .topbar-home-name {
  display: inline !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
}

#app .topbar .topbar-home-name,
#app[data-active-view="home"] .topbar .topbar-home-name,
#app:not([data-active-view="home"]) .topbar .topbar-home-name {
  display: inline !important;
}

#app .topbar-route-context {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 150px !important;
  min-height: 24px !important;
  padding-left: 11px !important;
  overflow: hidden !important;
  border-left: 1px solid var(--dp-line-strong) !important;
  color: var(--dp-muted) !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  letter-spacing: .06em !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#app .topbar-route-context[hidden] {
  display: none !important;
}

#app .topbar .eyebrow,
#app .topbar #view-title,
#app .topbar #view-desc {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

#app .topbar-navigation {
  display: flex !important;
  grid-area: nav !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#app .topbar-navigation > .workspace-topnav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow-x: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
}

#app .topbar-navigation > .workspace-topnav::-webkit-scrollbar {
  display: none !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item {
  position: relative !important;
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"],
#app .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"] {
  margin-left: 10px !important;
  padding-left: 18px !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"]::before,
#app .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]::before {
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 1px !important;
  content: "" !important;
  background: var(--dp-line-strong) !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:hover,
#app .topbar-navigation > .workspace-topnav .workspace-topnav-item:focus-visible {
  color: var(--dp-ink) !important;
  background: rgba(244, 244, 242, .06) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item.active {
  color: var(--dp-ink) !important;
  background: transparent !important;
}

#app[data-active-view="home"] .topbar-navigation > .workspace-topnav .workspace-topnav-item.active {
  color: var(--dp-muted) !important;
  background: transparent !important;
}

#app .topbar-navigation > .workspace-topnav .workspace-topnav-item::after {
  position: absolute !important;
  right: 10px !important;
  bottom: 1px !important;
  left: 10px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: transparent !important;
  content: "" !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="quick-start"]::after,
#app[data-active-view="workbench"][data-creation-entry="fast"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="fast"]::after,
#app[data-active-view="sessions"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="sessions"]::after,
#app[data-active-view="templates"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"]::after,
#app[data-active-view="logs"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="logs"]::after,
#app[data-active-view="setup"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]::after {
  background: var(--dp-purple) !important;
}

#app .topbar-actions {
  display: flex !important;
  grid-area: actions !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app .topbar-actions > .workbench-task-context,
#app .topbar-actions > #jump-to-output,
#app .topbar-actions > #jump-to-logs {
  display: none !important;
}

#app .workspace-topbar-account {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: max-content !important;
  margin-left: 10px !important;
  padding-left: 14px !important;
  border-left: 1px solid var(--dp-line-strong) !important;
}

#app .workspace-topbar-account .workspace-account-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  white-space: nowrap !important;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

#app .workspace-topbar-account .workspace-account-link:hover,
#app .workspace-topbar-account .workspace-account-link:focus-visible {
  color: var(--dp-ink) !important;
  background: rgba(244, 244, 242, .06) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

#app .workspace-topbar-account .workspace-account-primary {
  border: 1px solid var(--dp-purple) !important;
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app .workspace-topbar-account .workspace-account-primary:hover,
#app .workspace-topbar-account .workspace-account-primary:focus-visible {
  border-color: var(--dp-purple-bright) !important;
  background: var(--dp-purple-bright) !important;
  color: #fff !important;
}

#app .panel {
  animation: none !important;
}

#app button {
  transition-duration: 160ms !important;
}

@media (max-width: 1100px) {
  #app .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "copy actions" "nav nav" !important;
    min-height: 106px !important;
    row-gap: 4px !important;
    padding: 9px clamp(14px, 3vw, 24px) 8px !important;
  }

  #app .topbar-navigation {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #app .topbar-navigation > .workspace-topnav {
    justify-content: flex-start !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  #app .topbar {
    min-height: 104px !important;
    padding-inline: 12px !important;
  }

  #app .topbar-route-context {
    display: none !important;
  }

  #app .topbar-home-name {
    display: inline !important;
  }

  #app .topbar-route-context {
    max-width: 100px !important;
    font-size: 9px !important;
  }

  #app .workspace-topbar-account {
    margin-left: 4px !important;
    padding-left: 7px !important;
  }

  #app .workspace-topbar-account .workspace-account-link {
    padding-inline: 6px !important;
    font-size: 10px !important;
  }

  #app .workspace-topbar-account .workspace-account-plans,
  #app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-plans,
  #app[data-active-view="home"] .workspace-topbar-account .workspace-account-plans,
  #app .topbar-navigation > .workspace-topnav .workspace-topnav-settings,
  #app:not([data-active-view="home"]) .workspace-topnav-settings {
    display: inline-flex !important;
  }

  #app .topbar-navigation > .workspace-topnav .workspace-topnav-item {
    padding-inline: 8px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 420px) {
  #app .workspace-topbar-account .workspace-account-plans,
  #app:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-plans,
  #app[data-active-view="home"] .workspace-topbar-account .workspace-account-plans {
    display: none !important;
  }

  #app .topbar-home-name {
    font-size: 11px !important;
  }
}

/* 20260917 · Six-stage workflow polish.
   Keep provider-specific renderers in Output formats, not in the creative
   chain. Remove the perpetual scan/pulse effects and confine interaction to
   the circular stage marker so completed nodes never reveal a card-shaped
   hover surface behind their content. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail::before {
  background: linear-gradient(90deg, rgba(155,123,255,.1), rgba(187,173,224,.5) 50%, rgba(155,123,255,.1)) !important;
  box-shadow: none !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:hover,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:focus-visible {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node::before,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span {
  background: rgba(45, 36, 70, .94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(21,13,42,.16) !important;
  animation: none !important;
  transition: transform 180ms cubic-bezier(.22,1,.36,1), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:hover > span,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:focus-visible > span {
  border-color: rgba(203, 188, 247, .78) !important;
  background: rgba(61, 47, 96, .98) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 22px rgba(35,19,73,.2) !important;
  transform: translateY(-2px) scale(1.025) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="running"] > span {
  border-color: rgba(203, 184, 255, .9) !important;
  background: rgba(78, 57, 126, .98) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 0 0 4px rgba(140,111,222,.08), 0 10px 24px rgba(41,22,82,.22) !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="running"] > span::before {
  opacity: 1 !important;
  animation: workflowStageOrbit 1.8s linear infinite !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="done"] > span {
  border-color: rgba(165,222,201,.6) !important;
  background: rgba(39, 75, 66, .96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(21,59,47,.18) !important;
}

@media (prefers-reduced-motion: reduce) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel > .fast-flow-rail .fast-flow-node,
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span::before {
    animation: none !important;
  }
}

/* 20260914 · Terminal generate-button state guard.
   Preserve the icon-only 48 × 44 action after older label-sized overrides,
   while keeping the exact percentage inside the same hit target. */
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] #run-demo-btn,
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

@media (max-width: 780px) {
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] #run-demo-btn,
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }
}

#app[data-active-view] .topbar {
  position: relative !important;
  inset: auto !important;
  z-index: 10 !important;
  display: grid !important;
  grid-template-columns: minmax(150px, .58fr) minmax(0, 1.52fr) auto !important;
  grid-template-areas: "copy nav actions" !important;
  align-items: center !important;
  gap: clamp(14px, 2.5vw, 32px) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 72px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px clamp(16px, 4vw, 54px) !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: var(--dp-bg) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app[data-active-view="home"] .topbar {
  display: grid !important;
}

#app[data-active-view] .topbar-copy {
  display: flex !important;
  grid-area: copy !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#app[data-active-view] .topbar-navigation {
  display: flex !important;
  grid-area: nav !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#app[data-active-view] .topbar-navigation > .workspace-topnav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
}

#app[data-active-view] .topbar-navigation > .workspace-topnav::-webkit-scrollbar {
  display: none !important;
}

#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item {
  position: relative !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  line-height: 1 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"],
#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"] {
  margin-left: 10px !important;
  padding-left: 18px !important;
}

#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"]::before,
#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]::before {
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 1px !important;
  content: "" !important;
  background: var(--dp-line-strong) !important;
}

#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item:hover,
#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item:focus-visible {
  color: var(--dp-ink) !important;
  background: rgba(244, 244, 242, .06) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item.active {
  color: var(--dp-ink) !important;
  background: transparent !important;
}

#app[data-active-view="home"] .topbar-navigation > .workspace-topnav .workspace-topnav-item.active {
  color: var(--dp-muted) !important;
  background: transparent !important;
}

#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item::after {
  position: absolute !important;
  right: 10px !important;
  bottom: 1px !important;
  left: 10px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: transparent !important;
  content: "" !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="quick-start"]::after,
#app[data-active-view="workbench"][data-creation-entry="fast"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="fast"]::after,
#app[data-active-view="sessions"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="sessions"]::after,
#app[data-active-view="templates"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"]::after,
#app[data-active-view="logs"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="logs"]::after,
#app[data-active-view="setup"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]::after {
  background: var(--dp-purple) !important;
}

#app[data-active-view] .topbar-actions {
  display: flex !important;
  grid-area: actions !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view] .topbar-actions > .workbench-task-context,
#app[data-active-view] .topbar-actions > #jump-to-output,
#app[data-active-view] .topbar-actions > #jump-to-logs {
  display: none !important;
}

#app[data-active-view] .workspace-topbar-account {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: max-content !important;
  margin-left: 10px !important;
  padding-left: 14px !important;
  border-left: 1px solid var(--dp-line-strong) !important;
}

#app[data-active-view] .workspace-topbar-account .workspace-account-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: max-content !important;
  min-height: 36px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  white-space: nowrap !important;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

#app[data-active-view] .workspace-topbar-account .workspace-account-link:hover,
#app[data-active-view] .workspace-topbar-account .workspace-account-link:focus-visible {
  color: var(--dp-ink) !important;
  background: rgba(244, 244, 242, .06) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

#app[data-active-view] .workspace-topbar-account .workspace-account-primary {
  border: 1px solid var(--dp-purple) !important;
  background: var(--dp-purple) !important;
  color: #fff !important;
}

#app[data-active-view] .workspace-topbar-account .workspace-account-primary:hover,
#app[data-active-view] .workspace-topbar-account .workspace-account-primary:focus-visible {
  border-color: var(--dp-purple-bright) !important;
  background: var(--dp-purple-bright) !important;
  color: #fff !important;
}

#app[data-active-view] .topbar-route-context {
  display: none !important;
}

@media (max-width: 1100px) {
  #app[data-active-view] .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "copy actions" "nav nav" !important;
    min-height: 106px !important;
    row-gap: 4px !important;
    padding: 9px clamp(14px, 3vw, 24px) 8px !important;
  }

  #app[data-active-view] .topbar-navigation {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #app[data-active-view] .topbar-navigation > .workspace-topnav {
    justify-content: flex-start !important;
    width: 100% !important;
  }
}

@media (max-width: 720px) {
  #app[data-active-view] .topbar {
    min-height: 104px !important;
    padding: 8px 12px 7px !important;
  }

  #app[data-active-view] .topbar-copy {
    gap: 8px !important;
  }

  #app[data-active-view] .topbar-home-link {
    min-height: 36px !important;
  }

  #app[data-active-view] .topbar-home-mark {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }

  #app[data-active-view] .topbar-navigation > .workspace-topnav {
    justify-content: flex-start !important;
    gap: 0 !important;
    scroll-padding-inline: 4px !important;
  }

  #app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item {
    min-height: 34px !important;
    padding-inline: 7px !important;
    font-size: 10px !important;
  }

  #app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"],
  #app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"] {
    margin-left: 5px !important;
    padding-left: 13px !important;
  }

  #app[data-active-view] .workspace-topbar-account {
    margin-left: 4px !important;
    padding-left: 7px !important;
  }

  #app[data-active-view] .workspace-topbar-account .workspace-account-link {
    min-height: 34px !important;
    padding-inline: 6px !important;
    font-size: 10px !important;
  }

  #app[data-active-view] .workspace-topbar-account .workspace-account-plans {
    display: none !important;
  }
}

@media (max-width: 420px) {
  #app[data-active-view] .topbar {
    min-height: 102px !important;
    padding-inline: 10px !important;
  }

  #app[data-active-view] .topbar-home-name {
    font-size: 11px !important;
  }

  #app[data-active-view] .workspace-topbar-account .workspace-account-link {
    padding-inline: 5px !important;
  }

  #app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item {
    padding-inline: 6px !important;
  }
}

/* --------------------------------------------------------------------------
   20260910 · open-canvas publisher pass
   Reduce nested boxes while preserving the existing interaction structure.
   -------------------------------------------------------------------------- */

#app[data-active-view="workbench"] .workbench-grid {
  gap: 42px !important;
  padding-top: 34px !important;
}

#app[data-active-view="workbench"] .composer-card,
#app[data-active-view="workbench"] .reactor-shell,
#app[data-active-view="workbench"] .reactor-flow-map,
#app[data-active-view="workbench"] .reactor-core {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .composer-card {
  overflow: visible !important;
}

#app[data-active-view="workbench"] .reactor-core-top {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .composer-launcher-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid var(--release-line) !important;
}

#app[data-active-view="workbench"] .composer-launcher,
#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle {
  min-height: 54px !important;
  padding: 5px 18px !important;
  border: 0 !important;
  border-right: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"] .composer-launcher:first-child,
#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle:first-child {
  padding-left: 0 !important;
}

#app[data-active-view="workbench"] .composer-launcher:last-child,
#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle:last-child {
  border-right: 0 !important;
  padding-right: 0 !important;
}

#app[data-active-view="workbench"] .composer-launcher:hover,
#app[data-active-view="workbench"] .composer-first-frame-prompt-toggle:hover {
  border-color: var(--release-line) !important;
  background: rgba(255, 255, 255, .025) !important;
}

#app[data-active-view="workbench"] .composer-launcher strong,
#app[data-active-view="workbench"] .composer-first-frame-prompt-copy strong {
  font-size: 13px !important;
  letter-spacing: -.01em !important;
}

#app[data-active-view="workbench"] .composer-launcher small,
#app[data-active-view="workbench"] .composer-first-frame-prompt-copy small {
  font-size: 11px !important;
  color: #a5a1ad !important;
}

#app[data-active-view="workbench"] .composer-stage {
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .composer-stage .idea-input,
#app[data-active-view="workbench"] .composer-stage textarea {
  min-height: 206px !important;
  margin: 0 !important;
  padding: 22px 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--release-ink) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  resize: vertical !important;
}

#app[data-active-view="workbench"] .composer-stage .idea-input::placeholder,
#app[data-active-view="workbench"] .composer-stage textarea::placeholder {
  color: #96929e !important;
  opacity: 1 !important;
}

#app[data-active-view="workbench"] .quick-start-style-dock {
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .quick-start-wheel-trigger {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--release-ink) !important;
  text-align: left !important;
}

#app[data-active-view="workbench"] .quick-start-wheel-trigger small {
  margin-left: auto !important;
  color: #9c98a5 !important;
}

#app[data-active-view="workbench"] .composer-bottombar {
  min-height: 66px !important;
  padding: 14px 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .composer-bottom-left,
#app[data-active-view="workbench"] .composer-bottom-right {
  gap: 12px !important;
}

#app[data-active-view="workbench"] .composer-inline-control,
#app[data-active-view="workbench"] .composer-meta-readout {
  color: #a5a1ad !important;
  font-size: 12px !important;
}

#app[data-active-view="workbench"] .segmented.compact {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .segmented.compact .segment {
  min-height: 30px !important;
  padding-inline: 9px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #aaa6b1 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .segmented.compact .segment.active {
  color: #fff !important;
  background: rgba(155, 123, 255, .2) !important;
}

#app[data-active-view="workbench"] .reactor-core-status {
  min-height: 54px !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Quick Start does not expose a ratio control. Creative Engine restores a
   lightweight Frame selector while the server still honors explicit legacy
   clients and idea-declared ratios. */
#app[data-creation-entry="quick-start"] .composer-first-frame-size-control,
#app[data-creation-entry="quick-start"] .first-frame-size-selector {
  display: none !important;
}

/* Creative Engine: keep six nodes visible as one editorial process line. */
#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail {
  min-height: 0 !important;
  margin-top: 28px !important;
  padding: 28px 0 22px !important;
  border-top: 1px solid var(--release-line) !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail::before {
  top: 52px !important;
  right: 5% !important;
  left: 5% !important;
  background: linear-gradient(90deg, rgba(155, 123, 255, .75), rgba(255, 255, 255, .18) 50%, rgba(226, 99, 111, .72)) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node {
  min-height: 96px !important;
  padding: 0 8px !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node > span {
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  box-shadow: 0 0 0 3px rgba(155, 123, 255, .06) !important;
  font-size: 11px !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node strong {
  min-height: 30px !important;
  overflow: visible !important;
  color: #f1eff4 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node small {
  min-height: 28px !important;
  overflow: visible !important;
  color: #9c98a5 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 2 !important;
}

/* Ten review skills become an unobtrusive text index rather than ten boxes. */
#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console {
  margin-top: 0 !important;
  padding: 20px 0 18px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console-head {
  padding: 0 0 12px !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-grid {
  display: flex !important;
  gap: 18px !important;
  overflow-x: auto !important;
  padding: 0 0 5px !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip {
  flex: 0 0 112px !important;
  align-content: start !important;
  justify-items: start !important;
  min-height: 0 !important;
  padding: 4px 0 8px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip:hover,
#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip:focus-visible,
#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip[data-status="done"] {
  border-bottom-color: var(--release-purple) !important;
  background: transparent !important;
  transform: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip span {
  color: var(--release-purple-strong) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip strong {
  overflow: visible !important;
  color: #eceaf0 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip small {
  overflow: visible !important;
  color: #9c98a5 !important;
  font-size: 10px !important;
  white-space: normal !important;
}

/* Prompt output reads like an editor, not a stack of cards. */
#app[data-active-view="workbench"] .output-panel > .panel-head {
  margin-top: 10px !important;
  padding: 0 0 12px !important;
}

#app[data-active-view="workbench"] .prompt-stage-card {
  padding: 22px 0 26px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--release-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"] .prompt-stage-card .prompt-head {
  padding: 0 !important;
}

#app[data-active-view="workbench"] .prompt-stage-card .prompt-head > div:first-child > span {
  font-size: 19px !important;
}

#app[data-active-view="workbench"] .prompt-caption {
  font-size: 12px !important;
  color: #a5a1ad !important;
}

#app[data-active-view="workbench"] .prompt-body {
  min-height: 180px !important;
  padding: 22px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #e9e7ed !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

#app[data-active-view="workbench"] .prompt-body.muted {
  color: #96929e !important;
}

#app[data-active-view="workbench"] .output-overview {
  border-top: 1px solid var(--release-line) !important;
  border-bottom: 1px solid var(--release-line) !important;
}

#app[data-active-view="workbench"] .overview-card {
  padding: 14px 18px !important;
}

@media (max-width: 760px) {
  #app[data-active-view="workbench"] .composer-launcher-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  #app[data-active-view="workbench"] .composer-launcher,
  #app[data-active-view="workbench"] .composer-first-frame-prompt-toggle {
    padding: 12px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--release-line) !important;
  }

  #app[data-active-view="workbench"] .composer-launcher:last-child,
  #app[data-active-view="workbench"] .composer-first-frame-prompt-toggle:last-child {
    border-bottom: 0 !important;
  }

  #app[data-active-view="workbench"] .composer-bottom-left,
  #app[data-active-view="workbench"] .composer-bottom-right {
    flex-wrap: wrap !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail {
    grid-template-columns: repeat(6, minmax(128px, 1fr)) !important;
  }

  #app[data-active-view="workbench"] .output-overview {
    grid-template-columns: 1fr !important;
  }

  #app[data-active-view="workbench"] .overview-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--release-line) !important;
  }

  #app[data-active-view="workbench"] .overview-card:last-child {
    border-bottom: 0 !important;
  }
}

/* Final release pass: on desktop the review index shares the available row
   evenly; on mobile it remains a deliberately scrollable text rail. The
   style launcher is kept as an embedded control rather than a filled card. */
@media (min-width: 861px) {
  #app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-launcher[data-composer-panel="styles"] {
  border-color: var(--dp-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-launcher[data-composer-panel="styles"]:hover,
#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-launcher[data-composer-panel="styles"]:focus-visible {
  border-color: var(--dp-line-strong) !important;
  background: rgba(155, 123, 255, .07) !important;
}

/* Phase 1 cascade guard. The publisher pass above intentionally owns layout;
   this final layer owns only the shared control hierarchy and states. */
#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"])
  :is(.primary-btn, .ghost-btn, .text-btn, .text-danger-btn, .composer-send-btn) {
  min-height: var(--dp-control-height) !important;
  border: 1px solid transparent !important;
  border-radius: var(--dp-radius-button) !important;
  box-shadow: none !important;
  font-weight: 650 !important;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease,
    opacity 180ms ease, transform 120ms ease !important;
}

#app#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"])
  :is(.primary-btn, .composer-send-btn) {
  border-color: var(--dp-primary-border) !important;
  background: var(--dp-primary-fill) !important;
  color: #fff !important;
}

#app#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"])
  :is(.primary-btn, .composer-send-btn):hover {
  border-color: #9178ea !important;
  background: var(--dp-primary-fill-hover) !important;
  transform: translateY(-1px) !important;
}

#app#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"])
  :is(.primary-btn, .composer-send-btn):active {
  border-color: var(--dp-primary-fill-pressed) !important;
  background: var(--dp-primary-fill-pressed) !important;
  transform: translateY(1px) !important;
}

#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"]) .ghost-btn {
  border-color: var(--dp-border-default) !important;
  background: var(--dp-control-fill) !important;
  color: var(--dp-text-primary) !important;
}

#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"]) .ghost-btn:hover {
  border-color: var(--dp-border-strong) !important;
  background: var(--dp-control-fill-hover) !important;
  transform: translateY(-1px) !important;
}

#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"]) .ghost-btn:active {
  background: var(--dp-control-fill-pressed) !important;
  transform: translateY(1px) !important;
}

#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"]) .text-btn {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--dp-text-muted) !important;
}

#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"]) .text-btn:hover {
  background: rgba(244, 244, 242, .07) !important;
  color: var(--dp-text-primary) !important;
}

#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"]) .text-danger-btn {
  border-color: rgba(181, 60, 76, .52) !important;
  background: var(--dp-danger-tonal) !important;
  color: #ffb5bd !important;
}

#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"]) .text-danger-btn:hover {
  border-color: var(--dp-danger-fill-hover) !important;
  background: var(--dp-danger-fill) !important;
  color: #fff !important;
}

#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"])
  :is(.primary-btn, .ghost-btn, .text-btn, .text-danger-btn, .composer-send-btn):focus-visible {
  outline: 2px solid var(--dp-focus-ring) !important;
  outline-offset: 2px !important;
}

#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"])
  :is(.primary-btn, .ghost-btn, .text-btn, .text-danger-btn, .composer-send-btn):is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed !important;
  opacity: .48 !important;
  transform: none !important;
}

#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"])
  :is(.primary-btn, .ghost-btn, .text-btn, .text-danger-btn, .composer-send-btn):is(.is-loading, [aria-busy="true"]) {
  cursor: progress !important;
  opacity: .74 !important;
  pointer-events: none !important;
}

/* The primary generate control is also the in-flight cancel control. Keep it
   hit-testable while a run is active; other busy controls remain locked. */
#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"])
  #run-demo-btn:is(.is-cancel, [data-run-state="running"], [data-run-state="queued"]) {
  cursor: pointer !important;
  pointer-events: auto !important;
}

#app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"])
  :is(.primary-btn, .ghost-btn, .text-btn, .text-danger-btn).small {
  min-height: var(--dp-control-height-compact) !important;
}

@media (max-width: 760px) {
  #app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"])
    :is(.primary-btn, .ghost-btn, .text-btn, .text-danger-btn, .composer-send-btn),
  #app[data-active-view="workbench"]:is([data-creation-entry="quick-start"], [data-creation-entry="fast"])
    :is(.primary-btn, .ghost-btn, .text-btn, .text-danger-btn).small {
    min-height: 44px !important;
  }
}

/* --------------------------------------------------------------------------
   20260910 · solid controls and boundary pass · phase 2 · Quick Start
   -------------------------------------------------------------------------- */

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .workbench-grid {
  gap: 28px !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-card {
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-panel) !important;
  background: var(--dp-surface-1) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .reactor-core-top {
  padding: 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
  background: var(--dp-surface-1) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"]
  .reactor-core .composer-launcher-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"]
  :is(.composer-launcher, .composer-first-frame-prompt-toggle) {
  min-height: 64px !important;
  padding: 11px 13px !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-control) !important;
  background: var(--dp-control-fill) !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"]
  :is(.composer-launcher, .composer-first-frame-prompt-toggle):hover {
  border-color: var(--dp-border-strong) !important;
  background: var(--dp-control-fill-hover) !important;
  transform: translateY(-1px) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"]
  .composer-first-frame-prompt-toggle:has(input:checked) {
  border-color: rgba(131, 104, 229, .78) !important;
  background: var(--dp-surface-selected) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-launcher:first-child,
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-first-frame-prompt-toggle:first-child,
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-launcher:last-child,
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-first-frame-prompt-toggle:last-child {
  padding-right: 13px !important;
  padding-left: 13px !important;
  border: 1px solid var(--dp-border-default) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-reference-strip {
  padding: 0 16px !important;
  background: var(--dp-surface-1) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-reference-strip:not(:has(.empty)) {
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-stage {
  padding: 16px !important;
  border: 0 !important;
  background: var(--dp-surface-1) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-stage .idea-input,
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-stage textarea {
  min-height: 210px !important;
  padding: 18px !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-control) !important;
  background: var(--dp-surface-inset) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-stage .idea-input:focus,
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-stage textarea:focus {
  border-color: var(--dp-primary-border) !important;
  outline: 2px solid var(--dp-focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .quick-start-style-dock {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 10px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .quick-start-wheel-trigger {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 13px !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-button) !important;
  background: var(--dp-control-fill) !important;
  color: var(--dp-text-primary) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .quick-start-wheel-trigger:hover,
#app[data-active-view="workbench"][data-creation-entry="quick-start"] .quick-start-wheel-trigger:focus-visible {
  border-color: var(--dp-border-strong) !important;
  background: var(--dp-control-fill-hover) !important;
  outline: 2px solid var(--dp-focus-ring) !important;
  outline-offset: 2px !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .quick-start-wheel-orbit {
  flex: 0 0 auto !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-bottombar {
  min-height: 72px !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-border-default) !important;
  border-bottom: 0 !important;
  background: var(--dp-surface-2) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-reset-btn {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--dp-text-muted) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-reset-btn:hover {
  border-color: var(--dp-border-default) !important;
  background: var(--dp-control-fill) !important;
  color: var(--dp-text-primary) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-send-btn {
  display: inline-flex !important;
  width: auto !important;
  min-width: 168px !important;
  height: 44px !important;
  padding: 0 16px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 12px !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-send-arrow {
  font-size: 18px !important;
  line-height: 1 !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .reactor-core-status {
  min-height: 58px !important;
  padding: 12px 16px 14px !important;
  border: 0 !important;
  border-top: 1px solid var(--dp-border-default) !important;
  background: var(--dp-surface-1) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .output-panel {
  overflow: hidden !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-panel) !important;
  background: var(--dp-surface-1) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .output-panel > .panel-head {
  min-height: 62px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
  background: var(--dp-surface-2) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .output-overview {
  border: 0 !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
  background: var(--dp-surface-1) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .prompt-stage-card {
  margin: 0 !important;
  padding: 20px 18px 22px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
  border-radius: 0 !important;
  background: var(--dp-surface-1) !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .prompt-stage-card:last-of-type {
  border-bottom: 0 !important;
}

#app[data-active-view="workbench"][data-creation-entry="quick-start"] .prompt-body {
  margin-top: 14px !important;
  padding: 16px !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-control) !important;
  background: var(--dp-surface-inset) !important;
}

@media (max-width: 760px) {
  #app[data-active-view="workbench"][data-creation-entry="quick-start"] .reactor-core-top {
    padding: 12px !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="quick-start"]
    .reactor-core .composer-launcher-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="quick-start"]
    :is(.composer-launcher, .composer-first-frame-prompt-toggle) {
    min-height: 60px !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-stage {
    padding: 12px !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-bottombar {
    align-items: stretch !important;
    padding: 12px !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-bottom-right {
    width: 100% !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-send-btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="quick-start"] .prompt-stage-card {
    padding: 18px 14px 20px !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="quick-start"] .prompt-toolbar {
    width: 100% !important;
  }
}

/* Final cascade guard for the Creative Engine disclosure. The legacy flow
   map uses named grid rows; the disclosure needs ordinary document flow so
   the six-node rail and review strip stack instead of sharing one grid cell. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel {
  display: block !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel > .fast-flow-rail,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel > .review-console {
  grid-row: auto !important;
  grid-column: auto !important;
}

/* 20260911 · Place the consolidated workflow review between the prompt input
   and the output column. The legacy seven-node rail has been removed from the
   markup; keep this map in normal document flow so the disclosure follows the
   composer core when the user expands it. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-flow-map {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-flow-map > .reactor-core {
  order: 1 !important;
  width: 100% !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-flow-map > .creative-workflow-disclosure {
  order: 2 !important;
  margin: 16px 0 0 !important;
  width: 100% !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="quick-start"] .creative-workflow-disclosure {
  display: none !important;
}

/* 20260911 · Sequenced output + Creative Engine polish */
#app[data-active-view="workbench"] .result-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

#app[data-active-view="workbench"] .result-head-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

#app[data-active-view="workbench"] .result-head-actions #rerun-from-banner-btn {
  min-width: 104px !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(155, 123, 255, .18) !important;
}

#app[data-active-view="workbench"] .first-frame-card .prompt-caption {
  transition: color .22s ease, opacity .22s ease !important;
}

#app[data-active-view="workbench"] .first-frame-card .prompt-body.muted {
  color: #a7a2b0 !important;
}

/* Preserve the circular six-node language while making the chain read as a
   deliberate process instead of six unrelated controls. */
#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  min-height: 160px !important;
  padding: 30px 10px 18px !important;
  border: 1px solid rgba(154, 143, 177, .22) !important;
  border-radius: 22px !important;
  background: rgba(20, 18, 27, .64) !important;
  overflow: hidden !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail::before {
  content: "" !important;
  position: absolute !important;
  top: 53px !important;
  right: 8% !important;
  left: 8% !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(155,123,255,.15), rgba(187,173,224,.72), rgba(155,123,255,.15)) !important;
  opacity: .92 !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail::after {
  content: "" !important;
  position: absolute !important;
  top: 50px !important;
  left: 8% !important;
  width: 18% !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(210,198,255,.9), transparent) !important;
  filter: blur(2px) !important;
  animation: dp-flow-scan 4.8s ease-in-out infinite !important;
  pointer-events: none !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 118px !important;
  padding: 0 8px 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  text-align: center !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node > span {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(204,195,231,.58) !important;
  border-radius: 50% !important;
  background: #282239 !important;
  color: #f3efff !important;
  box-shadow: 0 0 0 7px rgba(155,123,255,.07), 0 10px 22px rgba(0,0,0,.24) !important;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .08em !important;
  transition: background .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node strong {
  max-width: 132px !important;
  min-height: 32px !important;
  color: #f0edf7 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-wrap: balance !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node small {
  max-width: 148px !important;
  min-height: 30px !important;
  color: #9993a6 !important;
  font-size: 10px !important;
  line-height: 1.38 !important;
  text-wrap: balance !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:hover,
#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:focus-visible {
  transform: translateY(-4px) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:hover > span,
#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node:focus-visible > span {
  border-color: rgba(211,199,255,.95) !important;
  background: #4a3a70 !important;
  box-shadow: 0 0 0 8px rgba(155,123,255,.12), 0 12px 28px rgba(105,77,174,.32) !important;
  transform: scale(1.04) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="running"] > span {
  border-color: #c9b8ff !important;
  background: #59458a !important;
  box-shadow: 0 0 0 8px rgba(155,123,255,.14), 0 0 28px rgba(155,123,255,.35) !important;
  animation: dp-node-pulse 1.8s ease-in-out infinite !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="done"] > span {
  border-color: rgba(177,233,202,.75) !important;
  background: #254d3d !important;
  box-shadow: 0 0 0 7px rgba(117,207,163,.09), 0 8px 20px rgba(33,94,66,.22) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="error"] > span {
  border-color: rgba(246,162,170,.8) !important;
  background: #5e303b !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console {
  margin-top: 14px !important;
  padding: 18px !important;
  border: 1px solid rgba(154,143,177,.2) !important;
  border-radius: 20px !important;
  background: rgba(17,15,23,.46) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-console-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(154,143,177,.16) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow: visible !important;
  padding: 14px 0 4px !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip {
  display: grid !important;
  align-content: start !important;
  justify-items: start !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 52px !important;
  padding: 6px 7px !important;
  border: 1px solid rgba(154,143,177,.18) !important;
  border-radius: 12px !important;
  background: rgba(38,33,49,.56) !important;
  text-align: left !important;
  transition: transform .24s ease, border-color .24s ease, background .24s ease !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip:hover,
#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip:focus-visible,
#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip[data-status="done"] {
  border-color: rgba(183,165,245,.6) !important;
  background: rgba(72,57,106,.52) !important;
  transform: translateY(-2px) !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip span {
  color: #bca9ee !important;
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .06em !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip strong {
  color: #ede9f4 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.28 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip small {
  color: #9891a5 !important;
  font-size: 8px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@keyframes dp-flow-scan {
  0%, 100% { transform: translateX(0); opacity: .15; }
  50% { transform: translateX(360%); opacity: .85; }
}

@keyframes dp-node-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (max-width: 1100px) {
  #app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #app[data-active-view="workbench"] .result-head {
    align-items: flex-start !important;
  }

  #app[data-active-view="workbench"] .result-head-actions {
    flex-wrap: wrap !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: 26px !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail::before,
  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail::after {
    display: none !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-rail::after,
  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node[data-status="running"] > span {
    animation: none !important;
  }

  #app[data-active-view="workbench"][data-creation-entry="fast"] .fast-flow-node,
  #app[data-active-view="workbench"][data-creation-entry="fast"] .review-skill-chip {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   20260911 · Creative Engine visual alignment pass
   Keep the six-node circle/rail language, remove vertical dead space, and
   lock the ten review cards to one shared text baseline on desktop.
   -------------------------------------------------------------------------- */

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-rail {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 12px 16px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
  background: var(--dp-surface-2) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-rail::before {
  position: absolute !important;
  top: 34px !important;
  right: 8% !important;
  left: 8% !important;
  z-index: 0 !important;
  display: block !important;
  height: 1px !important;
  content: "" !important;
  background: linear-gradient(90deg, rgba(155, 123, 255, .72), rgba(222, 216, 235, .22) 50%, rgba(226, 99, 111, .68)) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-rail::after {
  position: absolute !important;
  top: 32px !important;
  left: 8% !important;
  z-index: 1 !important;
  display: block !important;
  width: 38px !important;
  height: 4px !important;
  border-radius: 999px !important;
  content: "" !important;
  background: linear-gradient(90deg, transparent, var(--dp-purple-bright), transparent) !important;
  filter: drop-shadow(0 0 5px rgba(162, 125, 255, .44));
  animation: dp-flow-scan 4.8s ease-in-out infinite !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-node {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-rows: 44px 17px !important;
  min-width: 0 !important;
  min-height: 65px !important;
  padding: 0 4px !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-node > span {
  grid-row: 1 !important;
  grid-column: 1 !important;
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  place-items: center !important;
  border: 1px solid var(--dp-border-strong) !important;
  border-radius: 50% !important;
  background: var(--dp-surface-inset) !important;
  color: var(--dp-purple-bright) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  box-shadow: 0 0 0 4px rgba(162, 125, 255, .07) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-node strong {
  grid-row: 2 !important;
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--dp-text-primary) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 17px !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-node small {
  display: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-node:hover:not(:disabled),
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-node:focus-visible {
  transform: translateY(-1px) !important;
  outline: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-node:hover > span,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-node:focus-visible > span,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-node[data-status="running"] > span {
  border-color: var(--dp-primary-border) !important;
  background: var(--dp-primary-fill) !important;
  color: #fff !important;
  box-shadow: 0 0 0 6px rgba(162, 125, 255, .1), 0 0 18px rgba(162, 125, 255, .18) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-node[data-status="done"] > span,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .fast-flow-node[data-status="skipped"] > span {
  border-color: rgba(85, 175, 127, .62) !important;
  background: rgba(85, 175, 127, .16) !important;
  color: #9be1b8 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .review-console {
  gap: 8px !important;
  margin: 0 !important;
  padding: 11px 16px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--dp-surface-1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .review-console-head {
  min-height: 18px !important;
  padding: 0 0 3px !important;
  align-items: center !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .review-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .review-skill-chip {
  display: grid !important;
  grid-template-rows: 13px 17px 12px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 55px !important;
  padding: 6px 8px 5px !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 2px !important;
  overflow: hidden !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: 8px !important;
  background: var(--dp-control-fill) !important;
  text-align: left !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .review-skill-chip span {
  display: block !important;
  width: 100% !important;
  height: 13px !important;
  color: var(--dp-purple-bright) !important;
  font: 700 9px/13px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .06em !important;
  text-align: left !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .review-skill-chip strong,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .review-skill-chip small {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .review-skill-chip strong {
  color: var(--dp-text-primary) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 17px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .review-skill-chip small {
  color: var(--dp-text-muted) !important;
  font-size: 8px !important;
  line-height: 12px !important;
}

@media (max-width: 1100px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel .review-skill-grid {
    grid-template-columns: repeat(10, minmax(72px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel .fast-flow-rail {
    grid-template-columns: repeat(3, minmax(92px, 1fr)) !important;
    row-gap: 18px !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel .fast-flow-rail::before,
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel .fast-flow-rail::after {
    display: none !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel .review-skill-grid {
    grid-template-columns: repeat(2, minmax(112px, 1fr)) !important;
  }
}

/* Final Run History layout guard: keep card content and CTA in one row. */
#app[data-active-view="logs"] .project-log-card {
  display: block !important;
  width: 100% !important;
}
#app[data-active-view="logs"] .project-log-card-open {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) max-content !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 104px !important;
  padding: 16px 58px 16px 0 !important;
  gap: 18px !important;
}
#app[data-active-view="logs"] .project-log-card-open > .project-log-status-mark,
#app[data-active-view="logs"] .project-log-card-open > .project-log-card-copy,
#app[data-active-view="logs"] .project-log-card-open > .project-log-card-cta {
  grid-row: 1 !important;
}
#app[data-active-view="logs"] .project-log-card-open > .project-log-card-cta {
  justify-self: end !important;
}
#app[data-active-view="logs"] .project-log-card-delete {
  bottom: auto !important;
  top: 8px !important;
  right: 8px !important;
}
@media (max-width: 720px) {
  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    padding: 14px 58px 14px 0 !important;
  }
  #app[data-active-view="logs"] .project-log-card-open > .project-log-status-mark,
  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-copy,
  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-cta {
    grid-column: 1 !important;
  }
  #app[data-active-view="logs"] .project-log-card-open > .project-log-status-mark {
    display: none !important;
  }
  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-copy {
    grid-row: 1 !important;
  }
  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-cta {
    grid-row: 2 !important;
    justify-self: start !important;
  }
}

/* Final Run History contrast guard. */
#app[data-active-view="logs"] .project-log-card-kicker,
#app[data-active-view="logs"] .project-log-card-kicker > span {
  color: #536158 !important;
}
#app[data-active-view="logs"] .project-log-card-kicker time,
#app[data-active-view="logs"] .project-log-card-meta,
#app[data-active-view="logs"] .project-log-card-meta > span {
  color: #56625a !important;
}
#app[data-active-view="logs"] .project-log-card-meta > span + span::before {
  display: none !important;
  content: none !important;
}
#app[data-active-view="logs"] .project-log-card-meta > span + span {
  padding-left: 9px !important;
  border-left: 1px solid rgba(23, 30, 26, .14) !important;
}
#app[data-active-view="logs"] .project-log-card-meta > span.has-errors {
  color: #984b3f !important;
}
#app[data-active-view="logs"] .project-log-detail {
  width: min(720px, 92vw) !important;
  max-width: 100vw !important;
  border-left-color: rgba(23, 30, 26, .16) !important;
  background: #f7f7f2 !important;
  color: #17201b !important;
  box-shadow: -22px 0 56px rgba(23, 30, 26, .18) !important;
}
#app[data-active-view="logs"] .project-log-detail > header {
  border-bottom-color: rgba(23, 30, 26, .16) !important;
  background: #fbfbf7 !important;
}
#app[data-active-view="logs"] .project-log-detail > header .eyebrow {
  color: #8a5b34 !important;
}
#app[data-active-view="logs"] .project-log-detail > header h2,
#app[data-active-view="logs"] .project-run-list-head h3,
#app[data-active-view="logs"] .project-level-errors h3,
#app[data-active-view="logs"] .project-run-card > summary strong,
#app[data-active-view="logs"] .project-run-errors h4,
#app[data-active-view="logs"] .project-run-output h4,
#app[data-active-view="logs"] .project-run-actions h4 {
  color: #17201b !important;
}
#app[data-active-view="logs"] .project-log-detail > header p:last-child,
#app[data-active-view="logs"] .project-run-list-head span,
#app[data-active-view="logs"] .project-level-errors > div:first-child span,
#app[data-active-view="logs"] .project-run-card > summary small,
#app[data-active-view="logs"] .project-run-card > summary em,
#app[data-active-view="logs"] .project-run-output > div span,
#app[data-active-view="logs"] .project-run-action-group > span {
  color: #56625a !important;
}
#app[data-active-view="logs"] .project-run-card {
  border-color: rgba(23, 30, 26, .16) !important;
  background: #fffefa !important;
}
#app[data-active-view="logs"] .project-run-card[open] > summary {
  border-bottom-color: rgba(23, 30, 26, .1) !important;
  background: #fafaf5 !important;
}
#app[data-active-view="logs"] .project-run-facts > span,
#app[data-active-view="logs"] .project-run-action-strip {
  border-color: rgba(23, 30, 26, .12) !important;
  background: #f6f6f0 !important;
}
#app[data-active-view="logs"] .project-run-facts > span,
#app[data-active-view="logs"] .project-run-facts strong,
#app[data-active-view="logs"] .project-run-facts code {
  color: #29352e !important;
}
#app[data-active-view="logs"] .project-run-output pre {
  border-color: rgba(23, 30, 26, .16) !important;
  background: #f5f5ef !important;
  color: #28352d !important;
}
#app[data-active-view="logs"] .project-run-actions button {
  border-color: rgba(23, 30, 26, .16) !important;
  background: #fffefa !important;
  color: #17201b !important;
}
@media (max-width: 720px) {
  #app[data-active-view="logs"] .project-log-detail {
    width: 100vw !important;
    height: 100dvh !important;
  }
}

/* --------------------------------------------------------------------------
   Run History visual system v4
   Keep the history view on the product's dark workspace theme. Earlier
   release layers mixed light editorial tokens with the dark shell, making
   card titles and status labels disappear into the background.
   -------------------------------------------------------------------------- */
#app[data-active-view="logs"] {
  --history-bg: #09090b;
  --history-surface: #111115;
  --history-surface-raised: #17171c;
  --history-surface-inset: #0d0d10;
  --history-ink: #f4f4f1;
  --history-muted: #b2b2b8;
  --history-subtle: #8f9098;
  --history-line: rgba(244, 244, 241, .14);
  --history-line-strong: rgba(244, 244, 241, .25);
  --history-accent: #9b7bff;
  --history-accent-strong: #b39dff;
  --history-success: #82d7a7;
  --history-warning: #ffc273;
  --history-danger: #ff929c;
  background: var(--history-bg) !important;
  color: var(--history-ink) !important;
}

#app[data-active-view="logs"] .project-log-page {
  color: var(--history-ink) !important;
}

#app[data-active-view="logs"] .project-log-toolbar {
  padding: 20px !important;
  border: 1px solid var(--history-line) !important;
  border-radius: 14px !important;
  background: var(--history-surface) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18) !important;
}

#app[data-active-view="logs"] .project-log-summary .eyebrow,
#app[data-active-view="logs"] .project-log-toolbar h2,
#app[data-active-view="logs"] .project-log-toolbar label,
#app[data-active-view="logs"] .project-log-toolbar label > span,
#app[data-active-view="logs"] .project-log-summary > p:last-child {
  color: var(--history-ink) !important;
}

#app[data-active-view="logs"] .project-log-summary .eyebrow {
  color: var(--history-accent-strong) !important;
}

#app[data-active-view="logs"] .project-log-summary > p:last-child,
#app[data-active-view="logs"] .project-log-filters label > span {
  color: var(--history-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

#app[data-active-view="logs"] .project-log-filters input,
#app[data-active-view="logs"] .project-log-filters select,
#app[data-active-view="logs"] .project-log-more > summary {
  border: 1px solid var(--history-line-strong) !important;
  border-radius: 9px !important;
  background: var(--history-surface-inset) !important;
  color: var(--history-ink) !important;
}

#app[data-active-view="logs"] .project-log-filters input::placeholder {
  color: var(--history-subtle) !important;
  opacity: 1 !important;
}

#app[data-active-view="logs"] .project-log-card {
  margin-top: 10px !important;
  border: 1px solid var(--history-line) !important;
  border-radius: 12px !important;
  background: var(--history-surface) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .14) !important;
  overflow: hidden !important;
}

#app[data-active-view="logs"] .project-log-card:first-child {
  margin-top: 16px !important;
  border-top: 1px solid var(--history-line) !important;
}

#app[data-active-view="logs"] .project-log-card-open {
  color: var(--history-ink) !important;
}

#app[data-active-view="logs"] .project-log-card-open:hover,
#app[data-active-view="logs"] .project-log-card-open:focus-visible {
  background: var(--history-surface-raised) !important;
}

#app[data-active-view="logs"] .project-log-card-kicker,
#app[data-active-view="logs"] .project-log-card-kicker > span,
#app[data-active-view="logs"] .project-log-card-kicker time {
  color: var(--history-subtle) !important;
  font-size: 11px !important;
}

#app[data-active-view="logs"] .project-log-card-copy h3 {
  color: var(--history-ink) !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
}

#app[data-active-view="logs"] .project-log-card-copy p {
  color: var(--history-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

#app[data-active-view="logs"] .project-log-card-meta,
#app[data-active-view="logs"] .project-log-card-meta > span {
  color: var(--history-muted) !important;
  font-size: 11px !important;
}

#app[data-active-view="logs"] .project-log-card-meta > span + span {
  border-left-color: var(--history-line-strong) !important;
}

#app[data-active-view="logs"] .project-log-card-meta > span.has-errors {
  color: var(--history-danger) !important;
}

#app[data-active-view="logs"] .project-log-status-mark,
#app[data-active-view="logs"] .project-log-status-mark[data-tone="good"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="warning"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="error"] {
  border: 1px solid var(--history-line-strong) !important;
  background: rgba(244, 244, 241, .06) !important;
  color: var(--history-muted) !important;
}

#app[data-active-view="logs"] .project-log-status-mark[data-tone="good"] {
  border-color: rgba(130, 215, 167, .36) !important;
  background: rgba(130, 215, 167, .14) !important;
  color: var(--history-success) !important;
}

#app[data-active-view="logs"] .project-log-status-mark[data-tone="warning"] {
  border-color: rgba(255, 194, 115, .38) !important;
  background: rgba(255, 194, 115, .14) !important;
  color: var(--history-warning) !important;
}

#app[data-active-view="logs"] .project-log-status-mark[data-tone="error"] {
  border-color: rgba(255, 146, 156, .4) !important;
  background: rgba(255, 146, 156, .14) !important;
  color: var(--history-danger) !important;
}

#app[data-active-view="logs"] .project-log-status-mark span {
  color: inherit !important;
  font-size: 11px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  overflow: visible !important;
}

#app[data-active-view="logs"] .project-log-status-mark {
  min-width: 150px !important;
  padding-inline: 12px !important;
}

#app[data-active-view="logs"] .project-log-card-cta {
  min-height: 34px !important;
  min-width: 122px !important;
  width: max-content !important;
  padding: 0 12px !important;
  border: 1px solid var(--history-accent) !important;
  border-radius: 8px !important;
  background: var(--history-accent) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#app[data-active-view="logs"] .project-log-card-cta strong,
#app[data-active-view="logs"] .project-log-card-cta span {
  color: inherit !important;
}

#app[data-active-view="logs"] .project-log-card-cta strong {
  flex: 0 0 auto !important;
  width: auto !important;
  overflow: visible !important;
}

#app[data-active-view="logs"] .project-log-card-delete {
  color: var(--history-subtle) !important;
  background: var(--history-surface-raised) !important;
  border-radius: 6px !important;
}

#app[data-active-view="logs"] .project-log-card-delete:hover,
#app[data-active-view="logs"] .project-log-card-delete:focus-visible {
  color: var(--history-danger) !important;
  background: rgba(255, 146, 156, .14) !important;
}

#app[data-active-view="logs"] .project-log-detail {
  background: var(--history-surface-inset) !important;
  color: var(--history-ink) !important;
  border-left-color: var(--history-line-strong) !important;
  box-shadow: -22px 0 56px rgba(0, 0, 0, .38) !important;
}

#app[data-active-view="logs"] .project-log-detail > header {
  background: var(--history-surface) !important;
  border-bottom-color: var(--history-line) !important;
}

#app[data-active-view="logs"] .project-log-detail > header .eyebrow {
  color: var(--history-accent-strong) !important;
}

#app[data-active-view="logs"] .project-log-detail > header h2,
#app[data-active-view="logs"] .project-run-list-head h3,
#app[data-active-view="logs"] .project-level-errors h3,
#app[data-active-view="logs"] .project-run-card > summary strong,
#app[data-active-view="logs"] .project-run-errors h4,
#app[data-active-view="logs"] .project-run-output h4,
#app[data-active-view="logs"] .project-run-actions h4 {
  color: var(--history-ink) !important;
}

#app[data-active-view="logs"] .project-log-detail > header p:last-child,
#app[data-active-view="logs"] .project-run-list-head span,
#app[data-active-view="logs"] .project-level-errors > div:first-child span,
#app[data-active-view="logs"] .project-run-card > summary small,
#app[data-active-view="logs"] .project-run-card > summary em,
#app[data-active-view="logs"] .project-run-output > div span,
#app[data-active-view="logs"] .project-run-action-group > span {
  color: var(--history-muted) !important;
}

#app[data-active-view="logs"] .project-run-card {
  border-color: var(--history-line) !important;
  background: var(--history-surface) !important;
}

#app[data-active-view="logs"] .project-run-card[open] > summary {
  background: var(--history-surface-raised) !important;
  border-bottom-color: var(--history-line) !important;
}

#app[data-active-view="logs"] .project-run-facts > span,
#app[data-active-view="logs"] .project-run-action-strip {
  border-color: var(--history-line) !important;
  background: var(--history-surface-raised) !important;
}

#app[data-active-view="logs"] .project-run-facts > span,
#app[data-active-view="logs"] .project-run-facts strong,
#app[data-active-view="logs"] .project-run-facts code {
  color: var(--history-muted) !important;
}

#app[data-active-view="logs"] .project-run-output pre {
  border-color: var(--history-line) !important;
  background: var(--history-bg) !important;
  color: var(--history-ink) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

#app[data-active-view="logs"] .project-run-actions button {
  border-color: var(--history-line-strong) !important;
  background: transparent !important;
  color: var(--history-ink) !important;
}

#app[data-active-view="logs"] .project-run-actions button:hover,
#app[data-active-view="logs"] .project-run-actions button:focus-visible {
  border-color: var(--history-accent) !important;
  background: rgba(155, 123, 255, .14) !important;
  color: #fff !important;
}

#app[data-active-view="logs"] .project-run-action-group.is-reuse button:last-child {
  border-color: var(--history-accent) !important;
  background: var(--history-accent) !important;
  color: #fff !important;
}

@media (max-width: 720px) {
  #app[data-active-view="logs"] .project-log-toolbar {
    padding: 16px !important;
  }

  #app[data-active-view="logs"] .project-log-card-open {
    padding-right: 52px !important;
  }

  #app[data-active-view="logs"] .project-log-card-cta {
    justify-self: start !important;
  }
}

/* Run History final legibility guard · 2026-09-11 */
#app[data-active-view="logs"] .project-log-card-open {
  grid-template-columns: 92px minmax(0, 1fr) max-content !important;
  column-gap: 14px !important;
}

#app[data-active-view="logs"] .project-log-card-open > .project-log-status-mark,
#app[data-active-view="logs"] .project-log-status-mark[data-tone="good"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="warning"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="error"] {
  display: inline-flex !important;
  grid-row: 1 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: center !important;
  justify-self: start !important;
  gap: 7px !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 92px !important;
  min-height: 28px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#app[data-active-view="logs"] .project-log-status-mark::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

#app[data-active-view="logs"] .project-log-status-mark span {
  display: block !important;
  min-width: 0 !important;
  max-width: 68px !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-run-errors {
  color: #352724 !important;
}

#app[data-active-view="logs"] .project-run-errors > h4 {
  color: var(--history-ink) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  letter-spacing: .035em !important;
}

#app[data-active-view="logs"] .project-log-error-event {
  color: #352724 !important;
  border-color: rgba(152, 75, 63, .34) !important;
  background: #fff3f0 !important;
}

#app[data-active-view="logs"] .project-log-error-event > div:first-child span {
  color: #725650 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

#app[data-active-view="logs"] .project-log-error-event > div:first-child strong {
  color: #8b3f34 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
}

#app[data-active-view="logs"] .project-log-error-event > p {
  color: #3f2e2a !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  line-height: 1.55 !important;
}

#app[data-active-view="logs"] .project-log-error-facts span {
  color: #654840 !important;
  border: 1px solid rgba(137, 72, 61, .24) !important;
  background: rgba(137, 72, 61, .08) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

#app[data-active-view="logs"] .project-log-error-file,
#app[data-active-view="logs"] .project-log-error-file code,
#app[data-active-view="logs"] .project-log-error-event > details,
#app[data-active-view="logs"] .project-log-error-event > details summary,
#app[data-active-view="logs"] .project-log-error-event > details pre {
  color: #513b36 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

#app[data-active-view="logs"] .project-log-error-event > details summary {
  font-weight: 720 !important;
}

#app[data-active-view="logs"] .project-log-error-event > div:last-child button {
  color: #67443d !important;
  border-color: rgba(137, 72, 61, .34) !important;
  background: rgba(255, 255, 255, .56) !important;
}

#app[data-active-view="logs"] .project-log-error-event > div:last-child button:hover,
#app[data-active-view="logs"] .project-log-error-event > div:last-child button:focus-visible {
  color: #fff !important;
  border-color: #8f4438 !important;
  background: #8f4438 !important;
}

#app[data-active-view="logs"] .project-log-detail > header > div {
  min-width: 0 !important;
  overflow: hidden !important;
}

#app[data-active-view="logs"] #project-log-detail-title {
  display: -webkit-box !important;
  max-width: 100% !important;
  max-height: 2.5em !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  color: var(--history-ink) !important;
  font-size: 20px !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
  overflow-wrap: anywhere !important;
  text-overflow: ellipsis !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#app[data-active-view="logs"] #project-log-detail-meta {
  display: block !important;
  overflow: hidden !important;
  color: var(--history-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 10px 12px !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-status-mark {
    display: inline-flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-cta {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 420px) {
  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-status-mark,
  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-copy,
  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-cta {
    grid-column: 1 !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-status-mark {
    grid-row: 1 !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-copy {
    grid-row: 2 !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-cta {
    grid-row: 3 !important;
  }
}

/* Final Film Review Board card contract. Keep this at the end of the
   stylesheet so compatibility rules cannot restore the former three rows. */
[data-legacy-quick-start="hidden"] {
  display: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-skill-chip {
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  column-gap: 8px !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 8px 10px 8px 8px !important;
  text-align: center !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-skill-chip > span {
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  place-items: center !important;
  align-self: stretch !important;
  width: auto !important;
  height: auto !important;
  padding-right: 8px !important;
  border-right: 1px solid rgba(118, 88, 232, 0.28) !important;
  color: var(--dp-purple-bright) !important;
  font-variant-numeric: tabular-nums !important;
  text-align: center !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-skill-chip strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-self: center !important;
  overflow: hidden !important;
  color: var(--dp-text-primary) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-skill-chip small {
  display: none !important;
}

/* User-input project identity and compact log copy. */
#app[data-active-view="logs"] .project-log-card-copy,
#app[data-active-view="logs"] .project-log-card-copy h3,
#app[data-active-view="logs"] .project-run-user-input {
  min-width: 0 !important;
}

#app[data-active-view="logs"] .project-run-user-input h4 {
  color: #68756d !important;
  font-size: 9px !important;
  font-weight: 760 !important;
  letter-spacing: .08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

#app[data-active-view="logs"] .project-run-user-input > p {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #26332b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

#app[data-active-view="logs"] .project-run-user-input {
  display: grid !important;
  gap: 5px !important;
  margin: 12px 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(23, 30, 26, .14) !important;
  border-radius: 9px !important;
  background: #fbfbf7 !important;
}

#app[data-active-view="logs"] .project-run-user-input h4 {
  margin: 0 !important;
}

#app[data-active-view="logs"] .project-run-user-input > p {
  -webkit-line-clamp: 5 !important;
}

/* FILM REVIEW BOARD: numbered circles keep the existing card grid intact. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-skill-chip {
  grid-template-columns: 32px minmax(0, 1fr) !important;
  column-gap: 8px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel .review-skill-chip > span {
  display: inline-grid !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 1px solid rgba(118, 88, 232, .42) !important;
  border-radius: 50% !important;
  background: rgba(118, 88, 232, .12) !important;
  color: var(--dp-purple-bright) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Give the six-node rail a few pixels of breathing room for pulse/glow motion. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-panel > .fast-flow-rail {
  padding-block: 7px 9px !important;
}

/* Creative Engine generation progress lives inside the compact primary
   action. The charge layer scales independently; exact progress sits below
   the start/stop icon only while a run is active or complete. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-core-status {
  display: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn {
  --generate-progress-scale: 0;
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-color: #7658e8 !important;
  background: #4b388f !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-charge {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background: #7658e8 !important;
  transform: scaleX(var(--generate-progress-scale)) !important;
  transform-origin: left center !important;
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1) !important;
  pointer-events: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-label {
  display: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-arrow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 3 !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-left: 12px solid rgba(255, 255, 255, .95) !important;
  transform: translate(-38%, -50%) !important;
  pointer-events: none !important;
  filter: drop-shadow(0 1px 2px rgba(28, 18, 65, .38)) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn[data-show-progress="true"] .composer-send-arrow {
  top: 42% !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-progress {
  position: absolute !important;
  left: 50% !important;
  bottom: 4px !important;
  z-index: 3 !important;
  display: block !important;
  min-width: 28px !important;
  color: rgba(255, 255, 255, .92) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 8px !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 760 !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(28, 18, 65, .55) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-progress[hidden] {
  display: none !important;
}

/* Keep the active button cancellable, but communicate work-in-progress with
   a spinner instead of the legacy static stop square. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-arrow[data-icon-state="loading"] {
  width: 15px !important;
  height: 15px !important;
  border: 2px solid rgba(255, 255, 255, .35) !important;
  border-top-color: rgba(255, 255, 255, .98) !important;
  border-radius: 50% !important;
  background: transparent !important;
  transform: translate(-50%, -50%) !important;
  filter: drop-shadow(0 1px 2px rgba(28, 18, 65, .32)) !important;
  animation: composer-send-spin .7s linear infinite !important;
}

@keyframes composer-send-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-arrow[data-icon-state="loading"] {
    animation-duration: 1.6s !important;
  }
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn:is(:hover, :focus-visible),
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn.is-cancel:is(:hover, :focus-visible) {
  border-color: #9178ea !important;
  background: #5741a3 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn.is-cancel {
  border-color: #7658e8 !important;
  background: #4b388f !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(118, 88, 232, .2) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn[data-run-state="failed"] {
  border-color: #b85454 !important;
  background: #8e3d3d !important;
}

@media (max-width: 760px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-btn {
    min-width: 48px !important;
    width: 48px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-send-charge {
    transition: none !important;
  }
}

/* The added input block should expand cards instead of being clipped by the legacy fixed height. */
#app[data-active-view="logs"] .project-log-card {
  height: auto !important;
  min-height: 176px !important;
}

/* 20260913 · Creative Engine input hierarchy
   Keep the user's brief as the primary row, expose exactly three reference
   slots beneath it, and pair Styles with More in the action bar. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-core-top {
  display: grid !important;
  gap: 12px !important;
  padding: 16px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-brief-heading {
  display: flex !important;
  min-width: 0 !important;
  align-items: baseline !important;
  gap: 10px !important;
  padding: 0 0 11px !important;
  border-bottom: 1px solid var(--dp-border-default) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-brief-heading strong {
  color: var(--dp-text-primary) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-brief-heading small {
  overflow: hidden !important;
  color: var(--dp-text-muted) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-input-tools-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(270px, .72fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group {
  display: grid !important;
  grid-template-columns: minmax(104px, auto) minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 70px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-control) !important;
  background: var(--dp-control-fill) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group:hover {
  border-color: var(--dp-border-strong) !important;
  background: var(--dp-control-fill-hover) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading strong {
  color: var(--dp-text-primary) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading small {
  color: var(--dp-text-muted) !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .composer-reference-strip {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-preview {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(54px, 68px)) !important;
  justify-content: start !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group :is(.reference-thumb, .reference-thumb-main, .reference-upload-slot) {
  width: 100% !important;
  height: 46px !important;
  min-width: 0 !important;
  border-radius: 7px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-thumb {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-thumb-main {
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(151, 128, 237, .5) !important;
  background: var(--dp-surface-inset) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-thumb-main:is(:hover, :focus-visible) {
  border-color: var(--dp-primary-border) !important;
  outline: 2px solid var(--dp-focus-ring) !important;
  outline-offset: 1px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-thumb-main span {
  right: 3px !important;
  bottom: 3px !important;
  max-width: calc(100% - 6px) !important;
  padding: 2px 4px !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-thumb-remove {
  top: -6px !important;
  right: -6px !important;
  width: 18px !important;
  height: 18px !important;
  border-color: rgba(255, 255, 255, .2) !important;
  background: #28232f !important;
  color: #fff !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot {
  display: grid !important;
  grid-template-columns: 15px minmax(0, 1fr) !important;
  place-items: center !important;
  gap: 3px !important;
  padding: 0 7px !important;
  border: 1px dashed rgba(166, 159, 181, .52) !important;
  background: rgba(255, 255, 255, .025) !important;
  color: var(--dp-text-muted) !important;
  cursor: pointer !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot:hover,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot:focus-visible {
  border-color: var(--dp-primary-border) !important;
  background: var(--dp-surface-selected) !important;
  color: var(--dp-text-primary) !important;
  outline: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot > span {
  color: var(--dp-purple-bright) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot > small {
  overflow: hidden !important;
  font-size: 8px !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-input-tools-row .composer-first-frame-prompt-toggle {
  min-height: 70px !important;
  padding: 10px 13px !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: var(--dp-radius-control) !important;
  background: var(--dp-control-fill) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left {
  display: flex !important;
  width: auto !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-control,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-control {
  width: 190px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger {
  display: inline-flex !important;
  width: 168px !important;
  min-height: 44px !important;
  padding: 7px 11px !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid var(--dp-border-strong) !important;
  border-radius: var(--dp-radius-button) !important;
  background: var(--dp-control-fill) !important;
  color: var(--dp-text-primary) !important;
  text-align: left !important;
  box-shadow: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger:is(:hover, :focus-visible),
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger[aria-expanded="true"] {
  border-color: var(--dp-primary-border) !important;
  background: var(--dp-control-fill-hover) !important;
  outline: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--dp-focus-ring) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger-icon {
  display: grid !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  place-items: center !important;
  border-radius: 7px !important;
  background: var(--dp-primary-fill) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 1px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger-copy strong {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger-copy small {
  overflow: hidden !important;
  color: var(--dp-text-muted) !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger-chevron {
  width: 7px !important;
  height: 7px !important;
  margin-left: auto !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  color: var(--dp-text-muted) !important;
  transform: rotate(45deg) translateY(-2px) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="quick-start"] .creative-brief-heading,
#app#app[data-active-view="workbench"][data-creation-entry="quick-start"] .composer-styles-trigger {
  display: none !important;
}

@media (max-width: 860px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-input-tools-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-brief-heading {
    display: grid !important;
    gap: 4px !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-brief-heading small {
    white-space: normal !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-control,
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger {
    flex: 1 1 0 !important;
    width: auto !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger,
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Compact first-frame control: keep it beside Styles without expanding the composer row. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left {
  position: relative !important;
  align-items: center !important;
  gap: 8px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-toggle-compact {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--dp-border-strong) !important;
  border-radius: var(--dp-radius-button) !important;
  background: var(--dp-control-fill) !important;
  color: var(--dp-text-primary) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-toggle-compact:hover,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-toggle-compact:has(input:focus-visible) {
  border-color: var(--dp-primary-border) !important;
  background: var(--dp-control-fill-hover) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-toggle-compact input {
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  accent-color: var(--dp-purple) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .first-frame-toggle-label {
  display: inline-block !important;
  color: var(--dp-text-primary) !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .first-frame-info {
  display: inline-grid !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--dp-primary-border) !important;
  border-radius: 50% !important;
  background: var(--dp-primary-fill) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  cursor: help !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .first-frame-info:hover,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .first-frame-info:focus-visible {
  border-color: #fff !important;
  outline: 2px solid var(--dp-focus-ring) !important;
  outline-offset: 1px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .first-frame-info-popover {
  position: absolute !important;
  z-index: 80 !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  display: grid !important;
  min-width: 230px !important;
  max-width: min(280px, calc(100vw - 32px)) !important;
  gap: 4px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--dp-primary-border) !important;
  border-radius: 9px !important;
  background: #1a1724 !important;
  color: var(--dp-text-primary) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28) !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .first-frame-info-popover[hidden] {
  display: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .first-frame-info-popover::before {
  position: absolute !important;
  top: -5px !important;
  left: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-top: 1px solid var(--dp-primary-border) !important;
  border-left: 1px solid var(--dp-primary-border) !important;
  background: #1a1724 !important;
  content: "" !important;
  transform: translateX(-50%) rotate(45deg) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .first-frame-info-popover strong {
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .first-frame-info-popover span {
  color: var(--dp-text-muted) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

@media (max-width: 560px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left {
    flex-wrap: wrap !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-toggle-compact {
    min-height: 40px !important;
  }
}

/* 20260913 · Creative Engine visual refinement
   Keep the brief as the only top-level input heading, dock references inside
   the composer surface, and give output stages a clearer editorial hierarchy. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-core-top {
  gap: 0 !important;
  padding: 18px 20px 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-brief-heading {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 42px !important;
  padding: 0 0 14px !important;
  border-bottom: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-brief-mark {
  display: grid !important;
  width: 27px !important;
  height: 27px !important;
  place-items: center !important;
  border: 1px solid rgba(155, 123, 255, .62) !important;
  border-radius: 9px !important;
  background: #5b43a5 !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: 0 5px 14px rgba(91, 67, 165, .25) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-brief-heading strong {
  font-size: clamp(16px, 1.45vw, 20px) !important;
  font-weight: 780 !important;
  letter-spacing: -.015em !important;
  line-height: 1.15 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-brief-heading small {
  min-width: 0 !important;
  overflow: visible !important;
  color: var(--dp-text-muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-stage {
  position: relative !important;
  padding: 0 20px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .idea-input.studio-input {
  min-height: 192px !important;
  padding: 18px 2px 78px !important;
  border: 1px solid var(--dp-border-default) !important;
  border-radius: 16px !important;
  background: var(--dp-surface-inset) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .idea-input.studio-input:focus {
  border-color: var(--dp-primary-border) !important;
  box-shadow: 0 0 0 2px var(--dp-focus-ring), inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-input-tools-row {
  position: absolute !important;
  right: 34px !important;
  bottom: 14px !important;
  left: 34px !important;
  z-index: 3 !important;
  display: block !important;
  pointer-events: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group {
  display: flex !important;
  min-height: 48px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(145, 130, 181, .28) !important;
  border-radius: 11px !important;
  background: rgba(24, 21, 32, .84) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.16) !important;
  pointer-events: auto !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: baseline !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding-right: 2px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading strong {
  font-size: 10px !important;
  font-weight: 760 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading small {
  font-size: 9px !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .composer-reference-strip {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-preview {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-height: 34px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group :is(.reference-thumb, .reference-thumb-main, .reference-upload-slot) {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 7px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot {
  grid-template-columns: 12px minmax(0, 1fr) !important;
  padding: 0 7px !important;
  border-style: solid !important;
  border-color: rgba(166, 159, 181, .4) !important;
  background: rgba(255,255,255,.025) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot > span {
  font-size: 14px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot > small {
  font-size: 8px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottombar {
  min-height: 66px !important;
  padding: 12px 20px !important;
  border-top: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left {
  background: transparent !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy {
  padding-left: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy strong {
  font-size: 13px !important;
  letter-spacing: -.005em !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium {
  gap: 14px !important;
  padding: 14px 16px 20px !important;
  background: #121019 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .prompt-stage-card {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 18px 18px 20px !important;
  border: 1px solid rgba(137, 115, 190, .32) !important;
  border-radius: 16px !important;
  background: #181521 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .prompt-stage-card::before {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: 3px !important;
  background: #7658e8 !important;
  content: "" !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card::before {
  background: #3f9aa2 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .prompt-head {
  position: relative !important;
  z-index: 1 !important;
  padding-bottom: 4px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .prompt-head > div:first-child > span {
  font-size: 15px !important;
  font-weight: 780 !important;
  letter-spacing: -.01em !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .prompt-caption {
  color: #a9a1bd !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .prompt-body {
  min-height: 220px !important;
  margin-top: 12px !important;
  padding: 17px !important;
  border: 1px solid rgba(137, 115, 190, .3) !important;
  border-radius: 11px !important;
  background: #0f0d15 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card {
  padding-bottom: 14px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card .prompt-body,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-prompt {
  min-height: 128px !important;
  max-height: 180px !important;
  margin-top: 10px !important;
  padding: 13px !important;
  border-color: rgba(79, 161, 167, .34) !important;
  background: #10171a !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .first-frame-pane-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(79, 161, 167, .24) !important;
  border-radius: 8px !important;
  background: rgba(63, 154, 162, .1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .first-frame-pane-head span {
  color: #c9f3ef !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .first-frame-pane-head small {
  color: #83c8c7 !important;
  font-size: 9px !important;
}

@media (max-width: 700px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-brief-heading {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-brief-heading small {
    grid-column: 2 !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-input-tools-row {
    right: 30px !important;
    left: 30px !important;
  }
}

@media (max-width: 560px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    min-height: 70px !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading {
    justify-content: space-between !important;
    width: 100% !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .composer-reference-strip,
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-preview {
    width: 100% !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 20260913 · Final polish for the compact composer controls and first-frame output. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-core-top {
  border-bottom: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-brief-heading {
  border-bottom: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .idea-input.studio-input {
  border-top-color: rgba(137, 115, 190, .3) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-toggle-compact {
  position: relative !important;
  overflow: visible !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-info-popover {
  top: calc(100% + 9px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  min-width: 246px !important;
  max-width: min(290px, calc(100vw - 24px)) !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(137, 115, 190, .6) !important;
  border-radius: 10px !important;
  background: #1b1726 !important;
  box-shadow: 0 15px 30px rgba(0,0,0,.3) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-info-popover::before {
  top: -5px !important;
  right: 16px !important;
  left: auto !important;
  transform: rotate(45deg) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group {
  min-height: 44px !important;
  gap: 9px !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(151, 128, 237, .38) !important;
  border-radius: 12px !important;
  background: rgba(13, 12, 19, .9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 5px 13px rgba(0,0,0,.16) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading {
  position: relative !important;
  gap: 5px !important;
  padding-left: 17px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading::before {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 10px !important;
  height: 10px !important;
  border: 1px solid rgba(184, 163, 255, .82) !important;
  border-radius: 3px !important;
  background: #7658e8 !important;
  content: "" !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading strong {
  color: #eeeaf8 !important;
  font-size: 10px !important;
  font-weight: 780 !important;
  letter-spacing: .015em !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading small {
  color: #9e96b1 !important;
  font-size: 9px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-preview {
  gap: 5px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-thumb-main {
  border-color: rgba(171, 153, 239, .42) !important;
  background: rgba(116, 91, 190, .13) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot:hover,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot:focus-visible,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-thumb-main:is(:hover, :focus-visible) {
  border-color: #a890ff !important;
  background: rgba(118, 88, 232, .28) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot > span {
  color: #bba9ff !important;
  font-size: 13px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot > small {
  color: #c0b8cf !important;
  font-size: 8px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card {
  padding: 15px 16px 16px !important;
  border-color: rgba(79, 161, 167, .34) !important;
  background: #15191b !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card .prompt-head {
  padding-bottom: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card .prompt-head > div:first-child > span {
  color: #c9f3ef !important;
  font-size: 14px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card .prompt-caption {
  color: #82bbb9 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-pane-head {
  display: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-workspace,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-pane {
  margin: 0 !important;
  padding: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card .first-frame-prompt {
  min-height: 124px !important;
  max-height: 176px !important;
  margin-top: 11px !important;
  border: 1px solid rgba(79, 161, 167, .38) !important;
  border-radius: 12px !important;
  background: #0d1517 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* 20260913 · final alignment pass for first-frame help, references and output. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-info-popover {
  /* Anchor the message to the exclamation control, not to the whole toggle. */
  top: calc(100% + 9px) !important;
  right: auto !important;
  left: calc(100% - 20px) !important;
  transform: translateX(-50%) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-info-popover::before {
  right: auto !important;
  left: calc(100% - 20px) !important;
  transform: translateX(-50%) rotate(45deg) !important;
}

/* The brief textarea keeps its own readable side/bottom boundary, but no extra
   horizontal rule is drawn between the brief heading and the editable area. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .idea-input.studio-input {
  border-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Reference images should read as one calm, embedded control instead of a
   detached card. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group {
  min-height: 0 !important;
  gap: 7px !important;
  padding: 5px 6px 6px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(16, 14, 24, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading {
  min-height: 14px !important;
  padding-left: 15px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading::before {
  width: 8px !important;
  height: 8px !important;
  border-radius: 2px !important;
  background: #8064ed !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading strong {
  color: #f0edf7 !important;
  font-size: 10px !important;
  letter-spacing: .02em !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-heading small {
  color: #aaa1bd !important;
  font-variant-numeric: tabular-nums !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-preview {
  gap: 6px !important;
  border-radius: 10px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-thumb-main {
  min-height: 40px !important;
  border: 1px dashed rgba(170, 151, 244, .5) !important;
  border-radius: 8px !important;
  background: rgba(116, 91, 190, .1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot:hover,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot:focus-visible,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-group .reference-thumb-main:is(:hover, :focus-visible) {
  border-style: solid !important;
  border-color: #aa96ff !important;
  background: rgba(118, 88, 232, .2) !important;
  box-shadow: 0 0 0 2px rgba(118,88,232,.14), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot > span {
  color: #c8baff !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reference-upload-slot > small {
  color: #c9c0d8 !important;
  font-size: 8px !important;
  letter-spacing: .02em !important;
}

/* Keep the first-frame card visibly secondary to the video prompt while making
   the editable surface feel intentional and easy to scan. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card {
  border-left: 3px solid #3f9aa2 !important;
  background: #141a1c !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 22px rgba(0,0,0,.12) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card .prompt-head > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card .prompt-head > div:first-child::before {
  width: 9px !important;
  height: 9px !important;
  flex: 0 0 9px !important;
  border: 2px solid rgba(128, 224, 218, .72) !important;
  border-radius: 50% !important;
  background: rgba(63, 154, 162, .26) !important;
  box-shadow: 0 0 0 3px rgba(63,154,162,.1) !important;
  content: "" !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card .prompt-toolbar .prompt-asset-action {
  min-height: 29px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(79, 161, 167, .42) !important;
  border-radius: 7px !important;
  background: rgba(63, 154, 162, .12) !important;
  color: #c9f3ef !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card .prompt-toolbar .prompt-asset-action:hover,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card .prompt-toolbar .prompt-asset-action:focus-visible {
  border-color: #79d6d0 !important;
  background: rgba(63, 154, 162, .24) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card .first-frame-prompt {
  min-height: 116px !important;
  max-height: 156px !important;
  margin-top: 9px !important;
  padding: 14px !important;
  border-color: rgba(95, 194, 194, .42) !important;
  border-radius: 10px !important;
  background: #0c1315 !important;
  color: #e3f2ef !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important, inset 3px 0 0 rgba(63,154,162,.16) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card .first-frame-prompt.muted {
  color: #8fb0ad !important;
}

@media (max-width: 560px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-info-popover {
    right: auto !important;
    left: calc(100% - 20px) !important;
    width: min(180px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    transform: translateX(-50%) !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-info-popover::before {
    right: auto !important;
    left: calc(100% - 20px) !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   20260913 · Creative workflow compactness + six-node alignment
   Keep FILM REVIEW BOARD markup/content untouched. These overrides only tune
   the disclosure shell, the six circular workflow nodes, and the two review
   console remnants requested for removal.
   -------------------------------------------------------------------------- */

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-core {
  padding-bottom: 6px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottombar {
  padding-bottom: 6px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .reactor-flow-map > .creative-workflow-disclosure,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-disclosure {
  margin-top: 6px !important;
}

/* The disclosure header is a solid, readable light-purple control in both
   collapsed and expanded states. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
  background: #e1dbff !important;
  color: #2c2447 !important;
  border-bottom-color: rgba(90, 70, 145, .24) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary:hover {
  background: #d8d0ff !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary:focus-visible {
  outline-color: #7658e8 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy strong {
  color: #241b3c !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy small {
  color: #5d5276 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action {
  color: #3e315d !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action i {
  border-color: currentColor !important;
}

/* Six circles: one shared centerline, equal columns, aligned labels, and just
   enough vertical breathing room for the running-state glow to stay visible. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 18px 18px 15px !important;
  border-bottom: 1px solid rgba(165, 156, 190, .22) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail::before {
  top: 42px !important;
  right: 9% !important;
  left: 9% !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail::after {
  top: 40px !important;
  left: 9% !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node {
  grid-template-rows: 48px minmax(28px, auto) !important;
  align-content: start !important;
  justify-items: center !important;
  min-height: 82px !important;
  padding: 0 4px !important;
  gap: 7px !important;
  overflow: visible !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span {
  width: 48px !important;
  height: 48px !important;
  align-self: start !important;
  justify-self: center !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node strong {
  display: -webkit-box !important;
  align-self: start !important;
  width: 100% !important;
  min-height: 28px !important;
  overflow: hidden !important;
  color: var(--dp-text-primary) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* Only the requested review-console remnants are hidden. The title, ten
   cards, numbering, and all card content remain untouched. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .review-console {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel .review-console-foot {
  display: none !important;
}

@media (max-width: 760px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel > .fast-flow-rail {
    grid-template-columns: repeat(3, minmax(92px, 1fr)) !important;
    row-gap: 20px !important;
    padding: 18px 16px 15px !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel > .fast-flow-rail::before,
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel > .fast-flow-rail::after {
    display: none !important;
  }
}

/* 20260913 · Creative Engine requested composer layout — final cascade layer. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-stage {
  padding-top: 2px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .idea-input.studio-input {
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  padding: 18px !important;
  border: 1px solid rgba(151, 133, 194, .52) !important;
  border-radius: 16px !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .idea-input.studio-input:focus {
  border-color: #9278f2 !important;
  box-shadow: 0 0 0 2px rgba(118,88,232,.2), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 10px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group {
  display: flex !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 46px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-heading {
  display: grid !important;
  flex: 0 0 auto !important;
  gap: 2px !important;
  min-width: 74px !important;
  min-height: 0 !important;
  align-content: center !important;
  padding: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-heading::before {
  display: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-heading strong {
  color: #eeeaf8 !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-heading small {
  color: #9f97b0 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .composer-reference-strip {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-preview {
  display: grid !important;
  grid-template-columns: repeat(3, 42px) !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group :is(.reference-thumb, .reference-thumb-main, .reference-upload-slot) {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 9px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-slot {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 15px auto !important;
  place-items: center !important;
  gap: 1px !important;
  padding: 5px 2px 4px !important;
  border: 1px dashed rgba(181, 163, 246, .56) !important;
  background: rgba(116, 91, 190, .1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-slot > span {
  font-size: 15px !important;
  line-height: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-slot > small {
  font-size: 7px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
  min-height: 46px !important;
  padding: 7px 16px !important;
  background: #553a98 !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.14) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary:hover {
  background: #6247a8 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary:focus-visible {
  outline: 2px solid #b8a7ff !important;
  outline-offset: 2px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy strong {
  color: #fff !important;
  font-size: clamp(15px, 1.35vw, 17px) !important;
  font-weight: 780 !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action {
  color: rgba(255,255,255,.92) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-action i {
  border-color: currentColor !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-title-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-title-icon {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  place-items: center !important;
  border: 1px solid rgba(181, 163, 246, .44) !important;
  border-radius: 9px !important;
  background: #553a98 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(53, 33, 99,.24) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-title-icon svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@media (max-width: 980px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottombar {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 620px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group {
    width: 100% !important;
  }

  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group .reference-upload-heading {
    min-width: 82px !important;
  }
}

.account-panel-head + .billing-current-strip { margin-top: 14px; }
.billing-current-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(169, 139, 255, .16);
  border-radius: 12px;
  background: rgba(118, 88, 232, .08);
}
.billing-current-strip > div { min-width: 0; }
.billing-current-strip span,
.billing-current-strip strong { display: block; }
.billing-current-strip span { color: #9790a8; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.billing-current-strip strong { margin-top: 4px; color: #f5f2ff; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billing-section { margin-top: 16px; }
.billing-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.billing-section-head strong { color: #f5f2ff; font-size: 12px; }
.billing-section-head small { color: #928ba4; font-size: 9px; text-align: right; }
.billing-product-grid { display: grid; gap: 8px; }
.billing-product-card {
  padding: 12px;
  border: 1px solid rgba(190, 174, 255, .14);
  border-radius: 12px;
  background: #15141c;
}
.billing-product-card.is-featured { border-color: rgba(169, 139, 255, .48); background: linear-gradient(135deg, rgba(118, 88, 232, .18), rgba(21, 20, 28, .96)); }
.billing-product-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.billing-product-top strong, .billing-product-top span { display: block; }
.billing-product-top strong { color: #fff; font-size: 13px; }
.billing-product-top span { margin-top: 3px; color: #b8afca; font-size: 10px; }
.billing-product-top em { flex: 0 0 auto; padding: 4px 6px; border-radius: 999px; background: rgba(123, 226, 205, .12); color: #7be1cd; font-size: 9px; font-style: normal; font-weight: 750; }
.billing-product-card p { margin: 9px 0 11px; color: #9b95a8; font-size: 10px; line-height: 1.45; }
.billing-product-card .account-primary-btn,
.billing-product-card .account-secondary-btn { min-height: 32px; width: 100%; }
.billing-addon-card { background: rgba(72, 46, 126, .16); }
.billing-credit-grid { display: grid; gap: 7px; }
.billing-credit-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid rgba(190, 174, 255, .12); border-radius: 10px; background: #15141c; }
.billing-credit-card span, .billing-credit-card strong { display: block; }
.billing-credit-card span { margin-top: 2px; color: #9d96aa; font-size: 10px; }
.billing-credit-card > strong { color: #f5f2ff; font-size: 11px; }
.billing-credit-card .account-secondary-btn { min-height: 30px; padding-inline: 9px; }
.billing-rules { display: grid; gap: 5px; margin-top: 14px; padding: 10px; border-left: 2px solid #7658e8; background: rgba(118, 88, 232, .08); }
.billing-rules span { color: #c6baff; font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.billing-rules small { color: #9d96aa; font-size: 9px; line-height: 1.45; }
.billing-access-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.billing-access-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid rgba(190, 174, 255, .1); border-radius: 10px; background: #15141c; }
.billing-access-list li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(118, 88, 232, .14); color: #c6baff; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.billing-access-list strong, .billing-access-list small { display: block; }
.billing-access-list strong { color: #f3f0fa; font-size: 10px; }
.billing-access-list small { margin-top: 2px; color: #8f889c; font-size: 9px; }

@media (max-width: 700px) {
  .billing-current-strip { grid-template-columns: 1fr; }
  .billing-credit-card { grid-template-columns: minmax(0, 1fr) auto; }
  .billing-credit-card .account-secondary-btn { grid-column: 1 / -1; width: 100%; }
}

/* --------------------------------------------------------------------------
   Workspace topbar refinement
   A compact editorial control rail: distinct brand, navigation and account
   layers without changing routes, account actions or workspace behavior.
   -------------------------------------------------------------------------- */

#app[data-active-view]:not([data-active-view="home"]) .topbar {
  isolation: isolate !important;
  min-height: 74px !important;
  padding: 10px clamp(18px, 3.4vw, 48px) !important;
  border-bottom: 1px solid rgba(189, 169, 255, .16) !important;
  background: #0a0910 !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .025),
    0 14px 34px rgba(0, 0, 0, .22) !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: rgba(255, 255, 255, .08);
  pointer-events: none;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-copy {
  gap: 12px !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-link {
  gap: 10px !important;
  min-height: 42px !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-mark {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
  border: 1px solid rgba(205, 191, 255, .34) !important;
  border-radius: 10px !important;
  background: #7155d9 !important;
  color: #fff !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 7px 18px rgba(76, 49, 164, .24) !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-mark::after {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e9e1ff;
  content: "";
  box-shadow: 0 0 0 2px rgba(233, 225, 255, .12);
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-name {
  color: #faf8ff !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  letter-spacing: -.025em !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-link:hover .topbar-home-mark,
#app[data-active-view]:not([data-active-view="home"]) .topbar-home-link:focus-visible .topbar-home-mark {
  border-color: rgba(222, 211, 255, .62) !important;
  background: #8063e9 !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-route-context,
#app[data-active-view]:not([data-active-view="home"]) .topbar-route-context[hidden] {
  display: inline-flex !important;
  gap: 7px !important;
  max-width: 160px !important;
  min-height: 28px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(179, 154, 255, .2) !important;
  border-radius: 8px !important;
  background: rgba(125, 91, 224, .1) !important;
  color: #cfc3f8 !important;
  font-size: 9px !important;
  font-weight: 760 !important;
  letter-spacing: .075em !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-route-context::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: #a98cff;
  content: "";
  box-shadow: 0 0 0 3px rgba(169, 140, 255, .1);
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav {
  gap: 2px !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .026) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  color: #918d9d !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  letter-spacing: .01em !important;
  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"],
#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"] {
  margin-left: 0 !important;
  padding-left: 12px !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"]::before,
#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]::before {
  display: none !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item:hover,
#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item:focus-visible {
  color: #f2eff9 !important;
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04) !important;
  transform: none !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item:focus-visible {
  outline: 2px solid rgba(169, 140, 255, .6) !important;
  outline-offset: 2px !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item.active {
  background: #241d38 !important;
  color: #f7f3ff !important;
  box-shadow:
    inset 0 0 0 1px rgba(182, 154, 255, .16),
    0 5px 15px rgba(31, 20, 61, .18) !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item::after {
  right: 12px !important;
  bottom: 3px !important;
  left: 12px !important;
  height: 2px !important;
}

#app[data-active-view]:not([data-active-view="home"])[data-active-view="workbench"][data-creation-entry="fast"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="fast"]::after,
#app[data-active-view="sessions"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="sessions"]::after,
#app[data-active-view="templates"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"]::after,
#app[data-active-view="logs"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="logs"]::after,
#app[data-active-view="setup"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]::after {
  background: #a98cff !important;
  box-shadow: 0 0 9px rgba(169, 140, 255, .46) !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account {
  gap: 2px !important;
  margin-left: 0 !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .026) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link {
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  color: #9c97a7 !important;
  font-size: 10px !important;
  font-weight: 730 !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:hover,
#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:focus-visible {
  background: rgba(255, 255, 255, .055) !important;
  color: #f3effd !important;
  transform: none !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:focus-visible,
#app[data-active-view]:not([data-active-view="home"]) .workspace-account-avatar:focus-visible {
  outline: 2px solid rgba(169, 140, 255, .6) !important;
  outline-offset: 2px !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary {
  position: relative !important;
  padding-left: 24px !important;
  border: 1px solid rgba(201, 185, 255, .28) !important;
  background: #7357dc !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary::before {
  position: absolute;
  left: 10px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  content: "";
  box-shadow: inset 0 0 0 2px #7357dc;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary:hover,
#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary:focus-visible {
  border-color: rgba(222, 211, 255, .46) !important;
  background: #8063e9 !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-account-avatar {
  width: 34px !important;
  height: 34px !important;
  border-color: rgba(205, 191, 255, .42) !important;
  background: #7357dc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

@media (max-width: 1100px) {
  #app[data-active-view]:not([data-active-view="home"]) .topbar {
    min-height: 112px !important;
    row-gap: 6px !important;
  }

  #app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav {
    width: 100% !important;
  }
}

@media (max-width: 720px) {
  #app[data-active-view]:not([data-active-view="home"]) .topbar {
    min-height: 108px !important;
  }

  #app[data-active-view]:not([data-active-view="home"]) .topbar-route-context,
  #app[data-active-view]:not([data-active-view="home"]) .topbar-route-context[hidden] {
    display: none !important;
  }

  #app[data-active-view]:not([data-active-view="home"]) .topbar-home-mark {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    border-radius: 9px !important;
  }

  #app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav {
    padding: 3px !important;
    border-radius: 10px !important;
  }
}

/* 20260914 · Final compactness pass for the workflow disclosure. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary {
  min-height: 36px !important;
  padding: 2px 16px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy strong {
  line-height: 1.12 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .creative-workflow-summary-copy small {
  line-height: 1.1 !important;
}

/* 20260914 · Styles viewport fit — terminal cascade guard.
   Only the outer viewport, clipping, and scroll-safe bottom inset change. */
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
  --styles-tray-open-height: clamp(520px, calc(100dvh - 80px), 860px);
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open),
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open) .reactor-shell,
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open) .reactor-flow-map {
  height: var(--styles-tray-open-height) !important;
  min-height: var(--styles-tray-open-height) !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio:has(.composer-style-tray.open) .reactor-shell,
html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .reactor-flow-map:has(> .composer-style-tray.open) {
  overflow: visible !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-card.composer-studio .reactor-flow-map > .composer-style-tray.open {
  height: var(--styles-tray-open-height) !important;
  min-height: var(--styles-tray-open-height) !important;
  max-height: var(--styles-tray-open-height) !important;
  overflow: hidden !important;
}

html body #app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-style-tray.open .chip-wrap {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding-bottom: 14px !important;
  scroll-padding-bottom: 14px !important;
  overflow-y: auto !important;
}

@supports not (height: 100dvh) {
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
    --styles-tray-open-height: clamp(520px, calc(100vh - 80px), 860px);
  }
}

@media (max-width: 780px) {
  html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
    --styles-tray-open-height: clamp(360px, calc(100dvh - 164px), 760px);
  }

  @supports not (height: 100dvh) {
    html body #app#app[data-active-view="workbench"][data-creation-entry="fast"] {
      --styles-tray-open-height: clamp(360px, calc(100vh - 164px), 760px);
    }
  }
}

/* 20260914 · Terminal Run History layout guard. */
#app[data-active-view="logs"] .project-log-card {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
}

#app[data-active-view="logs"] .project-log-card-open {
  grid-template-columns: 104px minmax(0, 1fr) max-content !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 88px !important;
  padding: 10px 112px 10px 0 !important;
}

#app[data-active-view="logs"] .project-log-status-mark {
  min-width: 104px !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
}

#app[data-active-view="logs"] .project-log-card-kicker {
  gap: 9px !important;
  line-height: 1.25 !important;
}

#app[data-active-view="logs"] .project-log-card-copy {
  gap: 2px !important;
}

#app[data-active-view="logs"] .project-log-card-copy h3 {
  margin: 1px 0 !important;
  font-size: 16px !important;
  line-height: 1.24 !important;
}

#app[data-active-view="logs"] .project-log-card-meta {
  gap: 8px !important;
  margin-top: 2px !important;
  padding-top: 0 !important;
  line-height: 1.25 !important;
}

#app[data-active-view="logs"] .project-log-card-open > .project-log-card-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 30px !important;
  padding: 5px 9px !important;
  border: 1px solid var(--history-line-strong) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--history-muted) !important;
  box-shadow: none !important;
}

#app[data-active-view="logs"] .project-log-card-cta strong,
#app[data-active-view="logs"] .project-log-card-cta span {
  color: inherit !important;
  font-size: 11px !important;
}

#app[data-active-view="logs"] .project-log-card-open:hover > .project-log-card-cta,
#app[data-active-view="logs"] .project-log-card-open:focus-visible > .project-log-card-cta {
  border-color: rgba(179, 157, 255, .56) !important;
  color: var(--history-accent-strong) !important;
}

#app[data-active-view="logs"] .project-log-card-reuse {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 32px;
  padding: 6px 13px;
  border: 1px solid #9b7bff;
  border-radius: 8px;
  background: #795ee6;
  color: #f8f5ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 16px rgba(82, 57, 173, .26);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

#app[data-active-view="logs"] .project-log-card-reuse:hover,
#app[data-active-view="logs"] .project-log-card-reuse:focus-visible {
  border-color: #b9a7ff;
  background: #8b70f0;
  outline: 2px solid rgba(179, 157, 255, .32);
  outline-offset: 2px;
}

#app[data-active-view="logs"] .project-log-card-reuse:active {
  transform: translateY(calc(-50% + 1px)) scale(.98);
}

#app[data-active-view="logs"] .project-log-card-delete {
  top: 5px !important;
  right: 7px !important;
}

#app[data-active-view="logs"] .project-log-grid.is-selecting .project-log-card-reuse {
  display: none !important;
}

@media (max-width: 720px) {
  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 6px !important;
    min-height: 96px !important;
    padding: 11px 100px 42px 14px !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-status-mark {
    display: none !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-cta {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    min-height: 28px !important;
  }

  #app[data-active-view="logs"] .project-log-card-reuse {
    top: auto;
    right: 12px;
    bottom: 10px;
    min-height: 30px;
    transform: none;
  }

  #app[data-active-view="logs"] .project-log-card-reuse:active {
    transform: translateY(1px) scale(.98);
  }
}

@media (max-width: 420px) {
  #app[data-active-view="logs"] .project-log-card-open {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    padding-right: 90px !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-copy,
  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-cta {
    grid-column: 1 !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-copy {
    grid-row: 1 !important;
  }

  #app[data-active-view="logs"] .project-log-card-open > .project-log-card-cta {
    grid-row: 2 !important;
  }
}

/* 20260917 · FINAL workflow motion authority.
   This must remain at the end of the overseas cascade. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail::before {
  background: linear-gradient(90deg, rgba(155,123,255,.1), rgba(187,173,224,.5) 50%, rgba(155,123,255,.1)) !important;
  box-shadow: none !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:hover,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:focus-visible {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node::before,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span {
  background: rgba(45,36,70,.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(21,13,42,.16) !important;
  animation: none !important;
  transition: transform 180ms cubic-bezier(.22,1,.36,1), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:hover > span,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:focus-visible > span {
  border-color: rgba(203,188,247,.78) !important;
  background: rgba(61,47,96,.98) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 22px rgba(35,19,73,.2) !important;
  transform: translateY(-2px) scale(1.025) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="running"] > span {
  border-color: rgba(203,184,255,.9) !important;
  background: rgba(78,57,126,.98) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 0 0 4px rgba(140,111,222,.08), 0 10px 24px rgba(41,22,82,.22) !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="running"] > span::before {
  opacity: 1 !important;
  animation: workflowStageOrbit 1.8s linear infinite !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="done"] > span {
  border-color: rgba(165,222,201,.6) !important;
  background: rgba(39,75,66,.96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(21,59,47,.18) !important;
}

@media (prefers-reduced-motion: reduce) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel > .fast-flow-rail .fast-flow-node,
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span::before {
    animation: none !important;
  }
}

/* 20260917 · Terminal authority for the six-stage workflow and composer tools.
   Keep the rail quiet and editorial: status is communicated through restrained
   contrast and a small indicator, never a glowing or rotating ornament. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail::before {
  background: rgba(171, 180, 194, .2) !important;
  box-shadow: none !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail::after {
  content: none !important;
  display: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:hover,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:focus-visible {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node::before,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node::after,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span {
  border-color: rgba(185, 193, 206, .24) !important;
  background: rgba(29, 32, 39, .96) !important;
  color: rgba(226, 231, 239, .7) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.1) !important;
  transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease, color 140ms ease !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:not(:disabled):hover > span,
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:not(:disabled):focus-visible > span {
  border-color: rgba(203, 211, 224, .46) !important;
  background: rgba(38, 42, 50, .98) !important;
  color: rgba(245, 247, 251, .92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 14px rgba(0,0,0,.12) !important;
  transform: translateY(-1px) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:focus-visible > span {
  outline: 2px solid rgba(143, 159, 199, .42) !important;
  outline-offset: 3px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node strong {
  color: rgba(236, 239, 245, .88) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node small {
  color: rgba(181, 188, 201, .55) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="running"] > span {
  border-color: rgba(142, 158, 202, .74) !important;
  background: rgba(43, 48, 61, .98) !important;
  color: #edf1fb !important;
  box-shadow: inset 0 0 0 2px rgba(126, 143, 190, .11), 0 5px 14px rgba(0,0,0,.12) !important;
  animation: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span::after {
  right: 4px !important;
  bottom: 4px !important;
  width: 5px !important;
  height: 5px !important;
  border: 1px solid rgba(18, 20, 25, .82) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="running"] > span::after {
  background: #91a2d2 !important;
  opacity: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="done"] > span {
  border-color: rgba(167, 200, 190, .4) !important;
  background: rgba(31, 38, 41, .98) !important;
  color: rgba(233, 243, 240, .9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.1) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="done"] > span::after {
  background: #82b7a8 !important;
  opacity: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="error"] > span {
  border-color: rgba(211, 125, 137, .55) !important;
  background: rgba(47, 34, 39, .98) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="error"] > span::after {
  background: #d5828d !important;
  opacity: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-warning="true"] > span::after {
  background: #c9a467 !important;
  opacity: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="skipped"] {
  opacity: .52 !important;
}

/* Subtle functional colour coding for adjacent composer controls. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-toggle-compact {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", sans-serif !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger {
  border-color: rgba(126, 154, 185, .34) !important;
  background: rgba(48, 61, 76, .48) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger:is(:hover, :focus-visible),
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-control.is-open .composer-more-trigger {
  border-color: rgba(145, 175, 207, .54) !important;
  background: rgba(55, 70, 87, .62) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger-icon {
  color: #9eb7d0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger {
  border-color: rgba(151, 137, 177, .34) !important;
  background: rgba(61, 53, 73, .48) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger:is(:hover, :focus-visible),
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger[aria-expanded="true"] {
  border-color: rgba(175, 157, 205, .54) !important;
  background: rgba(70, 60, 84, .62) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger-icon {
  background: rgba(133, 113, 164, .42) !important;
  color: #ddd3ea !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-toggle-compact {
  border-color: rgba(112, 158, 153, .34) !important;
  background: rgba(43, 66, 65, .48) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-toggle-compact:hover,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-toggle-compact:has(input:focus-visible) {
  border-color: rgba(128, 183, 176, .54) !important;
  background: rgba(49, 77, 75, .62) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-toggle-compact input {
  accent-color: #75afa7 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left .first-frame-info {
  border-color: rgba(119, 173, 166, .5) !important;
  background: rgba(86, 136, 130, .42) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-panel.is-workflow-target {
  outline: 1px solid rgba(139, 158, 202, .46) !important;
  outline-offset: 5px !important;
}

@media (prefers-reduced-motion: reduce) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span {
    transition: none !important;
  }
}

/* 20260917 · Compact the space beneath the six-stage rail without changing
   node geometry, label wrapping, or the review-console separation. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail {
  padding-bottom: 8px !important;
}

/* 20260917 · Bind first-frame help to the actual info button. The previous
   percentage-minus-pixels estimate was relative to the full toggle and made
   both the panel and its pointer drift when adjacent controls changed width. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-bottom-left .first-frame-info-anchor {
  position: relative !important;
  display: inline-grid !important;
  flex: 0 0 17px !important;
  width: 17px !important;
  height: 17px !important;
  place-items: center !important;
  overflow: visible !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-bottom-left .first-frame-info-anchor > .first-frame-info-popover {
  top: calc(100% + 9px) !important;
  right: auto !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .composer-bottom-left .first-frame-info-anchor > .first-frame-info-popover::before {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
}

/* Workbench task selection: keep batch management compact and aligned with
   the existing text-first session list. */
#app[data-active-view="sessions"] .task-session-board-head {
  align-items: center;
}

#app[data-active-view="sessions"] .session-board-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

#app[data-active-view="sessions"] .session-selection-toggle[aria-pressed="true"] {
  border-color: rgba(155, 123, 255, .46);
  background: rgba(155, 123, 255, .12);
  color: var(--release-ink);
}

#app[data-active-view="sessions"] .session-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  margin: 12px 0 0;
  padding: 7px 10px 7px 14px;
  border: 1px solid rgba(155, 123, 255, .24);
  border-radius: 8px;
  background: rgba(155, 123, 255, .06);
}

#app[data-active-view="sessions"] .session-selection-bar[hidden] {
  display: none !important;
}

#app[data-active-view="sessions"] .session-selection-bar strong {
  color: var(--release-muted);
  font-size: 11px;
  font-weight: 700;
}

#app[data-active-view="sessions"] .session-selection-bar > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

#app[data-active-view="sessions"] .session-selection-bar button {
  white-space: nowrap;
}

#app[data-active-view="sessions"] .session-selection-bar .text-danger-btn {
  border-color: rgba(208, 101, 100, .36);
  background: rgba(208, 101, 100, .08);
  color: #c96d69;
}

#app[data-active-view="sessions"] .session-selection-bar .text-danger-btn:not(:disabled):hover,
#app[data-active-view="sessions"] .session-selection-bar .text-danger-btn:not(:disabled):focus-visible {
  border-color: rgba(208, 101, 100, .58);
  background: rgba(208, 101, 100, .14);
  color: #b95754;
}

#app[data-active-view="sessions"] .session-card.session-row.is-selected {
  background: linear-gradient(90deg, rgba(155, 123, 255, .1), transparent 52%) !important;
  box-shadow: inset 2px 0 0 var(--release-purple);
}

#app[data-active-view="sessions"] .session-selector {
  display: inline-grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  justify-self: center;
  place-items: center;
  cursor: pointer;
}

#app[data-active-view="sessions"] .session-selector input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

#app[data-active-view="sessions"] .session-selector span {
  display: block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--release-dim);
  border-radius: 3px;
  background: transparent;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

#app[data-active-view="sessions"] .session-selector input:checked + span {
  border-color: var(--release-purple);
  background: var(--release-purple);
  box-shadow: inset 0 0 0 3px var(--release-surface);
}

#app[data-active-view="sessions"] .session-selector input:focus-visible + span {
  outline: 2px solid rgba(155, 123, 255, .58);
  outline-offset: 2px;
}

#app[data-active-view="sessions"] .session-selector input:disabled + span {
  opacity: .32;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  #app[data-active-view="sessions"] .session-selection-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  #app[data-active-view="sessions"] .session-selection-bar > div {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* 20260919 · Compact and visually group the remaining generation controls.
   Keep the distinction semantic and restrained: size = steel blue and
   styles = warm ochre. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left {
  gap: 6px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .reference-upload-group {
  order: 1;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .composer-more-control {
  order: 2;
  width: 148px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .composer-styles-trigger {
  order: 3;
  width: 132px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .first-frame-toggle-compact {
  order: 5;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] :is(
  .composer-more-trigger,
  .composer-styles-trigger
) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 4px 8px !important;
  gap: 7px !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] :is(
  .composer-more-trigger-icon,
  .composer-styles-trigger-icon-icon
) {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  border-radius: 6px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] :is(
  .composer-more-trigger-copy,
  .composer-styles-trigger-copy-copy
) {
  gap: 0 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] :is(
  .composer-more-trigger-copy,
  .composer-styles-trigger-copy-copy
) strong {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] :is(
  .composer-more-trigger-copy,
  .composer-styles-trigger-copy-copy
) small {
  font-size: 8.5px !important;
  line-height: 1.15 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger {
  border-color: rgba(119, 154, 187, .42) !important;
  background: rgba(43, 58, 73, .58) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger:is(:hover, :focus-visible),
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-control.is-open .composer-more-trigger {
  border-color: rgba(145, 184, 219, .68) !important;
  background: rgba(51, 70, 88, .76) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(119, 166, 207, .28), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger-icon {
  border: 1px solid rgba(137, 178, 214, .24) !important;
  background: rgba(83, 126, 164, .3) !important;
  color: #b9d3ea !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger-copy small,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-trigger-chevron {
  color: #a9bac9 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger {
  border-color: rgba(183, 145, 79, .42) !important;
  background: rgba(72, 56, 33, .58) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger:is(:hover, :focus-visible),
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger[aria-expanded="true"] {
  border-color: rgba(211, 169, 96, .68) !important;
  background: rgba(86, 67, 39, .76) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(197, 153, 76, .26), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger-icon {
  border: 1px solid rgba(215, 173, 101, .24) !important;
  background: rgba(164, 121, 53, .3) !important;
  color: #f0d39c !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger-copy small,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-styles-trigger-chevron {
  color: #c7b58f !important;
}

/* 20260919 · Keep the compact workbench controls on one shared height.
   First-frame is a label control, not a larger card; it follows the same
   36px control rhythm as Size and Styles while retaining
   its teal semantic accent. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .first-frame-toggle-compact,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .composer-more-control .composer-more-trigger,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .composer-styles-trigger {
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  align-self: center !important;
  padding-block: 4px !important;
  border-radius: 10px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .first-frame-toggle-compact {
  gap: 7px !important;
  padding-inline: 8px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-bottom-left > .first-frame-toggle-compact .first-frame-info {
  width: 16px !important;
  height: 16px !important;
  flex-basis: 16px !important;
}

/* 20260919 · Landing hierarchy refresh.
   Keep the opening compact, place the three product destinations directly
   under the value proposition, and remove the decorative preview layer. */
#app#app[data-active-view="home"] .home-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(28px, 4vw, 42px) !important;
  min-height: 0 !important;
  padding-top: clamp(54px, 7vw, 84px) !important;
  padding-bottom: clamp(32px, 4vw, 48px) !important;
}

#app#app[data-active-view="home"] .home-hero-copy {
  width: min(760px, 100%) !important;
  max-width: none !important;
}

#app#app[data-active-view="home"] .home-hero h1 {
  max-width: 720px !important;
  font-size: clamp(46px, 6.4vw, 82px) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

#app#app[data-active-view="home"] .home-hero .home-lede {
  max-width: 500px !important;
  margin-top: 20px !important;
  color: var(--dp-muted) !important;
  font-size: clamp(15px, 1.35vw, 18px) !important;
  line-height: 1.55 !important;
}

#app#app[data-active-view="home"] .home-hero-copy > .home-primary-btn {
  margin-top: 26px !important;
}

#app#app[data-active-view="home"] .home-entry-nav {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  margin-top: 2px !important;
  overflow: hidden !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.018) !important;
}

#app#app[data-active-view="home"] .home-entry[hidden] {
  display: none !important;
}

#app#app[data-active-view="home"] .home-entry {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 72px !important;
  padding: 14px 18px !important;
  border-right: 1px solid var(--dp-line) !important;
  color: var(--dp-ink) !important;
  background: transparent !important;
  transition: background-color 180ms ease, color 180ms ease !important;
}

#app#app[data-active-view="home"] .home-entry:last-child {
  border-right: 0 !important;
}

#app#app[data-active-view="home"] .home-entry > span {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border: 1px solid rgba(155,123,255,.34) !important;
  border-radius: 50% !important;
  color: #c8b8ff !important;
  font-size: 9px !important;
}

#app#app[data-active-view="home"] .home-entry strong {
  font-size: clamp(14px, 1.4vw, 17px) !important;
  letter-spacing: -.02em !important;
}

#app#app[data-active-view="home"] .home-entry b {
  position: static !important;
  color: var(--dp-dim) !important;
  font-size: 16px !important;
}

#app#app[data-active-view="home"] .home-entry:hover,
#app#app[data-active-view="home"] .home-entry:focus-visible {
  outline: none !important;
  background: rgba(155,123,255,.075) !important;
}

#app#app[data-active-view="home"] .home-entry:hover strong,
#app#app[data-active-view="home"] .home-entry:focus-visible strong {
  color: #d6cbff !important;
}

/* 20260919 · A single aligned Creative Engine rail.
   The number token is also the track marker, so label baselines cannot drift
   independently from the six equal columns. */
#app#app[data-active-view="home"] .home-engine-map {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 22px !important;
  overflow: hidden !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
}

#app#app[data-active-view="home"] .home-engine-map-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--dp-line) !important;
}

#app#app[data-active-view="home"] .home-engine-map-head span {
  color: var(--dp-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#app#app[data-active-view="home"] .home-engine-map-head small {
  color: var(--dp-dim) !important;
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

#app#app[data-active-view="home"] .home-engine-rail {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1.2vw, 16px) !important;
  margin: 0 !important;
  padding: 28px 0 24px !important;
  list-style: none !important;
}

#app#app[data-active-view="home"] .home-engine-rail::before {
  content: "" !important;
  position: absolute !important;
  top: 44px !important;
  left: calc(100% / 12) !important;
  right: calc(100% / 12) !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(155,123,255,.72), rgba(244,244,241,.2) 48%, rgba(240,91,103,.72)) !important;
}

#app#app[data-active-view="home"] .home-engine-node {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 34px auto auto !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: var(--dp-ink) !important;
  text-align: center !important;
}

#app#app[data-active-view="home"] .home-engine-node::before {
  display: none !important;
}

#app#app[data-active-view="home"] .home-engine-node > span {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border: 1px solid rgba(244,244,241,.28) !important;
  border-radius: 50% !important;
  background: #101014 !important;
  color: var(--dp-muted) !important;
  font: 9px ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

#app#app[data-active-view="home"] .home-engine-node.is-purple > span {
  border-color: rgba(155,123,255,.72) !important;
  color: #c8b8ff !important;
}

#app#app[data-active-view="home"] .home-engine-node.is-red > span {
  border-color: rgba(240,91,103,.68) !important;
  color: #ff9ba4 !important;
}

#app#app[data-active-view="home"] .home-engine-node b {
  max-width: 100% !important;
  overflow: visible !important;
  color: var(--dp-ink) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#app#app[data-active-view="home"] .home-engine-node small {
  min-height: 28px !important;
  color: var(--dp-dim) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

#app#app[data-active-view="home"] .home-engine-foot {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--dp-line) !important;
  color: var(--dp-muted) !important;
  letter-spacing: 0 !important;
}

#app#app[data-active-view="home"] .home-engine-foot strong {
  margin-right: auto !important;
  color: var(--dp-ink) !important;
  font-size: 11px !important;
  letter-spacing: .02em !important;
}

#app#app[data-active-view="home"] .home-engine-foot span {
  padding: 6px 9px !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 999px !important;
  color: var(--dp-muted) !important;
  font-size: 9px !important;
  letter-spacing: .04em !important;
}

#app#app[data-active-view="home"] .home-engine-foot span::before {
  content: none !important;
}

/* 20260919 · First-frame output guidance. */
#app#app[data-active-view="workbench"] .first-frame-enable-guide {
  border-color: rgba(94, 197, 176, .42) !important;
  background: rgba(39, 95, 84, .28) !important;
  color: #b9eadf !important;
}

#app#app[data-active-view="workbench"] .first-frame-enable-guide:hover,
#app#app[data-active-view="workbench"] .first-frame-enable-guide:focus-visible {
  border-color: rgba(122, 222, 201, .7) !important;
  background: rgba(49, 112, 99, .42) !important;
  color: #e1fff8 !important;
}

#app#app[data-active-view="workbench"] #first-frame-toggle-control {
  position: relative !important;
}

#app#app[data-active-view="workbench"] #first-frame-toggle-control.is-guidance-target {
  border-color: rgba(122, 222, 201, .9) !important;
  animation: first-frame-guide-pulse 900ms ease 2 !important;
}

#app#app[data-active-view="workbench"] #first-frame-toggle-control.is-guidance-target::after {
  content: "Enable this option, then generate again" !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 9px) !important;
  z-index: 30 !important;
  width: max-content !important;
  max-width: min(260px, 72vw) !important;
  padding: 8px 10px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(122, 222, 201, .42) !important;
  border-radius: 8px !important;
  background: #172523 !important;
  color: #d9f7f0 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  pointer-events: none !important;
}

@keyframes first-frame-guide-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(122, 222, 201, 0); }
  50% { box-shadow: inset 0 0 0 2px rgba(122, 222, 201, .34); }
}

@media (max-width: 800px) {
  #app#app[data-active-view="home"] .home-entry-nav {
    grid-template-columns: 1fr !important;
  }

  #app#app[data-active-view="home"] .home-entry {
    border-right: 0 !important;
    border-bottom: 1px solid var(--dp-line) !important;
  }

  #app#app[data-active-view="home"] .home-entry:last-child {
    border-bottom: 0 !important;
  }

  #app#app[data-active-view="home"] .home-engine-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
  }

  #app#app[data-active-view="home"] .home-engine-rail::before {
    display: none !important;
  }

  #app#app[data-active-view="home"] .home-engine-node {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    justify-items: start !important;
    column-gap: 10px !important;
    text-align: left !important;
  }

  #app#app[data-active-view="home"] .home-engine-node > span {
    grid-row: 1 / 3 !important;
  }

  #app#app[data-active-view="home"] .home-engine-node small {
    min-height: 0 !important;
  }

  #app#app[data-active-view="home"] .home-engine-foot strong {
    width: 100% !important;
    margin: 0 0 4px !important;
  }
}

@media (max-width: 520px) {
  #app#app[data-active-view="home"] .home-engine-rail {
    grid-template-columns: 1fr !important;
  }

  #app#app[data-active-view="workbench"] .first-frame-card .prompt-toolbar {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app#app[data-active-view="workbench"] #first-frame-toggle-control.is-guidance-target {
    animation: none !important;
  }
}

/* Run History: keep each copy/preview action beside the content it affects. */
#app[data-active-view="logs"] .project-run-output-head {
  align-items: flex-start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#app[data-active-view="logs"] .project-run-output-title {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 5px 9px !important;
  min-width: 0 !important;
}

#app[data-active-view="logs"] .project-run-local-actions {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 5px !important;
}

#app[data-active-view="logs"] .project-run-local-actions button {
  min-height: 28px !important;
  padding: 5px 9px !important;
  border: 1px solid var(--history-line-strong) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--history-ink) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#app[data-active-view="logs"] .project-run-local-actions button:hover,
#app[data-active-view="logs"] .project-run-local-actions button:focus-visible {
  border-color: var(--history-accent) !important;
  background: rgba(155, 123, 255, .14) !important;
  color: var(--history-ink) !important;
}

#app[data-active-view="logs"] .project-run-user-input .project-run-output-head {
  align-items: center !important;
}

#app[data-active-view="logs"] .project-run-user-input .project-run-output-title h4,
#app[data-active-view="logs"] .project-run-output-title h4 {
  margin: 0 !important;
}

#app[data-active-view="logs"] .project-run-output-title span {
  color: var(--history-muted) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

@media (max-width: 560px) {
  #app[data-active-view="logs"] .project-run-output-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 7px !important;
  }

  #app[data-active-view="logs"] .project-run-user-input .project-run-output-head {
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* 20260919 · Landing hero media slot and lighter product navigation. */
#app#app[data-active-view="home"] .home-hero {
  grid-template-columns: minmax(0, .82fr) minmax(360px, 1.18fr) !important;
  column-gap: clamp(34px, 6vw, 92px) !important;
  row-gap: clamp(26px, 4vw, 42px) !important;
  align-items: center !important;
}

#app#app[data-active-view="home"] .home-hero-media {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: stretch !important;
}

#app#app[data-active-view="home"] .home-hero-media-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  min-height: clamp(260px, 30vw, 500px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(244, 244, 241, .18) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 72% 36%, rgba(155, 123, 255, .14), transparent 28%),
    linear-gradient(145deg, #15151b 0%, #0d0d10 68%, #0a0a0c 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 24px 70px rgba(0, 0, 0, .24) !important;
}

#app#app[data-active-view="home"] .home-hero-media-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 12% 8% !important;
  border: 1px solid rgba(244, 244, 241, .08) !important;
  background:
    linear-gradient(90deg, transparent 0 49.5%, rgba(244, 244, 241, .06) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 0 49.5%, rgba(244, 244, 241, .06) 50%, transparent 50.5%) !important;
  opacity: .75 !important;
}

#app#app[data-active-view="home"] .home-hero-media-sweep {
  position: absolute !important;
  top: -20% !important;
  bottom: -20% !important;
  left: -20% !important;
  width: 18% !important;
  background: linear-gradient(90deg, transparent, rgba(240, 91, 103, .35), transparent) !important;
  filter: blur(10px) !important;
  opacity: .55 !important;
  transform: skewX(-12deg) !important;
  animation: home-media-sweep 7s ease-in-out infinite !important;
}

#app#app[data-active-view="home"] .home-hero-media-mark {
  position: absolute !important;
  right: 16px !important;
  bottom: 14px !important;
  z-index: 1 !important;
  color: rgba(244, 244, 241, .45) !important;
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .12em !important;
}

@keyframes home-media-sweep {
  0%, 18% { transform: translateX(0) skewX(-12deg); }
  72%, 100% { transform: translateX(720%) skewX(-12deg); }
}

#app#app[data-active-view="home"] .home-entry-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(720px, 100%) !important;
  margin-inline: auto !important;
  gap: clamp(18px, 3vw, 42px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#app#app[data-active-view="home"] .home-entry {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 64px !important;
  padding: 12px 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  color: var(--dp-ink) !important;
}

#app#app[data-active-view="home"] .home-entry:hover,
#app#app[data-active-view="home"] .home-entry:focus-visible {
  background: transparent !important;
}

#app#app[data-active-view="home"] .home-entry > span {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--dp-dim) !important;
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

#app#app[data-active-view="home"] .home-entry strong {
  color: var(--dp-ink) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  letter-spacing: .01em !important;
}

#app#app[data-active-view="home"] .home-entry[data-home-view="sessions"] > span {
  padding: 3px 5px !important;
  border-radius: 2px !important;
  background: var(--dp-ink) !important;
  color: #fff !important;
}

#app#app[data-active-view="home"] .home-entry[data-home-view="fast"] > span {
  color: var(--dp-purple) !important;
}

#app#app[data-active-view="home"] .home-entry[data-home-view="templates"] > span {
  color: var(--dp-red) !important;
}

#app#app[data-active-view="home"] .home-entry b {
  display: none !important;
}

#app#app[data-active-view="home"] #home-engine-title em {
  color: var(--dp-purple) !important;
  font-style: normal !important;
}

#app#app[data-active-view="home"] #home-engine-title span {
  color: var(--dp-ink) !important;
}

#app#app[data-active-view="home"] #home-library-title {
  white-space: nowrap !important;
  font-size: clamp(34px, 4.15vw, 58px) !important;
  letter-spacing: -.065em !important;
}

@media (max-width: 900px) {
  #app#app[data-active-view="home"] .home-hero {
    grid-template-columns: 1fr !important;
  }

  #app#app[data-active-view="home"] .home-hero-media {
    order: 2 !important;
  }

  #app#app[data-active-view="home"] .home-entry-nav {
    order: 3 !important;
  }

  #app#app[data-active-view="home"] .home-hero-media-frame {
    min-height: 0 !important;
  }
}

@media (max-width: 640px) {
  #app#app[data-active-view="home"] .home-entry-nav {
    grid-template-columns: 1fr !important;
    width: min(300px, 100%) !important;
    gap: 2px !important;
  }

  #app#app[data-active-view="home"] .home-entry {
    justify-content: flex-start !important;
    min-height: 48px !important;
  }

  #app#app[data-active-view="home"] #home-library-title {
    white-space: normal !important;
    font-size: clamp(34px, 11vw, 48px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app#app[data-active-view="home"] .home-hero-media-sweep {
    animation: none !important;
    display: none !important;
  }
}

/* 20260919 · Keep the hero title to two deliberate lines with a quiet second-line inset. */
#app#app[data-active-view="home"] .home-hero h1 {
  max-width: 680px !important;
  margin-left: -18px !important;
  font-size: clamp(42px, 5.2vw, 70px) !important;
  line-height: .98 !important;
}

#app#app[data-active-view="home"] .home-hero h1 em {
  display: inline-block !important;
  margin-left: 2ch !important;
}

@media (min-width: 901px) {
  #app#app[data-active-view="home"] .home-hero h1 {
    white-space: nowrap !important;
  }
}

@media (max-width: 900px) {
  #app#app[data-active-view="home"] .home-hero h1 {
    max-width: 100% !important;
    margin-left: 0 !important;
    font-size: clamp(36px, 8vw, 58px) !important;
  }
}

/* 20260919 · Result metadata polish. */
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-export-meta {
  min-height: 36px !important;
  margin-bottom: 10px !important;
  padding: 7px 11px !important;
  gap: 10px !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-export-meta .export-status,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-export-meta .export-meta-text {
  margin: 0 !important;
  line-height: 1.2 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-export-meta .export-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .prompt-export-meta .export-meta-text {
  flex: 0 0 auto;
  color: var(--dp-muted, rgba(255,255,255,.58));
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

/* 20260920 · Keep the landing navigation numbers unboxed and fully legible. */
#app#app[data-active-view="home"] .home-entry[data-home-view="sessions"] > span {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f4f4f1 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .28) !important;
}

/* 20260920 · One first-frame state, controlled from either the composer or output card. */
#app#app[data-active-view="workbench"] .first-frame-output-switch {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: max-content !important;
  min-height: 36px !important;
  padding: 5px 7px 5px 11px !important;
  border: 1px solid rgba(113, 221, 207, .48) !important;
  border-radius: 10px !important;
  background: rgba(33, 88, 80, .25) !important;
  color: #e2fbf6 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease !important;
}

#app#app[data-active-view="workbench"] .first-frame-output-switch:hover,
#app#app[data-active-view="workbench"] .first-frame-output-switch:focus-visible {
  border-color: rgba(132, 238, 222, .82) !important;
  background: rgba(42, 111, 100, .38) !important;
  outline: none !important;
}

#app#app[data-active-view="workbench"] .first-frame-output-switch:focus-visible {
  box-shadow: 0 0 0 3px rgba(100, 211, 195, .16) !important;
}

#app#app[data-active-view="workbench"] .first-frame-output-switch-copy {
  display: inline-flex !important;
  align-items: center !important;
  text-align: left !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"] .first-frame-output-switch-copy strong {
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
}

#app#app[data-active-view="workbench"] .first-frame-output-switch-track {
  position: relative !important;
  display: inline-flex !important;
  width: 34px !important;
  height: 19px !important;
  flex: 0 0 34px !important;
  align-items: center !important;
  padding: 2px !important;
  border: 1px solid rgba(137, 239, 224, .36) !important;
  border-radius: 999px !important;
  background: #287e70 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .24) !important;
}

#app#app[data-active-view="workbench"] .first-frame-output-switch-track i {
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: #f3fffc !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .34) !important;
  transform: translateX(15px) !important;
  transition: transform 170ms ease, background-color 170ms ease !important;
}

#app#app[data-active-view="workbench"] .first-frame-output-switch.is-off {
  border-color: rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .035) !important;
  color: rgba(231, 235, 234, .68) !important;
}

#app#app[data-active-view="workbench"] .first-frame-output-switch.is-off .first-frame-output-switch-track {
  border-color: rgba(255, 255, 255, .12) !important;
  background: #303737 !important;
}

#app#app[data-active-view="workbench"] .first-frame-output-switch.is-off .first-frame-output-switch-track i {
  background: #a4abaa !important;
  transform: translateX(0) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card.is-disabled {
  border-color: rgba(255, 255, 255, .09) !important;
  border-left-color: #596260 !important;
  background: #111516 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card.is-disabled .prompt-head > div:first-child::before {
  border-color: rgba(190, 199, 197, .28) !important;
  background: rgba(144, 153, 151, .12) !important;
  box-shadow: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card.is-disabled .first-frame-pane-head,
#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card.is-disabled .first-frame-pane-head small {
  color: rgba(204, 212, 210, .44) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"] .output-stage-premium .first-frame-card.is-disabled .first-frame-prompt {
  border: 1px dashed rgba(255, 255, 255, .12) !important;
  background: rgba(4, 7, 8, .32) !important;
  color: rgba(190, 199, 197, .42) !important;
  box-shadow: none !important;
}

#app#app[data-active-view="workbench"] .first-frame-card.is-disabled .prompt-asset-action:disabled {
  border-color: rgba(255, 255, 255, .08) !important;
  background: transparent !important;
  color: rgba(207, 214, 212, .3) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  #app#app[data-active-view="workbench"] .first-frame-output-switch,
  #app#app[data-active-view="workbench"] .first-frame-output-switch-track i {
    transition: none !important;
  }
}

/* 20260920 · Keep the selected output format and readiness attached to its prompt title. */
#app#app[data-active-view="workbench"] .prompt-title-row {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#app#app[data-active-view="workbench"] #prompt-format-status.prompt-format-status-tag {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  max-width: min(100%, 420px) !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(164, 133, 255, .32) !important;
  border-radius: 999px !important;
  background: rgba(112, 76, 190, .13) !important;
  color: rgba(224, 214, 255, .78) !important;
  font-size: 9px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app#app[data-active-view="workbench"] #prompt-format-status.prompt-format-status-tag[hidden],
#app#app[data-active-view="workbench"] #prompt-char-count.prompt-char-count-tag[hidden] {
  display: none !important;
}

#app#app[data-active-view="workbench"] #prompt-format-status.prompt-format-status-tag.checking {
  border-color: rgba(204, 163, 88, .38) !important;
  background: rgba(151, 103, 26, .14) !important;
  color: #e7c889 !important;
}

#app#app[data-active-view="workbench"] #prompt-format-status.prompt-format-status-tag.good {
  border-color: rgba(94, 205, 177, .36) !important;
  background: rgba(30, 126, 103, .14) !important;
  color: #8ee0ca !important;
}

#app#app[data-active-view="workbench"] #prompt-format-status.prompt-format-status-tag.bad {
  border-color: rgba(235, 105, 122, .4) !important;
  background: rgba(161, 45, 61, .14) !important;
  color: #f0a0ab !important;
}

@media (max-width: 720px) {
  #app#app[data-active-view="workbench"] .prompt-title-row {
    width: 100% !important;
  }

  #app#app[data-active-view="workbench"] #prompt-format-status.prompt-format-status-tag {
    max-width: 100% !important;
  }
}

/* 20260921 · Six-stage workflow motion system.
   One active stage carries motion; completed stages settle once and stay calm. */
@keyframes workflowRailFlow {
  from { background-position: 130% 50%; }
  to { background-position: -30% 50%; }
}

@keyframes workflowStageScan {
  to { transform: rotate(1turn); }
}

@keyframes workflowStageBreathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 3px rgba(139,105,235,.08), 0 8px 22px rgba(31,18,62,.2); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 6px rgba(139,105,235,.12), 0 11px 30px rgba(50,27,99,.3); }
}

@keyframes workflowStageSettle {
  0% { transform: scale(.93); filter: brightness(1.35); }
  58% { transform: scale(1.055); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes workflowStageError {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-3px); }
  58% { transform: translateX(3px); }
  78% { transform: translateX(-1px); }
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail {
  --workflow-rail-progress: 0%;
  isolation: isolate !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail::before {
  content: "" !important;
  display: block !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(102,88,139,.16), rgba(171,151,224,.34), rgba(102,88,139,.16)) !important;
  box-shadow: 0 0 0 1px rgba(4,3,8,.2) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail::after {
  content: "" !important;
  display: block !important;
  top: 41px !important;
  left: 9% !important;
  width: var(--workflow-rail-progress) !important;
  height: 2px !important;
  z-index: 1 !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #7357dc 0%, #a98cff 38%, #efe9ff 52%, #9472ef 68%, #7357dc 100%) !important;
  background-size: 180% 100% !important;
  box-shadow: 0 0 8px rgba(139,105,235,.46), 0 0 18px rgba(118,88,232,.18) !important;
  opacity: .95 !important;
  transition: width 320ms cubic-bezier(.22,1,.36,1), opacity 180ms ease !important;
  animation: none !important;
  pointer-events: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail[data-flow-state="running"]::after {
  animation: workflowRailFlow 1.35s linear infinite !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail[data-flow-state="error"]::after {
  background: linear-gradient(90deg, #7357dc, #b96c83 82%, #e89aac) !important;
  box-shadow: 0 0 10px rgba(202,104,132,.36) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span {
  overflow: visible !important;
  will-change: auto;
  transition: transform 220ms cubic-bezier(.22,1,.36,1), border-color 220ms ease, background-color 220ms ease, color 220ms ease, box-shadow 220ms ease !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span::before {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  display: block !important;
  border-radius: 50% !important;
  background: conic-gradient(from 0deg, transparent 0 54%, rgba(176,150,255,.22) 65%, #d8c9ff 78%, rgba(132,92,238,.82) 88%, transparent 100%) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)) !important;
  opacity: 0 !important;
  transform: rotate(0deg);
  pointer-events: none !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="running"] > span {
  border-color: rgba(187,164,255,.82) !important;
  background: radial-gradient(circle at 34% 24%, rgba(175,148,255,.18), transparent 38%), rgba(48,38,72,.98) !important;
  color: #f7f2ff !important;
  animation: workflowStageBreathe 1.8s ease-in-out infinite !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="running"] > span::before {
  opacity: 1 !important;
  animation: workflowStageScan 1.55s linear infinite !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="running"] > span::after {
  background: #c7b2ff !important;
  box-shadow: 0 0 0 3px rgba(165,132,255,.12), 0 0 9px rgba(184,154,255,.78) !important;
  opacity: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="done"] > span {
  border-color: rgba(151,126,219,.48) !important;
  background: rgba(32,28,43,.98) !important;
  color: rgba(237,231,255,.9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 12px rgba(0,0,0,.1) !important;
  animation: workflowStageSettle 440ms cubic-bezier(.22,1,.36,1) 1 both !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="done"] > span::after {
  background: #9f83e9 !important;
  box-shadow: 0 0 7px rgba(159,131,233,.48) !important;
  opacity: 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node[data-status="error"] > span {
  animation: workflowStageError 360ms cubic-bezier(.36,.07,.19,.97) 1 !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-panel > .fast-flow-rail .fast-flow-node:not(:disabled):active > span {
  transform: translateY(0) scale(.96) !important;
}

#app#app[data-active-view="workbench"][data-creation-entry="fast"]
  .creative-workflow-disclosure[open] > .creative-workflow-panel {
  transform-origin: 50% 0;
  animation: workflowPanelReveal 260ms cubic-bezier(.22,1,.36,1) 1 both;
}

@keyframes workflowPanelReveal {
  from { opacity: 0; transform: translateY(-6px) scaleY(.985); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}

.preview-modal.active .preview-backdrop {
  animation: workflowPreviewBackdropIn 180ms ease-out 1 both;
}

.preview-modal.active .preview-dialog {
  transform-origin: 50% 42%;
  animation: workflowPreviewDialogIn 280ms cubic-bezier(.22,1,.36,1) 1 both;
}

@keyframes workflowPreviewBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes workflowPreviewDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel > .fast-flow-rail::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel > .fast-flow-rail::after,
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span,
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-panel > .fast-flow-rail .fast-flow-node > span::before,
  #app#app[data-active-view="workbench"][data-creation-entry="fast"]
    .creative-workflow-disclosure[open] > .creative-workflow-panel,
  .preview-modal.active .preview-backdrop,
  .preview-modal.active .preview-dialog {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* 20260922 · Keep the Size and timing sheet inside the mobile composer.
   The compact controls intentionally scroll horizontally, so anchoring this
   panel to the Size trigger can place the entire sheet beyond the viewport.
   A fixed sheet is resolved against the reactor containing block and remains
   usable even when its trigger has been horizontally scrolled. */
@media (max-width: 620px) {
  #app#app[data-active-view="workbench"][data-creation-entry="fast"] .composer-more-panel {
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    left: 16px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }
}


/* Dr.Prompt brand mark: existing topbar home control only; no new control added. */
#app[data-active-view]:not([data-active-view="home"]) .topbar-home-mark.topbar-director-mark {
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(205, 191, 255, .42) !important;
  border-radius: 10px !important;
  background: #111116 !important;
  color: #f6f2ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 7px 18px rgba(76, 49, 164, .18) !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-mark.topbar-director-mark svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-mark.topbar-director-mark .director-mark-corners {
  fill: none;
  stroke: #d8cdfd;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-mark.topbar-director-mark .director-mark-aperture {
  fill: none;
  stroke: #a88df7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-mark.topbar-director-mark .director-mark-focus {
  fill: #ffffff;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-mark.topbar-director-mark .director-mark-flow {
  fill: none;
  stroke: #8c6ff0;
  stroke-linecap: round;
  stroke-width: 1.35;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-link:hover .topbar-home-mark.topbar-director-mark,
#app[data-active-view]:not([data-active-view="home"]) .topbar-home-link:focus-visible .topbar-home-mark.topbar-director-mark {
  border-color: rgba(222, 211, 255, .72) !important;
  background: #17151f !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 8px 20px rgba(76, 49, 164, .26) !important;
}

/* 20260924 · P1 topbar hierarchy pass.
   Rebalance the existing brand, page context, navigation and account controls
   without adding controls, routes, labels or alternate mobile actions. */
#app[data-active-view]:not([data-active-view="home"]) .topbar {
  grid-template-columns: minmax(250px, 1fr) auto auto !important;
  grid-template-areas: "copy nav actions" !important;
  align-items: center !important;
  gap: clamp(18px, 2.6vw, 36px) !important;
  min-height: 80px !important;
  padding: 12px clamp(18px, 3.4vw, 48px) !important;
  border-bottom-color: rgba(189, 169, 255, .13) !important;
  background: #0a0910 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-copy {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "brand route"
    "brand eyebrow"
    "brand title"
    "brand desc" !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  align-items: center !important;
  min-width: 0 !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-link {
  grid-area: brand !important;
  align-self: center !important;
  gap: 9px !important;
  min-height: 40px !important;
  white-space: nowrap !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-home-name {
  font-size: 13px !important;
  letter-spacing: -.02em !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-route-context,
#app[data-active-view]:not([data-active-view="home"]) .topbar-route-context[hidden] {
  grid-area: route !important;
  justify-self: start !important;
  align-self: end !important;
  min-height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8f86aa !important;
  font-size: 8px !important;
  font-weight: 720 !important;
  letter-spacing: .11em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-route-context::before {
  width: 4px !important;
  height: 4px !important;
  flex-basis: 4px !important;
  box-shadow: none !important;
  background: #9073e8 !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-copy > .eyebrow {
  grid-area: eyebrow !important;
  align-self: end !important;
  margin: 0 !important;
  color: #958aa9 !important;
  font-size: 8px !important;
  letter-spacing: .12em !important;
  line-height: 1.2 !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-copy > h1 {
  grid-area: title !important;
  align-self: center !important;
  margin: 1px 0 0 !important;
  color: #f7f3ff !important;
  font-size: clamp(17px, 1.45vw, 21px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-copy > p:last-child {
  grid-area: desc !important;
  align-self: start !important;
  max-width: 560px !important;
  margin: 3px 0 0 !important;
  color: #898493 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation {
  align-self: stretch !important;
  justify-content: center !important;
  padding-left: clamp(12px, 1.8vw, 22px) !important;
  border-left: 1px solid rgba(255, 255, 255, .08) !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav {
  gap: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item {
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: #85818f !important;
  font-size: 9px !important;
  font-weight: 720 !important;
  letter-spacing: .015em !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item:hover,
#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item:focus-visible {
  color: #f3effd !important;
  border-color: rgba(185, 163, 255, .16) !important;
  background: rgba(173, 150, 255, .07) !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item.active {
  color: #f8f5ff !important;
  border-color: rgba(178, 151, 255, .14) !important;
  background: rgba(132, 101, 222, .14) !important;
  box-shadow: none !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"] {
  color: #716d7d !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]:hover,
#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]:focus-visible,
#app[data-active-view="setup"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"] {
  color: #ded7f0 !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item::after {
  right: 10px !important;
  bottom: 1px !important;
  left: 10px !important;
  height: 1px !important;
  box-shadow: none !important;
}

#app[data-active-view]:not([data-active-view="home"]) .topbar-actions {
  align-self: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account {
  gap: 1px !important;
  margin-left: 2px !important;
  padding: 3px 0 3px 10px !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link {
  min-height: 30px !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: #827d8c !important;
  font-size: 9px !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:hover,
#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link:focus-visible {
  color: #f3effd !important;
  border-color: rgba(185, 163, 255, .16) !important;
  background: rgba(173, 150, 255, .07) !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary {
  min-width: 62px !important;
  padding-inline: 11px !important;
  border-color: rgba(196, 177, 255, .28) !important;
  background: #6247c0 !important;
  color: #fff !important;
  box-shadow: none !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary::before {
  display: none !important;
}

#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary:hover,
#app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-primary:focus-visible {
  border-color: rgba(222, 211, 255, .48) !important;
  background: #7357dc !important;
}

@media (max-width: 1100px) {
  #app[data-active-view]:not([data-active-view="home"]) .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "copy actions" "nav nav" !important;
    min-height: 106px !important;
    row-gap: 7px !important;
    padding-block: 10px 8px !important;
  }

  #app[data-active-view]:not([data-active-view="home"]) .topbar-navigation {
    justify-content: flex-start !important;
    width: 100% !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    padding-top: 6px !important;
  }

  #app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav {
    justify-content: flex-start !important;
    width: 100% !important;
  }
}

@media (max-width: 720px) {
  #app[data-active-view]:not([data-active-view="home"]) .topbar {
    min-height: 104px !important;
    gap: 5px !important;
    padding-inline: 12px !important;
  }

  #app[data-active-view]:not([data-active-view="home"]) .topbar-copy {
    column-gap: 9px !important;
  }

  #app[data-active-view]:not([data-active-view="home"]) .topbar-home-name {
    font-size: 11px !important;
  }

  #app[data-active-view]:not([data-active-view="home"]) .topbar-copy > p:last-child {
    display: none !important;
  }

  #app[data-active-view]:not([data-active-view="home"]) .topbar-navigation > .workspace-topnav .workspace-topnav-item {
    min-height: 30px !important;
    padding-inline: 8px !important;
    font-size: 8px !important;
  }

  #app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account {
    padding-left: 6px !important;
  }

  #app[data-active-view]:not([data-active-view="home"]) .workspace-topbar-account .workspace-account-link {
    padding-inline: 6px !important;
    font-size: 8px !important;
  }
}

/* 20260925 · Landing/header parity.
   The landing page uses the same existing header node as functional views.
   Match the visual system only; do not add controls or navigation entries. */
#app[data-active-view="home"] .topbar {
  grid-template-columns: minmax(250px, 1fr) auto auto !important;
  grid-template-areas: "copy nav actions" !important;
  align-items: center !important;
  gap: clamp(18px, 2.6vw, 36px) !important;
  min-height: 80px !important;
  padding: 12px clamp(18px, 3.4vw, 48px) !important;
  border-bottom-color: rgba(189, 169, 255, .13) !important;
  background: #0a0910 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
}

#app[data-active-view="home"] .topbar-copy {
  display: flex !important;
  grid-area: copy !important;
  align-items: center !important;
  min-width: 0 !important;
}

#app[data-active-view="home"] .topbar-home-link {
  gap: 9px !important;
  min-height: 40px !important;
  white-space: nowrap !important;
}

#app[data-active-view="home"] .topbar-home-name {
  color: #f7f3ff !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  letter-spacing: -.02em !important;
}

#app[data-active-view="home"] .topbar-home-mark.topbar-director-mark {
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
  border: 1px solid rgba(205, 191, 255, .42) !important;
  border-radius: 10px !important;
  background: #111116 !important;
  color: #f6f2ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 7px 18px rgba(76, 49, 164, .18) !important;
}

#app[data-active-view="home"] .topbar-home-mark.topbar-director-mark svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

#app[data-active-view="home"] .topbar-home-mark.topbar-director-mark .director-mark-corners {
  fill: none;
  stroke: #d8cdfd;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

#app[data-active-view="home"] .topbar-home-mark.topbar-director-mark .director-mark-aperture {
  fill: none;
  stroke: #a88df7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

#app[data-active-view="home"] .topbar-home-mark.topbar-director-mark .director-mark-focus {
  fill: #ffffff;
}

#app[data-active-view="home"] .topbar-home-mark.topbar-director-mark .director-mark-flow {
  fill: none;
  stroke: #8c6ff0;
  stroke-linecap: round;
  stroke-width: 1.35;
}

#app[data-active-view="home"] .topbar-home-link:hover .topbar-home-mark.topbar-director-mark,
#app[data-active-view="home"] .topbar-home-link:focus-visible .topbar-home-mark.topbar-director-mark {
  border-color: rgba(222, 211, 255, .72) !important;
  background: #17151f !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 8px 20px rgba(76, 49, 164, .26) !important;
}

#app[data-active-view="home"] .topbar-navigation {
  display: flex !important;
  grid-area: nav !important;
  align-self: stretch !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding-left: clamp(12px, 1.8vw, 22px) !important;
  border-left: 1px solid rgba(255, 255, 255, .08) !important;
}

#app[data-active-view="home"] .topbar-navigation > .workspace-topnav {
  gap: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="home"] .topbar-navigation > .workspace-topnav .workspace-topnav-item {
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: #85818f !important;
  font-size: 9px !important;
  font-weight: 720 !important;
  letter-spacing: .015em !important;
}

#app[data-active-view="home"] .topbar-navigation > .workspace-topnav .workspace-topnav-item:hover,
#app[data-active-view="home"] .topbar-navigation > .workspace-topnav .workspace-topnav-item:focus-visible {
  color: #f3effd !important;
  border-color: rgba(185, 163, 255, .16) !important;
  background: rgba(173, 150, 255, .07) !important;
  transform: none !important;
}

#app[data-active-view="home"] .topbar-navigation > .workspace-topnav .workspace-topnav-item.active {
  color: #f8f5ff !important;
  border-color: rgba(178, 151, 255, .14) !important;
  background: rgba(132, 101, 222, .14) !important;
  box-shadow: none !important;
}

#app[data-active-view="home"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"] {
  color: #716d7d !important;
}

#app[data-active-view="home"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]:hover,
#app[data-active-view="home"] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]:focus-visible {
  color: #ded7f0 !important;
}

#app[data-active-view="home"] .topbar-navigation > .workspace-topnav .workspace-topnav-item::after {
  right: 10px !important;
  bottom: 1px !important;
  left: 10px !important;
  height: 1px !important;
  box-shadow: none !important;
}

#app[data-active-view="home"] .topbar-actions {
  display: flex !important;
  grid-area: actions !important;
  align-self: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="home"] .workspace-topbar-account {
  gap: 1px !important;
  margin-left: 2px !important;
  padding: 3px 0 3px 10px !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app[data-active-view="home"] .workspace-topbar-account .workspace-account-link {
  min-height: 30px !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: #827d8c !important;
  font-size: 9px !important;
}

#app[data-active-view="home"] .workspace-topbar-account .workspace-account-link:hover,
#app[data-active-view="home"] .workspace-topbar-account .workspace-account-link:focus-visible {
  color: #f3effd !important;
  border-color: rgba(185, 163, 255, .16) !important;
  background: rgba(173, 150, 255, .07) !important;
}

#app[data-active-view="home"] .workspace-topbar-account .workspace-account-primary {
  min-width: 62px !important;
  padding-inline: 11px !important;
  border-color: rgba(196, 177, 255, .28) !important;
  background: #6247c0 !important;
  color: #fff !important;
  box-shadow: none !important;
}

#app[data-active-view="home"] .workspace-topbar-account .workspace-account-primary::before {
  display: none !important;
}

#app[data-active-view="home"] .workspace-topbar-account .workspace-account-primary:hover,
#app[data-active-view="home"] .workspace-topbar-account .workspace-account-primary:focus-visible {
  border-color: rgba(222, 211, 255, .48) !important;
  background: #7357dc !important;
}

@media (max-width: 1100px) {
  #app[data-active-view="home"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "copy actions" "nav nav" !important;
    min-height: 106px !important;
    row-gap: 7px !important;
    padding-block: 10px 8px !important;
  }

  #app[data-active-view="home"] .topbar-navigation {
    justify-content: flex-start !important;
    width: 100% !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    padding-top: 6px !important;
  }

  #app[data-active-view="home"] .topbar-navigation > .workspace-topnav {
    justify-content: flex-start !important;
    width: 100% !important;
  }
}

@media (max-width: 720px) {
  #app[data-active-view="home"] .topbar {
    min-height: 104px !important;
    gap: 5px !important;
    padding-inline: 12px !important;
  }

  #app[data-active-view="home"] .topbar-home-name {
    font-size: 11px !important;
  }

  #app[data-active-view="home"] .topbar-navigation > .workspace-topnav .workspace-topnav-item {
    min-height: 30px !important;
    padding-inline: 8px !important;
    font-size: 8px !important;
  }

  #app[data-active-view="home"] .workspace-topbar-account {
    padding-left: 6px !important;
  }

  #app[data-active-view="home"] .workspace-topbar-account .workspace-account-link {
    padding-inline: 6px !important;
    font-size: 8px !important;
  }
}

/* 20260924 · Final shared topbar parity and centerline pass.
   Reuse the existing controls only. Home and functional views share one
   geometry for the brand, navigation and account rail. */
#app#app[data-active-view] .topbar {
  box-sizing: border-box !important;
  align-items: center !important;
}

#app#app[data-active-view] .topbar-copy,
#app#app[data-active-view] .topbar-navigation,
#app#app[data-active-view] .topbar-actions,
#app#app[data-active-view] .workspace-topbar-account {
  align-self: center !important;
  box-sizing: border-box !important;
}

#app#app[data-active-view] .topbar-home-link {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  transform: none !important;
}

#app#app[data-active-view] .topbar-actions,
#app#app[data-active-view] .workspace-topbar-account {
  height: 40px !important;
  min-height: 40px !important;
  padding-block: 0 !important;
}

#app#app[data-active-view] .workspace-topbar-account .workspace-account-plans {
  display: none !important;
}

#app#app[data-active-view] .workspace-topbar-account .workspace-account-link {
  font-weight: 720 !important;
}

#app#app[data-active-view] .workspace-topbar-account .workspace-account-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  flex-basis: 34px !important;
}

#app#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"],
#app#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"] {
  margin-left: 0 !important;
  padding-left: 10px !important;
}

#app#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="templates"]::before,
#app#app[data-active-view] .topbar-navigation > .workspace-topnav .workspace-topnav-item[data-view="setup"]::before {
  display: none !important;
}

@media (min-width: 1101px) {
  #app#app[data-active-view] .topbar {
    grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr) !important;
  }

  #app#app[data-active-view] .topbar-copy {
    justify-self: start !important;
  }

  #app#app[data-active-view] .topbar-navigation {
    justify-self: center !important;
  }

  #app#app[data-active-view] .topbar-actions {
    justify-self: end !important;
  }
}

@media (max-width: 1100px) {
  #app#app[data-active-view] .topbar-navigation {
    align-self: center !important;
    height: 37px !important;
    min-height: 37px !important;
    padding-top: 6px !important;
  }
}

/* Live account summary shared by the home and workbench headers. */
.workspace-account-link.account-status-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 9px 12px;
  border: 1px solid #494052;
  border-radius: 12px;
  background: #201b29;
  color: #ddd5ee;
  font-variant-numeric: tabular-nums;
}
.workspace-account-link.account-membership-active {
  border-color: #7255ab;
  background: #302340;
  color: #dcc5ff;
}
.workspace-account-link.account-status-chip:hover {
  border-color: #a78bfa;
  background: #37294c;
}
@media (max-width: 600px) {
  .workspace-account-link.account-status-chip { padding: 7px 8px; font-size: 11px; }
}
#app[data-active-view] .workspace-topbar-account .workspace-account-link.account-status-chip {
  display: inline-flex !important;
}
.account-menu a.account-menu-item { text-decoration: none; border-color: #332e3f; background: #17141e; min-height: 68px; }
.account-menu a.account-menu-item:hover, .account-menu a.account-menu-item:focus-visible { border-color: #9b7aea; background: #241c34; }
.account-membership-actions a { display: inline-flex; align-items: center; text-decoration: none; }

.account-usage-grid { grid-template-columns: 1fr; }