:root {
  color-scheme: dark;
  --bg: #050706;
  --rail: #080c0b;
  --panel: rgba(18, 24, 23, 0.92);
  --panel-soft: rgba(255, 255, 255, 0.045);
  --panel-strong: #17211f;
  --ink: #f6f8f5;
  --muted: #a7b2ad;
  --subtle: #728079;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);
  --primary-rgb: 31, 35, 171;
  --mint: #1f23ab;
  --mint-strong: #171a82;
  --accent-text: #a7abff;
  --amber: #dfb466;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

/* Image asset tools stay in screen space so canvas zoom remains crisp. */
.media-canvas-workbench {
  position: relative;
}

.image-canvas-asset-context {
  position: relative;
  z-index: 45;
  min-width: 0;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(104, 113, 138, 0.18);
  background: #090e15;
}

.image-canvas-asset-context[hidden] {
  display: none;
}

.image-asset-context-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(115, 124, 151, 0.3);
  border-radius: 5px;
  background: rgba(10, 15, 23, 0.96);
  overflow: visible;
}

.image-asset-context-current {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 28px minmax(0, 112px);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 5px 8px;
  padding-right: 7px;
  border: 0;
  border-right: 1px solid rgba(118, 128, 153, 0.2);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.image-asset-context-current img {
  width: 28px;
  height: 30px;
  border-radius: 2px;
  object-fit: cover;
  background: #070b11;
}

.image-asset-context-current div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.image-asset-context-current span {
  color: #6f798a;
  font-size: 7px;
}

.image-asset-context-current strong {
  overflow: hidden;
  color: #dce1e9;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-asset-direct-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  padding-right: 5px;
  border-right: 1px solid rgba(118, 128, 153, 0.2);
}

.image-asset-direct-tools button {
  display: grid;
  min-width: 58px;
  height: 34px;
  gap: 2px;
  place-content: center;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #cfd5df;
  cursor: pointer;
}

.image-asset-direct-tools button:hover {
  border-color: rgba(95, 104, 255, 0.5);
  background: rgba(43, 49, 187, 0.2);
  color: #fff;
}

.image-asset-direct-tools button span {
  font-size: 9px;
  font-weight: 780;
  white-space: nowrap;
}

.image-asset-direct-tools button em {
  color: #687385;
  font-size: 7px;
  font-style: normal;
}

.image-asset-context-empty {
  display: grid;
  min-width: 300px;
  gap: 4px;
  margin-right: auto;
  padding: 0 12px;
}

.image-asset-context-empty span {
  color: #737fff;
  font: 800 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.image-asset-context-empty strong {
  color: #dce1e9;
  font-size: 10px;
}

.image-asset-context-library {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(116, 126, 153, 0.26);
  border-radius: 3px;
  background: #141b26;
  color: #c9d0db;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.image-asset-quick-trigger,
.image-asset-context-review,
.image-asset-context-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(116, 126, 153, 0.26);
  border-radius: 3px;
  background: #141b26;
  color: #c9d0db;
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.image-asset-quick-trigger {
  border-color: rgba(95, 104, 255, 0.56);
  background: #292fbb;
  color: #fff;
}

.image-asset-context-menu {
  position: relative;
}

.image-asset-context-menu[open] {
  z-index: 80;
}

.image-asset-context-menu > summary {
  list-style: none;
}

.image-asset-context-menu > summary::-webkit-details-marker {
  display: none;
}

.image-asset-context-menu > summary i {
  color: #737d8e;
  font-size: 10px;
  font-style: normal;
}

.image-asset-context-menu[open] > summary {
  border-color: rgba(95, 104, 255, 0.55);
  color: #fff;
}

.image-asset-context-menu > div {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  display: grid;
  min-width: 188px;
  padding: 5px;
  border: 1px solid rgba(111, 122, 149, 0.28);
  border-radius: 4px;
  background: #0c121b;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.image-asset-context-menu > div button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #cbd2dd;
  font-size: 9px;
  text-align: left;
  cursor: pointer;
}

.image-asset-context-menu > div button:hover,
.image-asset-context-menu > div button.is-active {
  background: #182131;
  color: #fff;
}

.image-asset-context-menu > div button em {
  color: #778294;
  font-size: 8px;
  font-style: normal;
}

.image-asset-context-menu > div button.is-internal em { color: #d9aa52; }
.image-asset-context-menu > div button.is-production em { color: #63d6aa; }

.image-asset-context-menu.is-semantic > div {
  min-width: 126px;
}

.image-quick-edit-popover {
  width: min(560px, calc(100vw - 360px));
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(91, 101, 255, 0.48);
  border-radius: 5px;
  background: rgba(10, 15, 23, 0.98);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.46);
}

.image-quick-edit-popover > header,
.image-quick-edit-popover > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-quick-edit-popover > header {
  margin-bottom: 10px;
}

.image-quick-edit-popover > header div,
.image-quick-edit-popover > footer div {
  display: grid;
  gap: 3px;
}

.image-quick-edit-popover > header span,
.image-quick-edit-popover > footer span {
  color: #737fff;
  font: 800 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.image-quick-edit-popover > header strong,
.image-quick-edit-popover > footer strong {
  color: #e2e6ed;
  font-size: 11px;
}

.image-quick-edit-popover > header button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(110, 121, 147, 0.3);
  border-radius: 3px;
  background: #151c27;
  color: #aeb6c2;
  cursor: pointer;
}

.image-quick-edit-popover label {
  display: grid;
  gap: 6px;
}

.image-quick-edit-popover label > span {
  color: #7f8999;
  font-size: 8px;
  font-weight: 700;
}

.image-quick-edit-popover textarea,
.image-quick-edit-popover select {
  width: 100%;
  border: 1px solid rgba(113, 124, 151, 0.28);
  border-radius: 3px;
  outline: 0;
  background: #111923;
  color: #e4e8ee;
  font: inherit;
}

.image-quick-edit-popover textarea {
  min-height: 72px;
  padding: 9px 10px;
  resize: vertical;
  font-size: 10px;
  line-height: 1.5;
}

.image-quick-edit-popover select {
  height: 34px;
  padding: 0 8px;
  font-size: 9px;
}

.image-quick-edit-popover textarea:focus,
.image-quick-edit-popover select:focus {
  border-color: #626aff;
}

.image-quick-edit-options {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}

.image-quick-edit-contract {
  margin: 9px 0;
  padding: 7px 9px;
  border-left: 2px solid #555df3;
  background: rgba(66, 74, 185, 0.12);
  color: #9099a8;
  font-size: 8px;
  line-height: 1.45;
}

.image-quick-edit-popover > footer {
  padding-top: 9px;
  border-top: 1px solid rgba(111, 121, 146, 0.16);
}

.image-quick-edit-popover > footer button {
  min-width: 112px;
  height: 34px;
  border: 1px solid #555df3;
  border-radius: 3px;
  background: #3037c6;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.image-quick-edit-error {
  min-height: 12px;
  margin: 7px 0 0;
  color: #f28288;
  font-size: 8px;
}

.image-asset-operation-bar {
  display: flex;
  gap: 4px;
}

.image-asset-operation-bar button {
  width: auto;
  flex: 1;
}

@media (max-width: 980px) {
  .image-asset-context-current {
    display: none;
  }

  .image-quick-edit-popover {
    width: min(560px, calc(100vw - 40px));
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    radial-gradient(circle at 78% 12%, rgba(var(--primary-rgb), 0.09), transparent 30%),
    var(--bg);
  background-size:
    96px 96px,
    96px 96px,
    100% 100%,
    auto;
  color: var(--ink);
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    transform 0.14s ease;
}

.archived-entry {
  display: none !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(var(--primary-rgb), 0.42);
  outline-offset: 2px;
}

.app-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 14px;
  width: 100vw;
  height: 100vh;
  padding: 14px;
}

.primary-rail,
.site-nav,
.view-panel,
.panel,
.output-area {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 12, 11, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.primary-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 36%),
    rgba(5, 8, 7, 0.9);
}

.rail-brand {
  display: grid;
  gap: 4px;
  min-height: 70px;
  color: #fff;
  text-decoration: none;
}

.rail-brand strong {
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 0;
}

.rail-brand span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.rail-nav {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.rail-nav a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #cbd5d1;
  font-size: 14px;
  font-weight: 880;
  text-decoration: none;
}

.rail-nav a span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 950;
}

.rail-nav a.active,
.rail-nav a:hover {
  border-color: rgba(var(--primary-rgb), 0.28);
  background: rgba(var(--primary-rgb), 0.12);
  color: #fff;
}

.rail-nav a.active span,
.rail-nav a:hover span {
  color: var(--accent-text);
}

.rail-status {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.rail-status span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 900;
}

.rail-status strong {
  color: #fff;
  font-size: 14px;
}

.main-stage {
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  min-height: 0;
}

.site-nav {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 9px 12px 9px 16px;
  background: rgba(8, 12, 11, 0.86);
}

.project-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.project-title span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 900;
}

.project-title strong {
  color: #fff;
  font-size: 16px;
  font-weight: 920;
  white-space: nowrap;
}

.secondary-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.secondary-nav a,
.secondary-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 860;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.secondary-nav a.active,
.secondary-nav a:hover,
.secondary-nav button.active,
.secondary-nav button:hover {
  background: var(--mint);
  color: #fff;
}

.view-panel {
  display: none;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 32%),
    rgba(6, 10, 9, 0.8);
}

.view-panel.active {
  display: block;
}

.hero-section {
  position: relative;
  display: none;
  overflow: hidden;
  height: 100%;
  padding: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 74% 14%, rgba(var(--primary-rgb), 0.18), transparent 34%),
    rgba(4, 7, 7, 0.94);
  background-size:
    80px 80px,
    80px 80px,
    100% 100%,
    auto;
}

.hero-section.active {
  display: block;
}

.design-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 332px;
  grid-template-rows: minmax(0, 1fr) 112px;
  gap: 14px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 14px;
}

.asset-sidebar,
.studio-canvas,
.inspector-panel,
.timeline-dock {
  min-width: 0;
  min-height: 0;
}

.asset-sidebar,
.studio-canvas,
.inspector-card,
.timeline-dock {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 40%),
    rgba(9, 13, 13, 0.9);
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.28);
}

.asset-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
}

.studio-brand {
  display: grid;
  gap: 4px;
  min-height: 54px;
  padding: 10px 8px;
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  border-radius: 7px;
  background: rgba(var(--primary-rgb), 0.12);
}

.studio-brand span {
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 950;
}

.studio-brand strong {
  color: #fff;
  font-size: 15px;
}

.tool-stack {
  display: grid;
  gap: 7px;
}

.tool-stack button {
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: #d7dfdc;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
}

.tool-stack button span {
  color: var(--subtle);
  font-size: 10px;
}

.tool-stack button.active,
.tool-stack button:hover {
  border-color: rgba(var(--primary-rgb), 0.42);
  background: rgba(var(--primary-rgb), 0.14);
  color: #fff;
}

.tool-stack button.active span,
.tool-stack button:hover span {
  color: var(--accent-text);
}

.asset-strip {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.asset-strip article {
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.asset-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 5px;
  object-fit: cover;
}

.asset-strip strong {
  color: #e8efec;
  font-size: 11px;
  text-align: center;
}

.studio-canvas {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  padding: 16px;
}

.canvas-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  min-height: 50px;
  padding: 0 2px 12px;
  border-bottom: 1px solid var(--line);
}

.canvas-toolbar h1 {
  color: #fff;
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 950;
  line-height: 1.08;
}

.canvas-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.canvas-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(300px, 0.82fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 14px;
  min-height: 0;
}

.look-board,
.reference-card,
.decision-card {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 44%),
    rgba(12, 17, 17, 0.9);
  overflow: hidden;
}

.look-board {
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(240px, 0.62fr);
  gap: 16px;
  padding: 16px;
}

.look-photo {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111514;
  overflow: hidden;
}

.look-photo img,
.reference-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.look-photo img {
  object-position: center 38%;
}

.look-brief {
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
}

.look-brief > span,
.reference-card span,
.decision-head span {
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 950;
}

.look-brief h2 {
  color: #fff;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.look-brief p {
  max-width: 420px;
  margin: 0;
  color: #d3dbd8;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.72;
}

.look-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.look-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.12);
  color: #f1f3ff;
  font-size: 12px;
  font-weight: 850;
}

.spec-list {
  display: grid;
  gap: 8px;
  margin: 6px 0 0;
}

.spec-list div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
}

.spec-list dt,
.spec-list dd {
  margin: 0;
  font-size: 12px;
}

.spec-list dt {
  color: var(--subtle);
  font-weight: 900;
}

.spec-list dd {
  color: #fff;
  font-weight: 850;
}

.reference-card {
  position: relative;
}

.reference-card div {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  background: rgba(5, 7, 7, 0.72);
  backdrop-filter: blur(10px);
}

.reference-card strong,
.decision-head strong {
  color: #fff;
  font-size: 14px;
}

.sketch-card img {
  object-position: center;
}

.material-card img {
  object-position: center 42%;
}

.decision-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
}

.decision-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.decision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-height: 0;
}

.decision-grid div {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 76px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.decision-grid strong {
  color: #fff;
  font-size: 15px;
}

.decision-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.board-card,
.material-board {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(11, 16, 16, 0.94);
  overflow: hidden;
}

.board-card-main {
  grid-column: span 2;
  grid-row: span 2;
}

.board-card-fit,
.board-card-pattern {
  min-height: 0;
}

.material-board {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) 1.4fr;
  gap: 8px;
  padding: 10px;
}

.board-card header {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(4, 7, 7, 0.72);
  backdrop-filter: blur(10px);
}

.board-card header span {
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 950;
}

.board-card header strong {
  color: #fff;
  font-size: 12px;
}

.board-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.board-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), transparent 42%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.66), transparent 36%);
}

.board-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  gap: 4px;
}

.board-caption strong {
  color: #fff;
  font-size: 17px;
  line-height: 1.25;
}

.board-caption span {
  color: #d9e2df;
  font-size: 12px;
  font-weight: 760;
}

.material-cell {
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
}

.texture-1 {
  background:
    linear-gradient(135deg, rgba(31, 35, 171, 0.16), transparent),
    repeating-linear-gradient(45deg, #d8d0c2 0 6px, #f4ece1 6px 12px);
}

.texture-2 {
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.72) 0 2px, transparent 3px),
    #998a76;
  background-size: 14px 14px, auto;
}

.texture-3 {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(#463f36, #cbb9a0);
  background-size: 10px 100%, auto;
}

.tone-1 {
  background: #eee5d8;
}

.tone-2 {
  background: #b7a28a;
}

.tone-3 {
  background: #242626;
}

.material-note {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 0 10px;
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  border-radius: 7px;
  background: rgba(var(--primary-rgb), 0.11);
}

.material-note strong {
  color: #fff;
  font-size: 18px;
}

.material-note span {
  color: #dce2ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.inspector-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow: auto;
}

.inspector-card {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.inspector-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.inspector-head span {
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 950;
}

.inspector-head strong {
  color: #fff;
  font-size: 15px;
}

.inspector-panel .design-prompt {
  grid-template-columns: 1fr;
  gap: 9px;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.inspector-panel .design-prompt textarea {
  min-height: 132px;
}

.inspector-panel .prompt-presets {
  max-width: none;
  margin-top: 0;
}

.inspector-panel .design-result {
  max-width: none;
  margin-top: 0;
}

.fit-metrics {
  display: grid;
  gap: 12px;
}

.fit-metrics label {
  gap: 6px;
}

.fit-metrics meter {
  width: 100%;
  height: 8px;
}

.fit-metrics meter::-webkit-meter-bar {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.fit-metrics meter::-webkit-meter-optimum-value {
  border-radius: 999px;
  background: var(--mint);
}

.task-list {
  display: grid;
  gap: 9px;
  padding-left: 0;
  list-style: none;
}

.task-list li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: #d8e1de;
  font-size: 12px;
  font-weight: 820;
}

.task-list li span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.14);
}

.timeline-dock {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

.timeline-dock .module-card {
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 0;
  padding: 10px;
  column-gap: 10px;
  align-content: center;
}

.timeline-dock .module-thumb {
  min-height: 58px;
}

.timeline-dock .module-card h3 {
  margin: 2px 0 0;
  font-size: 14px;
}

.timeline-dock .token-list {
  display: none;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

.hero-command h1,
.view-head h1,
.studio-topbar h1 {
  color: #fff;
  font-size: clamp(34px, 4.5vw, 62px);
  font-weight: 950;
  line-height: 0.98;
}

.command-meta,
.prompt-presets,
.hero-stats,
.brief-tags,
.token-list,
.topbar-meta,
.mini-actions,
.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.command-meta {
  margin: 18px 0 26px;
}

.command-meta span,
.prompt-presets span,
.brief-tags span,
.token-list span,
.topbar-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: #d2dbd7;
  font-size: 12px;
  font-weight: 820;
}

.design-prompt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  padding: 10px;
  border: 1px solid rgba(var(--primary-rgb), 0.5);
  border-radius: 8px;
  background: rgba(10, 16, 15, 0.94);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}

.design-prompt textarea {
  min-height: 82px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  color: #f7fbfa;
  resize: vertical;
}

.design-result {
  display: none;
  width: 100%;
  max-width: 720px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 18, 17, 0.94);
}

.design-result.show {
  display: grid;
  gap: 10px;
}

.design-result article {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 94px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.design-swatch {
  min-height: 74px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background:
    linear-gradient(135deg, #efe6dc 0 27%, #ae9a7d 27% 48%, #29302f 48% 72%, #1f23ab 72%);
}

.design-result strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
}

.design-result small {
  display: inline-flex;
  margin-bottom: 5px;
  color: #8fe8df;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.design-result p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.design-result em {
  display: block;
  margin-top: 6px;
  color: #ffdf9b;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.prompt-presets {
  width: 100%;
  max-width: 720px;
  margin-top: 12px;
}

.command-preview-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 720px;
  margin-top: 22px;
}

.command-preview-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  border: 1px solid var(--line);
  border-radius: 7px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.04);
}

.visual-console {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 0.74fr));
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 154px;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.visual-card {
  position: relative;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b100f;
  overflow: hidden;
}

.visual-card-large {
  grid-row: span 2;
}

.visual-card-wide {
  grid-column: 1 / -1;
}

.visual-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  filter: saturate(0.98) contrast(1.04);
}

.visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(0, 0, 0, 0.78));
}

.visual-card div {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  gap: 4px;
}

.visual-card strong {
  color: #fff;
  font-size: 18px;
}

.visual-card span {
  color: #d9e2df;
  font-size: 13px;
  font-weight: 760;
}

.module-dock {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.module-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  min-height: 122px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(19, 25, 24, 0.9);
  overflow: hidden;
}

.module-card:hover {
  border-color: rgba(var(--primary-rgb), 0.38);
}

.module-thumb {
  grid-row: 1 / 4;
  min-height: 82px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.18)),
    url("assets/garment-sketch-sheet.png") center / cover;
}

.module-tryon .module-thumb,
.fit-shot {
  background-image:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.18)),
    url("assets/petite-look-editorial.png");
  background-position: center 34%;
}

.module-pattern .module-thumb,
.pattern-shot {
  background-image:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.18)),
    url("assets/fabric-material-board.png");
  background-position: center;
}

.module-shoot .module-thumb,
.shoot-shot {
  background-image:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.18)),
    url("assets/shooting-director-board.png");
}

.module-cut .module-thumb,
.cut-shot {
  background-image:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.18)),
    url("assets/rough-cut-project-board.png");
}

.module-content .module-thumb,
.publish-shot {
  background-image:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.18)),
    url("assets/publish-test-board.png");
}

.collection-shot {
  background-image:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.18)),
    url("assets/collection-planner-board.png");
}

.module-card > span {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 950;
}

.module-card h3 {
  margin: 4px 0 8px;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}

.view-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}

.view-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.marketing-board,
.case-section,
.workflow-view {
  padding: 18px;
}

.marketing-console {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(280px, 0.78fr) minmax(360px, 1.1fr);
  grid-auto-rows: minmax(210px, auto);
  gap: 12px;
  min-width: 0;
}

.marketing-brief-card,
.marketing-visual-card,
.marketing-output-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 38%),
    rgba(12, 17, 17, 0.9);
  overflow: hidden;
}

.marketing-brief-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.console-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.console-head span {
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 950;
}

.console-head strong {
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
}

.marketing-brief-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.55;
}

.marketing-brief-card label {
  display: grid;
  gap: 7px;
  color: #dce5e2;
  font-size: 12px;
  font-weight: 880;
}

.marketing-brief-card textarea,
.marketing-brief-card select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}

.marketing-brief-card textarea {
  min-height: 92px;
  padding: 10px;
  resize: vertical;
}

.marketing-brief-card select {
  min-height: 38px;
  padding: 0 10px;
}

.marketing-visual-card {
  position: relative;
  min-height: 100%;
}

.marketing-visual-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 424px;
  object-fit: cover;
  opacity: 0.86;
}

.marketing-visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent 42%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.76), transparent 48%);
}

.marketing-visual-card div {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: grid;
  gap: 6px;
}

.marketing-visual-card span {
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 950;
}

.marketing-visual-card strong {
  color: #fff;
  font-size: 20px;
  line-height: 1.3;
}

.marketing-output-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

.marketing-output-card.wide {
  grid-row: span 2;
}

.marketing-history-card {
  min-height: 210px;
}

.marketing-output-list {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.marketing-output-list.compact {
  align-content: start;
}

.marketing-output-list article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.marketing-output-list span,
.marketing-output-list em {
  color: var(--accent-text);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.marketing-output-list strong {
  color: #fff;
  font-size: 15px;
  line-height: 1.45;
}

.marketing-output-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.marketing-history-item {
  border-color: rgba(var(--primary-rgb), 0.3);
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), transparent 58%),
    rgba(255, 255, 255, 0.045);
}

.history-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}

.history-actions button {
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.history-actions button:hover {
  border-color: rgba(var(--primary-rgb), 0.54);
  background: rgba(var(--primary-rgb), 0.24);
}

.direction-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.direction-grid article {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 430px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(19, 25, 24, 0.9);
  cursor: pointer;
  overflow: hidden;
}

.direction-grid article:hover {
  border-color: rgba(31, 35, 171, 0.58);
  transform: translateY(-1px);
}

.direction-grid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
}

.direction-grid article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.82));
}

.direction-grid strong,
.direction-grid .token-list {
  position: relative;
  z-index: 1;
}

.direction-grid strong {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: 20px;
}

.workflow-shortcuts article {
  min-height: 178px;
}

.workflow-shortcuts img {
  opacity: 0.46;
}

.marketing-handoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(125, 133, 155, 0.2);
  border-radius: 8px;
  background: rgba(10, 15, 22, 0.86);
}

.marketing-handoff span {
  display: block;
  color: var(--mint);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.marketing-handoff strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 14px;
}

.marketing-handoff .primary-button,
.marketing-handoff .secondary-button {
  min-height: 38px;
  white-space: nowrap;
}

.case-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.case-filter button {
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.case-filter button.active,
.case-filter button:hover {
  background: var(--mint);
  color: #fff;
}

.project-filter-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 0.8fr) minmax(150px, 0.7fr) auto;
  gap: 8px;
  align-items: end;
  max-width: 980px;
  margin: -6px 0 14px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(3, 7, 12, 0.34);
}

.project-filter-tools label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.project-filter-tools span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 950;
}

.project-filter-tools input,
.project-filter-tools select {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 12px;
  font-weight: 760;
}

.project-filter-tools button {
  min-height: 34px;
  border: 1px solid rgba(var(--primary-rgb), 0.36);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.14);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 210px;
  gap: 12px;
}

.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.78)),
    url("assets/fashion-design-board.png") center / cover;
  color: #fff;
  overflow: hidden;
}

.case-card.tall {
  grid-row: span 2;
}

.case-card.wide {
  grid-column: span 2;
}

.case-card strong,
.case-card span {
  position: relative;
  z-index: 1;
}

.case-card strong {
  font-size: 18px;
  line-height: 1.25;
}

.case-card span {
  margin-top: 6px;
  color: #dce7e3;
  font-size: 13px;
  line-height: 1.45;
}

.library-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 13px;
  font-weight: 820;
}

.asset-library-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(270px, 0.8fr) minmax(340px, 1.05fr) minmax(360px, 1.1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.asset-upload-card,
.asset-gap-card,
.sample-review-card,
.asset-grid-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 40%),
    rgba(12, 17, 17, 0.9);
}

.sample-review-card.is-focused {
  border-color: rgba(var(--primary-rgb), 0.72);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.18), 0 18px 48px rgba(var(--primary-rgb), 0.18);
}

.asset-upload-card {
  display: grid;
  align-content: start;
  gap: 12px;
}

.asset-upload-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.55;
}

.asset-focus-panel {
  display: grid;
  gap: 8px;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.asset-focus-panel.is-focused {
  border-radius: 8px;
  background: rgba(var(--primary-rgb), 0.12);
}

.asset-focus-summary,
.asset-focus-ready,
.asset-focus-empty {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(var(--primary-rgb), 0.26);
  border-radius: 8px;
  background: rgba(var(--primary-rgb), 0.1);
}

.asset-focus-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.asset-focus-summary div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.asset-focus-summary span {
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 950;
}

.asset-focus-summary strong,
.asset-focus-ready strong,
.asset-focus-empty strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
}

.asset-focus-summary p,
.asset-focus-ready span,
.asset-focus-empty span {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 740;
  line-height: 1.45;
}

.asset-focus-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.asset-focus-actions button,
.asset-focus-ready button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(var(--primary-rgb), 0.5);
  border-radius: 7px;
  background: rgba(var(--primary-rgb), 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 880;
}

.asset-focus-list {
  display: grid;
  gap: 7px;
  max-height: 180px;
  overflow: auto;
}

.asset-focus-row {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.asset-focus-row.critical {
  border-color: rgba(223, 180, 102, 0.45);
  background: rgba(223, 180, 102, 0.08);
}

.asset-focus-row strong {
  color: #fff;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.asset-focus-row span,
.asset-focus-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.4;
}

.asset-focus-row p {
  margin: 0;
  color: #d7dedb;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.45;
}

.asset-focus-copy {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(4, 7, 9, 0.72);
  color: #f1f4f2;
  padding: 9px;
  font-size: 11px;
  line-height: 1.45;
}

.asset-upload-card .upload-field {
  margin: 0;
}

.asset-gap-card,
.sample-review-card,
.asset-grid-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.sample-review-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.sample-review-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  max-height: 320px;
  overflow: auto;
}

.sample-review-summary,
.sample-review-empty,
.sample-review-row {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.sample-review-summary b,
.sample-review-row strong {
  color: #fff;
  font-size: 13px;
}

.sample-review-summary span,
.sample-review-row span,
.sample-review-row em,
.sample-review-empty {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.sample-review-row label {
  display: grid;
  gap: 4px;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 900;
}

.sample-review-row input,
.sample-review-row select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px 8px;
  color: var(--text);
  background: rgba(4, 7, 9, 0.72);
  font: inherit;
}

.sample-review-history {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sample-review-history button {
  border: 1px solid rgba(var(--primary-rgb), 0.34);
  border-radius: 5px;
  padding: 6px 8px;
  color: #e7e5ff;
  background: rgba(var(--primary-rgb), 0.14);
  font-size: 11px;
  font-weight: 850;
}

.asset-gap-list,
.asset-grid {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  max-height: 320px;
  overflow: auto;
}

.asset-gap-list article,
.asset-card,
.asset-empty {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.asset-gap-list article.done {
  border-color: rgba(var(--primary-rgb), 0.34);
  background: rgba(var(--primary-rgb), 0.13);
}

.asset-gap-list article.missing {
  border-color: rgba(223, 180, 102, 0.34);
  background: rgba(223, 180, 102, 0.08);
}

.asset-gap-list strong,
.asset-card strong,
.asset-empty {
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.asset-gap-list span,
.asset-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.asset-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.asset-card img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

.asset-preview {
  width: 100%;
  aspect-ratio: 9 / 12;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.01)),
    #11151c;
}

.asset-preview-empty {
  display: grid;
  place-items: center;
}

.asset-preview-empty span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  letter-spacing: 0;
}

.asset-warning-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.asset-match-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(var(--primary-rgb), 0.34);
  border-radius: 6px;
  padding: 6px;
  background: rgba(var(--primary-rgb), 0.12);
}

.asset-match-suggestion div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.asset-match-suggestion b {
  color: #fff;
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.asset-match-suggestion span {
  color: #aeb8ff;
  font-size: 10px;
  font-weight: 850;
}

.asset-match-suggestion button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(var(--primary-rgb), 0.48);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.22);
  color: #fff;
  font-size: 11px;
  font-weight: 880;
  white-space: nowrap;
}

.asset-match-suggestion em {
  align-self: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 5px 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.asset-warning-list b {
  border: 1px solid rgba(223, 180, 102, 0.34);
  border-radius: 5px;
  padding: 4px 6px;
  color: #efd09a;
  background: rgba(223, 180, 102, 0.08);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 850;
}

.asset-card a {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.asset-card em,
.asset-gap-list em {
  color: #8fe8df;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.asset-gap-list em {
  color: #efd09a;
}

.asset-assign-control {
  display: grid;
  gap: 5px;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 900;
}

.asset-assign-control select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(3, 7, 12, 0.58);
  color: #fff;
  padding: 0 8px;
  font: inherit;
  font-size: 12px;
}

.project-library-grid .project-card {
  min-height: 210px;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(5, 7, 6, 0.06), rgba(5, 7, 6, 0.86)),
    url("assets/rough-cut-project-board.png") center / cover;
}

.project-library-grid {
  grid-auto-rows: auto;
  align-items: start;
}

.delivery-board {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.delivery-board article {
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.16), rgba(255, 255, 255, 0.045));
}

.delivery-board span,
.delivery-board em {
  display: block;
  color: var(--subtle);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.delivery-board strong {
  display: block;
  margin: 6px 0;
  color: #fff;
  font-size: 26px;
  line-height: 1;
}

.template-shelf,
.version-shelf {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.template-shelf-head {
  min-height: 90px;
  padding: 14px;
  border: 1px solid rgba(var(--primary-rgb), 0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.22), rgba(255, 255, 255, 0.045));
}

.template-shelf-head span {
  display: block;
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 950;
}

.template-shelf-head strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 18px;
  line-height: 1.12;
}

.template-card {
  min-height: 190px;
  background:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.82)),
    url("assets/collection-planner-board.png") center / cover;
}

.template-card .project-card-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.version-card {
  min-height: 180px;
  background:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.82)),
    url("assets/rough-cut-project-board.png") center / cover;
}

.version-card .project-card-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-card-kicker,
.project-card-meta,
.project-card-actions,
.project-stage-row,
.project-progress,
.project-next-action {
  position: relative;
  z-index: 1;
}

.project-card-kicker {
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 950;
}

.project-stage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.project-stage-row span {
  color: #8fe8df;
  font-size: 12px;
  font-weight: 950;
}

.project-stage-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(var(--primary-rgb), 0.38);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.18);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.project-stage-pill[data-stage="shooting"] {
  border-color: rgba(255, 183, 77, 0.42);
  background: rgba(255, 183, 77, 0.16);
}

.project-stage-pill[data-stage="rough-cut"] {
  border-color: rgba(143, 232, 223, 0.38);
  background: rgba(143, 232, 223, 0.13);
}

.project-stage-pill[data-stage="review"] {
  border-color: rgba(179, 146, 255, 0.44);
  background: rgba(179, 146, 255, 0.15);
}

.project-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
}

.project-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f23ab, #8fe8df);
}

.project-milestones {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.project-milestones span {
  display: grid;
  place-items: center;
  min-height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.project-milestones span.done {
  border-color: rgba(var(--primary-rgb), 0.42);
  background: rgba(var(--primary-rgb), 0.2);
  color: #fff;
}

.project-next-action {
  margin: 0;
  color: #cfd8dc;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
}

.project-ops-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 6px;
}

.project-ops-summary article {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(3, 7, 12, 0.34);
}

.project-ops-summary article[data-state="ok"] {
  border-color: rgba(var(--primary-rgb), 0.34);
  background: rgba(var(--primary-rgb), 0.12);
}

.project-ops-summary span {
  display: block;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 900;
}

.project-ops-summary strong {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.project-publish-action {
  margin: 0;
  color: #8fe8df;
  font-size: 11px;
  font-weight: 820;
  line-height: 1.45;
}

.project-detail-drawer {
  position: relative;
  z-index: 5;
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(var(--primary-rgb), 0.34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.14), rgba(255, 255, 255, 0.04)),
    rgba(3, 7, 12, 0.34);
}

.project-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.project-detail-head span,
.project-detail-grid span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 950;
}

.project-detail-head strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 18px;
}

.project-detail-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.project-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.project-detail-actions button {
  min-height: 32px;
  border: 1px solid rgba(var(--primary-rgb), 0.34);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.14);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.project-detail-actions button:hover {
  background: rgba(var(--primary-rgb), 0.26);
}

.project-detail-status {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.project-detail-status span,
.project-detail-status em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
}

.project-collab-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.8fr minmax(220px, 1.4fr);
  gap: 8px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background: rgba(2, 5, 10, 0.38);
}

.project-collab-head {
  display: grid;
  gap: 4px;
  align-content: center;
  min-width: 0;
}

.project-collab-head span,
.project-collab-panel label span,
.project-collab-summary em {
  color: var(--subtle);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.project-collab-head strong {
  color: #fff;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.project-collab-head button {
  width: fit-content;
  min-height: 30px;
  margin-top: 4px;
  border: 1px solid rgba(var(--primary-rgb), 0.42);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.22);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.project-collab-panel label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.project-collab-panel input,
.project-collab-panel select,
.project-collab-panel textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 12px;
  font-weight: 760;
}

.project-collab-panel textarea {
  min-height: 58px;
  resize: vertical;
  line-height: 1.45;
}

.project-collab-panel[data-collab-status="blocked"] {
  border-color: rgba(255, 93, 108, 0.46);
  background: linear-gradient(135deg, rgba(255, 93, 108, 0.14), rgba(2, 5, 10, 0.42));
}

.project-collab-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.project-collab-summary span {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-height: 28px;
  max-width: 100%;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.project-collab-summary b {
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.project-collab-summary [data-state="blocked"],
.project-collab-summary [data-state="overdue"] {
  border-color: rgba(255, 93, 108, 0.45);
  background: rgba(255, 93, 108, 0.14);
}

.project-collab-summary [data-state="due-soon"],
.project-collab-summary [data-state="high"] {
  border-color: rgba(255, 191, 87, 0.42);
  background: rgba(255, 191, 87, 0.12);
}

.project-collab-summary [data-state="on-track"],
.project-collab-summary [data-state="ok"] {
  border-color: rgba(var(--primary-rgb), 0.42);
  background: rgba(var(--primary-rgb), 0.12);
}

.project-shoot-sync {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255, 191, 87, 0.25);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255, 191, 87, 0.1), rgba(var(--primary-rgb), 0.06)),
    rgba(2, 5, 10, 0.34);
}

.project-shoot-sync[data-sync-state="ok"] {
  border-color: rgba(var(--primary-rgb), 0.34);
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(255, 255, 255, 0.04)),
    rgba(2, 5, 10, 0.34);
}

.project-shoot-sync-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-shoot-sync-head span,
.project-shoot-gap-list span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 950;
}

.project-shoot-sync-head strong {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 14px;
}

.project-shoot-sync-head em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.project-shoot-sync-head button {
  min-height: 32px;
  border: 1px solid rgba(255, 191, 87, 0.42);
  border-radius: 6px;
  background: rgba(255, 191, 87, 0.14);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.project-shoot-sync[data-sync-state="ok"] .project-shoot-sync-head button {
  border-color: rgba(var(--primary-rgb), 0.42);
  background: rgba(var(--primary-rgb), 0.18);
}

.project-shoot-gap-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.project-shoot-gap-list article {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background: rgba(4, 8, 14, 0.42);
}

.project-shoot-gap-list article[data-state="ok"] {
  border-color: rgba(var(--primary-rgb), 0.34);
  background: rgba(var(--primary-rgb), 0.1);
}

.project-shoot-gap-list strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.project-shoot-gap-list em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 740;
  line-height: 1.35;
}

.project-task-board {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(var(--primary-rgb), 0.08)),
    rgba(2, 5, 10, 0.32);
}

.project-task-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.project-task-head span,
.project-task-title span,
.project-task-row label span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 950;
}

.project-task-head strong {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 14px;
}

.project-task-head em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.project-task-head button {
  min-height: 32px;
  border: 1px solid rgba(var(--primary-rgb), 0.42);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.22);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.project-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.project-task-row {
  display: grid;
  grid-template-columns: 1.15fr 0.75fr 0.9fr 0.95fr;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(4, 8, 14, 0.42);
}

.project-task-row[data-task-status="done"] {
  border-color: rgba(var(--primary-rgb), 0.36);
  background: rgba(var(--primary-rgb), 0.1);
}

.project-task-row[data-task-status="optional"] {
  border-color: rgba(139, 148, 165, 0.28);
  opacity: 0.78;
}

.project-task-row[data-task-status="blocked"] {
  border-color: rgba(255, 93, 108, 0.44);
  background: rgba(255, 93, 108, 0.1);
}

.design-production-regression-readiness {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 196, 92, 0.3);
  background: rgba(255, 196, 92, 0.07);
}

.design-production-regression-readiness[data-ready="true"] {
  border-color: rgba(75, 210, 157, 0.36);
  background: rgba(75, 210, 157, 0.08);
}

.design-production-regression-readiness span,
.design-production-regression-readiness em,
.design-production-regression-readiness small {
  color: var(--muted);
  font-style: normal;
}

.design-production-regression-readiness em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-production-regression-readiness small {
  grid-column: 3;
  font-size: 11px;
}

.design-production-regression-readiness button {
  grid-column: 4;
  grid-row: 1 / span 2;
}

@media (max-width: 780px) {
  .design-production-regression-readiness {
    grid-template-columns: 1fr auto;
  }

  .design-production-regression-readiness em,
  .design-production-regression-readiness small,
  .design-production-regression-readiness button {
    grid-column: 1 / -1;
  }

  .design-production-regression-readiness button {
    grid-row: auto;
  }
}

.project-task-title {
  display: grid;
  gap: 3px;
  align-content: start;
  min-width: 0;
}

.project-task-title strong {
  color: #fff;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.project-task-title em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.project-task-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.project-task-row label.wide {
  grid-column: 1 / -1;
}

.project-task-row input,
.project-task-row select,
.project-task-row textarea {
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 12px;
  font-weight: 760;
}

.project-task-row textarea {
  min-height: 46px;
  resize: vertical;
  line-height: 1.42;
}

.project-export-readiness {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.11), rgba(255, 255, 255, 0.045)),
    rgba(2, 5, 10, 0.34);
}

.project-export-readiness[data-export-state="warn"] {
  border-color: rgba(255, 191, 87, 0.34);
}

.project-export-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.project-export-head span,
.project-export-grid span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 950;
}

.project-export-head strong {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 14px;
}

.project-export-head em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.project-export-head button {
  min-height: 32px;
  border: 1px solid rgba(var(--primary-rgb), 0.44);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.22);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.project-export-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.project-export-grid article {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background: rgba(4, 8, 14, 0.4);
}

.project-export-grid article[data-state="ok"] {
  border-color: rgba(var(--primary-rgb), 0.36);
  background: rgba(var(--primary-rgb), 0.1);
}

.project-export-grid article[data-state="warn"] {
  border-color: rgba(255, 191, 87, 0.38);
  background: rgba(255, 191, 87, 0.1);
}

.project-export-grid article[data-state="missing"] {
  border-color: rgba(255, 93, 108, 0.36);
  background: rgba(255, 93, 108, 0.1);
}

.project-export-grid strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.project-export-grid em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 740;
  line-height: 1.35;
}

.project-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.project-product-dossiers {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) 1fr;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(var(--primary-rgb), 0.24);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.13), rgba(3, 7, 12, 0.44));
}

.project-product-dossiers span {
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 950;
}

.project-product-dossiers strong,
.project-product-dossier-list b {
  display: block;
  color: #fff;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.project-product-dossier-list {
  display: grid;
  gap: 6px;
}

.project-product-dossier-list article {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}

.project-product-dossier-list span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

.project-product-dossier-list button {
  margin-top: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.14);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 900;
}

.project-product-dossier-list button:hover {
  background: rgba(var(--primary-rgb), 0.24);
}

.project-detail-grid article {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(3, 7, 12, 0.32);
}

.project-detail-grid strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.project-detail-grid em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.4;
}

.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.project-card-meta b {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}

.project-card-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.project-clone-panel { grid-template-rows: auto auto auto auto; width: min(620px, calc(100vw - 32px)); }
.project-clone-panel > header,
.project-clone-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(137, 148, 168, 0.16); }
.project-clone-panel > header > div { display: grid; gap: 4px; }
.project-clone-panel > header span { color: #737aff; font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.project-clone-panel > header h2 { margin: 0; color: #f5f7fa; font-size: 20px; }
.project-clone-panel > header p { margin: 0; color: #818b9a; font-size: 10px; line-height: 1.6; }
.project-clone-panel > label { display: grid; gap: 7px; padding: 18px; }
.project-clone-panel > label span { color: #9da6b5; font-size: 10px; font-weight: 800; }
.project-clone-panel > label input { height: 40px; border: 1px solid rgba(113, 123, 148, 0.34); border-radius: 4px; background: #141a23; color: #f3f5f8; padding: 0 11px; font-size: 13px; }
.project-clone-contract { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 9px 14px; margin: 0 18px 18px; padding: 13px; border: 1px solid rgba(113, 123, 148, 0.18); background: #111720; }
.project-clone-contract strong { color: #bec5d0; font-size: 9px; }
.project-clone-contract span { color: #7f8998; font-size: 9px; line-height: 1.5; }
.project-clone-panel > footer { justify-content: flex-end; border-top: 1px solid rgba(137, 148, 168, 0.16); border-bottom: 0; }
.project-clone-panel > footer button { min-width: 98px; min-height: 34px; border: 1px solid rgba(113, 123, 148, 0.3); border-radius: 4px; background: #171d27; color: #dce1e8; cursor: pointer; }
.project-clone-panel > footer button.primary { border-color: #555cff; background: #272dbd; color: #fff; }

.project-asset-copy-panel { grid-template-rows: auto auto auto auto auto; width: min(660px, calc(100vw - 32px)); }
.project-asset-copy-panel > header,
.project-asset-copy-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(137, 148, 168, 0.16); }
.project-asset-copy-panel > header > div { display: grid; gap: 4px; }
.project-asset-copy-panel > header span { color: #737aff; font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.project-asset-copy-panel > header h2 { margin: 0; color: #f5f7fa; font-size: 20px; }
.project-asset-copy-panel > header p { margin: 0; color: #818b9a; font-size: 10px; line-height: 1.6; }
.project-asset-copy-fields { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(150px, 0.75fr); gap: 12px; padding: 18px; }
.project-asset-copy-fields label { display: grid; gap: 7px; }
.project-asset-copy-fields span { color: #9da6b5; font-size: 10px; font-weight: 800; }
.project-asset-copy-fields select { min-width: 0; height: 40px; border: 1px solid rgba(113, 123, 148, 0.34); border-radius: 4px; background: #141a23; color: #f3f5f8; padding: 0 11px; }
.project-asset-copy-panel .project-clone-contract { margin-top: 0; }
.project-asset-copy-empty { display: grid; gap: 6px; margin: 18px; padding: 16px; border: 1px solid rgba(255, 184, 77, 0.28); background: rgba(255, 184, 77, 0.07); }
.project-asset-copy-empty strong { color: #e7ebf1; font-size: 12px; }
.project-asset-copy-empty span { color: #929cab; font-size: 10px; }
.project-asset-copy-error { min-height: 16px; margin: -8px 18px 12px; color: #ff8794; font-size: 10px; }
.project-asset-copy-panel > footer { justify-content: flex-end; border-top: 1px solid rgba(137, 148, 168, 0.16); border-bottom: 0; }
.project-asset-copy-panel > footer button { min-width: 98px; min-height: 34px; border: 1px solid rgba(113, 123, 148, 0.3); border-radius: 4px; background: #171d27; color: #dce1e8; cursor: pointer; }
.project-asset-copy-panel > footer button.primary { border-color: #555cff; background: #272dbd; color: #fff; }
.project-asset-copy-panel > footer button:disabled { opacity: 0.45; cursor: not-allowed; }

.project-card-actions button {
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.project-card-actions button:hover {
  border-color: rgba(var(--primary-rgb), 0.54);
  background: rgba(var(--primary-rgb), 0.22);
}

.case-card.collection-shot {
  background:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.78)),
    url("assets/collection-planner-board.png") center / cover;
}

.case-card.fit-shot {
  background:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.78)),
    url("assets/petite-fit-analysis-board.png") center / cover;
}

.case-card.pattern-shot {
  background:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.78)),
    url("assets/pattern-lab-board.png") center / cover;
}

.case-card.shoot-shot {
  background:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.78)),
    url("assets/shooting-director-board.png") center / cover;
}

.case-card.cut-shot {
  background:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.78)),
    url("assets/rough-cut-project-board.png") center / cover;
}

.case-card.publish-shot {
  background:
    linear-gradient(180deg, rgba(5, 7, 6, 0.02), rgba(5, 7, 6, 0.78)),
    url("assets/publish-test-board.png") center / cover;
}

.studio-topbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 14px;
}

.studio-topbar h1 {
  font-size: 36px;
}

.workspace {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: calc(100% - 86px);
}

.panel,
.output-area {
  background: rgba(12, 18, 17, 0.92);
}

.input-panel {
  min-height: 0;
  max-height: calc(100vh - 180px);
  overflow: auto;
  padding: 18px;
}

.input-panel::-webkit-scrollbar,
.output-area::-webkit-scrollbar,
.view-panel::-webkit-scrollbar {
  width: 8px;
}

.input-panel::-webkit-scrollbar-thumb,
.output-area::-webkit-scrollbar-thumb,
.view-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.brand-block {
  margin-bottom: 6px;
  padding: 2px 0 18px;
  border-bottom: 1px solid var(--line);
}

.brand-block h2 {
  color: #fff;
  font-size: 22px;
  line-height: 1.24;
}

.brief-tags {
  margin-top: 10px;
}

.brief-form {
  display: grid;
}

.form-section {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.form-section:last-of-type {
  border-bottom: 0;
}

.form-section legend {
  width: 100%;
  padding: 0 0 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

label {
  display: grid;
  gap: 7px;
  color: #d8e1de;
  font-size: 12px;
  font-weight: 840;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  color: #f7fbfa;
  outline: none;
}

input,
select {
  min-height: 40px;
  padding: 0 11px;
}

textarea {
  padding: 10px 11px;
  line-height: 1.58;
}

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 17px,
    calc(100% - 12px) 17px;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

option {
  background: #111716;
  color: #fff;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(var(--primary-rgb), 0.62);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.12);
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.account-profile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.account-profile-row select {
  min-width: 0;
}

.button-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
  padding-top: 8px;
}

.primary-button,
.secondary-button,
.ghost-button,
.tab,
.icon-button {
  min-height: 38px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 900;
}

.primary-button {
  border: 1px solid rgba(var(--primary-rgb), 0.9);
  background: var(--mint);
  color: #fff;
}

.primary-button:hover {
  border-color: var(--mint-strong);
  background: var(--mint-strong);
}

.secondary-button {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}

.secondary-button:hover {
  border-color: rgba(var(--primary-rgb), 0.44);
  color: var(--accent-text);
}

.ghost-button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: #d9e2df;
  font-size: 12px;
}

.ghost-button:hover {
  border-color: rgba(var(--primary-rgb), 0.46);
  color: var(--accent-text);
}

.assist-panel {
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.075);
  color: #cfe7e2;
  padding: 11px;
  font-size: 12px;
  font-weight: 680;
  line-height: 1.55;
}

.assist-panel:empty {
  display: none;
}

.assist-panel strong {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 13px;
}

.assist-panel p {
  margin: 0;
}

.assist-panel ul {
  margin: 0;
  padding-left: 18px;
}

.assist-panel em {
  display: block;
  margin-top: 5px;
  color: #ffd3de;
  font-style: normal;
}

.product-warning {
  margin-bottom: 8px;
  color: #ffdf9b;
  font-size: 12px;
  font-weight: 850;
}

.product-brief-card {
  display: grid;
  gap: 9px;
  margin-bottom: 10px;
  padding: 11px;
  border: 1px solid rgba(var(--primary-rgb), 0.32);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(31, 35, 171, 0.22), rgba(12, 16, 20, 0.72));
}

.product-brief-card small {
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.product-brief-card p {
  color: #dfe8f8;
}

.product-brief-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.product-brief-columns div,
.product-brief-title-seeds {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.product-brief-columns span {
  flex-basis: 100%;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 950;
}

.product-brief-columns b,
.product-brief-title-seeds em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  color: #f8fbff;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.script-rewrite-history {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.script-rewrite-history > article,
.script-history-head,
.script-history-list article {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
}

.script-rewrite-history > article {
  padding: 12px;
}

.script-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}

.script-history-head span,
.script-history-list span {
  display: block;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 950;
}

.script-history-head strong,
.script-history-list strong {
  display: block;
  color: #fff;
}

.script-history-head button,
.script-history-actions button {
  min-height: 28px;
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  border-radius: 5px;
  background: rgba(var(--primary-rgb), 0.12);
  color: #f6fbff;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.script-history-list {
  display: grid;
  gap: 8px;
}

.script-history-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.script-history-list em {
  display: block;
  margin-top: 4px;
  color: #b8c2ce;
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}

.script-history-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.product-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.product-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.product-card img {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.product-card small,
.product-card span {
  display: block;
}

.product-card small {
  color: var(--subtle);
  font-weight: 850;
}

.product-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.product-chip-row b {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(var(--primary-rgb), 0.26);
  border-radius: 5px;
  background: rgba(var(--primary-rgb), 0.12);
  color: #f4f7ff;
  font-size: 11px;
  font-weight: 850;
}

.upload-field input {
  min-height: auto;
  padding: 9px;
}

.upload-field input::file-selector-button {
  min-height: 30px;
  margin-right: 10px;
  border: 1px solid rgba(var(--primary-rgb), 0.42);
  border-radius: 5px;
  background: rgba(var(--primary-rgb), 0.12);
  color: #e8fffb;
  cursor: pointer;
  font-weight: 850;
}

.upload-field span {
  color: var(--subtle);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.45;
}

.output-area {
  min-height: 0;
  max-height: calc(100vh - 180px);
  overflow: auto;
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: rgba(12, 18, 17, 0.96);
}

.tab {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 52px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: #aab4b0;
}

.tab:last-child {
  border-right: 0;
}

.tab span {
  color: var(--subtle);
  font-size: 11px;
}

.tab.active {
  background: rgba(var(--primary-rgb), 0.12);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--mint);
}

.tab.active span {
  color: var(--accent-text);
}

.workflow-chain-panel {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(var(--primary-rgb), 0.13), transparent 46%),
    rgba(9, 13, 12, 0.9);
}

.workflow-chain-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.workflow-chain-head div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.workflow-chain-head span,
.workflow-chain-step span {
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.workflow-chain-head strong {
  color: #fff;
  font-size: 16px;
  line-height: 1.3;
}

.workflow-chain-head p,
.workflow-chain-step p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 740;
  line-height: 1.5;
}

.workflow-chain-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.workflow-chain-actions button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(var(--primary-rgb), 0.42);
  border-radius: 7px;
  background: rgba(var(--primary-rgb), 0.18);
  color: #fff;
  font-size: 12px;
  font-weight: 880;
}

.workflow-chain-actions button:last-child {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
}

.workflow-chain-actions button:hover {
  border-color: rgba(var(--primary-rgb), 0.72);
  background: rgba(var(--primary-rgb), 0.28);
}

.workflow-chain-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.workflow-chain-step {
  min-width: 0;
  min-height: 116px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.workflow-chain-step.done {
  border-color: rgba(87, 199, 161, 0.38);
  background: rgba(87, 199, 161, 0.075);
}

.workflow-chain-step.doing {
  border-color: rgba(var(--primary-rgb), 0.45);
  background: rgba(var(--primary-rgb), 0.12);
}

.workflow-chain-step.blocked {
  border-color: rgba(223, 180, 102, 0.48);
  background: rgba(223, 180, 102, 0.09);
}

.workflow-chain-step strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
}

.workflow-chain-step b {
  display: block;
  margin: 6px 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.tab-panel {
  display: none;
  padding: 20px;
}

.tab-panel.active {
  display: block;
}

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

.section-header h2 {
  color: #fff;
  font-size: 24px;
  line-height: 1.2;
}

.icon-button {
  width: 38px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 18px;
}

.icon-button:hover {
  border-color: rgba(var(--primary-rgb), 0.46);
  color: var(--accent-text);
}

.compact-button {
  min-height: 38px;
  padding: 0 12px;
  white-space: nowrap;
}

.result-card {
  display: grid;
  gap: 12px;
}

.block {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  padding: 16px;
  overflow: hidden;
}

.block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--mint);
}

.block h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 16px;
}

.block p,
.block li {
  color: #d4ddda;
  line-height: 1.72;
}

.block p {
  margin: 0 0 9px;
}

.block p:last-child {
  margin-bottom: 0;
}

ol,
ul {
  margin: 0;
  padding-left: 21px;
}

.cut-workbench {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(260px, 0.8fr) minmax(300px, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.cut-assets-panel,
.rough-cut-form {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 14px;
}

.cut-assets-panel {
  align-content: start;
}

.cut-assets-panel div {
  display: grid;
  gap: 6px;
}

.cut-assets-panel span {
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 950;
}

.cut-assets-panel strong {
  color: #fff;
  font-size: 15px;
  line-height: 1.35;
}

.cut-assets-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.cut-status {
  min-height: 100%;
  margin: 0;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080c0b;
  color: #f2f6f5;
  padding: 13px;
  font-size: 13px;
  line-height: 1.55;
  overflow: auto;
}

.cut-status a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 10px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--mint);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.cut-task-history {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.cut-task-history > article,
.cut-task-head,
.cut-task-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.cut-task-history > article {
  padding: 12px;
}

.cut-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.cut-task-head span,
.cut-task-card span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 900;
}

.cut-task-head strong,
.cut-task-card strong,
.cut-task-history > article strong {
  display: block;
  margin-top: 4px;
  color: #fff;
}

.cut-task-head button,
.cut-task-links button {
  min-height: 32px;
  border: 1px solid rgba(var(--primary-rgb), 0.34);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.14);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
}

.cut-task-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cut-task-card {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.cut-task-card em,
.cut-task-card p,
.cut-task-history > article span {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.cut-task-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cut-task-links a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.cut-review-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0 14px;
}

.cut-review-head,
.cut-review-metrics,
.cut-review-section,
.cut-review-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.cut-review-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.cut-review-head span,
.cut-review-section-head span,
.cut-review-metrics span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 950;
}

.cut-review-head strong,
.cut-review-section-head strong,
.cut-review-empty strong {
  display: block;
  margin-top: 4px;
  color: #fff;
}

.cut-review-head p,
.cut-review-note,
.cut-review-empty span,
.cut-review-warning {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.cut-review-actions {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  justify-content: flex-end;
  gap: 7px;
}

.cut-review-actions a,
.cut-review-actions button {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(var(--primary-rgb), 0.34);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.2);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.cut-review-video {
  width: min(280px, 100%);
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #05070c;
}

.cut-review-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.cut-review-metrics article {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  border-radius: 7px;
  background: rgba(var(--primary-rgb), 0.1);
}

.cut-review-metrics strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.cut-review-section,
.cut-review-empty {
  padding: 12px;
}

.cut-review-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.cut-review-timeline,
.cut-review-missing {
  display: grid;
  gap: 7px;
}

.cut-review-row,
.cut-review-missing article {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(3, 7, 12, 0.32);
}

.cut-review-row {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
}

.cut-review-row b {
  display: grid;
  place-items: center;
  min-height: 30px;
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.22);
  color: #fff;
  font-size: 12px;
}

.cut-review-row strong,
.cut-review-missing strong,
.cut-review-voice strong {
  color: #fff;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.cut-review-row span,
.cut-review-row em,
.cut-review-missing span,
.cut-review-voice span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.42;
}

.cut-review-row em {
  color: #8fe8df;
}

.cut-review-editor {
  display: grid;
  grid-template-columns: 112px 96px minmax(0, 1fr);
  gap: 7px;
  margin-top: 8px;
}

.cut-review-editor select,
.cut-review-editor input,
.cut-review-editor textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(3, 7, 12, 0.58);
  color: #fff;
  font: inherit;
  font-size: 12px;
}

.cut-review-editor select,
.cut-review-editor input {
  min-height: 32px;
  padding: 0 8px;
}

.cut-review-editor textarea {
  min-height: 32px;
  resize: vertical;
  padding: 7px 8px;
  line-height: 1.35;
}

.cut-review-voice {
  display: grid;
  gap: 4px;
  margin-top: 9px;
  padding: 9px;
  border-radius: 7px;
  background: rgba(var(--primary-rgb), 0.1);
}

.cut-review-warning {
  color: #efd09a;
}

.cut-review-steps {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.65;
}

.variant-grid,
.shot-grid,
.review-table {
  display: grid;
  gap: 10px;
}

.variant-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.variant-grid article,
.shot-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  padding: 12px;
}

.variant-grid article strong,
.shot-grid article strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
}

.variant-grid article p {
  margin: 0;
}

.shot-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shot-grid article span {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 900;
}

.review-table {
  grid-template-columns: 132px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.review-table span {
  padding: 11px;
  border-bottom: 1px solid var(--line);
  color: #d4ddda;
}

.review-table span:nth-child(odd) {
  background: rgba(var(--primary-rgb), 0.09);
  color: #fff;
  font-weight: 900;
}

.review-table span:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.publish-experiment-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.publish-experiment-header,
.publish-winner,
.publish-variant-card,
.publish-history article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.publish-experiment-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.publish-experiment-header span,
.publish-variant-title span,
.publish-history span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.publish-experiment-header strong,
.publish-winner strong,
.publish-history strong {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 15px;
}

.publish-experiment-header p,
.publish-winner span,
.publish-history em {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
  font-style: normal;
  line-height: 1.45;
}

.publish-experiment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.publish-experiment-actions button {
  min-height: 34px;
  border: 1px solid rgba(var(--primary-rgb), 0.34);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.14);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
}

.publish-experiment-actions button[data-publish-action="save"] {
  background: var(--primary);
}

.publish-winner {
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.22), rgba(255, 255, 255, 0.04));
}

.publish-winner em,
.publish-rates span {
  display: inline-flex;
  margin-top: 8px;
  color: #8fe8df;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.publish-winner p {
  margin: 8px 0 0;
  color: #d6d8ff;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.45;
}

.publish-recap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.publish-recap-grid article,
.publish-notes-field,
.publish-diagnosis {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.publish-recap-grid article {
  display: grid;
  gap: 4px;
  padding: 11px;
}

.publish-recap-grid span,
.publish-notes-field {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 900;
}

.publish-recap-grid strong {
  color: #fff;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.publish-recap-grid em,
.publish-diagnosis span,
.publish-diagnosis em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.42;
}

.publish-notes-field {
  display: grid;
  gap: 7px;
  padding: 11px;
}

.publish-notes-field textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: 0;
  background: rgba(3, 7, 12, 0.52);
  color: #fff;
  padding: 8px;
  font: inherit;
  font-size: 12px;
  resize: vertical;
}

.publish-variant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.publish-variant-card {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.publish-variant-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.publish-variant-title strong {
  color: #8fe8df;
  font-size: 16px;
}

.publish-variant-card label {
  display: grid;
  gap: 5px;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 900;
}

.publish-variant-card input,
.publish-variant-card textarea {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: 0;
  background: rgba(3, 7, 12, 0.52);
  color: #fff;
  padding: 8px;
  font: inherit;
  font-size: 12px;
  resize: vertical;
}

.publish-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.publish-metric-grid input {
  padding: 7px;
}

.publish-rates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.publish-rates span {
  margin: 0;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(var(--primary-rgb), 0.16);
}

.publish-diagnosis {
  display: grid;
  gap: 4px;
  padding: 8px;
}

.publish-diagnosis strong {
  color: #fff;
  font-size: 12px;
}

.publish-diagnosis em {
  color: #8fe8df;
}

.publish-history {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.publish-history article {
  display: grid;
  gap: 5px;
  padding: 11px;
}

.publish-history-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.publish-history-actions button {
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.publish-history-actions button:hover {
  border-color: rgba(var(--primary-rgb), 0.54);
  background: rgba(var(--primary-rgb), 0.24);
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(var(--primary-rgb), 0.36);
  border-radius: 8px;
  background: rgba(8, 12, 11, 0.94);
  color: #fff;
  padding: 10px 14px;
  transition: 0.16s ease;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.app-shell {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  background: #050607;
}

.primary-rail {
  display: none;
}

.main-stage {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.site-nav {
  display: none;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  min-height: 52px;
  padding: 8px 10px;
  border-color: rgba(125, 133, 155, 0.22);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    #090d13;
  box-shadow: none;
}

.project-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-title span,
.project-title strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 6px;
}

.project-title span {
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.045);
  color: #6f7889;
  font-size: 0;
  min-width: 112px;
}

.project-title span::after {
  content: "";
  width: 58px;
  height: 5px;
  border-radius: 999px;
  background: #3c4350;
}

.project-title strong {
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.045);
  color: #cfd5df;
  font-size: 13px;
}

.secondary-nav {
  border-color: rgba(125, 133, 155, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

.secondary-nav a,
.secondary-nav button {
  min-height: 32px;
  padding: 0 16px;
  color: #808895;
  font-size: 12px;
}

.secondary-nav a.active,
.secondary-nav a:hover,
.secondary-nav button.active,
.secondary-nav button:hover {
  background: var(--mint);
  color: #fff;
}

.site-nav > .secondary-button {
  min-height: 34px;
  border-color: rgba(125, 133, 155, 0.24);
  background: rgba(255, 255, 255, 0.045);
}

.hero-section {
  height: 100%;
  padding: 0;
  border-color: rgba(125, 133, 155, 0.24);
  border-radius: 8px;
  background: #070a0f;
  box-shadow: none;
}

.fashion-dashboard {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 12%, rgba(31, 35, 171, 0.2), transparent 26%),
    linear-gradient(180deg, #0c1119, #06090d);
}

.dash-rail {
  display: grid;
  grid-template-rows: 54px repeat(7, 48px) minmax(0, 1fr) 48px;
  align-items: center;
  justify-items: center;
  border-right: 1px solid rgba(125, 133, 155, 0.18);
  background: #080d14;
}

.dash-logo,
.dash-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #758091;
  cursor: pointer;
  font-size: 18px;
}

.dash-logo {
  width: 22px;
  height: 22px;
  border: 2px solid #6f5dff;
  border-radius: 999px;
}

.dash-icon.active,
.dash-icon:hover {
  background: rgba(31, 35, 171, 0.3);
  color: #fff;
  box-shadow: inset 3px 0 0 #ff476d;
}

.rail-bottom {
  align-self: end;
}

.dash-workspace {
  display: grid;
  grid-template-rows: 54px 58px auto auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 14px 14px 18px;
}

.reference-insights-panel {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(125, 133, 155, 0.17);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
    rgba(12, 18, 27, 0.82);
  color: #dce2eb;
  overflow: hidden;
}

.reference-insights-panel strong {
  color: #fff;
  font-size: 12px;
  font-weight: 920;
}

.reference-insights-panel span,
.reference-insights-panel div {
  min-width: 0;
  color: #aeb7c4;
  font-size: 12px;
  line-height: 1.45;
}

.reference-insights-panel div {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

.reference-insights-panel article,
.reference-insights-panel .product-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  max-width: 360px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
}

.reference-insights-panel img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 5px;
}

.reference-insights-panel small,
.reference-insights-panel p,
.reference-insights-panel li {
  font-size: 11px;
  line-height: 1.35;
}

.reference-insights-panel ul {
  margin: 4px 0 0;
  padding-left: 16px;
}

.design-intent-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(125, 133, 155, 0.17);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb), 0.11), transparent 66%),
    rgba(10, 15, 24, 0.84);
  color: #dce2eb;
  overflow: hidden;
}

.design-intent-panel > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
}

.design-intent-panel strong {
  flex: 0 0 auto;
  color: #fff;
  font-size: 12px;
  font-weight: 920;
}

.design-intent-panel span,
.design-intent-panel b {
  flex: 0 0 auto;
  max-width: 220px;
  overflow: hidden;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.045);
  color: #aeb7c4;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-intent-panel b {
  color: #eef1ff;
}

.design-intent-panel button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  border-radius: 5px;
  background: rgba(var(--primary-rgb), 0.2);
  color: #eef1ff;
  font-size: 12px;
  font-weight: 840;
  cursor: pointer;
}

.dash-topbar,
.dash-toolbar,
.dash-panel {
  border: 1px solid rgba(125, 133, 155, 0.17);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
    rgba(12, 18, 27, 0.88);
}

.dash-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  border-color: transparent;
  background: transparent;
}

.dash-topbar .dashboard-prompt {
  flex: 1 1 520px;
  max-width: 660px;
}

.dash-topbar .dashboard-prompt textarea {
  min-height: 30px;
  height: 30px;
  padding: 7px 10px;
  overflow: hidden;
  resize: none;
  white-space: nowrap;
}

.dash-topbar .dashboard-prompt .primary-button {
  min-height: 30px;
  height: 30px;
}

.dash-selects,
.dash-utilities,
.tool-pills,
.color-rack,
.fabric-rack,
.view-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-selects button,
.dash-utilities button,
.tool-pills button,
.view-buttons button {
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  color: #8e96a5;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.dash-selects button {
  min-height: 30px;
  min-width: 126px;
  padding: 0 12px;
  text-align: left;
}

.dash-utilities button {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  background: transparent;
  color: #b9c0cb;
  font-size: 12px;
}

.dash-utilities .add-button {
  width: 30px;
  min-width: 30px;
  padding: 0;
  background: #4338ca;
  color: #fff;
  font-size: 18px;
}

.dash-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) auto auto minmax(260px, 0.92fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

.tool-pills {
  min-width: 0;
  overflow: hidden;
}

.tool-pills button {
  width: 42px;
  height: 34px;
  flex: 0 0 auto;
  font-size: 17px;
}

.tool-pills button.active {
  background: rgba(31, 35, 171, 0.86);
  color: #fff;
}

.color-rack,
.fabric-rack {
  min-height: 38px;
  padding: 0 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.color-rack span,
.palette-panel span {
  display: block;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  background: var(--chip);
}

.fabric-rack span {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.5), transparent 22%),
    linear-gradient(135deg, #b9a690, #3d372f);
}

.fabric-rack span:nth-child(2) {
  background: repeating-linear-gradient(45deg, #efe8dc 0 4px, #a28f7b 4px 8px);
}

.fabric-rack span:nth-child(3) {
  background: radial-gradient(circle, #efe8dc 0 2px, #8b7e70 2px 4px);
  background-size: 8px 8px;
}

.fabric-rack span:nth-child(4) {
  background: linear-gradient(90deg, #d8c4ad 0 3px, #4f443d 3px 6px);
  background-size: 9px 100%;
}

.fabric-rack span:nth-child(5) {
  background: linear-gradient(135deg, #16191e, #9f8f80);
}

.fabric-rack span:nth-child(6) {
  background: #2f2b28;
}

.dashboard-link-intake {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px 72px;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding: 4px;
  border: 1px solid rgba(125, 133, 155, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.dashboard-link-intake textarea {
  width: 100%;
  height: 30px;
  min-height: 30px;
  resize: none;
  border: 0;
  border-radius: 5px;
  outline: 0;
  background: rgba(6, 10, 16, 0.72);
  color: #dce2eb;
  padding: 7px 9px;
  font: inherit;
  font-size: 12px;
  line-height: 1.25;
}

.dashboard-link-intake textarea::placeholder {
  color: rgba(209, 216, 229, 0.46);
}

.dashboard-image-intake {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}

.dashboard-image-intake input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dashboard-image-intake span,
.dashboard-link-intake button {
  border: 1px solid rgba(31, 35, 171, 0.45);
  border-radius: 5px;
  background: rgba(31, 35, 171, 0.72);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.dashboard-image-intake span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 30px;
  background: rgba(255, 255, 255, 0.08);
}

.view-buttons button {
  width: 32px;
  height: 32px;
}

.view-buttons button.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.dash-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1.1fr 1.22fr;
  grid-template-rows: 236px 72px 72px minmax(118px, 1fr) 76px;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.dash-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.mood-panel {
  grid-column: 1;
  grid-row: 1;
}

.sketch-panel {
  grid-column: 2;
  grid-row: 1;
}

.tryon-panel {
  grid-column: 3;
  grid-row: 1;
}

.analytics-panel {
  grid-column: 1;
  grid-row: 2 / span 2;
}

.sku-panel {
  grid-column: 2;
  grid-row: 2 / span 2;
}

.textile-panel {
  grid-column: 3;
  grid-row: 2;
}

.palette-panel {
  grid-column: 3;
  grid-row: 3;
}

.timeline-panel {
  grid-column: 1 / span 2;
  grid-row: 4;
}

.score-panel {
  grid-column: 3;
  grid-row: 4;
}

.project-output-panel {
  grid-column: 1 / -1;
  grid-row: 5;
}

.mood-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 0.58fr;
  grid-template-rows: 1fr 1fr;
  height: 100%;
}

.mood-layout img,
.sketch-panel img,
.textile-panel img,
.sku-panel img,
.look-card img,
.mini-looks img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mood-layout > * {
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.mood-large {
  grid-row: 1 / -1;
  grid-column: 1 / 3;
  object-position: center 34%;
}

.mood-tile {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent),
    url("assets/fabric-material-board.png") center / cover;
}

.sketch-panel {
  position: relative;
  padding: 12px;
}

.panel-label {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(5, 8, 12, 0.72);
  color: #cfd5ff;
  font-size: 11px;
  font-weight: 950;
}

.sketch-panel img {
  border-radius: 6px;
  object-position: center;
}

.tryon-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.look-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 12px;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  overflow: hidden;
}

.look-card img {
  border-radius: 6px;
  object-position: center 34%;
}

.look-card strong {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  z-index: 1;
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  text-overflow: ellipsis;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.66);
  white-space: nowrap;
}

.look-card.active {
  border-color: rgba(31, 35, 171, 0.9);
  box-shadow: 0 0 0 2px rgba(31, 35, 171, 0.2);
}

.look-card:nth-child(2) img {
  filter: brightness(1.1) saturate(0.9);
}

.look-card:nth-child(3) img {
  filter: contrast(0.9) sepia(0.08);
}

.look-card:nth-child(4) img {
  filter: brightness(0.94) saturate(0.82);
}

.look-card:nth-child(5) img {
  filter: sepia(0.15) contrast(1.05);
}

.look-card span {
  border-radius: 999px;
  background: linear-gradient(90deg, #4138cf 0 18%, #c3aa91 18% 34%, #3d4149 34% 100%);
}

.analytics-panel {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 96px;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.donut {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: conic-gradient(#5b4cff 0 68%, #1b2534 68% 100%);
  position: relative;
}

.donut::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 999px;
  background: #0d131c;
}

.donut strong {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 18px;
}

.donut.small {
  width: 78px;
  height: 78px;
}

.donut.small::after {
  inset: 22px;
}

.line-chart {
  display: flex;
  align-items: end;
  gap: 9px;
  height: 90px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 0 8px 8px;
}

.line-chart span {
  width: 12px;
  border-radius: 999px 999px 0 0;
  background: #5147e6;
}

.line-chart span:nth-child(1) { height: 20%; }
.line-chart span:nth-child(2) { height: 34%; }
.line-chart span:nth-child(3) { height: 48%; }
.line-chart span:nth-child(4) { height: 66%; }
.line-chart span:nth-child(5) { height: 88%; }

.legend-stack,
.score-lines {
  display: grid;
  gap: 9px;
}

.legend-stack span,
.score-lines span {
  min-height: 6px;
  border-radius: 999px;
  background: #2d3543;
}

.legend-stack span {
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: #9aa4b3;
  font-size: 11px;
  font-weight: 800;
}

.legend-stack span:nth-child(1),
.score-lines span:nth-child(1) {
  background: #5b4cff;
}

.sku-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.sku-panel div {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 16px;
  gap: 6px;
  min-width: 0;
}

.sku-panel img {
  border-radius: 6px;
}

.sku-panel span {
  border-radius: 999px;
  background: linear-gradient(90deg, #c3aa91 0 24%, #5b4cff 24% 32%, #2c3440 32%);
}

.sku-panel strong {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 24px;
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-shadow: 0 1px 9px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

.textile-panel img {
  object-position: center 42%;
}

.palette-panel {
  display: grid;
  grid-template-columns: repeat(7, 1fr) 1.3fr 1.3fr;
  align-items: center;
  gap: 8px;
  padding: 10px;
}

.palette-panel span {
  width: 100%;
  height: 36px;
  cursor: pointer;
}

.palette-panel span.active,
.color-rack span.active {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.palette-panel i {
  height: 8px;
  border-radius: 999px;
  background: #2f3642;
}

.timeline-panel {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 28px 88px repeat(4, minmax(0, 1fr));
  gap: 9px;
  align-items: center;
}

.timeline-row span {
  color: #8993a3;
  font-size: 15px;
}

.timeline-row em {
  overflow: hidden;
  color: #b5becb;
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-row b {
  height: 12px;
  border-radius: 2px;
  background: #303947;
}

.timeline-row b:nth-child(2) {
  background: #5a4cf0;
}

.timeline-row:nth-child(2) b:nth-child(3),
.timeline-row:nth-child(4) b:nth-child(4) {
  background: #6e6570;
}

.prompt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.prompt-header strong {
  color: #fff;
  font-size: 13px;
}

.prompt-header span {
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 900;
}

.dashboard-prompt {
  grid-template-columns: minmax(0, 1fr) 70px;
  gap: 8px;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-prompt textarea {
  min-height: 74px;
  font-size: 12px;
}

.dashboard-prompt .primary-button {
  min-height: 74px;
}

.prompt-panel .prompt-presets {
  margin-top: 0;
}

.prompt-panel .prompt-presets span {
  min-height: 26px;
  font-size: 11px;
}

.score-panel {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 92px;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.mini-looks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  height: 92px;
}

.mini-looks img {
  border-radius: 6px;
}

.score-lines span {
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: #aeb8c6;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.3;
  white-space: nowrap;
}

.dashboard-result {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: none;
  max-height: 104px;
  overflow: auto;
  margin-top: 10px;
  padding: 8px;
  border-color: rgba(31, 35, 171, 0.46);
  background: rgba(8, 13, 20, 0.96);
  box-shadow: none;
}

.dashboard-result.show {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-result article {
  min-height: 74px;
  grid-template-columns: 46px minmax(0, 1fr);
}

.dashboard-result .design-swatch {
  min-height: 48px;
}

.dashboard-result p {
  font-size: 12px;
  line-height: 1.45;
}

.project-output-panel {
  display: grid;
  grid-template-columns: 150px repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.project-output-panel > div {
  min-width: 0;
}

.project-output-panel strong {
  display: block;
  color: #fff;
  font-size: 13px;
}

.project-output-panel span {
  display: block;
  margin-top: 4px;
  color: #8994a8;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-output-panel button {
  min-height: 38px;
  border: 1px solid rgba(125, 133, 155, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  color: #cbd3df;
  cursor: pointer;
  font-size: 12px;
  font-weight: 860;
}

.project-output-panel button:hover {
  border-color: rgba(31, 35, 171, 0.5);
  color: #fff;
}

.techsheet-editor-panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(1480px, calc(100vw - 32px));
  height: min(900px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid #2b3343;
  border-radius: 8px;
  background: #0d121b;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
  color: #edf1f7;
}

.techsheet-editor-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid #252d3a;
  background: #101621;
}

.techsheet-editor-panel > header span,
.techsheet-meta label > span {
  display: block;
  color: #8d9ab0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.techsheet-editor-panel > header h2 {
  margin: 3px 0 2px;
  font-size: 22px;
  letter-spacing: 0;
}

.techsheet-editor-panel > header p {
  margin: 0;
  color: #a7b0bf;
  font-size: 12px;
}

.techsheet-editor-panel .choice-modal-close {
  width: 34px;
  height: 34px;
  border: 1px solid #303a4b;
  border-radius: 6px;
  background: #171e29;
  color: #dce3ed;
  cursor: pointer;
  font-size: 20px;
}

.techsheet-meta {
  display: grid;
  grid-template-columns: 90px 90px 110px 140px minmax(180px, 1fr) minmax(280px, 1.4fr);
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #252d3a;
}

.techsheet-meta label {
  display: grid;
  gap: 5px;
}

.techsheet-meta input,
.techsheet-meta select,
.techsheet-table input,
.techsheet-table select {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid #303949;
  border-radius: 4px;
  background: #121925;
  color: #edf1f7;
  font: inherit;
  font-size: 12px;
  outline: 0;
}

.techsheet-meta input,
.techsheet-meta select {
  padding: 0 9px;
}

.techsheet-meta input:focus,
.techsheet-meta select:focus,
.techsheet-table input:focus,
.techsheet-table select:focus {
  border-color: #5962ea;
  box-shadow: 0 0 0 2px rgba(31, 35, 171, 0.3);
}

.techsheet-validation {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 7px 10px;
  border-left: 3px solid #dba553;
  background: #181a20;
}

.techsheet-validation[data-ready="true"] {
  border-left-color: #44b894;
}

.techsheet-validation strong,
.techsheet-validation span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.techsheet-validation strong {
  font-size: 13px;
}

.techsheet-validation span {
  margin-top: 2px;
  color: #aab3c2;
  font-size: 11px;
}

.techsheet-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 20px 0;
  border-bottom: 1px solid #252d3a;
}

.techsheet-tabs button {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #8f9caf;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.techsheet-tabs button.active {
  border-bottom-color: #5962ea;
  color: #fff;
}

.techsheet-table-wrap {
  display: none;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 12px 20px 20px;
}

.techsheet-table-wrap.active {
  display: block;
}

.technical-drawing-editor {
  display: grid;
  grid-template-columns: minmax(340px, 0.85fr) minmax(520px, 1.5fr);
  gap: 18px;
  min-height: 100%;
}

.technical-drawing-form {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid #2c3545;
  border-radius: 6px;
  background: #101722;
}

.technical-drawing-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.technical-drawing-form label {
  display: grid;
  gap: 5px;
}

.technical-drawing-form label > span {
  color: #8f9caf;
  font-size: 11px;
  font-weight: 800;
}

.technical-drawing-form input,
.technical-drawing-form textarea {
  width: 100%;
  border: 1px solid #303949;
  border-radius: 4px;
  background: #151d29;
  color: #edf1f7;
  font: inherit;
  font-size: 12px;
  outline: 0;
}

.technical-drawing-form input {
  height: 36px;
  padding: 0 9px;
}

.technical-drawing-form textarea {
  min-height: 72px;
  resize: vertical;
  padding: 9px;
}

.technical-drawing-form input:focus,
.technical-drawing-form textarea:focus {
  border-color: #5962ea;
  box-shadow: 0 0 0 2px rgba(31, 35, 171, 0.3);
}

.technical-drawing-form p {
  margin: 0;
  padding: 10px;
  border-left: 3px solid #dba553;
  background: #181a20;
  color: #b4bdca;
  font-size: 11px;
  line-height: 1.55;
}

.technical-drawing-confirm {
  display: flex !important;
  align-items: center;
  grid-template-columns: none;
}

.technical-drawing-confirm input {
  width: 16px;
  height: 16px;
  accent-color: #5962ea;
}

.technical-drawing-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  height: 100%;
}

.technical-drawing-preview figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #303949;
  border-radius: 6px;
  background: #f6f6f3;
}

.technical-drawing-preview svg {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.technical-drawing-preview .garment {
  fill: #fafafa;
  stroke: #17191e;
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.technical-drawing-preview .seam {
  fill: none;
  stroke: #626a76;
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}

.technical-drawing-preview figcaption {
  padding: 9px 12px;
  border-top: 1px solid #d8d9d7;
  color: #363b43;
  font-size: 11px;
  font-weight: 850;
}

.techsheet-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
}

.techsheet-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 34px;
  padding: 0 7px;
  border-top: 1px solid #303949;
  border-bottom: 1px solid #303949;
  background: #171e2a;
  color: #8e9bb0;
  text-align: left;
  white-space: nowrap;
}

.techsheet-table th:first-child,
.techsheet-table td:first-child {
  border-left: 1px solid #303949;
}

.techsheet-table th:last-child,
.techsheet-table td:last-child {
  border-right: 1px solid #303949;
}

.techsheet-table td {
  padding: 5px;
  border-bottom: 1px solid #252d3a;
  background: #0f151f;
}

.techsheet-table tbody tr:hover td {
  background: #121a27;
}

.techsheet-table input {
  min-width: 72px;
  padding: 0 7px;
  border-color: transparent;
  background: #151d29;
}

.techsheet-table select {
  min-width: 96px;
  padding: 0 7px;
  border-color: transparent;
  background: #151d29;
}

.techsheet-table.bom {
  min-width: 2380px;
}

.techsheet-table.grading {
  min-width: 1380px;
}

.techsheet-table.bom td:nth-child(3),
.techsheet-table.bom td:nth-child(6),
.techsheet-table.bom td:nth-child(18),
.techsheet-table.grading td:nth-last-child(2) {
  min-width: 170px;
}

.techsheet-pane-toolbar {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #2e3849;
  background: #111823;
  color: #9ca8b9;
  font-size: 11px;
}

.techsheet-pane-toolbar button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #3b46b8;
  border-radius: 4px;
  background: #1f23ab;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}

.techsheet-table.measurement th:nth-child(1),
.techsheet-table.measurement td:nth-child(1) {
  width: 80px;
}

.techsheet-table.measurement th:nth-child(2),
.techsheet-table.measurement td:nth-child(2) {
  width: 120px;
}

.techsheet-table.measurement th:nth-child(3),
.techsheet-table.measurement td:nth-child(3) {
  width: 230px;
}

.techsheet-table.operations th:nth-child(3),
.techsheet-table.operations td:nth-child(3),
.techsheet-table.operations th:nth-child(8),
.techsheet-table.operations td:nth-child(8) {
  min-width: 190px;
}

.techsheet-confirm {
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #98a5b8;
  white-space: nowrap;
}

.techsheet-confirm input {
  width: 16px;
  height: 16px;
  accent-color: #5962ea;
}

.techsheet-table [data-techsheet-remove] {
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #8d98a9;
  cursor: pointer;
  font-size: 18px;
}

.techsheet-table [data-techsheet-remove]:hover {
  border-color: #713843;
  background: #25151a;
  color: #ff9da9;
}

.techsheet-add-row {
  min-height: 34px;
  margin-top: 10px;
  padding: 0 12px;
  border: 1px dashed #3c4658;
  border-radius: 4px;
  background: transparent;
  color: #aeb8c7;
  cursor: pointer;
  font-weight: 760;
}

.techsheet-editor-panel > footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #252d3a;
  background: #101621;
}

.techsheet-editor-panel > footer span {
  margin-right: auto;
  color: #8e9aad;
  font-size: 11px;
}

.techsheet-editor-panel > footer button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #343e50;
  border-radius: 5px;
  background: #171e2a;
  color: #dce3ed;
  cursor: pointer;
  font-weight: 800;
}

.techsheet-editor-panel > footer button.primary {
  border-color: #353ac4;
  background: #1f23ab;
  color: #fff;
}

.techsheet-template-source {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 7px 20px;
  border-bottom: 1px solid #252d3a;
  background: #111522;
  color: #aeb8c7;
  font-size: 11px;
}

.techsheet-template-source span {
  color: #7681ff;
  font-size: 9px;
  font-weight: 900;
}

.techsheet-template-source strong {
  color: #edf1f7;
}

.techsheet-template-source em {
  margin-left: auto;
  color: #9aa6b8;
  font-style: normal;
}

.techsheet-template-modal {
  z-index: 224;
}

.techsheet-template-preview-modal,
.techsheet-template-save-modal {
  z-index: 228;
}

.techsheet-template-library,
.techsheet-template-preview,
.techsheet-template-save {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid #30394a;
  border-radius: 8px;
  background: #0d121b;
  color: #edf1f7;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.68);
}

.techsheet-template-library {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1040px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
}

.techsheet-template-preview {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(1120px, calc(100vw - 32px));
  max-height: min(840px, calc(100vh - 32px));
}

.techsheet-template-save {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(620px, calc(100vw - 32px));
}

.techsheet-template-library > header,
.techsheet-template-library > footer,
.techsheet-template-preview > header,
.techsheet-template-preview > footer,
.techsheet-template-save > header,
.techsheet-template-save > footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #252d3a;
  background: #101621;
}

.techsheet-template-library > header,
.techsheet-template-preview > header,
.techsheet-template-save > header {
  align-items: flex-start;
  justify-content: space-between;
}

.techsheet-template-library > header span,
.techsheet-template-preview > header span,
.techsheet-template-save > header span {
  color: #7681ff;
  font-size: 9px;
  font-weight: 900;
}

.techsheet-template-library h2,
.techsheet-template-library p,
.techsheet-template-preview h2,
.techsheet-template-preview p,
.techsheet-template-save h2,
.techsheet-template-save p {
  margin: 0;
}

.techsheet-template-library h2,
.techsheet-template-preview h2,
.techsheet-template-save h2 {
  margin-top: 3px;
  font-size: 21px;
}

.techsheet-template-library > header p,
.techsheet-template-preview > header p,
.techsheet-template-save > header p {
  margin-top: 4px;
  color: #98a4b6;
  font-size: 12px;
}

.techsheet-template-library > header button,
.techsheet-template-preview > header button,
.techsheet-template-save > header button {
  width: 34px;
  height: 34px;
  border: 1px solid #303a4b;
  border-radius: 5px;
  background: #171e29;
  color: #dce3ed;
  cursor: pointer;
  font-size: 20px;
}

.techsheet-template-mode {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 20px;
  border-bottom: 1px solid #252d3a;
  background: #0f151f;
  font-size: 11px;
}

.techsheet-template-mode label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #dbe2ed;
  cursor: pointer;
}

.techsheet-template-mode input {
  accent-color: #5962ea;
}

.techsheet-template-mode span {
  margin-left: auto;
  color: #8995a8;
}

.techsheet-template-library > main {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 14px 20px 20px;
}

.techsheet-template-library article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px auto;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid #2b3444;
  border-left: 3px solid #3b43c8;
  border-radius: 5px;
  background: #111823;
}

.techsheet-template-library article > div,
.techsheet-template-library article > label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.techsheet-template-library article span,
.techsheet-template-library article em,
.techsheet-template-library article label > span {
  color: #8f9caf;
  font-size: 10px;
  font-style: normal;
}

.techsheet-template-library article strong {
  overflow: hidden;
  color: #f1f4f8;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.techsheet-template-library article p {
  overflow: hidden;
  color: #aab4c3;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.techsheet-template-library select,
.techsheet-template-save input,
.techsheet-template-save textarea {
  width: 100%;
  border: 1px solid #303949;
  border-radius: 4px;
  background: #151d29;
  color: #edf1f7;
  font: inherit;
  font-size: 12px;
  outline: 0;
}

.techsheet-template-library select,
.techsheet-template-save input {
  height: 36px;
  padding: 0 9px;
}

.techsheet-template-library article nav {
  display: flex;
  gap: 6px;
}

.techsheet-template-library button,
.techsheet-template-preview button,
.techsheet-template-save button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #343e50;
  border-radius: 5px;
  background: #171e2a;
  color: #dce3ed;
  cursor: pointer;
  font-weight: 800;
}

.techsheet-template-library button.primary,
.techsheet-template-preview button.primary,
.techsheet-template-save button.primary {
  border-color: #353ac4;
  background: #1f23ab;
  color: #fff;
}

.techsheet-template-library button:disabled,
.techsheet-template-preview button:disabled,
.techsheet-template-save button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.techsheet-template-library > footer,
.techsheet-template-preview > footer,
.techsheet-template-save > footer {
  justify-content: flex-end;
  border-top: 1px solid #252d3a;
  border-bottom: 0;
}

.techsheet-template-library > footer span,
.techsheet-template-preview > footer span {
  margin-right: auto;
  color: #8e9aad;
  font-size: 11px;
}

.techsheet-template-empty {
  display: grid;
  place-content: center;
  min-height: 260px;
  text-align: center;
}

.techsheet-template-empty p {
  margin-top: 6px;
  color: #8e9aad;
  font-size: 12px;
}

.techsheet-template-diff-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid #283142;
  background: #283142;
}

.techsheet-template-diff-summary > div {
  display: grid;
  gap: 4px;
  padding: 12px 20px;
  background: #111823;
}

.techsheet-template-diff-summary span {
  color: #8996aa;
  font-size: 10px;
}

.techsheet-template-diff-summary strong {
  font-size: 18px;
}

.techsheet-template-impact {
  display: grid;
  gap: 5px;
  margin: 14px 20px 0;
  padding: 11px 13px;
  border-left: 3px solid #dba553;
  background: #181a20;
}

.techsheet-template-impact p {
  color: #abb5c4;
  font-size: 11px;
  line-height: 1.55;
}

.techsheet-template-diff-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow: auto;
  padding: 14px 20px 20px;
}

.techsheet-template-diff-list article {
  display: grid;
  grid-template-columns: 190px 120px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid #293244;
  border-left: 3px solid #5962ea;
  background: #101722;
  font-size: 11px;
}

.techsheet-template-diff-list article[data-change-kind="added"] {
  border-left-color: #44b894;
}

.techsheet-template-diff-list article[data-change-kind="removed"] {
  border-left-color: #dc6878;
}

.techsheet-template-diff-list article > span {
  color: #98a4b5;
}

.techsheet-template-diff-list article > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.techsheet-template-diff-list del,
.techsheet-template-diff-list ins {
  overflow: hidden;
  padding: 6px 8px;
  border-radius: 3px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.techsheet-template-diff-list del {
  background: #24161b;
  color: #e9a0aa;
}

.techsheet-template-diff-list ins {
  background: #11231e;
  color: #8dd7bd;
}

.techsheet-template-diff-list i {
  color: #68758a;
  font-style: normal;
}

.techsheet-template-save > main {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.techsheet-template-save label {
  display: grid;
  gap: 6px;
}

.techsheet-template-save label span {
  color: #9aa6b8;
  font-size: 11px;
  font-weight: 800;
}

.techsheet-template-save textarea {
  min-height: 90px;
  padding: 9px;
  resize: vertical;
}

.techsheet-template-save > main p {
  padding: 10px 12px;
  border-left: 3px solid #5962ea;
  background: #111823;
  color: #9ca8b9;
  font-size: 11px;
  line-height: 1.5;
}

.techsheet-import-preview {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(1120px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid #30394a;
  border-radius: 8px;
  background: #0d121b;
  color: #edf1f7;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.65);
}

.techsheet-import-preview > header,
.techsheet-import-preview > footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #252d3a;
  background: #101621;
}

.techsheet-import-preview > header {
  justify-content: space-between;
  align-items: flex-start;
}

.techsheet-import-preview > header span {
  color: #8d9ab0;
  font-size: 10px;
  font-weight: 850;
}

.techsheet-import-preview > header h2,
.techsheet-import-preview > header p,
.techsheet-import-preview h3,
.techsheet-import-impact p {
  margin: 0;
}

.techsheet-import-preview > header h2 {
  margin-top: 3px;
  font-size: 22px;
}

.techsheet-import-preview > header p {
  margin-top: 3px;
  color: #9da8b8;
  font-size: 12px;
}

.techsheet-import-preview > header button {
  width: 34px;
  height: 34px;
  border: 1px solid #303a4b;
  border-radius: 5px;
  background: #171e29;
  color: #dce3ed;
  cursor: pointer;
  font-size: 20px;
}

.techsheet-import-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: #283142;
  border-bottom: 1px solid #283142;
}

.techsheet-import-summary div {
  display: grid;
  gap: 5px;
  padding: 13px 20px;
  background: #111823;
}

.techsheet-import-summary span {
  color: #8996aa;
  font-size: 10px;
  font-weight: 800;
}

.techsheet-import-summary strong {
  font-size: 18px;
}

.techsheet-import-impact {
  display: grid;
  gap: 5px;
  margin: 14px 20px 0;
  padding: 12px 14px;
  border-left: 3px solid #dba553;
  background: #181a20;
}

.techsheet-import-impact p,
.techsheet-import-impact em {
  color: #aeb7c5;
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}

.techsheet-import-impact em {
  color: #efbe73;
}

.techsheet-import-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 14px 20px 20px;
}

.techsheet-import-tables section {
  min-width: 0;
}

.techsheet-import-tables h3 {
  margin-bottom: 8px;
  color: #cbd3df;
  font-size: 12px;
}

.techsheet-import-tables table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.techsheet-import-tables th,
.techsheet-import-tables td {
  padding: 8px;
  border: 1px solid #293244;
  text-align: left;
  vertical-align: top;
}

.techsheet-import-tables th {
  background: #171e2a;
  color: #8996aa;
}

.techsheet-import-tables td {
  background: #101722;
  color: #d5dce7;
}

.techsheet-import-preview > footer {
  justify-content: flex-end;
  border-top: 1px solid #252d3a;
  border-bottom: 0;
}

.techsheet-import-preview > footer span {
  margin-right: auto;
  color: #8e9aad;
  font-size: 11px;
}

.techsheet-import-preview > footer button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #343e50;
  border-radius: 5px;
  background: #171e2a;
  color: #dce3ed;
  cursor: pointer;
  font-weight: 800;
}

.techsheet-import-preview > footer button.primary {
  border-color: #353ac4;
  background: #1f23ab;
  color: #fff;
}

@media (max-width: 980px) {
  .techsheet-editor-panel {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
  }

  .techsheet-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-y: auto;
  }

  .techsheet-meta .owner,
  .techsheet-validation {
    grid-column: 1 / -1;
  }

  .techsheet-editor-panel > footer span {
    display: none;
  }

  .technical-drawing-editor,
  .technical-drawing-preview,
  .techsheet-import-tables {
    grid-template-columns: 1fr;
  }

  .techsheet-template-library article,
  .techsheet-template-diff-list article {
    grid-template-columns: 1fr;
  }

  .techsheet-template-mode {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .techsheet-template-mode span {
    width: 100%;
    margin-left: 0;
  }

  .techsheet-template-library article nav {
    flex-wrap: wrap;
  }

  .techsheet-template-source {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .techsheet-template-source em {
    margin-left: 0;
  }

  .techsheet-import-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .technical-drawing-preview figure {
    min-height: 340px;
  }
}

.fashion-dashboard.is-generated .dash-panel[data-panel="score"],
.fashion-dashboard.is-generated .dash-panel[data-panel="publish"] {
  border-color: rgba(31, 35, 171, 0.48);
}

.fashion-dashboard.focus-design .dash-panel:not([data-panel="mood"], [data-panel="style"], [data-panel="palette"]) {
  opacity: 0.58;
}

.fashion-dashboard.focus-tryon .dash-panel:not([data-panel="tryon"], [data-panel="score"], [data-panel="sku"]) {
  opacity: 0.58;
}

.fashion-dashboard.focus-content .dash-panel:not([data-panel="timeline"], [data-panel="publish"], [data-panel="score"]) {
  opacity: 0.58;
}

.fashion-dashboard.focus-assets .dash-panel:not([data-panel="mood"], [data-panel="textile"], [data-panel="palette"], [data-panel="sku"]) {
  opacity: 0.58;
}

.fashion-dashboard.view-board .dash-panel {
  opacity: 1;
}

.fashion-dashboard.view-spec .dash-panel:not([data-panel="style"], [data-panel="sku"], [data-panel="textile"], [data-panel="palette"], [data-panel="output"]) {
  opacity: 0.38;
}

.fashion-dashboard.view-execute .dash-panel:not([data-panel="tryon"], [data-panel="score"], [data-panel="timeline"], [data-panel="publish"], [data-panel="output"]) {
  opacity: 0.38;
}

.fashion-dashboard.view-spec .dash-panel[data-panel="style"],
.fashion-dashboard.view-spec .dash-panel[data-panel="sku"],
.fashion-dashboard.view-spec .dash-panel[data-panel="textile"],
.fashion-dashboard.view-spec .dash-panel[data-panel="palette"],
.fashion-dashboard.view-execute .dash-panel[data-panel="timeline"],
.fashion-dashboard.view-execute .dash-panel[data-panel="publish"],
.fashion-dashboard.view-execute .dash-panel[data-panel="output"] {
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.16) inset;
}

@media (max-width: 1280px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail-brand span,
  .rail-status,
  .rail-nav a {
    justify-items: center;
  }

  .rail-brand strong {
    font-size: 14px;
  }

  .rail-nav a {
    grid-template-columns: 1fr;
    padding: 0 8px;
    font-size: 0;
  }

  .rail-nav a span {
    font-size: 12px;
  }

  .design-studio {
    grid-template-columns: minmax(0, 1fr) 304px;
    grid-template-rows: minmax(0, 1fr) 104px;
  }

  .canvas-grid {
    grid-template-columns: minmax(0, 1.22fr) minmax(260px, 0.78fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.84fr);
  }

  .look-board {
    position: relative;
    display: block;
    padding: 0;
  }

  .look-photo {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .look-brief {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(5, 7, 7, 0.58), rgba(5, 7, 7, 0.88));
    backdrop-filter: blur(12px);
  }

  .look-brief h2 {
    font-size: 24px;
  }

  .look-brief p,
  .spec-list {
    display: none;
  }

  .timeline-dock {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .module-dock,
  .direction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-console {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .asset-library-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-output-card.wide {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .direction-grid article {
    min-height: 360px;
  }

  .workflow-shortcuts article {
    min-height: 170px;
  }

  .cut-workbench {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cut-status {
    grid-column: 1 / -1;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .input-panel,
  .output-area {
    max-height: none;
  }
}

@media (max-width: 840px) {
  body {
    overflow: auto;
  }

  .app-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    padding: 10px;
  }

  .primary-rail {
    display: none;
  }

  .rail-brand {
    min-height: auto;
  }

  .rail-status {
    display: none;
  }

  .rail-nav {
    display: flex;
    overflow-x: auto;
    margin: 0;
  }

  .rail-nav a {
    grid-template-columns: 26px max-content;
    flex: 0 0 auto;
    padding: 0 12px;
    font-size: 13px;
  }

  .account-profile-row {
    grid-template-columns: 1fr;
  }

  .main-stage {
    grid-template-rows: minmax(0, 1fr);
  }

  .site-nav {
    grid-template-columns: 1fr;
  }

  .fashion-dashboard {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }

  .dash-rail {
    display: none;
  }

  .dash-workspace {
    grid-template-rows: auto auto auto;
    padding: 10px;
  }

  .dash-topbar {
    align-items: start;
    flex-direction: column;
    padding: 0;
  }

  .dash-topbar .dashboard-prompt {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }

  .dash-topbar .dashboard-prompt textarea {
    white-space: normal;
  }

  .dash-toolbar {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .tool-pills,
  .color-rack,
  .fabric-rack,
  .view-buttons {
    overflow-x: auto;
  }

  .dash-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .dash-panel {
    min-height: 220px;
  }

  .mood-panel,
  .sketch-panel,
  .tryon-panel,
  .analytics-panel,
  .sku-panel,
  .textile-panel,
  .palette-panel,
  .timeline-panel,
  .prompt-panel,
  .score-panel,
  .project-output-panel {
    grid-column: auto;
    grid-row: auto;
  }

  .mood-panel {
    min-height: 420px;
  }

  .mood-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 120px 120px;
  }

  .mood-large {
    grid-column: auto;
    grid-row: auto;
  }

  .tryon-panel,
  .sku-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .palette-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .timeline-panel,
  .prompt-panel,
  .score-panel,
  .project-output-panel {
    min-height: auto;
  }

  .score-panel,
  .project-output-panel,
  .analytics-panel {
    grid-template-columns: 1fr;
  }

  .secondary-nav {
    overflow-x: auto;
  }

  .view-head,
  .marketing-handoff {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .view-actions {
    justify-content: flex-start;
  }

  .marketing-console,
  .direction-grid,
  .asset-library-panel {
    grid-template-columns: 1fr;
  }

  .asset-grid {
    grid-template-columns: 1fr;
  }

  .marketing-visual-card img {
    min-height: 260px;
  }

  .direction-grid article {
    min-height: 210px;
  }

  .secondary-button {
    width: 100%;
  }

  .view-panel {
    overflow: visible;
  }

  .hero-section {
    overflow: visible;
  }

  .design-studio {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 8px;
  }

  .asset-sidebar,
  .studio-canvas,
  .inspector-panel,
  .timeline-dock {
    grid-column: auto;
    grid-row: auto;
  }

  .asset-sidebar {
    grid-template-rows: auto auto;
  }

  .tool-stack,
  .asset-strip {
    display: flex;
    overflow-x: auto;
  }

  .tool-stack button {
    flex: 0 0 128px;
  }

  .asset-strip article {
    flex: 0 0 92px;
  }

  .asset-strip img {
    aspect-ratio: 1.12 / 1;
  }

  .canvas-toolbar {
    align-items: start;
    flex-direction: column;
  }

  .canvas-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .look-board {
    grid-row: auto;
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .look-photo {
    min-height: 360px;
  }

  .reference-card {
    min-height: 240px;
  }

  .decision-card {
    min-height: auto;
  }

  .board-card,
  .board-card-main,
  .board-card-fit,
  .board-card-pattern {
    grid-column: auto;
    grid-row: auto;
    min-height: 280px;
  }

  .material-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .material-note {
    grid-column: 1 / -1;
    min-height: 76px;
  }

  .inspector-panel {
    overflow: visible;
  }

  .timeline-dock {
    grid-template-columns: 1fr;
  }

  .hero-command h1,
  .view-head h1,
  .canvas-toolbar h1 {
    font-size: 40px;
    line-height: 1.04;
  }

  .visual-console {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .visual-card,
  .visual-card-large {
    min-height: 260px;
  }

  .module-dock,
  .direction-grid,
  .case-grid {
    grid-template-columns: 1fr;
  }

  .case-card,
  .case-card.tall,
  .case-card.wide {
    grid-column: auto;
    grid-row: auto;
    min-height: 220px;
  }

  .studio-topbar,
  .view-head,
  .section-header {
    align-items: start;
    flex-direction: column;
  }

  .tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .field-grid,
  .button-row,
  .cut-workbench,
  .variant-grid,
  .shot-grid,
  .review-table,
  .delivery-board,
  .template-shelf,
  .version-shelf,
  .cut-task-list,
  .publish-experiment-header,
  .publish-variant-grid,
  .publish-history {
    grid-template-columns: 1fr;
  }

  .publish-experiment-actions {
    justify-content: stretch;
  }

  .publish-experiment-actions button {
    flex: 1;
  }

  .header-actions {
    width: 100%;
  }

  .compact-button {
    flex: 1;
  }
}

@media (max-width: 520px) {
  .design-prompt,
  .module-card {
    grid-template-columns: 1fr;
  }

  .design-studio {
    padding: 6px;
  }

  .studio-canvas,
  .inspector-card,
  .timeline-dock {
    padding: 8px;
  }

  .board-card,
  .board-card-main,
  .board-card-fit,
  .board-card-pattern {
    min-height: 230px;
  }

  .material-board {
    min-height: 170px;
  }

  .module-thumb {
    grid-row: auto;
    min-height: 150px;
  }

  .hero-command h1,
  .view-head h1,
  .canvas-toolbar h1 {
    font-size: 32px;
  }

  .tab {
    gap: 5px;
    font-size: 13px;
  }
}

/* 2026-07 product reset: one coherent, data-driven design workspace. */
html,
body {
  height: 100%;
}

body {
  overflow: hidden;
  background: #05070b;
}

.app-shell {
  height: 100dvh;
  min-height: 0;
  padding: 0;
  background: #05070b;
}

.hero-section,
.fashion-dashboard {
  border: 0;
  border-radius: 0;
}

.fashion-dashboard {
  grid-template-columns: 64px minmax(0, 1fr);
  background: #080b11;
}

.dash-rail {
  grid-template-rows: 64px repeat(7, 52px) minmax(0, 1fr) 52px;
  background: #080a0f;
  border-right-color: rgba(146, 154, 177, 0.14);
}

.dash-logo {
  width: 26px;
  height: 26px;
  border-color: #6f73ff;
  box-shadow: inset 0 0 0 5px #080a0f, 0 0 18px rgba(31, 35, 171, 0.4);
}

.dash-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  color: #757d8c;
}

.dash-icon.active,
.dash-icon:hover {
  background: rgba(31, 35, 171, 0.28);
  box-shadow: inset 3px 0 0 #7478ff;
}

.dash-workspace {
  position: relative;
  grid-template-rows: 58px 54px 44px 46px minmax(0, 1fr);
  gap: 8px;
  padding: 10px 12px 12px;
  background:
    linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px),
    #0a0d13;
  background-size: 40px 40px;
}

.dash-topbar {
  display: grid;
  grid-template-columns: 210px minmax(360px, 1fr) auto;
  gap: 12px;
  min-width: 0;
  padding: 0;
}

.dash-selects {
  min-width: 0;
}

.dash-selects button {
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(146, 154, 177, 0.16);
  background: #10151d;
  color: #a9b0bd;
}

#dashboardHomeButton {
  flex: 0 0 64px;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

#dashboardProjectButton {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-topbar .dashboard-prompt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 72px;
  gap: 6px;
  max-width: none;
  min-width: 0;
}

.dash-topbar .dashboard-prompt textarea {
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 9px 12px;
  border: 1px solid rgba(146, 154, 177, 0.2);
  border-radius: 6px;
  background: #111722;
  color: #eef1f7;
}

.dash-topbar .dashboard-prompt button {
  width: 72px;
  height: 36px;
  min-height: 36px;
  border: 1px solid rgba(146, 154, 177, 0.2);
  border-radius: 6px;
  background: #151b26;
  color: #c6cdd9;
  font-weight: 900;
  white-space: nowrap;
}

.dash-topbar .dashboard-prompt .primary-button {
  height: 36px;
  min-height: 36px;
  background: #1f23ab;
  border-color: #383dd2;
  color: #fff;
}

.dash-utilities {
  gap: 6px;
}

.dash-utilities button {
  width: auto;
  min-width: 52px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(146, 154, 177, 0.16);
  background: #10151d;
  color: #b6beca;
  font-size: 11px;
}

.dash-utilities .add-button {
  width: auto;
  min-width: 52px;
  height: 36px;
  padding: 0 10px;
  background: #1f23ab;
  font-size: 11px;
}

.dash-utilities #exportDesignBrief,
.dash-utilities #exportShotList,
.dash-utilities #handoffToDirector,
.dash-utilities #goMarketingFromDesign,
.dash-utilities #goDesignHome,
.dash-utilities #dashboardNotifyButton {
  display: none;
}

.dash-toolbar {
  grid-template-columns: minmax(470px, 1fr) minmax(320px, 0.78fr) auto;
  gap: 12px;
  padding: 7px 8px;
  background: #0d121a;
}

.tool-pills {
  gap: 4px;
  overflow-x: auto;
}

.tool-pills button {
  width: auto;
  height: 36px;
  padding: 0 14px;
  color: #8f98a8;
  font-size: 12px;
  letter-spacing: 0;
  white-space: nowrap;
}

.tool-pills button.active {
  background: #1f23ab;
}

.color-rack,
.fabric-rack {
  display: none;
}

.dashboard-link-intake {
  grid-template-columns: minmax(0, 1fr) 78px 84px 76px;
  min-height: 38px;
  padding: 3px;
  background: #10151d;
}

.dashboard-image-intake span,
.dashboard-link-intake button {
  white-space: nowrap;
}

.view-buttons {
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(146, 154, 177, 0.15);
  border-radius: 6px;
  background: #10151d;
}

.view-buttons button {
  width: auto;
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

.view-buttons button.active {
  background: #252b39;
}

.reference-insights-panel,
.design-intent-panel {
  min-height: 0;
  border-color: rgba(146, 154, 177, 0.14);
  background: rgba(13, 18, 26, 0.96);
}

.reference-insights-panel {
  grid-template-columns: 110px minmax(0, 1fr);
}

.design-intent-panel {
  padding: 6px 10px;
}

.design-intent-panel b {
  background: #171d28;
  border-color: rgba(146, 154, 177, 0.13);
  color: #b9c1cd;
}

.dash-grid {
  grid-template-columns: minmax(320px, 1.15fr) minmax(300px, 1fr) minmax(270px, 0.72fr);
  grid-template-rows: minmax(280px, 1fr) 146px 82px;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.dash-grid > .dash-panel {
  display: none;
  border-color: rgba(146, 154, 177, 0.14);
  background: #0e141d;
  box-shadow: none;
}

.fashion-dashboard.view-board .mood-panel,
.fashion-dashboard.view-board .sketch-panel,
.fashion-dashboard.view-board .analytics-panel,
.fashion-dashboard.view-board .sku-panel,
.fashion-dashboard.view-board .palette-panel,
.fashion-dashboard.view-spec .sketch-panel,
.fashion-dashboard.view-spec .textile-panel,
.fashion-dashboard.view-spec .sku-panel,
.fashion-dashboard.view-spec .palette-panel,
.fashion-dashboard.view-spec .score-panel,
.fashion-dashboard.view-spec .project-output-panel,
.fashion-dashboard.view-execute .mood-panel,
.fashion-dashboard.view-execute .sketch-panel,
.fashion-dashboard.view-execute .project-output-panel {
  display: grid;
  opacity: 1;
}

.fashion-dashboard.view-board .mood-panel {
  grid-column: 1;
  grid-row: 1;
}

.fashion-dashboard.view-board .sketch-panel {
  grid-column: 2;
  grid-row: 1;
}

.fashion-dashboard.view-board .analytics-panel {
  grid-column: 3;
  grid-row: 1;
}

.fashion-dashboard.view-board .sku-panel {
  grid-column: 1 / 3;
  grid-row: 2;
}

.fashion-dashboard.view-board .palette-panel {
  grid-column: 3;
  grid-row: 2;
}

.fashion-dashboard.view-spec .sketch-panel {
  grid-column: 1;
  grid-row: 1;
}

.fashion-dashboard.view-spec .textile-panel {
  grid-column: 2;
  grid-row: 1;
}

.fashion-dashboard.view-spec .score-panel {
  grid-column: 3;
  grid-row: 1;
}

.fashion-dashboard.view-spec .sku-panel {
  grid-column: 1 / 3;
  grid-row: 2;
}

.fashion-dashboard.view-spec .palette-panel {
  grid-column: 3;
  grid-row: 2;
}

.fashion-dashboard.view-spec .project-output-panel {
  grid-column: 1 / -1;
  grid-row: 3;
}

.fashion-dashboard.view-execute .mood-panel {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.fashion-dashboard.view-execute .sketch-panel {
  grid-column: 3;
  grid-row: 1;
}

.fashion-dashboard.view-execute .project-output-panel {
  grid-column: 3;
  grid-row: 2 / 4;
}

.panel-label {
  left: 12px;
  top: 12px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  padding: 6px 8px;
  background: rgba(7, 10, 15, 0.82);
  color: #eef1f7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mood-layout {
  grid-template-columns: minmax(0, 1fr) 116px;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: #202631;
}

.mood-large {
  grid-column: 1;
  grid-row: 1 / 3;
}

.mood-layout img,
.sketch-panel img,
.textile-panel img {
  object-fit: contain;
  object-position: center;
  background: #090d13;
}

.fashion-dashboard.visuals-loading #designOverviewVisual,
.fashion-dashboard.visuals-loading #flatSketchVisual,
.fashion-dashboard.visuals-loading #materialBoardVisual {
  opacity: 0.46;
}

.fashion-dashboard.visuals-ready #designOverviewVisual,
.fashion-dashboard.visuals-ready #flatSketchVisual,
.fashion-dashboard.visuals-ready #materialBoardVisual {
  opacity: 1;
  transition: opacity 160ms ease;
}

.mood-layout .mood-tile {
  display: none;
}

.sketch-panel,
.textile-panel {
  padding: 8px;
}

.sketch-panel img,
.textile-panel img {
  border-radius: 4px;
}

.panel-section-title {
  position: absolute;
  top: 14px;
  left: 14px;
  color: #f3f5f9;
  font-size: 12px;
  font-weight: 900;
}

.analytics-panel {
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: 104px minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 48px 18px 18px;
}

.analytics-panel .line-chart {
  display: none;
}

.analytics-panel .legend-stack {
  width: 100%;
}

.sku-panel {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
}

.sku-panel div {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 5px;
  gap: 8px;
  align-content: center;
  padding: 12px;
  border: 1px solid rgba(146, 154, 177, 0.14);
  border-radius: 5px;
  background: #141a24;
}

.sku-panel img {
  display: none;
}

.sku-panel strong {
  position: static;
  display: block;
  align-self: center;
  color: #e8ebf2;
  font-size: 12px;
  line-height: 1.45;
  text-shadow: none;
  text-overflow: initial;
  white-space: normal;
}

.sku-panel span {
  min-height: 5px;
}

.palette-panel {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 40px;
  align-content: center;
  gap: 8px;
}

.palette-panel span {
  height: 40px;
}

.palette-panel i {
  display: none;
}

.score-panel {
  grid-template-columns: minmax(0, 1fr) 74px;
  align-content: center;
  padding: 16px;
}

.score-panel .mini-looks {
  display: none;
}

.score-lines span {
  min-height: 24px;
  border-radius: 4px;
  background: #171e29;
  white-space: normal;
}

.project-output-panel {
  grid-template-columns: 150px repeat(7, minmax(96px, 1fr));
  padding: 8px;
}

.project-output-panel button {
  min-height: 42px;
}

.dashboard-result {
  display: none;
}

.archived-entry,
#marketing,
#workflow {
  display: none !important;
}

.case-section {
  height: 100dvh;
  overflow: auto;
  padding: 18px 20px 28px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px),
    #0a0d13;
  background-size: 40px 40px;
}

.case-section .view-head {
  min-height: 48px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(146, 154, 177, 0.14);
}

.case-section .view-head .eyebrow {
  margin-bottom: 4px;
  color: #7478ff;
  font-size: 10px;
}

.case-section .view-head h1 {
  font-size: 26px;
  line-height: 1;
}

.case-section .view-actions {
  gap: 6px;
}

.case-section .view-actions button,
.case-section .view-actions a {
  width: auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 5px;
  font-size: 11px;
}

.case-section .case-filter {
  gap: 4px;
  margin-bottom: 8px;
  padding: 4px;
  border: 1px solid rgba(146, 154, 177, 0.14);
  border-radius: 6px;
  background: #0d121a;
}

.case-section .case-filter button {
  min-height: 32px;
  border-radius: 4px;
  font-size: 11px;
}

.case-section .project-filter-tools {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 6px;
  background: #0d121a;
}

.case-section .library-status {
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: 5px;
  background: #10151d;
}

.case-section .asset-library-panel {
  display: none;
}

.case-section.sample-mode .asset-library-panel {
  display: grid;
  grid-template-columns: 1fr;
}

.case-section.sample-mode .case-filter,
.case-section.sample-mode .project-filter-tools,
.case-section.sample-mode .library-status,
.case-section.sample-mode #projectLibraryGrid {
  display: none;
}

.case-section .asset-upload-card,
.case-section .asset-gap-card,
.case-section .asset-grid-card {
  display: none;
}

.case-section .sample-review-card {
  min-height: 0;
}

.case-section .delivery-board {
  gap: 8px;
  margin-bottom: 10px;
}

.case-section .delivery-board article,
.case-section .template-shelf,
.case-section .project-card,
.case-section .project-detail-drawer {
  border-color: rgba(146, 154, 177, 0.14);
  border-radius: 6px;
  background: #0e141d;
  box-shadow: none;
}

.case-section .template-shelf {
  padding: 10px;
}

.case-section .template-shelf-head {
  grid-column: 1 / -1;
  min-height: 0;
  padding: 0 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.case-section .template-shelf-head strong {
  margin-top: 3px;
  font-size: 15px;
}

.case-section .template-shelf-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.template-shelf-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.template-shelf-tools input {
  width: min(280px, 34vw);
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(146, 154, 177, 0.22);
  border-radius: 5px;
  background: #0a0f16;
  color: #eef1f6;
}

.template-shelf-tools button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(146, 154, 177, 0.2);
  border-radius: 5px;
  background: #131a24;
  color: #9da7b6;
}

.template-shelf-tools button[aria-pressed="true"] {
  border-color: rgba(var(--primary-rgb), 0.8);
  background: rgba(var(--primary-rgb), 0.32);
  color: #fff;
}

.case-section .template-card {
  position: relative;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-content: start;
  min-height: 210px;
  padding-left: 132px;
  overflow: hidden;
  background: #0e141d;
}

.template-card-cover {
  position: absolute;
  inset: 14px auto 14px 14px;
  width: 104px;
  height: calc(100% - 28px);
  border: 1px solid rgba(146, 154, 177, 0.18);
  border-radius: 5px;
  object-fit: cover;
  object-position: center top;
}

.case-section .template-card > :not(.template-card-cover) {
  grid-column: 2;
}

.case-section .template-card:not(:has(.template-card-cover)) {
  display: block;
  padding-left: 14px;
}

.case-section .template-card .project-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
}

.template-empty-state {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 18px;
  border: 1px dashed rgba(146, 154, 177, 0.22);
  border-radius: 6px;
  background: #0c1118;
}

.template-empty-state strong {
  color: #fff;
}

.template-empty-state span {
  color: #8f99a8;
  font-size: 12px;
}

.template-manager-panel {
  width: min(920px, calc(100vw - 32px));
}

.template-manager-body {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  gap: 18px;
  padding: 18px;
}

.template-manager-preview {
  display: grid;
  gap: 12px;
}

.template-manager-preview > img,
.template-manager-preview > div:first-child {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(146, 154, 177, 0.2);
  border-radius: 6px;
  background: #090e15;
  object-fit: cover;
  object-position: center top;
}

.template-manager-preview > div:first-child {
  display: grid;
  place-content: center;
  gap: 5px;
  text-align: center;
}

.template-manager-preview dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 0;
}

.template-manager-preview dl div {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(146, 154, 177, 0.16);
  border-radius: 5px;
  background: #101720;
}

.template-manager-preview dt,
.template-manager-preview dd {
  margin: 0;
}

.template-manager-preview dt {
  color: #7f8998;
  font-size: 10px;
}

.template-manager-preview dd {
  margin-top: 4px;
  overflow: hidden;
  color: #eef1f6;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-manager-form {
  display: grid;
  align-content: start;
  gap: 12px;
}

.template-manager-form label {
  display: grid;
  gap: 6px;
  color: #9da7b6;
  font-size: 11px;
}

.template-manager-form input,
.template-manager-form textarea {
  width: 100%;
  border: 1px solid rgba(146, 154, 177, 0.22);
  border-radius: 5px;
  background: #0a0f16;
  color: #f4f6fa;
  resize: vertical;
}

.template-manager-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-manager-tags span {
  padding: 5px 7px;
  border: 1px solid rgba(146, 154, 177, 0.18);
  border-radius: 4px;
  background: #121923;
  color: #aeb7c4;
  font-size: 10px;
}

.template-manager-form > p {
  color: #808a99;
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .case-section .template-shelf-head,
  .template-shelf-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .template-shelf-tools input {
    width: 100%;
  }

  .template-manager-body {
    grid-template-columns: 1fr;
  }
}

/* Design production follows the creation/result/properties rhythm of the
   benchmark product while keeping Jingzhi's white and blue system. */
.design-production-studio.lightchain-design-studio {
  grid-template-columns: 280px minmax(520px, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  background: #f5f7fc;
}

.lightchain-design-left,
.lightchain-design-right,
.lightchain-design-center {
  min-width: 0;
  min-height: 0;
}

.lightchain-design-left,
.lightchain-design-right {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  overflow-y: auto;
  background: #f7f9fd;
}

.lightchain-design-left { border-right: 1px solid #dfe4f0; }
.lightchain-design-right { border-left: 1px solid #dfe4f0; }

.lightchain-control-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dce2ef;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 5px 18px rgba(38, 48, 91, 0.05);
}

.lightchain-control-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lightchain-control-card > header strong {
  color: #171d3a;
  font-size: 13px;
}

.lightchain-control-card > header span {
  padding: 3px 6px;
  border-radius: 3px;
  background: #edf0f7;
  color: #707b91;
  font-size: 8px;
  font-weight: 800;
}

.lightchain-control-card.is-required > header span {
  background: #e8eaff;
  color: #1f23ab;
}

.lightchain-choice-button,
.lightchain-reference-upload {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 9px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px dashed #b8c1d7;
  border-radius: 5px;
  background: #fafbfe;
  text-align: left;
}

.lightchain-choice-button b,
.lightchain-reference-upload b {
  grid-row: 1 / span 2;
  color: #1f23ab;
  font-size: 17px;
}

.lightchain-choice-button span,
.lightchain-reference-upload span {
  color: #252c49;
  font-size: 10px;
  font-weight: 800;
}

.lightchain-choice-button em {
  color: #7b8599;
  font-size: 9px;
  font-style: normal;
}

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

.lightchain-reference-grid img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid #e0e5f0;
  border-radius: 4px;
  object-fit: cover;
}

.lightchain-reference-grid p {
  grid-column: 1 / -1;
  margin: 0;
  color: #858fa3;
  font-size: 9px;
  line-height: 1.55;
}

.lightchain-material-summary > button,
.lightchain-current-style {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #dce2ef;
  border-radius: 4px;
  background: #fafbfe;
  text-align: left;
}

.lightchain-material-summary > button strong,
.lightchain-current-style strong { color: #252c49; font-size: 10px; }
.lightchain-material-summary > button em,
.lightchain-current-style span { color: #7c869b; font-size: 8px; font-style: normal; }

.lightchain-palette-button {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
}

.lightchain-palette-button span {
  display: flex;
  gap: 4px;
  color: #69748b;
  font-size: 9px;
}

.lightchain-palette-button i {
  width: 24px;
  height: 24px;
  border: 1px solid #cfd6e4;
  border-radius: 3px;
  background: var(--swatch);
}

.lightchain-design-center {
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr) auto;
  overflow: hidden;
  background: #ffffff;
}

.lightchain-design-center > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid #e1e5ef;
}

.lightchain-design-center > header > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.lightchain-design-center > header strong { color: #171d3a; font-size: 13px; }
.lightchain-design-center > header span { color: #7d879b; font-size: 8px; }
.lightchain-design-center > header button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #1f23ab;
  border-radius: 4px;
  background: #ffffff;
  color: #1f23ab;
  font-size: 9px;
  font-weight: 800;
}

.lightchain-design-results {
  min-height: 0;
  padding: 18px;
  overflow: auto;
  background:
    linear-gradient(rgba(31,35,171,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,35,171,.025) 1px, transparent 1px),
    #f8f9fd;
  background-size: 32px 32px;
}

.lightchain-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lightchain-result-grid > article {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 42px;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid #dbe1ed;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(35, 45, 87, 0.08);
}

.lightchain-result-grid > article.is-selected {
  border-color: #1f23ab;
  box-shadow: 0 0 0 1px #1f23ab, 0 10px 28px rgba(31, 35, 171, 0.12);
}

.lightchain-result-grid > article.is-stale { opacity: .62; }

.lightchain-result-image {
  min-height: 0;
  overflow: hidden;
  border: 0;
  background: #f1f3f8;
}

.lightchain-result-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 180ms ease;
}

.lightchain-result-image:hover img { transform: scale(1.018); }

.lightchain-result-grid article > footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-top: 1px solid #e1e5ef;
}

.lightchain-result-grid article > footer button {
  display: grid;
  gap: 2px;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid #e1e5ef;
  background: #ffffff;
  color: #59647b;
  font-size: 8px;
  text-align: left;
}

.lightchain-result-grid article > footer button:first-child { border-left: 0; }
.lightchain-result-grid article > footer strong { overflow: hidden; color: #242b47; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.lightchain-result-grid article > footer span { color: #7d879b; font-size: 7px; }

.lightchain-design-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  min-height: 100%;
  text-align: center;
}

.lightchain-design-empty span { color: #1f23ab; font: 800 8px/1 ui-monospace, monospace; }
.lightchain-design-empty strong { color: #171d3a; font-size: 20px; }
.lightchain-design-empty p { max-width: 360px; margin: 0; color: #727d92; font-size: 10px; line-height: 1.6; }
.lightchain-design-empty button,
.lightchain-generate-panel > button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #1f23ab;
  border-radius: 4px;
  background: #1f23ab;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
}
.lightchain-design-empty button:disabled,
.lightchain-generate-panel > button:disabled { border-color: #cbd2e0; background: #e5e8ef; color: #929bad; }

.lightchain-generation-activity {
  display: grid;
  gap: 7px;
  padding: 10px 14px;
  border-top: 1px solid #e1e5ef;
  background: #ffffff;
}
.lightchain-generation-activity > header { display: flex; align-items: center; justify-content: space-between; }
.lightchain-generation-activity > header strong { color: #313951; font-size: 9px; }
.lightchain-generation-activity > header button { border: 0; background: transparent; color: #1f23ab; font-size: 8px; }
.lightchain-generation-activity > div { display: flex; gap: 6px; overflow-x: auto; }
.lightchain-generation-activity > div > button {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #d8deeb;
  border-radius: 4px;
  background: #f8f9fc;
  color: #646f85;
  font-size: 7px;
}
.lightchain-generation-activity > div > button strong { color: #2d354f; font-size: 7px; }
.lightchain-generation-activity > div > button em { color: #8992a5; font-size: 7px; font-style: normal; }

.lightchain-style-card > div,
.lightchain-keyword-card > div { display: flex; flex-wrap: wrap; gap: 6px; }
.lightchain-style-card > div button,
.lightchain-keyword-card > div button {
  min-height: 27px;
  padding: 0 8px;
  border: 1px solid #d6dce8;
  border-radius: 4px;
  background: #ffffff;
  color: #626d84;
  font-size: 8px;
}
.lightchain-style-card > div button[aria-pressed="true"],
.lightchain-keyword-card > div button[aria-pressed="true"] { border-color: #1f23ab; background: #eef0ff; color: #1f23ab; }
.lightchain-keyword-card textarea {
  min-height: 150px;
  resize: vertical;
  border: 1px solid #d4dae7;
  border-radius: 5px;
  background: #fafbfe;
  color: #202742;
  padding: 11px;
  font-size: 10px;
  line-height: 1.55;
}

.lightchain-generate-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dce2ef;
  border-radius: 6px;
  background: #ffffff;
}
.lightchain-generate-panel > div { display: grid; gap: 3px; }
.lightchain-generate-panel > div span { color: #2d354f; font-size: 9px; font-weight: 800; }
.lightchain-generate-panel > div em { color: #7d879b; font-size: 8px; font-style: normal; }
.lightchain-generate-panel > button { width: 100%; }
.lightchain-generate-panel > button span { margin-left: 8px; color: #dfe1ff; font-size: 8px; }

.design-image-editor-modal {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
}
.design-image-editor-backdrop { position: absolute; inset: 0; background: rgba(25, 31, 55, .66); backdrop-filter: blur(5px); }
.design-image-editor-modal > section {
  position: relative;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr) 54px;
  width: min(1120px, calc(100vw - 44px));
  height: min(820px, calc(100vh - 44px));
  overflow: hidden;
  border: 1px solid #d9dfeb;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(17, 23, 48, .3);
}
.design-image-editor-modal > section > header,
.design-image-editor-modal > section > footer { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #e0e5ef; }
.design-image-editor-modal > section > header > div { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 8px; }
.design-image-editor-modal header span { color: #1f23ab; font: 800 8px/1 ui-monospace, monospace; }
.design-image-editor-modal header strong { color: #171d3a; font-size: 13px; }
.design-image-editor-modal header em { color: #7d879b; font-size: 8px; font-style: normal; }
.design-image-editor-modal header > button { width: 32px; height: 32px; border: 1px solid #d8deeb; border-radius: 4px; background: #ffffff; color: #4f5970; }
.design-image-editor-modal > section > main { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; background: #f4f6fb; }
.design-image-editor-stage { display: grid; place-items: center; min-height: 0; padding: 20px 20px 142px; overflow: hidden; }
.design-image-editor-stage img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 34px rgba(40, 48, 80, .16)); }
.design-image-editor-prompt {
  position: absolute;
  right: 50%;
  bottom: 82px;
  display: grid;
  gap: 8px;
  width: min(620px, calc(100% - 48px));
  padding: 12px;
  transform: translateX(50%);
  border: 1px solid #4b52d4;
  border-radius: 7px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 15px 38px rgba(31,35,80,.16);
}
.design-image-editor-prompt textarea { resize: none; border: 0; outline: 0; background: transparent; color: #202742; font-size: 10px; line-height: 1.55; }
.design-image-editor-prompt > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.design-image-editor-prompt span { color: #7a8498; font-size: 8px; }
.design-image-editor-prompt button { min-height: 30px; padding: 0 14px; border: 1px solid #1f23ab; border-radius: 4px; background: #1f23ab; color: #ffffff; font-size: 9px; font-weight: 800; }
.design-image-editor-tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; padding: 10px 16px; border-top: 1px solid #dfe4ee; background: #ffffff; }
.design-image-editor-tools button { display: grid; gap: 2px; min-height: 50px; padding: 7px 9px; border: 1px solid #d9dfeb; border-radius: 4px; background: #ffffff; text-align: left; }
.design-image-editor-tools button:hover { border-color: #1f23ab; background: #f2f3ff; }
.design-image-editor-tools b { color: #252c48; font-size: 9px; }
.design-image-editor-tools span { color: #7a8498; font-size: 7px; }
.design-image-editor-modal > section > footer { justify-content: flex-end; gap: 8px; border-top: 1px solid #e0e5ef; border-bottom: 0; }
.design-image-editor-modal > section > footer button { min-height: 31px; padding: 0 11px; border: 1px solid #d2d8e5; border-radius: 4px; background: #ffffff; color: #515c73; font-size: 9px; font-weight: 800; }
.design-image-editor-modal > section > footer button.primary { border-color: #1f23ab; background: #1f23ab; color: #ffffff; }

@media (max-width: 1180px) {
  .design-production-studio.lightchain-design-studio { grid-template-columns: 236px minmax(440px, 1fr) 278px; }
  .lightchain-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
  .design-production-studio.lightchain-design-studio { display: block; overflow-y: auto; }
  .lightchain-design-left,
  .lightchain-design-right { overflow: visible; border: 0; }
  .lightchain-design-center { min-height: 720px; }
  .lightchain-result-grid { grid-template-columns: minmax(0, 1fr); }
  .design-image-editor-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.canvas-reference-genes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.canvas-reference-genes > div {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8e98a8;
  font-size: 8px;
}

.canvas-reference-genes > div strong {
  color: #68ded0;
}

.canvas-reference-genes > button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1px 6px;
  align-items: center;
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(95, 105, 241, 0.34);
  border-radius: 3px;
  background: rgba(31, 35, 171, 0.12);
  color: #e5e9ef;
  text-align: left;
  cursor: pointer;
}

.canvas-reference-genes img {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  object-fit: cover;
}

.canvas-reference-genes span,
.canvas-reference-genes em {
  overflow: hidden;
  font-size: 7px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-reference-genes em {
  color: #8993a4;
}

.canvas-reference-gene-empty {
  display: grid;
  gap: 2px;
  margin-top: 7px;
  padding: 7px 8px;
  border-left: 2px solid #f0a84b;
  background: rgba(240, 168, 75, 0.08);
}

.canvas-reference-gene-empty strong {
  color: #e9edf3;
  font-size: 8px;
}

.canvas-reference-gene-empty span {
  color: #929cac;
  font-size: 7px;
  line-height: 1.45;
}

.reference-gene-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1180px, calc(100vw - 34px));
  max-height: min(850px, calc(100vh - 34px));
}

.reference-gene-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.72fr);
  min-height: 0;
  overflow: hidden;
}

.reference-gene-source {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  border-right: 1px solid rgba(137, 148, 168, 0.16);
  background: #080d14;
}

.reference-gene-thumbs {
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-y: auto;
}

.reference-gene-thumbs button {
  position: relative;
  height: 72px;
  padding: 2px;
  border: 1px solid rgba(137, 148, 168, 0.22);
  border-radius: 3px;
  background: #111720;
  cursor: pointer;
}

.reference-gene-thumbs button[aria-pressed="true"] {
  border-color: #747bff;
  box-shadow: 0 0 0 1px #1f23ab;
}

.reference-gene-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reference-gene-thumbs span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 2px 4px;
  background: rgba(3, 7, 12, 0.82);
  color: #fff;
  font-size: 7px;
}

.reference-gene-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 430px;
  border: 1px solid rgba(137, 148, 168, 0.24);
  border-radius: 4px;
  background: #030609;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}

.reference-gene-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.reference-gene-stage > div {
  position: absolute;
  z-index: 2;
  border: 2px solid #7c82ff;
  background: rgba(31, 35, 171, 0.18);
  box-shadow: 0 0 0 9999px rgba(2, 5, 9, 0.58);
  pointer-events: none;
}

.reference-gene-stage > span {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 3;
  padding: 5px 7px;
  border-radius: 3px;
  background: rgba(3, 7, 12, 0.88);
  color: #d9deea;
  font-size: 8px;
  pointer-events: none;
}

.reference-gene-selection-status {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-left: 2px solid #6971ff;
  background: rgba(31, 35, 171, 0.12);
}

.reference-gene-selection-status strong,
.reference-gene-selection-status span {
  font-size: 8px;
}

.reference-gene-selection-status span {
  color: #929cac;
}

.reference-gene-controls {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
}

.reference-gene-controls label,
.reference-gene-mode,
.reference-gene-presets {
  display: grid;
  gap: 6px;
  color: #919baa;
  font-size: 9px;
  font-weight: 800;
}

.reference-gene-presets > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.reference-gene-presets button {
  min-height: 32px;
  border: 1px solid rgba(137, 148, 168, 0.24);
  border-radius: 4px;
  background: #111822;
  color: #aeb7c5;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.reference-gene-presets button[aria-pressed="true"] {
  border-color: #6870ff;
  background: rgba(31, 35, 171, 0.45);
  color: #fff;
}

.reference-gene-controls input,
.reference-gene-controls select,
.reference-gene-controls textarea {
  width: 100%;
  border: 1px solid rgba(137, 148, 168, 0.27);
  border-radius: 4px;
  background: #090f17;
  color: #eef1f6;
  padding: 9px;
  font: inherit;
  line-height: 1.5;
}

.reference-gene-mode > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.reference-gene-mode button {
  min-height: 36px;
  border: 1px solid rgba(137, 148, 168, 0.24);
  border-radius: 4px;
  background: #111822;
  color: #aeb7c5;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.reference-gene-mode button[aria-pressed="true"] {
  border-color: #6870ff;
  background: #1f23ab;
  color: #fff;
}

.reference-gene-rights {
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  line-height: 1.5;
}

.reference-gene-rights input {
  width: 14px;
  margin-top: 2px;
}

.reference-gene-error {
  min-height: 18px;
  color: #f27b8e;
  font-size: 8px;
}

.reference-gene-saved {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(137, 148, 168, 0.16);
}

.reference-gene-saved > div {
  display: flex;
  justify-content: space-between;
  color: #8993a2;
  font-size: 8px;
}

.reference-gene-saved > article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(137, 148, 168, 0.18);
  border-radius: 3px;
  background: #0a1018;
}

.reference-gene-saved article img {
  width: 52px;
  height: 52px;
  object-fit: cover;
}

.reference-gene-saved article div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.reference-gene-saved article strong,
.reference-gene-saved article span,
.reference-gene-saved article em {
  overflow: hidden;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-gene-saved article span,
.reference-gene-saved article em {
  color: #8f99a8;
}

.reference-gene-saved article button {
  border: 0;
  background: transparent;
  color: #ef7588;
  font-size: 8px;
  cursor: pointer;
}

.reference-gene-saved > p {
  margin: 0;
  color: #7f8998;
  font-size: 8px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .reference-gene-body {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }

  .reference-gene-source {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 420px;
    border-right: 0;
    border-bottom: 1px solid rgba(137, 148, 168, 0.16);
  }

  .reference-gene-stage {
    min-height: 330px;
  }

  .reference-gene-panel > footer > span {
    display: none;
  }
}

.workflow-template-setup-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 18px;
}

.workflow-template-setup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 10, 0.84);
  backdrop-filter: blur(10px);
}

.workflow-template-setup-modal > section {
  position: relative;
  width: min(1480px, calc(100vw - 36px));
  height: min(900px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: #f5f6fb;
  background: #090c13;
  border: 1px solid rgba(117, 128, 158, 0.32);
  border-radius: 8px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.58);
}

.workflow-template-setup-modal > section > header,
.workflow-template-setup-modal > section > footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: #0d111a;
  border-color: rgba(117, 128, 158, 0.22);
}

.workflow-template-setup-modal > section > header {
  justify-content: space-between;
  border-bottom: 1px solid rgba(117, 128, 158, 0.22);
}

.workflow-template-setup-modal > section > footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(117, 128, 158, 0.22);
}

.workflow-template-setup-modal > section > footer > p {
  margin: 0 auto 0 0;
  color: #aeb6ca;
  font-size: 12px;
}

.workflow-template-setup-modal header span,
.workflow-template-assets > div:first-child span,
.workflow-template-steps-head span,
.workflow-template-summary > div:first-child span,
.workflow-template-prompt > span {
  display: block;
  margin-bottom: 4px;
  color: #7f86ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.workflow-template-setup-modal header h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: 0;
}

.workflow-template-setup-modal header p {
  margin: 4px 0 0;
  color: #929aaf;
  font-size: 12px;
}

.workflow-template-setup-modal button {
  min-height: 34px;
  color: #e7e9f3;
  background: #171c28;
  border: 1px solid rgba(132, 142, 170, 0.34);
  border-radius: 5px;
}

.workflow-template-setup-modal button:hover:not(:disabled) {
  border-color: #767cff;
  background: #1c2131;
}

.workflow-template-setup-modal button.primary {
  color: #fff;
  background: #1f23ab;
  border-color: #585eff;
}

.workflow-template-setup-modal button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.workflow-template-setup-modal header > button {
  width: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 18px;
}

.save-workflow-template-modal > section {
  width: min(720px, calc(100vw - 36px));
  height: auto;
  max-height: calc(100vh - 36px);
}

.save-workflow-template-form {
  display: grid;
  gap: 14px;
  padding: 20px;
  overflow: auto;
}

.save-workflow-template-form > label {
  display: grid;
  gap: 7px;
}

.save-workflow-template-form > label > span {
  color: #aeb6ca;
  font-size: 11px;
  font-weight: 800;
}

.save-workflow-template-form input,
.save-workflow-template-form textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(132, 142, 170, 0.3);
  border-radius: 4px;
  outline: 0;
  background: #111722;
  color: #eef0f7;
  font: inherit;
}

.save-workflow-template-form textarea {
  resize: vertical;
}

.save-workflow-template-form input:focus,
.save-workflow-template-form textarea:focus {
  border-color: #6f74ff;
}

.save-workflow-template-form > aside {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(111, 116, 255, 0.28);
  border-radius: 5px;
  background: rgba(31, 35, 171, 0.12);
}

.save-workflow-template-form > aside strong {
  color: #f2f3f8;
  font-size: 13px;
}

.save-workflow-template-form > aside span,
.save-workflow-template-form > aside em {
  color: #929aaf;
  font-size: 11px;
  font-style: normal;
  line-height: 1.55;
}

.workflow-template-setup-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 280px minmax(520px, 1fr) 260px;
  overflow: hidden;
}

.workflow-template-assets,
.workflow-template-plan,
.workflow-template-summary {
  min-height: 0;
  padding: 16px;
  overflow: auto;
}

.workflow-template-assets,
.workflow-template-plan {
  border-right: 1px solid rgba(117, 128, 158, 0.18);
}

.workflow-template-assets > div:first-child,
.workflow-template-summary > div:first-child,
.workflow-template-steps-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.workflow-template-assets strong,
.workflow-template-summary strong,
.workflow-template-steps-head strong {
  font-size: 14px;
}

.workflow-template-assets em,
.workflow-template-summary em,
.workflow-template-steps-head em {
  color: #778096;
  font-size: 11px;
  font-style: normal;
}

.workflow-template-asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.workflow-template-asset-grid button {
  position: relative;
  min-width: 0;
  padding: 5px;
  text-align: left;
  background: #111620;
}

.workflow-template-asset-grid button.active {
  border-color: #777dff;
  box-shadow: inset 0 0 0 1px #1f23ab;
}

.workflow-template-asset-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
  object-fit: cover;
  border-radius: 3px;
  background: #080b11;
}

.workflow-template-asset-grid span,
.workflow-template-asset-grid em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-template-asset-grid span {
  margin-top: 6px;
  color: #edf0f7;
  font-size: 11px;
  font-weight: 700;
}

.workflow-template-asset-grid em {
  margin-top: 2px;
  color: #7f879a;
  font-size: 10px;
  font-style: normal;
}

.workflow-template-empty {
  padding: 18px;
  border: 1px dashed rgba(132, 142, 170, 0.36);
  border-radius: 5px;
}

.workflow-template-empty span {
  display: block;
  margin-top: 5px;
  color: #8991a5;
  font-size: 11px;
}

.workflow-template-prompt {
  display: block;
}

.workflow-template-prompt textarea,
.workflow-template-step-list input,
.workflow-template-step-list textarea,
.workflow-template-step-list select {
  width: 100%;
  color: #eef0f7;
  background: #111722;
  border: 1px solid rgba(132, 142, 170, 0.3);
  border-radius: 4px;
}

.workflow-template-prompt textarea {
  min-height: 76px;
  padding: 10px;
  resize: vertical;
}

.workflow-template-prompt > em {
  display: block;
  margin-top: 5px;
  color: #7e879b;
  font-size: 10px;
  font-style: normal;
}

.workflow-template-steps-head {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(117, 128, 158, 0.18);
}

.workflow-template-step-list {
  display: grid;
  gap: 9px;
}

.workflow-template-step-list article {
  padding: 11px;
  background: #0f141e;
  border: 1px solid rgba(117, 128, 158, 0.25);
  border-left: 3px solid #4f55ee;
  border-radius: 5px;
}

.workflow-template-step-list article[data-status="blocked"] {
  border-left-color: #dc5872;
}

.workflow-template-step-list article > header {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 0 9px;
  background: transparent;
  border-bottom: 1px solid rgba(117, 128, 158, 0.15);
}

.workflow-template-step-list article > header b {
  color: #9da2ff;
  font-size: 13px;
}

.workflow-template-step-list article > header span,
.workflow-template-step-list article > header strong {
  display: block;
}

.workflow-template-step-list article > header span {
  color: #70798e;
  font-size: 9px;
  font-weight: 700;
}

.workflow-template-step-list article > header strong {
  margin-top: 2px;
  font-size: 13px;
}

.workflow-template-step-list article > header em {
  color: #8c94a9;
  font-size: 10px;
  font-style: normal;
}

.workflow-template-step-list article > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.workflow-template-step-list label > span {
  display: block;
  margin-bottom: 4px;
  color: #8f98ac;
  font-size: 10px;
}

.workflow-template-step-list input,
.workflow-template-step-list select {
  height: 32px;
  padding: 0 8px;
}

.workflow-template-step-list textarea {
  min-height: 54px;
  padding: 7px;
  resize: vertical;
}

.workflow-template-step-list article > p {
  margin: 8px 0 0;
  color: #717a8e;
  font-size: 10px;
}

.workflow-template-summary dl {
  margin: 0;
  border-top: 1px solid rgba(117, 128, 158, 0.18);
}

.workflow-template-summary dl > div {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(117, 128, 158, 0.14);
}

.workflow-template-summary dt,
.workflow-template-summary dd {
  margin: 0;
  font-size: 11px;
}

.workflow-template-summary dt {
  color: #747d91;
}

.workflow-template-summary dd {
  color: #e5e8f1;
  overflow-wrap: anywhere;
}

.workflow-template-estimate {
  margin-top: 14px;
  padding: 13px;
  background: #111722;
  border: 1px solid rgba(117, 128, 158, 0.28);
  border-radius: 5px;
}

.workflow-template-estimate[data-status="ready"] {
  border-color: rgba(62, 190, 145, 0.58);
}

.workflow-template-estimate[data-status="blocked"] {
  border-color: rgba(220, 88, 114, 0.68);
}

.workflow-template-estimate span,
.workflow-template-estimate strong,
.workflow-template-estimate em {
  display: block;
}

.workflow-template-estimate span {
  color: #7c859a;
  font-size: 10px;
}

.workflow-template-estimate strong {
  margin-top: 5px;
  font-size: 17px;
}

.workflow-template-estimate em {
  margin-top: 5px;
  color: #8b94a8;
  font-size: 10px;
  font-style: normal;
}

.workflow-template-summary > p {
  color: #778095;
  font-size: 10px;
  line-height: 1.6;
}

@media (max-width: 1050px) {
  .workflow-template-setup-body {
    grid-template-columns: 220px minmax(460px, 1fr);
  }

  .workflow-template-summary {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(117, 128, 158, 0.18);
  }
}

@media (max-width: 760px) {
  .workflow-template-setup-modal {
    padding: 6px;
  }

  .workflow-template-setup-modal > section {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
  }

  .workflow-template-setup-body {
    display: block;
    overflow: auto;
  }

  .workflow-template-assets,
  .workflow-template-plan {
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid rgba(117, 128, 158, 0.18);
  }

  .workflow-template-asset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workflow-template-step-list article > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .workflow-template-setup-modal > section > footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workflow-template-setup-modal > section > footer > p {
    grid-column: 1 / -1;
  }
}

.case-section .project-library-grid {
  gap: 8px;
}

.case-section .project-card {
  min-height: 0;
}

/* Explicit design controls: every visible entry writes back to DesignPlan. */
.fashion-dashboard.view-spec .spec-control-panel {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 7px;
  padding: 12px;
  opacity: 1;
}

.fashion-dashboard.view-spec .dash-panel.spec-control-panel {
  opacity: 1;
}

.dash-workspace {
  grid-template-rows: 58px 54px 44px 46px 50px minmax(0, 1fr);
}

.design-decision-summary {
  display: grid;
  grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(116, 120, 255, 0.34);
  border-radius: 6px;
  background: #0f1520;
}

.decision-summary-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.decision-summary-title span {
  color: #7478ff;
  font-size: 9px;
  font-weight: 900;
}

.decision-summary-title strong {
  overflow: hidden;
  color: #f1f3f7;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decision-summary-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.decision-summary-metrics > span {
  flex: 0 0 auto;
  color: #8f98a8;
  font-size: 10px;
}

.decision-summary-metrics > span:last-child {
  flex: 1 1 auto;
  overflow: hidden;
  color: #bec5d0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decision-summary-metrics b {
  color: #f3f5f9;
  font-size: 14px;
}

.design-decision-summary.has-blocker {
  border-color: rgba(200, 86, 105, 0.45);
}

.design-decision-summary.has-blocker #decisionBlockingCount,
.design-decision-summary.has-blocker #decisionPrimaryIssue {
  color: #e18a9a;
}

.design-decision-summary.is-ready {
  border-color: rgba(76, 174, 137, 0.4);
}

.design-decision-summary > button {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid #454bd1;
  border-radius: 5px;
  background: #1f23ab;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}

.design-decision-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
}

.decision-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 9, 0.84);
  backdrop-filter: blur(8px);
}

.decision-modal-panel {
  position: absolute;
  inset: 4vh 2vw;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-width: 1540px;
  margin: auto;
  overflow: hidden;
  border: 1px solid #2b3342;
  border-radius: 7px;
  background: #0a0f17;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.68);
}

.decision-modal-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #252d3a;
  background: #0d131d;
}

.decision-modal-panel > header span {
  color: #7478ff;
  font-size: 9px;
  font-weight: 900;
}

.decision-modal-panel h2 {
  margin: 4px 0 0;
  color: #f5f6f8;
  font-size: 20px;
  letter-spacing: 0;
}

.decision-modal-panel header p {
  margin: 5px 0 0;
  color: #8d97a6;
  font-size: 11px;
}

.decision-modal-close {
  width: 34px;
  height: 34px;
  border: 1px solid #303846;
  border-radius: 5px;
  background: #151b25;
  color: #d4dae2;
  cursor: pointer;
  font-size: 20px;
}

.decision-workspace-body {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) 310px;
  min-height: 0;
  overflow: hidden;
}

.variant-comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 10px;
  min-width: 0;
  overflow: auto;
  padding: 14px;
}

.design-variant-card {
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr auto;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #29313f;
  border-radius: 6px;
  background: #101620;
}

.design-variant-card.selected {
  border-color: #5f65ee;
  box-shadow: inset 0 3px 0 #1f23ab;
}

.variant-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.variant-card-head > div {
  display: grid;
  gap: 4px;
}

.variant-card-head span,
.variant-locked > span,
.variant-materials > span,
.variant-tradeoff > span {
  color: #7478ff;
  font-size: 9px;
  font-weight: 900;
}

.variant-card-head strong {
  color: #f1f3f7;
  font-size: 15px;
}

.variant-card-head > b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #3b43b8;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
}

.design-variant-card > p {
  min-height: 36px;
  margin: 0;
  color: #aeb6c3;
  font-size: 11px;
  line-height: 1.55;
}

.variant-locked {
  display: grid;
  gap: 4px;
  min-height: 46px;
  padding: 8px 9px;
  border: 1px solid rgba(116, 120, 255, 0.28);
  border-radius: 4px;
  background: rgba(31, 35, 171, 0.11);
}

.variant-locked strong {
  color: #dfe2ff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.variant-score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.variant-score-grid span {
  display: grid;
  gap: 3px;
  padding: 7px;
  border: 1px solid #252d3a;
  border-radius: 4px;
  color: #7f8999;
  font-size: 9px;
}

.variant-score-grid b {
  color: #e6e9ee;
  font-size: 12px;
}

.variant-structure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #27303c;
  border-left: 1px solid #27303c;
}

.variant-structure-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px;
  border-right: 1px solid #27303c;
  border-bottom: 1px solid #27303c;
}

.variant-structure-grid span {
  color: #778191;
  font-size: 9px;
}

.variant-structure-grid strong {
  overflow: hidden;
  color: #dce1e8;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.variant-materials,
.variant-tradeoff {
  display: grid;
  gap: 5px;
}

.variant-materials strong,
.variant-tradeoff em {
  color: #aeb6c3;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

.design-variant-card > button {
  min-height: 36px;
  border: 1px solid #4147c8;
  border-radius: 5px;
  background: #1f23ab;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}

.design-variant-card.selected > button {
  border-color: #303846;
  background: #1b222e;
  color: #9fa8b6;
}

.design-validation-panel {
  min-width: 0;
  overflow: auto;
  padding: 14px;
  border-left: 1px solid #252d3a;
  background: #0d131c;
}

.validation-score {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #27303c;
}

.validation-score span,
.validation-score em {
  color: #8a94a3;
  font-size: 10px;
  font-style: normal;
}

.validation-score strong {
  grid-row: span 2;
  color: #f0f2f6;
  font-size: 34px;
}

.validation-section-head {
  display: flex;
  justify-content: space-between;
  margin: 14px 0 8px;
  color: #8993a2;
  font-size: 10px;
}

.validation-issues,
.validation-strengths {
  display: grid;
  gap: 7px;
}

.validation-issue {
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid #303846;
  border-left-width: 3px;
  border-radius: 4px;
  background: #121923;
}

.validation-issue.high { border-left-color: #c95669; }
.validation-issue.medium { border-left-color: #c29a4c; }
.validation-issue.low { border-left-color: #5c76b9; }

.validation-issue > span {
  color: #8993a2;
  font-size: 9px;
}

.validation-issue > strong {
  color: #e6e9ee;
  font-size: 11px;
}

.validation-issue p {
  margin: 0;
  color: #929cab;
  font-size: 10px;
  line-height: 1.45;
}

.validation-issue button {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #858aff;
  cursor: pointer;
  font-size: 10px;
}

.validation-strengths {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #27303c;
}

.validation-strengths > span {
  color: #4cae89;
  font-size: 9px;
  font-weight: 900;
}

.validation-strengths strong,
.validation-empty span {
  color: #8f99a8;
  font-size: 10px;
  font-weight: 600;
}

.validation-empty {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(76, 174, 137, 0.32);
  border-radius: 5px;
}

.validation-empty strong {
  color: #75c3a6;
  font-size: 11px;
}

.fashion-dashboard.view-spec .score-panel {
  display: none;
}

.spec-control-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  min-height: 34px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(146, 154, 177, 0.14);
}

.spec-control-head span,
.spec-control-panel button span {
  color: #858fa0;
  font-size: 10px;
}

.spec-control-head strong {
  color: #eef1f7;
  font-size: 13px;
}

.spec-control-panel > button {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
  min-width: 0;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid rgba(146, 154, 177, 0.16);
  border-radius: 5px;
  background: #141a24;
  color: #dfe4ec;
  cursor: pointer;
  text-align: left;
}

.spec-control-panel > button:last-child {
  grid-column: 1 / -1;
}

.spec-control-panel > button:hover {
  border-color: rgba(116, 120, 255, 0.7);
  background: #181f2b;
}

.spec-control-panel > button strong {
  width: 100%;
  overflow: hidden;
  color: #f3f5f9;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
}

.choice-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 8, 0.76);
  backdrop-filter: blur(4px);
}

.choice-modal-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(1080px, calc(100vw - 40px));
  max-height: min(820px, calc(100vh - 40px));
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(146, 154, 177, 0.24);
  border-radius: 7px;
  background: #0d121a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58);
}

.choice-modal-panel.compact {
  width: min(780px, calc(100vw - 40px));
}

.canvas-iteration-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(920px, calc(100vw - 40px));
}

.canvas-iteration-panel > header,
.canvas-iteration-panel > footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(137, 148, 168, 0.16);
}

.canvas-iteration-panel > header {
  justify-content: space-between;
}

.canvas-iteration-panel > header > div {
  display: grid;
  gap: 3px;
}

.canvas-iteration-panel > header span {
  color: #737d8d;
  font-size: 9px;
  font-weight: 900;
}

.canvas-iteration-panel > header h2 {
  margin: 0;
  color: #f2f4f7;
  font-size: 17px;
  letter-spacing: 0;
}

.canvas-iteration-panel > footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(137, 148, 168, 0.16);
  border-bottom: 0;
}

.canvas-iteration-panel > footer > span {
  margin-right: auto;
  color: #788291;
  font-size: 9px;
}

.canvas-iteration-panel > footer button,
.canvas-iteration-panel .choice-modal-close {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(137, 148, 168, 0.25);
  border-radius: 4px;
  background: #141a23;
  color: #d8dde5;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-iteration-panel .choice-modal-close {
  width: 34px;
  padding: 0;
}

.canvas-iteration-panel > footer button.primary {
  border-color: #5158e7;
  background: #1f23ab;
  color: #fff;
}

.canvas-iteration-panel button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.canvas-iteration-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 0;
  overflow: auto;
}

.canvas-iteration-body > aside {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px;
  border-right: 1px solid rgba(137, 148, 168, 0.16);
  background: #090e15;
}

.canvas-iteration-body > aside img {
  width: 100%;
  max-height: 330px;
  margin-bottom: 6px;
  border: 1px solid rgba(137, 148, 168, 0.2);
  border-radius: 4px;
  background: #05080d;
  object-fit: contain;
}

.canvas-iteration-body > aside span {
  color: #747f8f;
  font-size: 8px;
  font-weight: 900;
}

.canvas-iteration-body > aside strong {
  color: #eef1f5;
  font-size: 12px;
}

.canvas-iteration-body > aside p {
  margin: 5px 0 0;
  color: #8892a1;
  font-size: 9px;
  line-height: 1.55;
}

.canvas-iteration-body > main {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 18px;
}

.canvas-iteration-types {
  display: flex;
  gap: 6px;
  min-width: 0;
  padding-bottom: 3px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(110, 117, 255, 0.72) rgba(137, 148, 168, 0.1);
  scrollbar-width: thin;
}

.canvas-iteration-types button,
.canvas-iteration-count button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid rgba(137, 148, 168, 0.24);
  border-radius: 4px;
  background: #111822;
  color: #aeb6c2;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-iteration-types button[aria-pressed="true"],
.canvas-iteration-count button[aria-pressed="true"] {
  border-color: #5c63ed;
  background: #2429a7;
  color: #fff;
}

.canvas-iteration-body main section,
.canvas-iteration-body label {
  display: grid;
  gap: 7px;
}

.canvas-iteration-body main section[hidden] {
  display: none;
}

.canvas-iteration-body label[hidden] {
  display: none;
}

.canvas-iteration-body label > span,
.canvas-iteration-count > span {
  color: #aab2be;
  font-size: 9px;
  font-weight: 850;
}

.canvas-iteration-body input,
.canvas-iteration-body textarea,
.canvas-iteration-body select {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(137, 148, 168, 0.24);
  border-radius: 4px;
  outline: 0;
  background: #0b1119;
  color: #eef1f5;
  font: inherit;
  font-size: 10px;
  line-height: 1.5;
}

.canvas-iteration-body textarea {
  resize: vertical;
}

.canvas-iteration-body input:focus,
.canvas-iteration-body textarea:focus,
.canvas-iteration-body select:focus {
  border-color: #5b62ed;
}

.canvas-iteration-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 9px;
}

.canvas-iteration-row input[type="color"] {
  width: 100%;
  height: 38px;
  padding: 3px;
}

.canvas-iteration-file {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 10px;
  border: 1px dashed rgba(137, 148, 168, 0.3);
  border-radius: 4px;
}

.canvas-iteration-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.canvas-iteration-file strong {
  color: #9ba4b2;
  font-size: 9px;
  cursor: pointer;
}

.canvas-region-selector {
  position: relative;
  justify-self: start;
  max-width: 100%;
  border: 1px solid rgba(137, 148, 168, 0.24);
  border-radius: 4px;
  background: #05080d;
  cursor: crosshair;
  overflow: hidden;
  touch-action: none;
}

.canvas-region-selector img {
  display: block;
  width: auto;
  max-width: 100%;
  height: min(300px, 38vh);
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.canvas-region-selector > i {
  position: absolute;
  border: 2px solid #6d73ff;
  background: rgba(31, 35, 171, 0.18);
  box-shadow: 0 0 0 9999px rgba(2, 5, 9, 0.48);
  pointer-events: none;
}

.canvas-region-selector > span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 5px 7px;
  border-radius: 3px;
  background: rgba(4, 8, 14, 0.86);
  color: #d9deea;
  font-size: 8px;
  font-weight: 800;
  pointer-events: none;
}

.canvas-mask-editor {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.canvas-mask-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(137, 148, 168, 0.22);
  border-radius: 4px;
  background: #090f17;
}

.canvas-mask-toolbar button {
  min-width: 48px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(137, 148, 168, 0.24);
  border-radius: 3px;
  background: #111822;
  color: #aeb7c5;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.canvas-mask-toolbar button[aria-pressed="true"] {
  border-color: #6870ff;
  background: #1f23ab;
  color: #fff;
}

.canvas-mask-toolbar label {
  display: flex;
  flex: 1 1 120px;
  grid-template-columns: none;
  align-items: center;
  gap: 7px;
  min-width: 100px;
  margin-left: 4px;
}

.canvas-mask-toolbar input[type="range"] {
  width: 100%;
  min-width: 60px;
  padding: 0;
}

.canvas-mask-stage {
  position: relative;
  display: grid;
  place-items: stretch;
  justify-self: start;
  width: min(
    100%,
    720px,
    calc(48vh * var(--mask-stage-ratio, 1)),
    calc(420px * var(--mask-stage-ratio, 1))
  );
  border: 1px solid rgba(137, 148, 168, 0.28);
  border-radius: 4px;
  background: #05080d;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}

.canvas-mask-stage[data-tool="smart-box"] {
  cursor: cell;
}

.canvas-mask-stage[data-tool="erase"] {
  cursor: not-allowed;
}

.canvas-mask-stage[data-busy="true"] {
  cursor: progress;
}

.canvas-mask-stage[data-busy="true"]::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(4, 8, 14, 0.48);
  color: #eef1f6;
  content: "正在智能初选";
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
}

.canvas-mask-stage > img,
.canvas-mask-stage > canvas {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.canvas-mask-stage > img {
  pointer-events: none;
}

.canvas-mask-stage > canvas {
  position: relative;
  z-index: 1;
}

.canvas-mask-stage > span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 5px 7px;
  border-radius: 3px;
  background: rgba(4, 8, 14, 0.88);
  color: #d9deea;
  font-size: 8px;
  font-weight: 800;
  pointer-events: none;
}

.canvas-mask-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-left: 2px solid #5961ee;
  background: rgba(31, 35, 171, 0.12);
}

.canvas-mask-status strong,
.canvas-mask-status span {
  font-size: 9px;
}

.canvas-mask-status span {
  color: #939dab;
}

.canvas-mask-status[data-state="blocked"] {
  border-left-color: #ef5d73;
  background: rgba(151, 31, 49, 0.14);
}

.canvas-mask-status[data-state="running"] {
  border-left-color: #f0c66d;
  background: rgba(145, 102, 26, 0.16);
}

.image-mask-editor-panel {
  width: min(980px, calc(100vw - 30px));
}

.image-mask-editor-body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(230px, 0.7fr);
  gap: 14px;
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

.image-mask-editor-fields {
  display: grid;
  align-content: start;
  gap: 12px;
}

.image-mask-editor-fields label {
  display: grid;
  gap: 6px;
  color: #9fa8b6;
  font-size: 9px;
  font-weight: 800;
}

.image-mask-editor-fields input,
.image-mask-editor-fields textarea {
  width: 100%;
  border: 1px solid rgba(137, 148, 168, 0.28);
  border-radius: 4px;
  background: #0a1018;
  color: #eef1f6;
  padding: 9px;
  font: inherit;
  line-height: 1.5;
}

.image-mask-editor-fields > p {
  margin: 0;
  color: #8e98a7;
  font-size: 9px;
  line-height: 1.6;
}

.image-operation-mask-binding {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(98, 105, 242, 0.35);
  border-radius: 4px;
  background: rgba(31, 35, 171, 0.12);
}

.image-operation-mask-binding > img {
  width: 52px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  background: #000;
  object-fit: contain;
}

.image-operation-mask-binding > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.image-operation-mask-binding span,
.image-operation-mask-binding em {
  overflow: hidden;
  color: #8f99a8;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-operation-mask-binding strong {
  overflow: hidden;
  color: #e5e8f0;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-operation-mask-binding > button {
  min-width: 74px;
  height: 30px;
  border: 1px solid #6269f2;
  border-radius: 3px;
  background: #1f23ab;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 760px) {
  .canvas-mask-toolbar {
    flex-wrap: wrap;
  }

  .image-mask-editor-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.canvas-model-reference-rights,
.canvas-fabric-reference-rights {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  color: #9fa8b6;
  font-size: 9px;
  line-height: 1.5;
}

.canvas-model-reference-rights input,
.canvas-fabric-reference-rights input {
  width: 15px;
  min-width: 15px;
  height: 15px;
  margin: 1px 0 0;
  padding: 0;
}

.canvas-model-library-strip,
.canvas-model-library-empty,
.canvas-fabric-library-strip,
.canvas-fabric-library-empty {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(137, 148, 168, 0.2);
  border-radius: 4px;
  background: #090f17;
}

.canvas-model-library-strip > span,
.canvas-model-library-empty strong,
.canvas-fabric-library-strip > span,
.canvas-fabric-library-empty strong {
  color: #aeb6c4;
  font-size: 9px;
  font-weight: 850;
}

.canvas-model-library-strip > div,
.canvas-fabric-library-strip > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.canvas-model-library-strip button,
.canvas-fabric-library-strip button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 7px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(137, 148, 168, 0.22);
  border-radius: 4px;
  background: #111822;
  color: #dbe0e8;
  text-align: left;
  cursor: pointer;
}

.canvas-model-library-strip button[aria-pressed="true"],
.canvas-fabric-library-strip button[aria-pressed="true"] {
  border-color: #6269f2;
  background: rgba(31, 35, 171, 0.32);
}

.canvas-model-library-strip img,
.canvas-fabric-library-strip img {
  grid-row: 1 / span 2;
  width: 42px;
  height: 54px;
  border-radius: 3px;
  object-fit: cover;
}

.canvas-model-library-strip strong,
.canvas-model-library-strip em,
.canvas-fabric-library-strip strong,
.canvas-fabric-library-strip em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-model-library-strip strong,
.canvas-fabric-library-strip strong {
  align-self: end;
  font-size: 9px;
}

.canvas-model-library-strip em,
.canvas-model-library-empty span,
.canvas-fabric-library-strip em,
.canvas-fabric-library-empty span {
  color: #7f8999;
  font-size: 8px;
  font-style: normal;
}

.canvas-selected-model-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(95, 103, 238, 0.45);
  border-radius: 4px;
  background: rgba(31, 35, 171, 0.14);
}

.canvas-selected-model-preview[hidden],
.canvas-new-model-metadata[hidden],
.canvas-remove-library-model[hidden] {
  display: none;
}

.canvas-selected-model-preview img {
  width: 46px;
  height: 58px;
  border-radius: 3px;
  object-fit: cover;
}

.canvas-selected-model-preview div {
  display: grid;
  gap: 2px;
}

.canvas-selected-model-preview span,
.canvas-selected-model-preview em {
  color: #8d97a6;
  font-size: 8px;
  font-style: normal;
}

.canvas-selected-model-preview strong {
  color: #edf0f5;
  font-size: 10px;
}

.canvas-new-model-metadata,
.canvas-new-fabric-metadata {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(137, 148, 168, 0.2);
  border-radius: 4px;
  background: #0a1018;
}

.canvas-save-model-reference {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  color: #a9b1bf;
  font-size: 9px;
}

.canvas-save-model-reference input {
  width: 15px;
  min-width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
}

.canvas-remove-library-model {
  justify-self: start;
  min-height: 30px;
  border: 1px solid rgba(224, 102, 119, 0.45);
  border-radius: 4px;
  background: rgba(111, 34, 48, 0.2);
  color: #ef9aa6;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.canvas-iteration-count {
  display: flex;
  align-items: center;
  gap: 10px;
}

.canvas-iteration-count > div {
  display: grid;
  grid-template-columns: repeat(3, 42px);
  gap: 5px;
}

.canvas-iteration-count button {
  min-height: 30px;
}

.canvas-iteration-error {
  min-height: 16px;
  margin: 0;
  color: #ef8896;
  font-size: 9px;
}

.canvas-tool-disclosure {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(111, 122, 255, 0.3);
  border-radius: 4px;
  background: rgba(31, 35, 171, 0.12);
  color: #aeb6cf;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .canvas-iteration-body {
    grid-template-columns: 1fr;
  }

  .canvas-iteration-body > aside {
    display: none;
  }

  .canvas-iteration-types {
    padding-bottom: 5px;
  }
}

.design-clarification-panel {
  grid-template-rows: auto 3px minmax(0, 1fr) auto;
  width: min(1120px, calc(100vw - 36px));
  height: min(760px, calc(100vh - 36px));
  max-height: none;
}

.clarification-header-meta,
.clarification-header-meta b,
.design-clarification-panel > footer > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.clarification-header-meta b {
  justify-content: center;
  min-width: 46px;
  height: 30px;
  border: 1px solid rgba(116, 120, 255, 0.45);
  border-radius: 4px;
  color: #aeb0ff;
  font-size: 11px;
}

.clarification-progress {
  overflow: hidden;
  background: #171b22;
}

.clarification-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1f23ab, #6468ff, #64d8c5);
  transition: width 180ms ease;
}

.clarification-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.55fr);
  min-height: 0;
  overflow: hidden;
}

.clarification-analysis,
.clarification-question {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.clarification-analysis {
  padding: 18px;
  border-right: 1px solid rgba(146, 154, 177, 0.14);
  background: #0a0e13;
}

.clarification-readiness {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(146, 154, 177, 0.14);
}

.clarification-readiness span,
.clarification-missing > span,
.clarification-note > span {
  color: #8d97a6;
  font-size: 10px;
  font-weight: 800;
}

.clarification-readiness strong {
  color: #64d8c5;
  font-size: 27px;
}

.clarification-analysis ul {
  display: grid;
  gap: 7px;
  margin: 14px 0;
  padding: 0 0 0 16px;
  color: #cbd1da;
  font-size: 11px;
  line-height: 1.55;
}

.clarification-inferred-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.clarification-inferred-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border-left: 2px solid #3f46d8;
  background: #121720;
}

.clarification-inferred-card span,
.clarification-inferred-card small {
  overflow: hidden;
  color: #7f8998;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clarification-inferred-card strong {
  overflow: hidden;
  color: #f0f2f5;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clarification-missing {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}

.clarification-missing > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.clarification-missing b {
  padding: 5px 7px;
  border: 1px solid rgba(255, 95, 121, 0.4);
  border-radius: 4px;
  background: rgba(255, 75, 108, 0.09);
  color: #ff8da1;
  font-size: 9px;
}

.clarification-missing b.complete {
  border-color: rgba(100, 216, 197, 0.34);
  background: rgba(100, 216, 197, 0.08);
  color: #78ddcc;
}

.clarification-question {
  padding: 28px 30px 24px;
  background:
    linear-gradient(rgba(116, 120, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 120, 255, 0.035) 1px, transparent 1px),
    #0e131b;
  background-size: 24px 24px;
}

.clarification-step-kicker {
  color: #7478ff;
  font-size: 10px;
  font-weight: 900;
}

.clarification-question h3 {
  margin: 8px 0 6px;
  color: #f4f6f8;
  font-size: 23px;
  line-height: 1.25;
}

.clarification-question > p {
  margin: 0 0 20px;
  color: #8e98a7;
  font-size: 12px;
  line-height: 1.55;
}

.clarification-options,
.clarification-review-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.clarification-option,
.clarification-review-row {
  display: grid;
  gap: 7px;
  min-width: 0;
  min-height: 82px;
  padding: 13px;
  border: 1px solid rgba(146, 154, 177, 0.19);
  border-radius: 5px;
  background: #141a23;
  color: #e5e8ed;
  cursor: pointer;
  text-align: left;
}

.clarification-option:hover,
.clarification-review-row:hover {
  border-color: rgba(116, 120, 255, 0.65);
  background: #171d28;
}

.clarification-option.selected {
  border-color: #7478ff;
  background: rgba(31, 35, 171, 0.24);
  box-shadow: inset 3px 0 0 #7478ff;
}

.clarification-option > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
}

.clarification-option i {
  flex: 0 0 auto;
  padding: 3px 5px;
  border-radius: 3px;
  background: rgba(100, 216, 197, 0.12);
  color: #78ddcc;
  font-size: 8px;
  font-style: normal;
}

.clarification-option small,
.clarification-review-row span {
  color: #8d97a6;
  font-size: 10px;
  line-height: 1.45;
}

.clarification-selection-hint {
  margin-top: 12px;
  color: #737e8d;
  font-size: 10px;
}

.clarification-review-row {
  min-height: 70px;
}

.clarification-review-row strong {
  color: #f0f2f6;
  font-size: 11px;
  line-height: 1.45;
}

.clarification-note {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.clarification-note textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid rgba(146, 154, 177, 0.2);
  border-radius: 5px;
  outline: none;
  background: #111720;
  color: #eef1f5;
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
}

.clarification-note textarea:focus {
  border-color: #7478ff;
}

.design-clarification-panel > footer {
  padding: 12px 18px;
  border-top: 1px solid rgba(146, 154, 177, 0.14);
  background: #0b1017;
}

.design-clarification-panel > footer button {
  min-width: 92px;
  min-height: 36px;
  border: 1px solid rgba(146, 154, 177, 0.22);
  border-radius: 4px;
  background: #171d27;
  color: #dce1e8;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.design-clarification-panel > footer .primary-button {
  border-color: #3e42d2;
  background: #1f23ab;
  color: #fff;
}

.canvas-assistant-intake {
  display: grid;
  grid-template-rows: auto 3px minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #0c1118;
  box-shadow: none;
}

.canvas-assistant-intake > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(146, 154, 177, 0.14);
}

.canvas-assistant-intake > header > div:first-child {
  display: grid;
  gap: 5px;
}

.canvas-assistant-intake > header span {
  color: #737d8c;
  font-size: 8px;
  font-weight: 950;
}

.canvas-assistant-intake > header h2 {
  margin: 0;
  color: #f2f4f7;
  font-size: 15px;
  letter-spacing: 0;
}

.canvas-assistant-intake .clarification-layout {
  display: block;
  overflow-y: auto;
}

.canvas-assistant-intake .clarification-analysis,
.canvas-assistant-intake .clarification-question {
  overflow: visible;
}

.canvas-assistant-intake .clarification-analysis {
  padding: 12px;
  border-right: 0;
  border-bottom: 1px solid rgba(146, 154, 177, 0.14);
}

.canvas-assistant-intake .clarification-readiness strong {
  font-size: 22px;
}

.canvas-assistant-intake .clarification-analysis ul {
  margin: 10px 0;
  font-size: 10px;
}

.canvas-assistant-intake .clarification-inferred-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.canvas-assistant-intake .clarification-question {
  padding: 16px 12px 18px;
  background-size: 20px 20px;
}

.canvas-assistant-intake .clarification-question h3 {
  font-size: 17px;
}

.canvas-assistant-intake .clarification-question > p {
  margin-bottom: 13px;
  font-size: 10px;
}

.canvas-assistant-intake .clarification-options,
.canvas-assistant-intake .clarification-review-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.canvas-assistant-intake .clarification-option,
.canvas-assistant-intake .clarification-review-row {
  min-height: 62px;
  padding: 10px;
}

.canvas-assistant-intake > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
}

.canvas-assistant-intake > footer button {
  min-width: 70px;
  min-height: 32px;
  font-size: 9px;
}

.choice-modal-panel > header,
.choice-modal-panel > footer,
.choice-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.choice-modal-panel > header {
  padding: 15px 18px 12px;
  border-bottom: 1px solid rgba(146, 154, 177, 0.14);
}

.choice-modal-panel > header span,
.choice-section-head span,
.style-choice-group > span {
  display: block;
  color: #7478ff;
  font-size: 10px;
  font-weight: 900;
}

.choice-modal-panel h2,
.choice-section-head strong {
  margin: 3px 0 0;
  color: #f3f5f9;
  font-size: 18px;
  letter-spacing: 0;
}

.choice-section-head strong {
  display: block;
  font-size: 12px;
}

.choice-modal-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(146, 154, 177, 0.2);
  border-radius: 5px;
  background: #151b25;
  color: #dfe4ec;
  cursor: pointer;
  font-size: 20px;
}

.fabric-preset-grid,
.color-preset-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(146, 154, 177, 0.12);
}

.fabric-preset-option,
.color-preset-option {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
  min-height: 76px;
  padding: 10px;
  border: 1px solid rgba(146, 154, 177, 0.16);
  border-radius: 5px;
  background: #141a24;
  color: #dfe4ec;
  cursor: pointer;
  text-align: left;
}

.fabric-preset-option[aria-pressed="true"] {
  border-color: #7478ff;
  box-shadow: inset 0 0 0 1px #7478ff;
}

.fabric-preset-option i {
  width: 100%;
  height: 8px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #b8a68e 0 4px, #75695c 4px 6px);
}

.fabric-preset-option strong,
.color-preset-option strong {
  overflow: hidden;
  max-width: 100%;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fabric-preset-option span,
.fabric-preset-option em,
.color-preset-option span {
  overflow: hidden;
  max-width: 100%;
  color: #828c9c;
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.choice-section-head {
  padding: 10px 18px;
}

.choice-section-head button,
.choice-modal-panel > footer button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(146, 154, 177, 0.2);
  border-radius: 5px;
  background: #171e29;
  color: #dce1e9;
  cursor: pointer;
  font-size: 11px;
}

.fabric-selected-list,
.sku-manager-list,
.color-selected-list {
  min-height: 0;
  overflow-y: auto;
  padding: 0 18px 14px;
}

.choice-edit-row {
  display: grid;
  grid-template-columns: 34px minmax(130px, 1.3fr) 100px 112px 116px 86px 86px minmax(140px, 1fr) minmax(170px, 1.4fr) 56px;
  gap: 7px;
  align-items: end;
  margin-bottom: 7px;
  padding: 9px;
  border: 1px solid rgba(146, 154, 177, 0.14);
  border-radius: 5px;
  background: #121823;
}

.choice-edit-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.choice-edit-row label span,
.color-primary-radio span {
  color: #7f8999;
  font-size: 9px;
}

.choice-edit-row input,
.choice-edit-row select,
.color-hex-input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid rgba(146, 154, 177, 0.2);
  border-radius: 4px;
  outline: 0;
  background: #0c1119;
  color: #e5e9f0;
  padding: 0 8px;
  font: inherit;
  font-size: 11px;
}

.choice-row-index {
  align-self: center;
  color: #7478ff;
  font-size: 11px;
  font-weight: 900;
}

.choice-remove {
  height: 32px;
  border: 1px solid rgba(191, 86, 104, 0.28);
  border-radius: 4px;
  background: rgba(98, 35, 47, 0.2);
  color: #db8796;
  cursor: pointer;
  font-size: 10px;
}

.choice-modal-panel > footer {
  padding: 11px 18px;
  border-top: 1px solid rgba(146, 154, 177, 0.14);
}

.choice-modal-panel > footer .choice-save-status {
  flex: 1;
  color: #7f8999;
  font-size: 10px;
}

.choice-modal-panel > footer button.primary {
  border-color: #373ccf;
  background: #1f23ab;
  color: #fff;
}

.choice-modal-panel > footer button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.model-image-generator-panel {
  display: flex;
  flex-direction: column;
  width: min(980px, calc(100vw - 40px));
}

.reference-gene-generation-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(1080px, calc(100vw - 40px));
}

.reference-generation-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid rgba(146, 154, 177, 0.14);
  background: rgba(146, 154, 177, 0.14);
}

.reference-generation-summary > div {
  display: grid;
  gap: 5px;
  padding: 12px 18px;
  background: #0d131c;
}

.reference-generation-summary span,
.reference-generation-branches header span {
  color: #737d8e;
  font-size: 8px;
  font-weight: 900;
}

.reference-generation-summary strong {
  color: #edf0f5;
  font-size: 11px;
}

.reference-generation-genes {
  display: flex;
  gap: 8px;
  padding: 10px 18px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(146, 154, 177, 0.12);
}

.reference-generation-genes article {
  display: grid;
  grid-template-columns: 54px minmax(130px, 1fr);
  gap: 9px;
  flex: 0 0 260px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(137, 148, 168, 0.18);
  border-radius: 4px;
  background: #111822;
}

.reference-generation-genes img {
  width: 54px;
  height: 54px;
  border-radius: 3px;
  object-fit: cover;
}

.reference-generation-genes article > div {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}

.reference-generation-genes strong {
  overflow: hidden;
  color: #e9ecf1;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-generation-genes span {
  color: #7c84ff;
  font-size: 8px;
  font-weight: 850;
}

.reference-generation-genes p {
  overflow: hidden;
  margin: 0;
  color: #7e8898;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-generation-branches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  padding: 16px 18px;
  overflow: auto;
}

.reference-generation-branches > article {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(104, 112, 238, 0.3);
  border-radius: 5px;
  background: #101722;
}

.reference-generation-branches > article[data-branch="commercial"] {
  border-color: rgba(93, 101, 255, 0.72);
  box-shadow: inset 0 2px 0 #4c54ef;
}

.reference-generation-branches > article[data-branch="exploratory"] {
  border-color: rgba(202, 151, 72, 0.36);
}

.reference-generation-branches header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.reference-generation-branches header b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(103, 111, 244, 0.38);
  border-radius: 3px;
  color: #777ff7;
  font-size: 9px;
}

.reference-generation-branches header > div {
  display: grid;
  gap: 2px;
}

.reference-generation-branches header strong {
  color: #eef1f5;
  font-size: 13px;
}

.reference-generation-branches > article > p {
  min-height: 44px;
  margin: 0;
  color: #aab2bf;
  font-size: 10px;
  line-height: 1.55;
}

.reference-generation-branches dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.reference-generation-branches dl > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding-top: 7px;
  border-top: 1px solid rgba(137, 148, 168, 0.12);
}

.reference-generation-branches dt {
  color: #777ff7;
  font-size: 8px;
  font-weight: 900;
}

.reference-generation-branches dd {
  margin: 0;
  color: #8f99a8;
  font-size: 9px;
  line-height: 1.45;
}

.reference-gene-generation-panel > footer > span {
  margin-right: auto;
  color: #7e8897;
  font-size: 9px;
}

.model-image-capability {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(146, 154, 177, 0.12);
  background: #101620;
}

.model-image-capability > div {
  display: grid;
  grid-template-columns: 8px auto auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.model-image-capability i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #697385;
}

.model-image-capability[data-status="ready"] i,
.model-image-capability[data-status="configured-unverified"] i {
  background: #4bc0a2;
  box-shadow: 0 0 0 4px rgba(75, 192, 162, 0.1);
}

.model-image-capability[data-status="configured-unverified"] i {
  background: #d2a455;
  box-shadow: 0 0 0 4px rgba(210, 164, 85, 0.1);
}

.model-image-capability[data-status="failed"] i {
  background: #ff647e;
  box-shadow: 0 0 0 4px rgba(255, 100, 126, 0.1);
}

.model-image-capability strong {
  color: #e8ebf1;
  font-size: 11px;
}

.model-image-capability span {
  overflow: hidden;
  color: #788393;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-image-capability button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(146, 154, 177, 0.18);
  border-radius: 4px;
  background: #171e29;
  color: #cfd5de;
  cursor: pointer;
  font-size: 10px;
}

.model-image-setup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(191, 145, 73, 0.22);
  background: rgba(115, 77, 24, 0.13);
}

.model-image-setup strong {
  color: #e3bd78;
  font-size: 10px;
}

.model-image-setup span {
  color: #a69882;
  font-size: 9px;
  line-height: 1.5;
}

.model-image-setup code {
  padding: 6px 8px;
  border: 1px solid rgba(191, 145, 73, 0.2);
  border-radius: 4px;
  background: #0b0f15;
  color: #d8c7b1;
  font-size: 9px;
}

.model-image-generator-body {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(420px, 1.28fr);
  min-height: 0;
  overflow: auto;
}

.model-image-design-source,
.model-image-controls {
  min-width: 0;
  padding: 16px 18px;
}

.model-image-design-source {
  border-right: 1px solid rgba(146, 154, 177, 0.12);
  background: #0b1017;
}

.model-image-controls {
  display: grid;
  align-content: start;
  gap: 13px;
}

.model-image-section-head,
.model-image-control-group,
.model-image-model-select,
.model-image-control-row > label,
.model-image-notes {
  display: grid;
  gap: 6px;
}

.model-image-section-head span,
.model-image-control-group > span,
.model-image-model-select > span,
.model-image-control-row label > span,
.model-image-notes > span,
.model-reference-upload > span,
.model-image-history > span {
  color: #7478ff;
  font-size: 9px;
  font-weight: 900;
}

.model-image-model-select select {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(116, 120, 255, 0.38);
  border-radius: 4px;
  outline: none;
  background: #111823;
  color: #eef0f5;
  font-size: 11px;
}

.model-image-model-select select:focus {
  border-color: #7478ff;
  box-shadow: 0 0 0 2px rgba(116, 120, 255, 0.12);
}

.model-image-model-select em {
  color: #7f8998;
  font-size: 9px;
  font-style: normal;
  line-height: 1.45;
}

.model-image-section-head strong {
  color: #f0f2f6;
  font-size: 15px;
  line-height: 1.35;
}

.model-image-facts {
  display: grid;
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid rgba(146, 154, 177, 0.13);
}

.model-image-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(146, 154, 177, 0.1);
}

.model-image-facts span {
  color: #737e8d;
  font-size: 9px;
}

.model-image-facts strong {
  overflow: hidden;
  color: #d6dbe3;
  font-size: 10px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-image-history {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.model-image-history > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.model-image-history img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(146, 154, 177, 0.16);
  border-radius: 4px;
  object-fit: cover;
  object-position: center top;
}

.model-image-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.model-image-segments button {
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid rgba(146, 154, 177, 0.18);
  border-radius: 4px;
  background: #151b25;
  color: #9da6b3;
  cursor: pointer;
  font-size: 10px;
}

.model-image-segments button[aria-pressed="true"] {
  border-color: #555be8;
  background: rgba(31, 35, 171, 0.28);
  color: #eef0ff;
  box-shadow: inset 0 0 0 1px rgba(116, 120, 255, 0.2);
}

.model-image-segments.compact button {
  width: 38px;
  padding: 0;
}

.model-reference-upload {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px dashed rgba(146, 154, 177, 0.26);
  border-radius: 5px;
  background: #101620;
  cursor: pointer;
}

.model-reference-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.model-reference-upload strong {
  overflow: hidden;
  color: #dfe3e9;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-reference-upload em {
  color: #6f7988;
  font-size: 8px;
  font-style: normal;
}

.model-project-reference-toggle {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #7f8997;
  font-size: 9px;
  line-height: 1.45;
}

.model-reference-consent {
  display: none;
  align-items: flex-start;
  gap: 7px;
  font-size: 9px;
  line-height: 1.45;
}

.model-reference-consent.is-required {
  display: flex;
  color: #d7b26e;
}

.model-reference-consent input,
.model-project-reference-toggle input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  min-height: 0;
  margin: 1px 0 0;
  padding: 0;
  accent-color: #4f55df;
}

.model-image-control-row {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr);
  gap: 16px;
  align-items: end;
}

.model-image-control-row input,
.model-image-notes textarea {
  width: 100%;
  border: 1px solid rgba(146, 154, 177, 0.2);
  border-radius: 4px;
  outline: 0;
  background: #0b1017;
  color: #e4e8ee;
  font: inherit;
  font-size: 10px;
}

.model-image-control-row input {
  height: 32px;
  padding: 0 9px;
}

.model-image-notes textarea {
  min-height: 66px;
  resize: vertical;
  padding: 8px 9px;
  line-height: 1.5;
}

.color-preset-option {
  min-height: 66px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
}

.color-preset-option i,
.color-choice-row > i {
  display: block;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  background: var(--choice-color);
}

.color-preset-option span {
  grid-column: 2;
}

.color-choice-row {
  display: grid;
  grid-template-columns: 68px 44px minmax(0, 1fr) 34px 56px;
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
  padding: 8px;
  border: 1px solid rgba(146, 154, 177, 0.14);
  border-radius: 5px;
  background: #121823;
}

.color-primary-radio {
  display: flex;
  align-items: center;
  gap: 5px;
}

.color-native-picker {
  width: 40px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

.sku-manager-row {
  grid-template-columns: 34px 110px minmax(180px, 1.5fr) 110px 110px minmax(220px, 1.4fr) 56px;
}

.style-choice-group {
  padding: 14px 18px 4px;
}

.style-choice-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.style-choice-group button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(146, 154, 177, 0.18);
  border-radius: 5px;
  background: #151b25;
  color: #aeb6c3;
  cursor: pointer;
  font-size: 11px;
}

.style-choice-group button[aria-pressed="true"] {
  border-color: #7478ff;
  background: #1f23ab;
  color: #fff;
}

.size-editor-grid {
  display: grid;
  gap: 12px;
  padding: 2px 18px 18px;
}

.size-editor-grid .style-choice-group {
  padding: 12px 0 0;
}

.size-editor-grid > label {
  display: grid;
  gap: 6px;
  color: #8e98a8;
  font-size: 10px;
}

.size-editor-grid input,
.size-editor-grid textarea {
  width: 100%;
  border: 1px solid rgba(146, 154, 177, 0.2);
  border-radius: 5px;
  background: #101620;
  color: #eef1f7;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  outline: 0;
  padding: 9px 10px;
}

.size-editor-grid input:focus,
.size-editor-grid textarea:focus {
  border-color: #7478ff;
  box-shadow: 0 0 0 2px rgba(31, 35, 171, 0.22);
}

@media (max-width: 900px) {
  .design-decision-summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .decision-summary-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .decision-modal-panel {
    inset: 2vh 2vw;
  }

  .decision-workspace-body {
    display: block;
    overflow: auto;
  }

  .variant-comparison-grid {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
  }

  .design-validation-panel {
    border-top: 1px solid #252d3a;
    border-left: 0;
  }

  .fabric-preset-grid,
  .color-preset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .choice-edit-row,
  .sku-manager-row {
    grid-template-columns: 28px 1fr 1fr;
  }

  .choice-edit-row .wide {
    grid-column: span 2;
  }
}

@media (max-width: 1180px) {
  .dash-topbar {
    grid-template-columns: 150px minmax(320px, 1fr) auto;
  }

  #dashboardMoreButton,
  #dashboardSearchButton {
    display: none;
  }

  .dash-toolbar {
    grid-template-columns: minmax(420px, 1fr) minmax(300px, 0.8fr);
  }

  .view-buttons {
    display: none;
  }

  .dash-grid {
    grid-template-columns: minmax(300px, 1fr) minmax(280px, 1fr);
  }

  .fashion-dashboard.view-board .analytics-panel,
  .fashion-dashboard.view-board .palette-panel,
  .fashion-dashboard.view-spec .score-panel,
  .fashion-dashboard.view-spec .palette-panel,
  .fashion-dashboard.view-execute .project-output-panel {
    display: none;
  }

  .fashion-dashboard.view-board .sku-panel,
  .fashion-dashboard.view-spec .sku-panel,
  .fashion-dashboard.view-spec .project-output-panel,
  .fashion-dashboard.view-execute .mood-panel {
    grid-column: 1 / -1;
  }

  .fashion-dashboard.view-spec .spec-control-panel {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .fashion-dashboard.view-spec .project-output-panel {
    grid-row: 4;
  }
}

@media (max-width: 760px) {
  body {
    overflow: auto;
  }

  .app-shell,
  .hero-section,
  .fashion-dashboard {
    height: auto;
    min-height: 100dvh;
  }

  .fashion-dashboard {
    grid-template-columns: 1fr;
  }

  .dash-rail {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    height: 54px;
    padding: 0 8px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(146, 154, 177, 0.14);
  }

  .dash-logo,
  .rail-bottom {
    display: none;
  }

  .dash-workspace {
    display: block;
    padding: 8px;
  }

  .dash-topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    margin-bottom: 8px;
  }

  .dash-selects {
    display: none;
  }

  .dash-topbar .dashboard-prompt {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 66px 66px;
  }

  .dash-topbar .dashboard-prompt button {
    width: 66px;
    min-width: 0;
    padding: 0 4px;
    font-size: 10px;
  }

  .dash-utilities {
    grid-column: 1 / -1;
  }

  .dash-toolbar {
    display: block;
    margin-bottom: 8px;
  }

  .tool-pills,
  .dashboard-link-intake {
    margin-bottom: 8px;
  }

  .reference-insights-panel,
  .design-intent-panel {
    margin-bottom: 8px;
  }

  .design-decision-summary {
    margin-bottom: 8px;
  }

  .dash-grid {
    display: block;
    overflow: visible;
  }

  .dash-grid > .dash-panel {
    min-height: 240px;
    margin-bottom: 8px;
  }

  .fashion-dashboard.view-board .mood-panel,
  .fashion-dashboard.view-board .sketch-panel,
  .fashion-dashboard.view-board .sku-panel,
  .fashion-dashboard.view-spec .sketch-panel,
  .fashion-dashboard.view-spec .textile-panel,
  .fashion-dashboard.view-spec .spec-control-panel,
  .fashion-dashboard.view-spec .sku-panel,
  .fashion-dashboard.view-spec .project-output-panel,
  .fashion-dashboard.view-execute .mood-panel,
  .fashion-dashboard.view-execute .sketch-panel,
  .fashion-dashboard.view-execute .project-output-panel {
    display: grid;
  }

  .sku-panel {
    grid-template-columns: 1fr 1fr;
  }

  .project-output-panel {
    grid-template-columns: 1fr 1fr;
  }

  .project-output-panel > div {
    grid-column: 1 / -1;
  }

  .choice-modal-panel,
  .choice-modal-panel.compact {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .fabric-preset-grid,
  .color-preset-grid {
    grid-template-columns: 1fr 1fr;
    padding: 10px;
  }

  .choice-section-head,
  .choice-modal-panel > header,
  .choice-modal-panel > footer {
    padding-left: 10px;
    padding-right: 10px;
  }

  .fabric-selected-list,
  .sku-manager-list,
  .color-selected-list {
    padding-left: 10px;
    padding-right: 10px;
  }

  .choice-edit-row,
  .sku-manager-row {
    grid-template-columns: 26px 1fr;
  }

  .choice-edit-row .wide {
    grid-column: span 1;
  }
}

/* 2026-07-13: project infinite canvas. The legacy dashboard remains as a data adapter. */
.fashion-dashboard.canvas-mode .dash-workspace {
  grid-template-rows: 58px 54px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}

/* Image/video creation are primary workspaces, not panels below the design form. */
.fashion-dashboard.canvas-mode.media-workspace-mode .dash-workspace {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 8px 12px 12px;
}

.fashion-dashboard.canvas-mode.media-workspace-mode .dash-topbar,
.fashion-dashboard.canvas-mode.media-workspace-mode .dash-toolbar {
  display: none;
}

.fashion-dashboard.canvas-mode.media-workspace-mode .canvas-workspace-shell {
  min-height: 0;
}

.fashion-dashboard.canvas-mode .reference-insights-panel,
.fashion-dashboard.canvas-mode .design-intent-panel,
.fashion-dashboard.canvas-mode .design-decision-summary,
.fashion-dashboard.canvas-mode .dash-grid,
.fashion-dashboard.canvas-mode .dashboard-result {
  display: none !important;
}

.design-canvas-workbench {
  display: grid;
  grid-template-rows: 46px 88px minmax(0, 1fr) 30px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(146, 154, 177, 0.15);
  border-radius: 7px;
  background: #080c12;
}

.canvas-commandbar {
  position: relative;
  display: grid;
  grid-template-columns: 148px minmax(280px, 1fr) 356px;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  padding: 10px 11px 10px 15px;
  border-bottom: 1px solid rgba(146, 154, 177, 0.15);
  background: #0a0f17;
}

.canvas-commandbar::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  background: #4c54ef;
  content: "";
}

.canvas-command-label {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
}

.canvas-command-label span {
  color: #6f7890;
  font-size: 8px;
  font-weight: 950;
}

.canvas-command-label strong {
  color: #f3f5f9;
  font-size: 15px;
  font-weight: 900;
}

.canvas-command-input {
  display: block;
  min-width: 0;
  min-height: 0;
}

.canvas-command-input textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 9px 11px;
  resize: none;
  border: 1px solid rgba(138, 149, 171, 0.24);
  border-radius: 5px;
  outline: 0;
  background: #111822;
  color: #eef1f6;
  font: inherit;
  font-size: 11px;
  line-height: 1.45;
}

.canvas-command-input textarea::placeholder {
  color: #626d7c;
}

.canvas-command-input textarea:focus {
  border-color: #555cf2;
  box-shadow: 0 0 0 1px rgba(85, 92, 242, 0.28);
}

.canvas-command-actions {
  display: grid;
  grid-template-columns: 96px 116px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.canvas-command-actions > button {
  min-width: 0;
  border: 1px solid #383fcd;
  border-radius: 5px;
  background: #1f23ab;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.canvas-command-actions > button:hover {
  background: #292ec4;
}

.canvas-command-actions > .canvas-generate-image {
  border-color: rgba(82, 188, 148, 0.46);
  background: #143d35;
  color: #d8fff1;
}

.canvas-command-actions > .canvas-generate-image:hover {
  background: #1a5145;
}

.canvas-command-actions > button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.canvas-command-status {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(138, 149, 171, 0.18);
  border-radius: 5px;
  background: #111721;
}

.canvas-command-status strong,
.canvas-command-status span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-command-status strong {
  color: #cbd1db;
  font-size: 10px;
}

.canvas-command-status span {
  color: #717b89;
  font-size: 8px;
}

.canvas-command-status[data-mode="complete"] {
  border-color: rgba(86, 94, 255, 0.48);
}

.canvas-command-status[data-mode="complete"] strong {
  color: #9da2ff;
}

.canvas-command-status[data-mode="incomplete"] {
  border-color: rgba(217, 89, 105, 0.48);
}

.canvas-command-status[data-mode="incomplete"] strong {
  color: #ed8793;
}

.canvas-command-status[data-mode="dirty"],
.canvas-command-status[data-mode="running"],
.canvas-command-status[data-mode="locked"] {
  border-color: rgba(223, 180, 102, 0.45);
}

.canvas-command-status[data-mode="dirty"] strong,
.canvas-command-status[data-mode="running"] strong,
.canvas-command-status[data-mode="locked"] strong {
  color: #dfb466;
}

.design-canvas-contextbar {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 5px 7px 5px 12px;
  border-bottom: 1px solid rgba(146, 154, 177, 0.14);
  background: #0c1119;
}

.canvas-engine-control {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.canvas-engine-control > span {
  color: #687281;
  font-size: 9px;
  font-weight: 900;
}

.canvas-engine-control > div {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(146, 154, 177, 0.14);
  border-radius: 5px;
  background: #111721;
}

.canvas-engine-control > div button,
.canvas-capability-badge {
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #8e97a5;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-engine-control > div button.active {
  background: #1f23ab;
  color: #fff;
}

.canvas-engine-control > div button:disabled {
  color: #505967;
  cursor: not-allowed;
}

.canvas-capability-badge {
  border: 1px solid rgba(146, 154, 177, 0.14);
  background: #141b25;
  white-space: nowrap;
}

.canvas-capability-badge[data-mode="ai"] {
  border-color: rgba(87, 198, 156, 0.3);
  color: #76cbae;
}

.canvas-capability-badge[data-mode="local"] {
  border-color: rgba(223, 180, 102, 0.28);
  color: #dfb466;
}

.canvas-project-context {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.canvas-project-context span,
.design-canvas-node-kicker,
.canvas-inspector-kicker {
  color: #767f8e;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}

.canvas-project-context strong {
  overflow: hidden;
  color: #eef1f6;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-project-context em {
  flex: 0 0 auto;
  color: #76b9a1;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.canvas-project-context em[data-state="dirty"],
.canvas-project-context em[data-state="saving"] {
  color: #dfb466;
}

.canvas-project-context em[data-state="failed"] {
  color: #e4877d;
}

.canvas-mode-switch,
.canvas-view-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(146, 154, 177, 0.14);
  border-radius: 5px;
  background: #111721;
}

.canvas-mode-switch button,
.canvas-view-controls button {
  min-width: 34px;
  height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #8e97a5;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-mode-switch button:hover,
.canvas-view-controls button:hover {
  background: #202735;
  color: #fff;
}

.canvas-mode-switch button.active {
  background: #1f23ab;
  color: #fff;
}

.canvas-mode-switch button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.canvas-view-controls output {
  min-width: 44px;
  color: #b7bec9;
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}

.canvas-view-controls input[type="range"] {
  width: 92px;
  height: 20px;
  min-height: 0;
  margin: 0 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  accent-color: #5f65ef;
  cursor: pointer;
}

.canvas-view-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: #343c4a;
}

.canvas-view-controls input[type="range"]::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border: 2px solid #b6b9ff;
  border-radius: 50%;
  appearance: none;
  background: #353bd0;
}

.design-canvas-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.design-canvas-viewport {
  --canvas-grid-x: 0px;
  --canvas-grid-y: 0px;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background-color: #090d14;
  overscroll-behavior: contain;
}

.design-canvas-viewport::before {
  position: absolute;
  z-index: 0;
  inset: -22px;
  background-image: radial-gradient(circle, rgba(151, 161, 179, 0.2) 1px, transparent 1px);
  background-size: 22px 22px;
  content: "";
  pointer-events: none;
  transform: translate3d(var(--canvas-grid-x), var(--canvas-grid-y), 0);
  will-change: transform;
}

.design-canvas-viewport.is-panning,
.design-canvas-viewport[data-mode="pan"] {
  cursor: grabbing;
}

.design-canvas-viewport[data-mode="connect"] {
  cursor: crosshair;
}

.design-canvas-viewport.is-dragover {
  box-shadow: inset 0 0 0 2px #6d72ff;
}

.design-canvas-surface {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 2980px;
  height: 1260px;
  contain: layout style;
  transform-origin: 0 0;
}

.design-canvas-viewport.is-transforming .design-canvas-surface {
  will-change: transform;
}

.design-canvas-viewport.is-transforming .design-canvas-node {
  pointer-events: none;
}

.design-canvas-edges,
.design-canvas-stage-labels,
.design-canvas-node-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.design-canvas-edges {
  overflow: visible;
  pointer-events: none;
}

.design-canvas-edges path {
  fill: none;
  stroke: rgba(116, 126, 145, 0.28);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.design-canvas-edges path.is-active {
  stroke: rgba(103, 109, 255, 0.82);
  stroke-width: 2.5;
}

.design-canvas-edges path.is-stale {
  stroke: rgba(223, 180, 102, 0.72);
  stroke-dasharray: 7 6;
}

.design-canvas-edges path.is-custom {
  stroke: rgba(132, 139, 255, 0.74);
  stroke-dasharray: 4 4;
}

.design-canvas-stage-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #545e6c;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
}

.design-canvas-stage-label::after {
  width: 54px;
  height: 1px;
  background: rgba(116, 126, 145, 0.25);
  content: "";
}

.design-canvas-node {
  position: absolute;
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(137, 148, 168, 0.22);
  border-radius: 7px;
  background: rgba(15, 21, 31, 0.98);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28);
  color: #eef1f5;
  transform: translateZ(0);
}

.design-canvas-node.is-board {
  border-style: dashed;
  border-color: rgba(104, 109, 255, 0.34);
  background: rgba(20, 26, 38, 0.42);
  box-shadow: inset 0 0 0 1px rgba(104, 109, 255, 0.08);
}

.design-canvas-node.is-board .design-canvas-node-header {
  background: rgba(26, 33, 48, 0.84);
}

.design-canvas-node.is-note {
  border-color: rgba(223, 180, 102, 0.5);
  background: rgba(30, 28, 23, 0.98);
}

.design-canvas-node.is-note .design-canvas-node-header > i {
  background: #dfb466;
}

.design-canvas-node.is-asset .design-canvas-node-body {
  padding: 0;
}

.canvas-custom-note {
  height: 100%;
  overflow: auto;
  white-space: pre-wrap;
}

.canvas-custom-note p {
  color: #d8d3c7;
  font-size: 13px;
  line-height: 1.65;
}

.canvas-custom-board {
  display: grid;
  height: 100%;
  place-items: center;
  color: rgba(170, 177, 193, 0.62);
  font-size: 12px;
  text-align: center;
}

.canvas-custom-asset,
.canvas-custom-asset img {
  width: 100%;
  height: 100%;
}

.canvas-custom-asset img {
  display: block;
  object-fit: contain;
}

.canvas-custom-asset {
  position: relative;
}

.canvas-custom-asset .canvas-asset-direction {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(95, 102, 239, 0.44);
  border-radius: 4px;
  background: rgba(8, 12, 20, 0.9);
  backdrop-filter: blur(10px);
}

.canvas-custom-asset .canvas-asset-direction strong {
  color: #f3f4ff;
  font-size: 10px;
}

.canvas-custom-asset .canvas-asset-direction span {
  color: #aeb5cc;
  font-size: 8px;
  line-height: 1.4;
}

.canvas-custom-asset.is-stale .canvas-asset-direction {
  bottom: 70px;
}

.canvas-custom-asset.is-stale img {
  filter: grayscale(0.7) brightness(0.55);
}

.canvas-custom-asset.is-stale > div {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 122, 132, 0.5);
  border-radius: 4px;
  background: rgba(24, 9, 14, 0.92);
}

.canvas-custom-asset.is-stale strong {
  color: #ff8992;
  font-size: 10px;
}

.canvas-custom-asset.is-stale span {
  color: #d9b9bd;
  font-size: 9px;
  line-height: 1.4;
}

.canvas-node-resize-handle {
  position: absolute;
  z-index: 5;
  right: 3px;
  bottom: 3px;
  width: 15px;
  height: 15px;
  border-right: 2px solid #8f95ff;
  border-bottom: 2px solid #8f95ff;
  cursor: nwse-resize;
}

.design-canvas-node:hover {
  border-color: rgba(150, 160, 182, 0.4);
}

.design-canvas-node.is-selected {
  border-color: #686dff;
  box-shadow: 0 0 0 1px rgba(104, 109, 255, 0.38), 0 18px 48px rgba(0, 0, 0, 0.38);
}

.design-canvas-node.is-chosen {
  border-color: rgba(103, 109, 255, 0.68);
}

.design-canvas-node[data-status="stale"] {
  border-color: rgba(223, 180, 102, 0.5);
}

.design-canvas-node[data-status="failed"] {
  border-color: rgba(228, 135, 125, 0.64);
}

.design-canvas-node[data-completeness="complete"] {
  border-color: rgba(84, 92, 244, 0.82);
  box-shadow: 0 0 0 1px rgba(84, 92, 244, 0.08), 0 15px 40px rgba(0, 0, 0, 0.28);
}

.design-canvas-node[data-completeness="incomplete"] {
  border-color: rgba(217, 89, 105, 0.86);
  box-shadow: 0 0 0 1px rgba(217, 89, 105, 0.08), 0 15px 40px rgba(0, 0, 0, 0.28);
}

.design-canvas-node[data-completeness="complete"].is-selected {
  box-shadow: 0 0 0 2px rgba(92, 99, 255, 0.42), 0 18px 48px rgba(0, 0, 0, 0.38);
}

.design-canvas-node[data-completeness="incomplete"].is-selected {
  box-shadow: 0 0 0 2px rgba(217, 89, 105, 0.42), 0 18px 48px rgba(0, 0, 0, 0.38);
}

.design-canvas-node-header {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 10px;
  border-bottom: 1px solid rgba(137, 148, 168, 0.14);
  background: #121923;
  cursor: move;
  user-select: none;
}

.design-canvas-node-header > i {
  width: 5px;
  height: 20px;
  border-radius: 2px;
  background: #5f6674;
}

.design-canvas-node.is-selected .design-canvas-node-header > i,
.design-canvas-node.is-chosen .design-canvas-node-header > i {
  background: #686dff;
}

.design-canvas-node[data-status="stale"] .design-canvas-node-header > i {
  background: #dfb466;
}

.design-canvas-node[data-completeness="complete"] .design-canvas-node-header > i {
  background: #5961ff;
}

.design-canvas-node[data-completeness="incomplete"] .design-canvas-node-header > i {
  background: #d95969;
}

.design-canvas-node-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.design-canvas-node-title strong {
  overflow: hidden;
  color: #f5f6f8;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-canvas-node-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(118, 185, 161, 0.25);
  border-radius: 4px;
  color: #78bda5;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.design-canvas-node[data-status="stale"] .design-canvas-node-status {
  border-color: rgba(223, 180, 102, 0.3);
  color: #dfb466;
}

.design-canvas-node[data-completeness="complete"] .design-canvas-node-status {
  border-color: rgba(89, 97, 255, 0.4);
  color: #9ca1ff;
}

.design-canvas-node[data-completeness="incomplete"] .design-canvas-node-status {
  border-color: rgba(217, 89, 105, 0.42);
  color: #ed8793;
}

.design-canvas-node-body {
  min-height: 0;
  overflow: hidden;
  padding: 13px;
}

.design-canvas-node-body p {
  margin: 0;
  color: #9da6b4;
  font-size: 11px;
  line-height: 1.52;
}

.canvas-data-list {
  display: grid;
  gap: 7px;
}

.canvas-data-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.canvas-data-row > span {
  color: #667080;
  font-size: 10px;
  font-weight: 850;
}

.canvas-data-row > strong {
  overflow: hidden;
  color: #cdd3dc;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-node-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.canvas-node-actions button,
.canvas-inspector-actions button {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid rgba(137, 148, 168, 0.2);
  border-radius: 4px;
  background: #171f2a;
  color: #bec6d1;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-node-actions button:hover,
.canvas-inspector-actions button:hover {
  border-color: #5b60ef;
  color: #fff;
}

.canvas-node-actions button.primary,
.canvas-inspector-actions button.primary {
  border-color: #353bd0;
  background: #1f23ab;
  color: #fff;
}

.canvas-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.canvas-chip-list span {
  max-width: 100%;
  overflow: hidden;
  padding: 4px 6px;
  border: 1px solid rgba(137, 148, 168, 0.14);
  border-radius: 4px;
  background: #171e29;
  color: #aeb6c2;
  font-size: 9px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-provenance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 7px 0;
  padding: 6px 7px;
  border: 1px solid rgba(137, 148, 168, 0.14);
  border-radius: 4px;
  background: #121923;
}

.canvas-provenance span {
  flex: 0 0 auto;
  color: #66717f;
  font-size: 8px;
  font-weight: 900;
}

.canvas-provenance strong {
  overflow: hidden;
  color: #9da7b5;
  font-size: 8px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-provenance[data-mode="archive-only"] strong,
.canvas-provenance[data-mode="rule-derived"] strong,
.canvas-provenance[data-mode="structured-svg"] strong {
  color: #dfb466;
}

.canvas-provenance[data-mode="ai-vision"] strong {
  color: #76cbae;
}

.canvas-evidence-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 7px 0;
}

.canvas-evidence-summary span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(137, 148, 168, 0.14);
  border-radius: 4px;
  background: #121923;
  color: #87919f;
  font-size: 8px;
  font-weight: 800;
}

.canvas-evidence-summary span[data-source="observed"] {
  border-color: rgba(100, 211, 172, 0.28);
  color: #76cbae;
}

.canvas-evidence-summary span[data-source="inferred"] {
  border-color: rgba(98, 108, 255, 0.3);
  color: #a9adff;
}

.canvas-evidence-summary span[data-source="user"] {
  border-color: rgba(240, 190, 97, 0.3);
  color: #dfb466;
}

.canvas-evidence-summary b {
  color: currentColor;
  font-size: 10px;
}

.canvas-reference-projection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 7px;
  border: 1px solid rgba(255, 106, 126, 0.25);
  border-radius: 4px;
  background: rgba(75, 23, 38, 0.28);
}

.canvas-reference-projection span,
.canvas-reference-projection strong {
  font-size: 8px;
}

.canvas-reference-projection span {
  color: #8f7b82;
  font-weight: 900;
}

.canvas-reference-projection strong {
  color: #ff9aaa;
  text-align: right;
}

.canvas-reference-projection[data-status="projected"],
.canvas-reference-projection[data-status="confirmed-and-projected"] {
  border-color: rgba(100, 211, 172, 0.28);
  background: rgba(20, 70, 57, 0.28);
}

.canvas-reference-projection[data-status="projected"] strong,
.canvas-reference-projection[data-status="confirmed-and-projected"] strong {
  color: #76cbae;
}

.canvas-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 78px;
  gap: 5px;
  min-height: 78px;
  margin-bottom: 8px;
}

.canvas-reference-grid img {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(137, 148, 168, 0.14);
  border-radius: 4px;
  background: #101620;
  object-fit: cover;
}

.canvas-reference-empty {
  display: grid;
  min-height: 106px;
  margin-bottom: 8px;
  padding: 14px;
  place-content: center;
  gap: 5px;
  border: 1px dashed rgba(137, 148, 168, 0.28);
  border-radius: 5px;
  background: #121923;
  text-align: center;
}

.canvas-reference-empty strong {
  color: #d8dde5;
  font-size: 11px;
}

.canvas-reference-empty span {
  color: #737d8b;
  font-size: 9px;
}

.canvas-variant-score {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.canvas-variant-score b {
  display: grid;
  gap: 2px;
  color: #f4f5f7;
  font-size: 32px;
  font-weight: 950;
  line-height: 1;
}

.canvas-variant-score b small {
  color: #697381;
  font-size: 7px;
  font-weight: 850;
}

.canvas-score-bars {
  display: grid;
  gap: 5px;
}

.canvas-score-bars span {
  position: relative;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 2px;
  background: #252c37;
}

.canvas-score-bars span::after {
  display: block;
  width: var(--score, 0%);
  height: 100%;
  background: #686dff;
  content: "";
}

.canvas-palette {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  margin: 8px 0 10px;
}

.canvas-palette i {
  display: block;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: var(--color, #1f23ab);
}

.canvas-material-list,
.canvas-sku-list,
.canvas-risk-list {
  display: grid;
  gap: 6px;
}

.canvas-material-list > div,
.canvas-sku-list > div,
.canvas-risk-list > div {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid rgba(137, 148, 168, 0.14);
  border-radius: 4px;
  background: #151c26;
}

.canvas-material-list strong,
.canvas-sku-list strong,
.canvas-risk-list strong {
  color: #d7dce3;
  font-size: 10px;
}

.canvas-material-list span,
.canvas-sku-list span,
.canvas-risk-list span {
  color: #737d8b;
  font-size: 9px;
}

.canvas-visual-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  height: 305px;
}

.canvas-visual-grid figure {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.canvas-visual-grid figure:first-child {
  grid-row: 1 / 3;
}

.canvas-visual-grid img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid rgba(137, 148, 168, 0.14);
  border-radius: 4px;
  background: #090d13;
  image-rendering: auto;
  object-fit: cover;
}

.canvas-visual-grid figcaption {
  position: absolute;
  right: 5px;
  bottom: 5px;
  max-width: calc(100% - 10px);
  padding: 3px 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  background: rgba(5, 8, 12, 0.82);
  color: #d9dee6;
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-visual-grid.has-ai-images figure:first-child img {
  object-position: center top;
}

.canvas-model-empty,
.canvas-model-generating {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  min-height: 292px;
  padding: 20px;
  border: 1px dashed rgba(90, 99, 255, 0.45);
  border-radius: 5px;
  background: #0c121b;
  text-align: center;
}

.canvas-model-empty > span,
.canvas-model-generating > span {
  color: #7f8998;
  font-size: 9px;
  line-height: 1.5;
}

.canvas-model-empty > strong,
.canvas-model-generating > strong {
  color: #f0f2f6;
  font-size: 15px;
}

.canvas-model-empty > p {
  max-width: 280px;
}

.canvas-model-empty > button {
  min-width: 170px;
  height: 36px;
  border: 1px solid #4c54e8;
  border-radius: 4px;
  background: #1f23ab;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.canvas-model-stale {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 122, 132, 0.45);
  border-radius: 4px;
  background: rgba(74, 18, 28, 0.26);
}

.canvas-model-stale > span {
  color: #ff8992;
  font-size: 9px;
  font-weight: 900;
}

.canvas-model-stale > strong {
  color: #f4dce0;
  font-size: 12px;
}

.canvas-model-stale > p {
  color: #bd9ca2;
  font-size: 10px;
  line-height: 1.5;
}

.canvas-model-generating > i {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(98, 105, 255, 0.2);
  border-top-color: #686dff;
  border-radius: 50%;
  animation: canvas-model-spin 0.8s linear infinite;
}

.canvas-model-generating > div {
  display: flex;
  gap: 5px;
}

.canvas-model-generating b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #686dff;
  animation: canvas-model-pulse 0.9s ease-in-out infinite alternate;
  animation-delay: var(--delay);
}

@keyframes canvas-model-spin { to { transform: rotate(360deg); } }
@keyframes canvas-model-pulse { to { opacity: 0.25; transform: translateY(3px); } }

.canvas-model-results {
  height: 350px;
}

.canvas-model-results.is-multiple {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.canvas-model-results > button {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(99, 107, 255, 0.48);
  border-radius: 5px;
  background: #090d13;
  cursor: zoom-in;
}

.canvas-model-results img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.canvas-model-results button > span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  background: rgba(6, 9, 14, 0.84);
  color: #fff;
  font-size: 9px;
  font-weight: 850;
}

.canvas-model-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  color: #778291;
  font-size: 9px;
}

.canvas-model-result-meta strong {
  overflow: hidden;
  color: #9da4ff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-generated-image-modal,
.canvas-generated-image-backdrop {
  position: fixed;
  inset: 0;
}

.canvas-generated-image-modal {
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px;
}

.canvas-generated-image-backdrop {
  background: rgba(2, 5, 9, 0.88);
  backdrop-filter: blur(8px);
}

.canvas-generated-image-modal > section {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1120px, 94vw);
  height: min(820px, 92vh);
  overflow: hidden;
  border: 1px solid rgba(111, 119, 255, 0.45);
  border-radius: 7px;
  background: #0b1018;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.68);
}

.canvas-generated-image-modal header,
.canvas-generated-image-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(145, 154, 177, 0.14);
}

.canvas-generated-image-modal header span {
  color: #777ff7;
  font-size: 9px;
  font-weight: 950;
}

.canvas-generated-image-modal header h2 {
  margin: 4px 0 0;
  font-size: 17px;
}

.canvas-generated-image-modal header > button {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #a9b1bd;
  font-size: 22px;
  cursor: pointer;
}

.canvas-generated-image-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  min-height: 0;
}

.canvas-generated-image-view > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #05080d;
  object-fit: contain;
}

.canvas-generated-image-view.is-comparison {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.canvas-generated-image-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  min-height: 0;
  background: #05080d;
}

.canvas-generated-image-compare figure {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border-right: 1px solid rgba(145, 154, 177, 0.14);
}

.canvas-generated-image-compare figure > span {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  background: rgba(5, 8, 13, 0.82);
  color: #d9dee7;
  font-size: 9px;
  font-weight: 850;
}

.canvas-generated-image-compare img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.canvas-generated-image-compare figcaption {
  padding: 8px 10px;
  color: #aeb6c2;
  font-size: 9px;
  text-align: center;
}

.canvas-generated-image-view > aside {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  border-left: 1px solid rgba(145, 154, 177, 0.14);
  overflow: auto;
}

.canvas-generated-image-view aside > div {
  display: grid;
  gap: 4px;
}

.canvas-generated-image-view aside span {
  color: #6f7886;
  font-size: 9px;
  font-weight: 900;
}

.canvas-generated-image-view aside strong {
  color: #e5e8ed;
  font-size: 11px;
}

.canvas-generated-image-view aside p {
  margin: 4px 0 0;
  color: #8b95a3;
  font-size: 10px;
  line-height: 1.6;
}

.generated-asset-decision-trace {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(88, 96, 238, 0.42);
  border-radius: 5px;
  background: rgba(31, 35, 171, 0.09);
}

.generated-asset-decision-trace > header,
.generated-asset-policy {
  display: grid;
  gap: 3px;
}

.generated-asset-decision-trace > header strong {
  color: #dfe1ff;
  font-size: 12px;
}

.generated-asset-decision-trace > p,
.generated-asset-policy p {
  margin: 0;
  color: #b1b8ca;
  font-size: 9px;
  line-height: 1.55;
}

.generated-asset-genes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.generated-asset-genes article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 5px;
  border: 1px solid rgba(133, 143, 165, 0.16);
  border-radius: 3px;
  background: #0b1119;
}

.generated-asset-genes article[data-mode="keep"] {
  border-color: rgba(85, 96, 255, 0.5);
}

.generated-asset-genes article[data-mode="vary"] {
  border-color: rgba(208, 158, 76, 0.42);
}

.generated-asset-genes img {
  width: 34px;
  height: 34px;
  border-radius: 2px;
  object-fit: cover;
}

.generated-asset-genes article > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.generated-asset-genes article strong,
.generated-asset-genes article span {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generated-asset-decision-trace dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.generated-asset-decision-trace dl > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}

.generated-asset-decision-trace dt {
  color: #777ff7;
  font-size: 8px;
  font-weight: 900;
}

.generated-asset-decision-trace [data-rule="change"] dt {
  color: #d5a65a;
}

.generated-asset-decision-trace dd {
  margin: 0;
  color: #aab2c0;
  font-size: 8px;
  line-height: 1.45;
}

.generated-asset-prompt {
  border-top: 1px solid rgba(145, 154, 177, 0.12);
  padding-top: 9px;
}

.generated-asset-prompt summary {
  color: #8d96a5;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.asset-review-status {
  padding: 9px 10px;
  border: 1px solid rgba(133, 143, 165, 0.18);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
}

.asset-review-status.is-approved {
  border-color: rgba(62, 204, 151, 0.4);
}

.asset-review-status.is-approved strong {
  color: #6ee7b7;
}

.asset-review-status.is-rejected {
  border-color: rgba(240, 100, 105, 0.44);
}

.asset-review-status.is-rejected strong {
  color: #ff8d91;
}

.image-quality-audit {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(133, 143, 165, 0.24);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
}

.image-quality-audit.is-pass { border-color: rgba(62, 204, 151, 0.42); }
.image-quality-audit.is-warn { border-color: rgba(229, 176, 72, 0.52); }
.image-quality-audit.is-blocked { border-color: rgba(240, 100, 105, 0.58); background: rgba(151, 37, 45, 0.12); }
.image-quality-audit.is-pass header strong { color: #70e7b8; }
.image-quality-audit.is-warn header strong { color: #f0c66d; }
.image-quality-audit.is-blocked header strong { color: #ff9297; }

.image-quality-task {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-left: 2px solid #4b52ff;
  background: rgba(31, 35, 171, 0.16);
}

.image-quality-task strong { color: #eef0ff; font-size: 10px; }
.image-quality-task span { color: #929cb0; font-size: 9px; overflow-wrap: anywhere; }
.image-quality-task.is-uncertain,
.image-quality-task.is-failed { border-left-color: #ef6c72; background: rgba(151, 37, 45, 0.14); }

.image-quality-audit header,
.image-quality-audit dl,
.image-quality-audit dl > div {
  display: grid;
  gap: 4px;
}

.image-quality-audit dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.image-quality-audit dl.semantic { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.image-quality-audit dt { color: #737d8d; font-size: 8px; }
.image-quality-audit dd { margin: 0; color: #dfe3ea; font-size: 10px; font-weight: 800; }
.image-quality-audit ul { display: grid; gap: 4px; margin: 0; padding-left: 14px; color: #aeb6c3; font-size: 9px; line-height: 1.45; }
.image-quality-audit .image-quality-reviewer { color: #727cff; font-weight: 800; }

.manual-quality-review-modal,
.manual-quality-review-backdrop {
  position: fixed;
  inset: 0;
}

.manual-quality-review-modal {
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 24px;
}

.manual-quality-review-backdrop {
  background: rgba(2, 5, 9, 0.9);
  backdrop-filter: blur(8px);
}

.manual-quality-review-modal > section {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1180px, 95vw);
  height: min(820px, 92vh);
  overflow: hidden;
  border: 1px solid rgba(111, 119, 255, 0.48);
  border-radius: 7px;
  background: #0b1018;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.72);
}

.manual-quality-review-modal header,
.manual-quality-review-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(145, 154, 177, 0.14);
}

.manual-quality-review-modal header span { color: #777ff7; font-size: 9px; font-weight: 950; }
.manual-quality-review-modal header h2 { margin: 4px 0; font-size: 18px; }
.manual-quality-review-modal header p,
.manual-quality-review-modal footer p { margin: 0; color: #8993a3; font-size: 10px; }
.manual-quality-review-modal header > button { border: 0; background: transparent; color: #a9b1bd; font-size: 22px; cursor: pointer; }

.manual-quality-review-body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  min-height: 0;
}

.manual-quality-review-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  background: #05080d;
}

.manual-quality-review-compare figure {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border-right: 1px solid rgba(145, 154, 177, 0.14);
}

.manual-quality-review-compare figure > span {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  background: rgba(5, 8, 13, 0.82);
  color: #d9dee7;
  font-size: 9px;
  font-weight: 850;
}

.manual-quality-review-compare img { width: 100%; height: 100%; object-fit: contain; }

.manual-video-quality-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
  padding: 16px;
  background: #05080d;
}

.manual-video-quality-preview video { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #000; }
.manual-video-quality-preview dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.manual-video-quality-preview dl > div { padding: 8px; border: 1px solid rgba(133, 143, 165, 0.2); border-radius: 4px; background: #0b111a; }
.manual-video-quality-preview dt { color: #778294; font-size: 9px; }
.manual-video-quality-preview dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #e0e4ea; font-size: 10px; font-weight: 800; }

.media-video-review-state { display: grid; gap: 3px; margin: 8px 0; padding: 8px; border: 1px solid rgba(229, 176, 72, 0.38); border-radius: 4px; background: rgba(112, 76, 11, 0.1); }
.media-video-review-state strong { color: #f0c66d; font-size: 10px; }
.media-video-review-state span { color: #9aa4b3; font-size: 9px; line-height: 1.45; }
.media-video-review-state[data-status="pass"] { border-color: rgba(62, 204, 151, 0.42); background: rgba(22, 110, 78, 0.1); }
.media-video-review-state[data-status="pass"] strong { color: #70e7b8; }
.media-video-review-state[data-status="blocked"],
.media-video-review-state[data-status="motion-blocked"],
.media-video-review-state[data-status="invalid-evidence"],
.media-video-review-state[data-status="stale-evidence"] { border-color: rgba(240, 100, 105, 0.48); background: rgba(151, 37, 45, 0.12); }
.media-video-review-state[data-status="blocked"] strong,
.media-video-review-state[data-status="motion-blocked"] strong,
.media-video-review-state[data-status="invalid-evidence"] strong,
.media-video-review-state[data-status="stale-evidence"] strong { color: #ff9297; }

.manual-quality-review-checklist {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  overflow: auto;
}

.manual-quality-review-checklist > label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(133, 143, 165, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
}

.manual-quality-review-checklist input { width: 15px; height: 15px; accent-color: #575eff; }
.manual-quality-review-checklist label > span { display: grid; gap: 3px; }
.manual-quality-review-checklist strong { color: #e3e7ed; font-size: 11px; }
.manual-quality-review-checklist small { color: #7f8999; font-size: 9px; line-height: 1.45; }
.manual-quality-review-checklist .manual-quality-review-note { grid-template-columns: 1fr; }
.manual-quality-review-note textarea { width: 100%; resize: vertical; border: 1px solid rgba(133, 143, 165, 0.28); border-radius: 4px; padding: 9px; background: #080d14; color: #dfe3ea; font: inherit; }

.manual-quality-review-modal footer { justify-content: flex-end; border-top: 1px solid rgba(145, 154, 177, 0.14); border-bottom: 0; }
.manual-quality-review-modal footer p { margin-right: auto; }
.manual-quality-review-modal footer button { min-width: 116px; height: 36px; border: 1px solid rgba(145, 154, 177, 0.28); border-radius: 4px; background: #171e29; color: #d5dae2; font-size: 10px; font-weight: 850; cursor: pointer; }
.manual-quality-review-modal footer button.primary { border-color: #464ddd; background: #1f23ab; color: #fff; }
.manual-quality-review-modal footer button.danger { border-color: rgba(240, 100, 105, 0.48); color: #ff979b; }

.canvas-generated-image-modal footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(145, 154, 177, 0.14);
  border-bottom: 0;
}

.canvas-generated-image-modal footer button {
  min-width: 96px;
  height: 34px;
  border: 1px solid rgba(145, 154, 177, 0.25);
  border-radius: 4px;
  background: #171e29;
  color: #d5dae2;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-generated-image-modal footer button.primary {
  border-color: #464ddd;
  background: #1f23ab;
  color: #fff;
}

.canvas-generated-image-modal footer button.danger {
  border-color: rgba(240, 100, 105, 0.48);
  color: #ff979b;
}

@media (max-width: 760px) {
  .canvas-generated-image-modal {
    padding: 8px;
  }

  .canvas-generated-image-modal > section {
    width: 98vw;
    height: 96vh;
  }

  .manual-quality-review-modal { padding: 8px; }
  .manual-quality-review-modal > section { width: 98vw; height: 96vh; }
  .manual-quality-review-body { grid-template-columns: 1fr; overflow: auto; }
  .manual-quality-review-compare { min-height: 50vh; }

  .canvas-generated-image-view,
  .canvas-generated-image-view.is-comparison {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .canvas-generated-image-compare {
    grid-template-columns: 1fr 1fr;
    min-height: 55vh;
  }

  .canvas-generated-image-view > aside {
    border-top: 1px solid rgba(145, 154, 177, 0.14);
    border-left: 0;
  }

  .reference-gene-generation-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }

  .reference-generation-summary,
  .reference-generation-branches {
    grid-template-columns: 1fr;
  }

  .reference-generation-summary > div {
    padding: 8px 12px;
  }

  .reference-generation-genes,
  .reference-generation-branches {
    padding: 10px 12px;
  }

  .reference-generation-branches > article > p {
    min-height: 0;
  }

  .reference-gene-generation-panel > footer {
    flex-wrap: wrap;
  }

  .reference-gene-generation-panel > footer > span {
    flex-basis: 100%;
  }
}

.canvas-delivery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.canvas-delivery-grid button {
  min-height: 62px;
  padding: 9px;
  border: 1px solid rgba(137, 148, 168, 0.17);
  border-radius: 5px;
  background: #151c26;
  color: #c5ccd6;
  text-align: left;
  cursor: pointer;
}

.canvas-delivery-grid button strong,
.canvas-delivery-grid button span {
  display: block;
}

.canvas-delivery-grid button.is-release {
  border-color: rgba(91, 101, 255, 0.72);
  background: linear-gradient(180deg, rgba(31, 35, 171, 0.34), rgba(17, 22, 32, 0.96));
}

.project-release-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
}

.project-release-modal > section {
  position: relative;
  z-index: 1;
  width: min(760px, 96vw);
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid rgba(117, 126, 151, 0.34);
  border-radius: 6px;
  background: #0d131c;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  color: #eef1f5;
}

.project-release-modal > section > header,
.project-release-modal > section > footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(117, 126, 151, 0.2);
}

.project-release-modal > section > header > div { flex: 1; }
.project-release-modal header span { color: #777ff7; font-size: 9px; font-weight: 950; }
.project-release-modal header h2 { margin: 4px 0; font-size: 20px; }
.project-release-modal header p,
.project-release-modal footer p { margin: 0; color: #8c96a5; font-size: 11px; }
.project-release-modal header > button { border: 0; background: transparent; color: #a9b1bd; font-size: 22px; cursor: pointer; }
.project-release-body { min-height: 260px; max-height: 62vh; overflow: auto; padding: 18px 20px; }
.project-release-loading,
.project-release-error,
.project-release-ready { display: grid; gap: 6px; padding: 18px; border: 1px solid rgba(117, 126, 151, 0.22); background: #111923; }
.project-release-ready { border-color: rgba(69, 196, 153, 0.42); }
.project-release-ready strong { color: #7be0bc; }
.project-release-error { border-color: rgba(240, 100, 105, 0.46); }
.project-release-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.project-release-summary article { display: grid; gap: 7px; min-width: 0; padding: 13px; border: 1px solid rgba(117, 126, 151, 0.22); background: #111923; }
.project-release-summary span { color: #7f8998; font-size: 9px; }
.project-release-summary strong { font-size: 13px; overflow-wrap: anywhere; }
.project-release-blockers { display: grid; gap: 8px; }
.project-release-blockers article { padding: 13px 14px; border: 1px solid rgba(240, 100, 105, 0.36); background: rgba(90, 24, 31, 0.2); }
.project-release-blockers header { display: grid; gap: 4px; }
.project-release-blockers header span { color: #ff8f94; font-size: 9px; font-weight: 900; }
.project-release-blockers header strong { font-size: 12px; }
.project-release-blockers ul { margin: 9px 0 0; padding-left: 18px; color: #aeb6c3; font-size: 10px; line-height: 1.7; }
.project-release-blockers article > button { margin-top: 10px; height: 30px; padding: 0 11px; border: 1px solid rgba(240, 100, 105, 0.38); border-radius: 4px; background: rgba(95, 30, 37, 0.38); color: #ffb0b3; font-size: 9px; font-weight: 850; cursor: pointer; }
.project-release-history { margin-top: 14px; border-top: 1px solid rgba(117, 126, 151, 0.2); padding-top: 14px; }
.project-release-history > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.project-release-history > header span { color: #777ff7; font-size: 9px; font-weight: 900; }
.project-release-history > header strong { color: #8c96a5; font-size: 10px; }
.project-release-history > article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid rgba(117, 126, 151, 0.22); background: #111923; }
.project-release-history article div { display: grid; gap: 3px; min-width: 0; }
.project-release-history article strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.project-release-history article span,
.project-release-history article em { color: #8c96a5; font-size: 9px; font-style: normal; }
.project-release-history article button { height: 30px; border: 1px solid rgba(117, 126, 151, 0.32); border-radius: 4px; background: #171e29; color: #dbe0e8; font-size: 9px; font-weight: 800; cursor: pointer; }
.project-release-modal footer { justify-content: flex-end; border-top: 1px solid rgba(117, 126, 151, 0.2); border-bottom: 0; }
.project-release-modal footer p { margin-right: auto; max-width: 410px; }
.project-release-modal footer button { height: 36px; padding: 0 15px; border: 1px solid rgba(117, 126, 151, 0.32); border-radius: 4px; background: #171e29; color: #dbe0e8; font-size: 10px; font-weight: 850; cursor: pointer; }
.project-release-modal footer button.primary { border-color: #4f58ef; background: #1f23ab; color: #fff; }
.project-release-modal footer button:disabled { cursor: not-allowed; opacity: 0.42; }

@media (max-width: 700px) {
  .project-release-modal { padding: 8px; }
  .project-release-summary { grid-template-columns: 1fr; }
  .project-release-modal footer { align-items: stretch; flex-direction: column; }
  .project-release-modal footer p { margin-right: 0; max-width: none; }
}

.canvas-delivery-grid button strong {
  margin-bottom: 4px;
  color: #eef1f5;
  font-size: 10px;
}

.canvas-delivery-grid button span {
  color: #747e8c;
  font-size: 9px;
}

.canvas-delivery-blockers {
  display: grid;
  gap: 6px;
  margin-bottom: 9px;
  padding: 8px 0;
  border-top: 1px solid rgba(217, 89, 105, 0.32);
  border-bottom: 1px solid rgba(217, 89, 105, 0.2);
}

.canvas-delivery-blockers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ed8793;
  font-size: 9px;
  font-weight: 900;
}

.canvas-delivery-blockers > button {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(217, 89, 105, 0.3);
  border-radius: 4px;
  background: rgba(71, 25, 34, 0.28);
  color: #d9dee6;
  text-align: left;
  cursor: pointer;
}

.canvas-delivery-blockers > button span,
.canvas-delivery-blockers > button strong,
.canvas-delivery-blockers > button em {
  display: block;
}

.canvas-delivery-blockers > button span {
  color: #ed8793;
  font-size: 10px;
  font-weight: 900;
}

.canvas-delivery-blockers > button strong {
  color: #cdd3dc;
  font-size: 9px;
  line-height: 1.45;
}

.canvas-delivery-blockers > button em {
  color: #dfb466;
  font-size: 8px;
  font-style: normal;
}

.design-canvas-sidebar {
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid rgba(146, 154, 177, 0.14);
  background: #0c1118;
}

.canvas-sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 5px 7px;
  border-bottom: 1px solid rgba(146, 154, 177, 0.14);
  background: #0a0f16;
}

.canvas-sidebar-tabs button {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #7e8897;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.canvas-sidebar-tabs button.active {
  border-color: rgba(87, 94, 255, 0.38);
  background: rgba(31, 35, 171, 0.28);
  color: #f4f5ff;
}

.canvas-sidebar-tabs button:hover {
  color: #fff;
}

.design-canvas-sidebar > [data-canvas-sidebar-panel][hidden] {
  display: none !important;
}

.design-canvas-assistant,
.design-canvas-layers,
.design-canvas-inspector {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #0c1118;
}

.design-canvas-assistant {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.canvas-assistant-thread {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 13px;
  overflow: auto;
}

.canvas-assistant-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(137, 148, 168, 0.14);
}

.canvas-assistant-header > div {
  display: grid;
  gap: 5px;
}

.canvas-assistant-header span,
.canvas-assistant-message > span,
.canvas-assistant-loading > span {
  color: #6f7888;
  font-size: 8px;
  font-weight: 950;
}

.canvas-assistant-message > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.canvas-assistant-message > span i {
  color: #727d8d;
  font-size: 8px;
  font-style: normal;
}

.canvas-assistant-header strong {
  color: #eef1f5;
  font-size: 13px;
}

.canvas-assistant-header em {
  padding: 4px 6px;
  border: 1px solid rgba(223, 180, 102, 0.28);
  border-radius: 3px;
  color: #dfb466;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.canvas-assistant-header em[data-mode="ai"] {
  border-color: rgba(100, 216, 197, 0.3);
  color: #78ddcc;
}

.canvas-assistant-message {
  display: grid;
  gap: 6px;
  max-width: 94%;
  padding: 11px;
  border: 1px solid rgba(137, 148, 168, 0.15);
  border-radius: 5px;
  background: #141a23;
}

.canvas-assistant-message.is-user {
  justify-self: end;
  border-color: rgba(87, 94, 255, 0.3);
  background: rgba(31, 35, 171, 0.22);
}

.canvas-assistant-message.is-system {
  border-style: dashed;
  background: #10161e;
}

.canvas-assistant-message.is-warning {
  border-color: rgba(223, 180, 102, 0.36);
  background: rgba(59, 46, 24, 0.34);
}

.canvas-assistant-message[data-status="running"] {
  border-color: rgba(81, 88, 231, 0.5);
}

.canvas-assistant-message[data-status="failed"],
.canvas-assistant-message[data-status="rejected"] {
  border-color: rgba(231, 92, 111, 0.44);
}

.canvas-assistant-message[data-status="adopted"] {
  border-color: rgba(75, 202, 160, 0.42);
}

.canvas-assistant-message.is-warning > strong {
  color: #efd093;
}

.canvas-assistant-message.is-warning > button {
  justify-self: start;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(223, 180, 102, 0.34);
  border-radius: 3px;
  background: #17130d;
  color: #efd093;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-assistant-message.is-warning.is-blocking {
  border-color: rgba(231, 92, 111, 0.48);
  background: rgba(61, 24, 32, 0.42);
}

.canvas-assistant-message.is-warning.is-blocking > strong {
  color: #ffabb6;
}

.canvas-assistant-warning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.canvas-assistant-warning-actions button {
  min-height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(231, 92, 111, 0.36);
  border-radius: 3px;
  background: #181017;
  color: #ffb1ba;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-assistant-warning-actions button.primary {
  border-color: #4f56e8;
  background: #292fc0;
  color: #fff;
}

.canvas-assistant-message strong {
  color: #f0f2f5;
  font-size: 12px;
}

.canvas-assistant-message p {
  margin: 0;
  color: #a9b1bd;
  font-size: 10px;
  line-height: 1.55;
}

.canvas-assistant-task-progress {
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(104, 113, 142, 0.15);
}

.canvas-assistant-task-progress i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: #5d63ef;
  animation: assistant-task-progress 1.3s ease-in-out infinite;
}

.canvas-assistant-direction-status {
  display: grid;
  gap: 5px;
}

.canvas-assistant-direction-status > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 7px;
  border: 1px solid rgba(137, 148, 168, 0.14);
  border-radius: 3px;
  background: rgba(7, 11, 17, 0.56);
}

.canvas-assistant-direction-status b {
  color: #697284;
  font-size: 8px;
}

.canvas-assistant-direction-status span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.canvas-assistant-direction-status strong {
  overflow: hidden;
  color: #e8ebf3;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-assistant-direction-status small {
  color: #777ff7;
  font-size: 7px;
  font-weight: 900;
}

.canvas-assistant-direction-status em {
  overflow: hidden;
  color: #7f899a;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-assistant-direction-status mark {
  overflow: hidden;
  padding: 0;
  background: transparent;
  color: #929bad;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-assistant-direction-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4f56e8;
}

.canvas-assistant-direction-status [data-status="running"] i {
  box-shadow: 0 0 0 3px rgba(79, 86, 232, 0.15);
  animation: canvas-direction-pulse 1.2s ease-in-out infinite;
}

.canvas-assistant-direction-status [data-status="succeeded"] i {
  background: #50c9a4;
}

.canvas-assistant-direction-status [data-status="failed"] {
  border-color: rgba(231, 92, 111, 0.32);
}

.canvas-assistant-direction-status [data-status="failed"] i {
  background: #e75c6f;
}

.canvas-assistant-direction-status button {
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(231, 92, 111, 0.42);
  border-radius: 3px;
  background: #211219;
  color: #ffacb6;
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}

@keyframes canvas-direction-pulse {
  50% { opacity: 0.38; }
}

@keyframes assistant-task-progress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(340%); }
}

.canvas-assistant-assets {
  display: grid;
  gap: 8px;
}

.canvas-assistant-assets > article {
  display: grid;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(137, 148, 168, 0.18);
  border-radius: 4px;
  background: #0d131b;
}

.canvas-assistant-asset-preview {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #080d13;
  cursor: zoom-in;
  overflow: hidden;
}

.canvas-assistant-asset-preview img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.canvas-assistant-assets > article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.canvas-assistant-assets > article > div strong {
  color: #e8ebf0;
  font-size: 9px;
}

.canvas-assistant-assets > article > div span {
  color: #7f8998;
  font-size: 8px;
}

.canvas-assistant-assets .canvas-assistant-asset-difference {
  color: #aeb6c4;
  font-size: 9px;
}

.canvas-assistant-assets > article > .canvas-assistant-asset-rules {
  display: grid;
  justify-content: stretch;
  gap: 4px;
}

.canvas-assistant-asset-rules span {
  display: block;
  padding: 5px 6px;
  border-left: 2px solid #555cf2;
  background: rgba(85, 92, 242, 0.08);
  color: #9da6b5;
  font-size: 8px;
  line-height: 1.4;
}

.canvas-assistant-asset-rules span[data-rule="change"] {
  border-left-color: #c89649;
  background: rgba(200, 150, 73, 0.07);
}

.canvas-assistant-assets footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.canvas-assistant-assets footer button {
  min-height: 27px;
  padding: 0 8px;
  border: 1px solid rgba(89, 96, 236, 0.34);
  border-radius: 3px;
  background: #171e2a;
  color: #cfd4de;
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-assistant-assets footer button:first-child {
  background: #1f23ab;
  color: #fff;
}

.canvas-assistant-selected-asset {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(91, 98, 238, 0.42);
  border-radius: 5px;
  background: #101722;
}

.canvas-assistant-selected-asset > button {
  grid-row: span 2;
  width: 64px;
  height: 76px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(137, 148, 168, 0.2);
  border-radius: 3px;
  background: #090e15;
  cursor: zoom-in;
}

.canvas-assistant-selected-asset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.canvas-assistant-selected-asset > div {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.canvas-assistant-selected-asset span,
.canvas-assistant-selected-asset em {
  color: #7f899a;
  font-size: 8px;
  font-style: normal;
}

.canvas-assistant-selected-asset strong {
  overflow: hidden;
  color: #eef1f5;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-assistant-selected-asset footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.canvas-assistant-selected-asset footer button {
  min-height: 27px;
  padding: 0 3px;
  border: 1px solid rgba(89, 96, 236, 0.34);
  border-radius: 3px;
  background: #151c28;
  color: #cdd3dd;
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-image-clarification {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(85, 92, 233, 0.56);
  border-radius: 5px;
  background: #111722;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.canvas-image-clarification-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 24px;
}

.canvas-image-clarification-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 12, 0.74);
  backdrop-filter: blur(7px);
}

.canvas-image-clarification-modal > .canvas-image-clarification {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  border-color: rgba(96, 104, 255, 0.72);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.5);
}

.canvas-image-clarification-modal .canvas-image-clarification > header {
  grid-template-columns: 76px minmax(0, 1fr);
  padding: 16px;
}

.canvas-image-clarification-modal .canvas-image-clarification > header img {
  width: 76px;
  height: 92px;
}

.canvas-image-clarification-modal .canvas-image-clarification > header strong {
  font-size: 16px;
}

.canvas-image-clarification-modal .canvas-image-clarification > header span,
.canvas-image-clarification-modal .canvas-image-clarification > header em {
  font-size: 10px;
}

.canvas-image-clarification-modal .canvas-image-clarification > main {
  gap: 11px;
  padding: 18px 16px;
}

.canvas-image-clarification-modal .canvas-image-clarification > main h3 {
  font-size: 17px;
}

.canvas-image-clarification-modal .canvas-image-clarification > main p,
.canvas-image-clarification-modal .canvas-image-clarification > main > small {
  font-size: 11px;
}

.canvas-image-clarification-modal .canvas-image-clarification-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.canvas-image-clarification-modal .canvas-image-clarification-option {
  min-height: 64px;
  padding: 10px 11px;
}

.canvas-image-clarification-modal .canvas-image-clarification-option span {
  font-size: 12px;
}

.canvas-image-clarification-modal .canvas-image-clarification-option span i,
.canvas-image-clarification-modal .canvas-image-clarification-option small {
  font-size: 10px;
}

.canvas-image-clarification-modal .canvas-image-clarification > footer {
  padding: 12px 16px;
}

.canvas-image-clarification-modal .canvas-image-clarification > footer button {
  min-height: 38px;
  padding: 0 14px;
  font-size: 11px;
}

@media (max-width: 640px) {
  .canvas-image-clarification-modal {
    padding: 12px;
  }

  .canvas-image-clarification-modal .canvas-image-clarification-options {
    grid-template-columns: 1fr;
  }
}

.canvas-image-clarification > header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px;
  background: #0d131d;
}

.canvas-image-clarification > header img {
  width: 48px;
  height: 56px;
  border: 1px solid rgba(137, 148, 168, 0.2);
  border-radius: 3px;
  object-fit: cover;
}

.canvas-image-clarification > header div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
}

.canvas-image-clarification > header span {
  grid-column: 1 / -1;
  color: #737e90;
  font-size: 8px;
  font-weight: 950;
}

.canvas-image-clarification > header strong {
  color: #f0f2f6;
  font-size: 11px;
}

.canvas-image-clarification > header em {
  color: #8f96ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.canvas-image-clarification-progress {
  height: 3px;
  background: rgba(94, 103, 130, 0.18);
}

.canvas-image-clarification-progress i {
  display: block;
  height: 100%;
  background: #555ce9;
  transition: width 180ms ease;
}

.canvas-image-clarification > main {
  display: grid;
  gap: 7px;
  padding: 11px 9px;
}

.canvas-image-clarification > main h3,
.canvas-image-clarification > main p {
  margin: 0;
}

.canvas-image-clarification > main h3 {
  color: #f1f3f7;
  font-size: 12px;
}

.canvas-image-clarification > main p,
.canvas-image-clarification > main > small {
  color: #8791a2;
  font-size: 8px;
  line-height: 1.5;
}

.canvas-image-clarification-options {
  display: grid;
  gap: 5px;
}

.canvas-image-clarification-option {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 44px;
  padding: 7px 8px;
  border: 1px solid rgba(137, 148, 168, 0.18);
  border-radius: 3px;
  background: #0c121b;
  color: #d8dde6;
  text-align: left;
  cursor: pointer;
}

.canvas-image-clarification-option.selected {
  border-color: #5960ee;
  background: rgba(31, 35, 171, 0.3);
}

.canvas-image-clarification-option span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
  font-weight: 850;
}

.canvas-image-clarification-option span i {
  color: #8fdccc;
  font-size: 7px;
  font-style: normal;
}

.canvas-image-clarification-option small {
  color: #758092;
  font-size: 8px;
  line-height: 1.35;
}

.canvas-image-clarification > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-top: 1px solid rgba(137, 148, 168, 0.14);
  background: #0c121a;
}

.canvas-image-clarification > footer div {
  display: flex;
  gap: 5px;
}

.canvas-image-clarification > footer button {
  min-height: 29px;
  padding: 0 8px;
  border: 1px solid rgba(120, 130, 151, 0.25);
  border-radius: 3px;
  background: #151c27;
  color: #cbd1db;
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-image-clarification > footer button.primary {
  border-color: #5b62ef;
  background: #1f23ab;
  color: #fff;
}

.canvas-assistant-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid rgba(137, 148, 168, 0.12);
}

.canvas-assistant-result-actions button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(89, 96, 236, 0.34);
  border-radius: 3px;
  background: #111824;
  color: #cfd4de;
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-assistant-result-actions button:first-child {
  border-color: #555ce9;
  background: #1f23ab;
  color: #fff;
}

.canvas-assistant-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 3px;
}

.canvas-assistant-quick-actions button {
  min-height: 30px;
  border: 1px solid rgba(104, 113, 142, 0.25);
  border-radius: 3px;
  background: #0e141c;
  color: #cbd1db;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-assistant-quick-actions button:hover {
  border-color: #5158e7;
  color: #fff;
}

.canvas-assistant-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 7px;
  padding: 10px;
  border-top: 1px solid rgba(137, 148, 168, 0.16);
  background: #0a0f16;
}

.canvas-assistant-composer textarea {
  min-width: 0;
  min-height: 64px;
  max-height: 130px;
  resize: vertical;
  border: 1px solid rgba(137, 148, 168, 0.23);
  border-radius: 4px;
  outline: 0;
  background: #121923;
  color: #edf0f4;
  font: inherit;
  font-size: 10px;
  line-height: 1.5;
}

.canvas-assistant-composer textarea:focus {
  border-color: #555cf2;
}

.canvas-assistant-composer button {
  border: 1px solid #4248d5;
  border-radius: 4px;
  background: #1f23ab;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.canvas-assistant-loading {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  min-height: 100%;
  padding: 28px;
  text-align: center;
}

.canvas-assistant-loading i {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(98, 105, 255, 0.2);
  border-top-color: #686dff;
  border-radius: 50%;
  animation: canvas-model-spin 0.8s linear infinite;
}

.canvas-assistant-loading strong {
  color: #f0f2f5;
  font-size: 14px;
}

.canvas-assistant-loading p {
  margin: 0;
  color: #828c9b;
  font-size: 10px;
  line-height: 1.5;
}

.server-source-drift-warning {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  display: grid;
  gap: 4px;
  max-width: 420px;
  padding: 12px 14px;
  border: 1px solid rgba(231, 92, 111, 0.6);
  border-radius: 5px;
  background: #25131a;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
  color: #fff;
}

.server-source-drift-warning strong {
  font-size: 12px;
}

.server-source-drift-warning span {
  color: #e5b6bf;
  font-size: 10px;
  line-height: 1.45;
}

.server-source-drift-warning code {
  overflow-wrap: anywhere;
  padding: 7px 8px;
  border: 1px solid rgba(231, 92, 111, 0.3);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  font-size: 10px;
}

.server-source-drift-warning button {
  min-height: 30px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.server-source-drift-warning small {
  color: inherit;
  font-size: 9px;
  opacity: 0.65;
}

.canvas-layers-content {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 13px;
}

.canvas-layers-head,
.canvas-layer-group > header,
.canvas-layer-connections > header,
.canvas-layer-assets > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.canvas-layers-head {
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(137, 148, 168, 0.14);
}

.canvas-layers-head > div {
  display: grid;
  gap: 5px;
}

.canvas-layers-head span,
.canvas-layer-group > header span,
.canvas-layer-connections > header span,
.canvas-layer-assets > header span {
  color: #707a89;
  font-size: 8px;
  font-weight: 950;
}

.canvas-layers-head strong {
  color: #eef1f5;
  font-size: 14px;
}

.canvas-layers-head > em,
.canvas-layer-group > header em,
.canvas-layer-connections > header em,
.canvas-layer-assets > header em {
  color: #818b9a;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.canvas-layer-groups,
.canvas-layer-group {
  display: grid;
  gap: 7px;
}

.canvas-layer-group + .canvas-layer-group {
  padding-top: 9px;
  border-top: 1px solid rgba(137, 148, 168, 0.1);
}

.canvas-layer-row {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) 25px 27px;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #111821;
}

.canvas-layer-row.is-selected {
  border-color: rgba(89, 97, 255, 0.46);
  background: rgba(31, 35, 171, 0.2);
}

.canvas-layer-row button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.canvas-layer-visibility,
.canvas-layer-order,
.canvas-layer-lock {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 3px !important;
}

.canvas-layer-visibility:hover,
.canvas-layer-order:hover,
.canvas-layer-lock:hover {
  background: rgba(137, 148, 168, 0.12);
}

.canvas-layer-order {
  color: #7f8998;
  font-size: 13px;
  font-weight: 900;
}

.canvas-layer-visibility span {
  width: 13px;
  height: 8px;
  border: 1px solid #7e8997;
  border-radius: 50%;
}

.canvas-layer-visibility[aria-pressed="false"] span {
  opacity: 0.35;
}

.canvas-layer-visibility[aria-pressed="false"] span::after {
  display: block;
  width: 15px;
  height: 1px;
  background: #8a5360;
  content: "";
  transform: translate(-2px, 3px) rotate(-35deg);
}

.canvas-layer-name {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 3px 0 !important;
  text-align: left;
}

.canvas-layer-name > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5961ff;
}

.canvas-layer-name > i[data-completeness="incomplete"] {
  background: #d95969;
}

.canvas-layer-name > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.canvas-layer-name strong,
.canvas-layer-name em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-layer-name strong {
  color: #d7dce4;
  font-size: 10px;
}

.canvas-layer-name em {
  color: #66717f;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.canvas-layer-lock span {
  width: 10px;
  height: 9px;
  border: 1px solid #717c8a;
  border-radius: 2px;
}

.canvas-layer-lock span::before {
  display: block;
  width: 6px;
  height: 5px;
  margin: -6px auto 0;
  border: 1px solid #717c8a;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  content: "";
}

.canvas-layer-lock.is-locked span,
.canvas-layer-lock.is-locked span::before {
  border-color: #8f95ff;
}

.canvas-layer-connections {
  display: grid;
  gap: 7px;
  padding-top: 11px;
  border-top: 1px solid rgba(137, 148, 168, 0.14);
}

.canvas-layer-connections article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 5px 4px 10px;
  border: 1px solid rgba(137, 148, 168, 0.13);
  border-radius: 4px;
  background: #111821;
}

.canvas-layer-connections article span {
  overflow: hidden;
  color: #b9c0cb;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-layer-connections article button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #7f8998;
  cursor: pointer;
}

.canvas-layer-connections article button:hover {
  background: rgba(217, 89, 105, 0.14);
  color: #ef8794;
}

.canvas-layer-assets {
  display: grid;
  gap: 9px;
  padding-top: 11px;
  border-top: 1px solid rgba(137, 148, 168, 0.14);
}

.canvas-layer-assets > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.canvas-layer-assets > div button {
  position: relative;
  min-width: 0;
  height: 82px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(137, 148, 168, 0.16);
  border-radius: 4px;
  background: #0a0e14;
  cursor: pointer;
}

.canvas-layer-assets img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.canvas-layer-assets > div span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  padding: 3px;
  overflow: hidden;
  background: rgba(5, 8, 12, 0.84);
  color: #d8dde4;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-layer-assets > p {
  margin: 0;
  padding: 15px;
  border: 1px dashed rgba(137, 148, 168, 0.18);
  color: #75808e;
  font-size: 9px;
  text-align: center;
}

.canvas-layer-assets > footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 6px;
}

.canvas-layer-assets > footer button {
  min-height: 31px;
  border: 1px solid rgba(89, 97, 255, 0.32);
  border-radius: 4px;
  background: #151b27;
  color: #cfd4dd;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.canvas-inspector-empty,
.canvas-inspector-content {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
}

.canvas-inspector-empty {
  min-height: 220px;
  align-content: center;
  text-align: center;
}

.canvas-inspector-empty span {
  color: #6d7684;
  font-size: 9px;
  font-weight: 950;
}

.canvas-inspector-empty strong {
  color: #d8dde4;
  font-size: 14px;
}

.canvas-inspector-empty p {
  margin: 0;
  color: #707988;
  font-size: 11px;
  line-height: 1.5;
}

.canvas-inspector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(137, 148, 168, 0.14);
}

.canvas-inspector-head > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.canvas-inspector-head h2 {
  margin: 0;
  color: #f4f5f7;
  font-size: 16px;
  letter-spacing: 0;
}

.canvas-inspector-head em {
  padding: 4px 6px;
  border: 1px solid rgba(118, 185, 161, 0.24);
  border-radius: 4px;
  color: #78bda5;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.canvas-inspector-head[data-completeness="complete"] em {
  border-color: rgba(89, 97, 255, 0.38);
  color: #9ca1ff;
}

.canvas-inspector-head[data-completeness="incomplete"] em {
  border-color: rgba(217, 89, 105, 0.42);
  color: #ed8793;
}

.canvas-inspector-completeness {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(137, 148, 168, 0.16);
  border-left-width: 3px;
  border-radius: 5px;
  background: #131a24;
}

.canvas-inspector-completeness > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.canvas-inspector-completeness span {
  color: #727c8a;
  font-size: 9px;
  font-weight: 900;
}

.canvas-inspector-completeness strong {
  font-size: 13px;
}

.canvas-inspector-completeness p {
  margin: 0;
  color: #9ca5b2;
  font-size: 9px;
  line-height: 1.5;
}

.canvas-inspector-completeness[data-completeness="complete"] {
  border-color: rgba(89, 97, 255, 0.34);
  border-left-color: #5961ff;
}

.canvas-inspector-completeness[data-completeness="complete"] strong {
  color: #9ca1ff;
}

.canvas-inspector-completeness[data-completeness="incomplete"] {
  border-color: rgba(217, 89, 105, 0.34);
  border-left-color: #d95969;
}

.canvas-inspector-completeness[data-completeness="incomplete"] strong {
  color: #ed8793;
}

.canvas-inspector-missing {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(217, 89, 105, 0.38);
  border-left: 3px solid #d95969;
  border-radius: 5px;
  background: rgba(55, 20, 28, 0.38);
}

.canvas-inspector-missing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ed8793;
  font-size: 10px;
  font-weight: 950;
}

.canvas-inspector-missing-list {
  display: grid;
  gap: 6px;
}

.canvas-inspector-missing-list > div {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #d7dce4;
  font-size: 10px;
  font-weight: 850;
}

.canvas-inspector-missing-list i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d95969;
  box-shadow: 0 0 0 3px rgba(217, 89, 105, 0.12);
}

.canvas-inspector-missing article {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(217, 89, 105, 0.2);
}

.canvas-inspector-missing article > span {
  color: #ed8793;
  font-size: 8px;
  font-weight: 950;
}

.canvas-inspector-missing article > strong {
  color: #f1f3f6;
  font-size: 12px;
}

.canvas-inspector-missing article > p,
.canvas-inspector-missing article > em,
.canvas-inspector-missing-note {
  margin: 0;
  font-size: 9px;
  line-height: 1.5;
}

.canvas-inspector-missing article > p {
  color: #a8b0bc;
}

.canvas-inspector-missing article > em {
  color: #dfb466;
  font-style: normal;
}

.canvas-inspector-missing > button {
  min-height: 32px;
  border: 1px solid #4d53e0;
  border-radius: 4px;
  background: #1f23ab;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.canvas-inspector-missing-note {
  color: #8792a0;
}

.canvas-object-fields {
  display: grid;
  gap: 9px;
}

.canvas-object-fields label,
.canvas-object-number-grid label {
  display: grid;
  gap: 5px;
  color: #788392;
  font-size: 9px;
  font-weight: 850;
}

.canvas-object-fields input,
.canvas-object-fields textarea,
.canvas-object-number-grid input {
  min-width: 0;
  border: 1px solid rgba(137, 148, 168, 0.2);
  border-radius: 4px;
  outline: 0;
  background: #111823;
  color: #e6e9ee;
  font: inherit;
  font-size: 10px;
}

.canvas-object-fields input,
.canvas-object-number-grid input {
  height: 32px;
  padding: 0 8px;
}

.canvas-object-fields textarea {
  padding: 8px;
  resize: vertical;
  line-height: 1.55;
}

.canvas-object-fields input:focus,
.canvas-object-fields textarea:focus,
.canvas-object-number-grid input:focus {
  border-color: #5b61ef;
}

.canvas-object-number-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.canvas-multi-selection-list {
  display: grid;
  gap: 5px;
}

.canvas-multi-selection-list button {
  min-height: 30px;
  padding: 0 9px;
  overflow: hidden;
  border: 1px solid rgba(137, 148, 168, 0.14);
  border-radius: 4px;
  background: #131a24;
  color: #cbd1da;
  font-size: 9px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.canvas-inspector-section {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(137, 148, 168, 0.11);
}

.canvas-inspector-section > span {
  color: #697381;
  font-size: 9px;
  font-weight: 950;
}

.canvas-inspector-section > p {
  margin: 0;
  color: #a6aebb;
  font-size: 10px;
  line-height: 1.55;
}

.canvas-inspector-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.canvas-inspector-metrics div {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(137, 148, 168, 0.13);
  border-radius: 4px;
  background: #131a24;
}

.canvas-inspector-metrics span {
  color: #687280;
  font-size: 9px;
}

.canvas-inspector-metrics strong {
  overflow: hidden;
  color: #d4d9e1;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-inspector-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.canvas-inspector-actions button {
  min-height: 34px;
}

.canvas-lock-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(137, 148, 168, 0.14);
  border-radius: 5px;
  background: #131a24;
}

.canvas-lock-control > div {
  display: grid;
  gap: 3px;
}

.canvas-lock-control strong {
  color: #d7dce3;
  font-size: 10px;
}

.canvas-lock-control span {
  color: #737d8b;
  font-size: 9px;
}

.canvas-lock-control button {
  width: 42px;
  height: 24px;
  padding: 2px;
  border: 0;
  border-radius: 12px;
  background: #2b3340;
  cursor: pointer;
}

.canvas-lock-control button::after {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9aa3af;
  content: "";
  transition: transform 140ms ease, background 140ms ease;
}

.canvas-lock-control button[aria-pressed="true"] {
  background: rgba(31, 35, 171, 0.72);
}

.canvas-lock-control button[aria-pressed="true"]::after {
  background: #fff;
  transform: translateX(18px);
}

.canvas-dependency-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.canvas-dependency-list button {
  padding: 5px 7px;
  border: 1px solid rgba(137, 148, 168, 0.14);
  border-radius: 4px;
  background: #141b25;
  color: #9da6b3;
  font-size: 9px;
  cursor: pointer;
}

.design-canvas-minimap {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 150px;
  height: 82px;
  overflow: hidden;
  border: 1px solid rgba(147, 158, 178, 0.25);
  border-radius: 5px;
  background: rgba(7, 11, 17, 0.9);
  cursor: crosshair;
}

.design-canvas-minimap > div,
.design-canvas-minimap > i {
  position: absolute;
  inset: 0;
}

.design-canvas-minimap b {
  position: absolute;
  display: block;
  border: 1px solid rgba(137, 148, 168, 0.45);
  border-radius: 1px;
  background: #252e3a;
}

.design-canvas-minimap b[data-completeness="complete"] {
  border-color: rgba(112, 119, 255, 0.85);
  background: #343cba;
}

.design-canvas-minimap b[data-completeness="incomplete"] {
  border-color: rgba(228, 111, 124, 0.9);
  background: #853d49;
}

.design-canvas-minimap b.is-selected {
  background: #5157de;
}

.design-canvas-minimap > i {
  right: auto;
  bottom: auto;
  border: 1px solid rgba(117, 123, 255, 0.9);
  background: rgba(31, 35, 171, 0.08);
  pointer-events: none;
}

.design-canvas-drop-hint {
  position: absolute;
  inset: 18px;
  z-index: 30;
  display: none;
  place-content: center;
  gap: 5px;
  border: 1px dashed #7378ff;
  border-radius: 7px;
  background: rgba(13, 18, 29, 0.9);
  color: #fff;
  text-align: center;
  pointer-events: none;
}

.design-canvas-viewport.is-dragover .design-canvas-drop-hint {
  display: grid;
}

.design-canvas-drop-hint strong {
  font-size: 16px;
}

.design-canvas-drop-hint span {
  color: #9fa8b6;
  font-size: 11px;
}

.design-canvas-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 0 10px;
  border-top: 1px solid rgba(146, 154, 177, 0.12);
  background: #0b1017;
  color: #687280;
  font-size: 9px;
  font-weight: 750;
}

.design-canvas-statusbar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-capability-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
}

.runtime-capability-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 10, 0.72);
}

.runtime-capability-panel {
  position: absolute;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  top: 50%;
  left: 50%;
  width: min(620px, calc(100vw - 32px));
  height: min(720px, calc(100vh - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid rgba(146, 154, 177, 0.24);
  border-radius: 7px;
  background: #0e141d;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.56);
  transform: translate(-50%, -50%);
}

.runtime-capability-panel > header,
.runtime-capability-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
}

.runtime-capability-panel > header {
  border-bottom: 1px solid rgba(146, 154, 177, 0.14);
}

.runtime-capability-panel > header span {
  color: #6d76ff;
  font-size: 9px;
  font-weight: 950;
}

.runtime-capability-panel h2 {
  margin: 3px 0 0;
  color: #f1f3f7;
  font-size: 18px;
}

.runtime-capability-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 4px;
  background: #171e29;
  color: #9ca6b4;
  font-size: 18px;
  cursor: pointer;
}

.runtime-capability-list {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  gap: 7px;
  padding: 14px 16px;
}

.runtime-capability-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(150px, 0.8fr);
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(146, 154, 177, 0.14);
  border-radius: 5px;
  background: #121923;
}

.runtime-capability-list article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.runtime-capability-list strong {
  color: #dce1e8;
  font-size: 11px;
}

.runtime-capability-list span,
.runtime-capability-panel > footer span {
  color: #737e8c;
  font-size: 9px;
}

.runtime-capability-list em {
  padding: 4px 6px;
  border-radius: 3px;
  background: rgba(223, 180, 102, 0.1);
  color: #dfb466;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.runtime-capability-list article[data-status="ready"] em {
  background: rgba(82, 188, 148, 0.1);
  color: #76cbae;
}

.runtime-capability-list article[data-status="conditional"] em {
  background: rgba(227, 174, 85, 0.1);
  color: #e3ae55;
}

.runtime-capability-list .capability-production-boundary {
  color: #a38b64;
  line-height: 1.45;
}

.runtime-capability-list code {
  overflow: hidden;
  color: #808b99;
  font-size: 9px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-capability-panel > footer {
  border-top: 1px solid rgba(146, 154, 177, 0.14);
}

.runtime-capability-dismiss {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  background: #1f23ab;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

@media (max-width: 1280px) {
  .canvas-commandbar {
    grid-template-columns: 118px minmax(240px, 1fr) 330px;
  }

  .design-canvas-main {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .canvas-project-context span,
  .canvas-engine-control > span,
  #canvasResetLayout {
    display: none;
  }
}

@media (max-width: 900px) {
  .fashion-dashboard.canvas-mode .dash-workspace {
    display: grid;
    grid-template-rows: auto auto minmax(700px, 1fr);
  }

  .design-canvas-contextbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .canvas-mode-switch {
    display: none;
  }

  .design-canvas-contextbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .design-canvas-workbench {
    grid-template-rows: 78px 88px minmax(0, 1fr) 30px;
  }

  .canvas-commandbar {
    grid-template-columns: minmax(260px, 1fr) 330px;
  }

  .canvas-command-label {
    display: none;
  }

  .canvas-engine-control {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .design-canvas-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(440px, 1fr) 300px;
  }

  .design-canvas-sidebar {
    border-top: 1px solid rgba(146, 154, 177, 0.14);
    border-left: 0;
  }

  .canvas-inspector-content {
    grid-template-columns: minmax(200px, 0.8fr) minmax(280px, 1.2fr);
  }
}

@media (max-width: 760px) {
  .fashion-dashboard.canvas-mode .dash-workspace {
    display: block;
  }

  .design-canvas-workbench {
    height: calc(100dvh - 182px);
    min-height: 620px;
    grid-template-rows: 88px 88px minmax(0, 1fr) 30px;
  }

  .canvas-commandbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 9px 8px 9px 11px;
  }

  .canvas-command-actions {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }

  .canvas-command-status {
    grid-column: 1 / -1;
  }

  .canvas-command-status {
    padding: 6px;
  }

  .canvas-command-status span {
    display: none;
  }

  .design-canvas-contextbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .canvas-capability-badge {
    max-width: 126px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .runtime-capability-list article {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .runtime-capability-list code {
    grid-column: 1 / -1;
    text-align: left;
  }

  .canvas-project-context em,
  #canvasZoomValue,
  #canvasZoomSlider,
  #canvasResetLayout {
    display: none;
  }

  .canvas-view-controls button {
    min-width: 30px;
    padding: 0 7px;
  }

  .design-canvas-main {
    grid-template-rows: minmax(330px, 1fr) 270px;
  }

  .canvas-inspector-content {
    display: grid;
    grid-template-columns: 1fr;
  }

  .design-canvas-minimap {
    width: 118px;
    height: 66px;
  }

  .design-canvas-statusbar span:last-child {
    display: none;
  }
}

@media (max-width: 900px) {
  .model-image-generator-panel {
    width: min(760px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }

  .model-image-generator-body {
    grid-template-columns: 1fr;
  }

  .model-image-design-source {
    border-right: 0;
    border-bottom: 1px solid rgba(146, 154, 177, 0.12);
  }

  .model-image-history > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .model-image-setup {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .model-image-generator-panel {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
  }

  .model-image-capability,
  .model-image-design-source,
  .model-image-controls {
    padding-right: 12px;
    padding-left: 12px;
  }

  .model-image-capability > div {
    grid-template-columns: 8px minmax(0, 1fr);
  }

  .model-image-capability span {
    grid-column: 2;
  }

  .model-image-control-row,
  .model-reference-upload {
    grid-template-columns: 1fr;
  }

  .model-image-generator-panel > footer {
    flex-wrap: wrap;
  }

  .model-image-generator-panel > footer .choice-save-status {
    flex-basis: 100%;
  }
}

/* 2026-07-14: design, image and video canvases share one project workspace. */
.canvas-workspace-shell {
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 8px;
  overflow: hidden;
}

.canvas-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  padding: 5px;
  border: 1px solid rgba(146, 154, 177, 0.14);
  border-radius: 7px;
  background: #090d12;
}

.canvas-workspace-tabs button {
  display: grid;
  grid-template-columns: 30px auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #737b89;
  text-align: left;
  cursor: pointer;
}

.canvas-workspace-tabs button:hover {
  border-color: rgba(132, 141, 164, 0.2);
  color: #dfe4ec;
}

.canvas-workspace-tabs button.active {
  border-color: rgba(74, 82, 255, 0.55);
  background: #11172a;
  color: #f5f7fb;
  box-shadow: inset 3px 0 0 #4e55ff;
}

.canvas-workspace-tabs span {
  color: #697181;
  font: 750 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.canvas-workspace-tabs button.active span {
  color: #747aff;
}

.canvas-workspace-tabs strong {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.canvas-workspace-tabs em {
  overflow: hidden;
  color: #6f7785;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.canvas-workspace-shell > [data-canvas-workspace-panel] {
  min-height: 0;
  height: 100%;
}

.canvas-workspace-shell > [data-canvas-workspace-panel][hidden] {
  display: none !important;
}

.media-canvas-workbench {
  display: grid;
  grid-template-rows: 46px 88px minmax(0, 1fr) 30px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(146, 154, 177, 0.15);
  border-radius: 7px;
  background: #080c12;
}

#imageCanvasWorkbench {
  grid-template-rows: 46px 88px auto minmax(0, 1fr) 30px;
}

.media-canvas-contextbar {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) repeat(6, auto);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(146, 154, 177, 0.13);
  background: #0b1017;
}

.image-view-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 3px;
  border: 1px solid rgba(89, 98, 121, 0.34);
  border-radius: 4px;
  background: #080d13;
}

.image-view-switch button {
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #778191;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.image-view-switch button.active {
  background: #272dbd;
  color: #fff;
}

.image-view-switch .image-focus-toggle {
  width: 28px;
  padding: 0;
  border-left: 1px solid rgba(89, 98, 121, 0.34);
  color: #aeb6c3;
  font-size: 14px;
}

.image-view-switch .image-focus-toggle[aria-pressed="true"] {
  background: #e5e7ff;
  color: #151977;
}

body.image-studio-focus-open { overflow: hidden; }

#imageCanvasWorkbench.is-focus-mode {
  position: fixed;
  z-index: 120;
  inset: 10px;
  width: auto;
  height: auto;
  border-color: rgba(105, 112, 255, 0.62);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72);
}

#imageCanvasWorkbench.is-studio-view .canvas-mode-switch,
#imageCanvasWorkbench.is-studio-view .canvas-view-controls {
  display: none;
}

.media-workflow-entry {
  display: flex;
  align-items: center;
  gap: 4px;
}

.media-workflow-entry button {
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(89, 98, 121, 0.32);
  border-radius: 4px;
  background: #111720;
  color: #aeb6c3;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.media-workflow-entry button:first-child {
  border-color: rgba(105, 112, 255, 0.5);
  background: rgba(31, 35, 171, 0.24);
  color: #dfe1ff;
}

.media-workflow-entry button:hover {
  border-color: rgba(124, 131, 255, 0.72);
  color: #fff;
}

.media-capability-badge {
  min-width: 148px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(89, 98, 121, 0.32);
  border-radius: 4px;
  background: #111720;
  color: #a6afbd;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.media-creation-mode {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(89, 98, 121, 0.32);
  border-radius: 999px;
  background: #111720;
}

.media-creation-mode button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #a6afbd;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.media-creation-mode button.active {
  background: #1f23ab;
  color: #fff;
  box-shadow: 0 4px 12px rgba(31, 35, 171, 0.2);
}

.media-capability-badge[data-status="ready"] {
  border-color: rgba(52, 193, 139, 0.44);
  color: #6ce0b3;
}

.media-capability-badge[data-status="not-connected"] {
  border-color: rgba(218, 88, 88, 0.45);
  color: #ff8585;
}

.media-current-review {
  min-width: 132px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(132, 139, 255, 0.52);
  border-radius: 4px;
  background: rgba(31, 35, 171, 0.38);
  color: #e7e8ff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.media-current-review[data-approval="approved"] {
  border-color: rgba(62, 204, 151, 0.46);
  background: rgba(20, 91, 68, 0.3);
  color: #79e9bd;
}

.media-current-review[data-approval="rejected"] {
  border-color: rgba(240, 100, 105, 0.5);
  background: rgba(110, 30, 35, 0.28);
  color: #ff9da1;
}

.media-commandbar {
  display: grid;
  grid-template-columns: 150px minmax(260px, 1fr) 190px 238px;
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(104, 113, 138, 0.18);
  background: #0c1118;
}

.media-commandbar > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  border-left: 3px solid #4e55ff;
  padding-left: 11px;
}

.media-commandbar[data-media-type="video"] > div {
  border-left-color: #deaa4a;
}

.media-commandbar > div:first-child span {
  color: #666f7f;
  font: 700 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.media-commandbar > div:first-child strong {
  margin-top: 4px;
  color: #f1f3f7;
  font-size: 15px;
}

.media-commandbar textarea {
  min-width: 0;
  resize: none;
  border: 1px solid rgba(112, 122, 148, 0.28);
  border-radius: 4px;
  outline: 0;
  background: #111720;
  color: #edf0f5;
  padding: 11px 12px;
  font: 500 12px/1.55 inherit;
}

.media-commandbar textarea:focus {
  border-color: rgba(78, 85, 255, 0.76);
  box-shadow: 0 0 0 2px rgba(49, 56, 186, 0.18);
}

.media-commandbar > button,
.media-command-actions button {
  border: 0;
  border-radius: 4px;
  background: #272dbd;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.media-commandbar[data-media-type="video"] > button {
  background: #9b6a20;
}

.media-commandbar > button:disabled,
.media-command-actions button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.media-command-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.media-command-actions button {
  min-width: 0;
  background: #1a2130;
  color: #b9c1cf;
  font-size: 10px;
}

.media-command-actions button:first-child {
  grid-column: 1 / -1;
  border: 1px solid #3d44cb;
  background: #272dbd;
  color: #fff;
}

.media-command-actions button#imageCanvasRunRecipe {
  border: 1px solid rgba(68, 203, 151, 0.46);
  background: #123e31;
  color: #80e9bd;
}

.media-commandbar > p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(112, 122, 148, 0.22);
  border-radius: 4px;
  background: #0a0f15;
}

.media-commandbar > p strong,
.media-commandbar > p span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.media-commandbar > p strong {
  color: #dce1e9;
  font-size: 11px;
}

.media-commandbar > p span {
  margin-top: 4px;
  color: #737c8c;
  font-size: 9px;
}

.media-commandbar > p[data-state="complete"] {
  border-color: rgba(55, 172, 123, 0.34);
}

.media-commandbar > p[data-state="incomplete"],
.media-commandbar > p[data-state="failed"] {
  border-color: rgba(223, 78, 78, 0.43);
}

.media-canvas-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.image-canvas-main {
  position: relative;
  display: block;
}

.image-canvas-flow-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.image-canvas-flow-shell[hidden],
.image-canvas-studio[hidden] {
  display: none !important;
}

.image-canvas-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #080c12;
}

.image-studio-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 104px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid rgba(116, 126, 151, 0.17);
}

.image-studio-preview {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background-color: #090d13;
  background-image: linear-gradient(45deg, rgba(255,255,255,0.018) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.018) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.018) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.018) 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.image-studio-asset-actions {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  inset: 12px 14px auto;
  pointer-events: none;
}

.image-studio-edit-actions,
.image-studio-review-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(113, 123, 148, 0.24);
  border-radius: 4px;
  background: rgba(8, 12, 18, 0.9);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}

.image-studio-edit-actions { overflow: visible; }

.image-studio-tool-group { position: relative; }

.image-studio-tool-group > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(110, 120, 145, 0.28);
  border-radius: 3px;
  background: #151b24;
  color: #c9d0da;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.image-studio-tool-group > summary::-webkit-details-marker { display: none; }
.image-studio-tool-group > summary::after { content: "⌄"; color: #747f90; }
.image-studio-tool-group[open] > summary { border-color: #555cff; color: #fff; }

.image-studio-tool-group > summary em {
  min-width: 16px;
  padding: 2px 4px;
  border-radius: 2px;
  background: rgba(98, 105, 255, 0.16);
  color: #9298ff;
  font-size: 7px;
  font-style: normal;
  text-align: center;
}

.image-studio-tool-group > div {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(116px, 1fr));
  gap: 5px;
  width: 270px;
  padding: 8px;
  border: 1px solid rgba(113, 123, 148, 0.34);
  border-radius: 4px;
  background: #0d121a;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48);
}

.image-studio-tool-group:nth-of-type(n+3) > div { right: 0; left: auto; }
.image-studio-tool-group > div header { grid-column: 1 / -1; display: grid; gap: 3px; padding: 2px 3px 7px; border-bottom: 1px solid rgba(113, 123, 148, 0.18); }
.image-studio-tool-group > div header strong { color: #f3f5f8; font-size: 10px; }
.image-studio-tool-group > div header span { color: #747f90; font-size: 8px; }
.image-studio-tool-group > div > button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; height: 34px; text-align: left; }
.image-studio-tool-group > div > button span { overflow: hidden; text-overflow: ellipsis; }
.image-studio-tool-group > div > button em { color: #818b9a; font-size: 7px; font-style: normal; }
.image-studio-tool-group > div > button.is-production em { color: #70e7b8; }
.image-studio-tool-group > div > button.is-internal em { color: #f0c66d; }

.image-studio-asset-actions button {
  min-width: 0;
  height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(110, 120, 145, 0.28);
  border-radius: 3px;
  background: #151b24;
  color: #c9d0da;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.image-studio-asset-actions button:hover { border-color: rgba(118, 125, 255, 0.7); color: #fff; }
.image-studio-asset-actions button.primary { border-color: #555cff; background: #272dbd; color: #fff; }
.image-studio-asset-actions button.is-multiview { border-color: rgba(70, 210, 169, 0.56); background: rgba(30, 109, 86, 0.2); color: #82e8c7; }
.image-studio-asset-actions button.danger { border-color: rgba(231, 91, 98, 0.44); background: rgba(128, 35, 44, 0.24); color: #ff9ca1; }
.image-studio-asset-actions button.is-adopted { border-color: rgba(62, 204, 151, 0.4); background: rgba(34, 116, 84, 0.2); color: #72e6b8; cursor: default; }
.image-studio-asset-actions button.is-quality-warn { border-color: rgba(229, 176, 72, 0.58); background: rgba(118, 78, 18, 0.32); color: #f4ce78; }
.image-studio-asset-actions button.is-quality-blocked { border-color: rgba(240, 100, 105, 0.48); background: rgba(110, 30, 35, 0.28); color: #ff9da1; cursor: not-allowed; }
.image-studio-asset-actions button.is-rework { border-color: rgba(229, 176, 72, 0.42); color: #e9bf68; }
.image-studio-asset-actions button:disabled { opacity: 0.82; }

.image-studio-primary-tools {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.image-studio-primary-tools > button {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 48px;
  height: auto;
  padding: 7px 10px;
  text-align: left;
  white-space: normal;
}

.image-studio-primary-tools > button span {
  font-size: 12px;
  line-height: 1.1;
}

.image-studio-primary-tools > button em {
  color: #8993a2;
  font-size: 10px;
  font-style: normal;
  line-height: 1.15;
}

.image-studio-primary-tools > button.is-production em { color: #70e7b8; }
.image-studio-primary-tools > button.is-internal em { color: #f0c66d; }
.image-studio-primary-tools > button[data-release-status="no-results"] em { color: #9aa4b3; }

.image-studio-more-tools > div {
  right: 0;
  left: auto;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  width: min(560px, calc(100vw - 48px));
}

.image-studio-more-tools > div > section {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.image-studio-more-tools > div > section > header {
  display: grid;
  gap: 3px;
  padding: 2px 3px 7px;
  border-bottom: 1px solid rgba(113, 123, 148, 0.18);
}

.image-studio-more-tools > summary { min-height: 48px; height: auto; font-size: 11px; }
.image-studio-more-tools > summary em { font-size: 10px; }
.image-studio-more-tools > div > section > header strong { color: #f3f5f8; font-size: 11px; }
.image-studio-more-tools > div > section > header span { color: #747f90; font-size: 10px; line-height: 1.35; }
.image-studio-more-tools > div > section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.image-studio-more-tools > div > section > div > button { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 4px; min-height: 48px; height: auto; padding-block: 7px; text-align: left; white-space: normal; }
.image-studio-more-tools > div > section > div > button span { overflow-wrap: anywhere; font-size: 11px; line-height: 1.2; }
.image-studio-more-tools > div > section > div > button em { color: #818b9a; font-size: 10px; font-style: normal; line-height: 1.2; }
.image-studio-more-tools > div > section > div > button.is-production em { color: #70e7b8; }
.image-studio-more-tools > div > section > div > button.is-internal em { color: #f0c66d; }

.image-studio-view-controls {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: 28px minmax(90px, 150px) 38px 28px auto;
  align-items: center;
  gap: 5px;
  top: 58px;
  right: 14px;
  padding: 4px;
  border: 1px solid rgba(113, 123, 148, 0.24);
  border-radius: 4px;
  background: rgba(8, 12, 18, 0.9);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.28);
}

.image-studio-view-controls button {
  height: 27px;
  padding: 0 7px;
  border: 1px solid rgba(110, 120, 145, 0.28);
  border-radius: 3px;
  background: #151b24;
  color: #d4dae3;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.image-studio-view-controls input { width: 100%; accent-color: #5960ff; }
.image-studio-view-controls output { color: #aeb6c4; font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }

.image-studio-preview-button {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 46px 20px 40px;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.image-studio-preview-button.is-panning { cursor: grabbing; }

#imageCanvasWorkbench.is-focus-mode .image-studio-stage {
  grid-template-rows: minmax(0, 1fr) 118px;
}

#imageCanvasWorkbench.is-focus-mode .image-studio-preview-button {
  padding: 64px 34px 58px;
}

.image-studio-preview-button img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.34));
  transform: translate(var(--studio-pan-x), var(--studio-pan-y)) scale(var(--studio-zoom));
  transform-origin: center;
  transition: transform 100ms ease-out;
  user-select: none;
}

.image-studio-preview-button.is-panning img { transition: none; }

.image-studio-preview-meta {
  position: absolute;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  inset: auto 18px 14px;
  pointer-events: none;
}

.image-studio-preview-meta > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.image-studio-preview-meta span,
.image-studio-filmstrip header span,
.image-studio-overview header span,
.image-studio-history > div span {
  color: #707a8a;
  font: 750 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.image-studio-preview-meta strong {
  overflow: hidden;
  color: #f4f6f9;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image-studio-preview-meta em {
  padding: 5px 7px;
  border: 1px solid rgba(126, 135, 160, 0.32);
  border-radius: 3px;
  background: rgba(7, 10, 15, 0.86);
  color: #aeb6c3;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.image-studio-preview-badges { display: flex; gap: 5px; }
.image-studio-preview-meta em.is-approved { border-color: rgba(62, 204, 151, 0.46); color: #70e7b8; }
.image-studio-preview-meta em.is-rejected { border-color: rgba(240, 100, 105, 0.48); color: #ff9297; }
.image-studio-preview-meta em.quality.is-pass { border-color: rgba(62, 204, 151, 0.46); color: #70e7b8; }
.image-studio-preview-meta em.quality.is-warn { border-color: rgba(229, 176, 72, 0.54); color: #f0c66d; }
.image-studio-preview-meta em.quality.is-blocked { border-color: rgba(240, 100, 105, 0.56); color: #ff9297; }

.image-studio-compare {
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 46px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #090d13;
}

.image-studio-compare > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(112, 122, 148, 0.18);
  background: #0c1118;
}

.image-studio-compare > header label {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.image-studio-compare > header label span {
  color: #6f7989;
  font-size: 8px;
}

.image-studio-compare > header select {
  min-width: 0;
  height: 29px;
  border: 1px solid rgba(105, 116, 143, 0.3);
  border-radius: 3px;
  outline: 0;
  background: #080d13;
  color: #dce1e9;
  padding: 0 7px;
  font-size: 9px;
}

.image-studio-compare > header button {
  width: 30px;
  height: 29px;
  padding: 0;
  border: 1px solid rgba(105, 116, 143, 0.3);
  border-radius: 3px;
  background: #141b25;
  color: #cdd3dc;
  font-size: 13px;
  cursor: pointer;
}

.image-studio-compare-canvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background-color: #090d13;
  background-image: linear-gradient(45deg, rgba(255,255,255,0.018) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.018) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.018) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.018) 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.image-studio-compare-canvas > img,
.image-studio-compare-right {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.image-studio-compare-canvas > img,
.image-studio-compare-right img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px;
  object-fit: contain;
}

.image-studio-compare-right {
  overflow: hidden;
  clip-path: inset(0 0 0 var(--compare-position));
}

.image-studio-compare-canvas > i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-position);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 12px rgba(0,0,0,0.45);
  transform: translateX(-1px);
  pointer-events: none;
}

.image-studio-compare-canvas > i b {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 3px;
  background: #1f23ab;
  box-shadow: 0 3px 12px rgba(0,0,0,0.42);
  transform: translate(-50%, -50%);
}

.image-studio-compare-canvas > i b::before,
.image-studio-compare-canvas > i b::after {
  position: absolute;
  top: 12px;
  color: #fff;
  font-size: 8px;
}
.image-studio-compare-canvas > i b::before { left: 4px; content: "‹"; }
.image-studio-compare-canvas > i b::after { right: 4px; content: "›"; }

.compare-label {
  position: absolute;
  top: 12px;
  overflow: hidden;
  max-width: 38%;
  padding: 5px 7px;
  border-radius: 3px;
  background: rgba(5, 8, 12, 0.8);
  color: #fff;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.compare-label.is-left { left: 12px; }
.compare-label.is-right { right: 12px; }

.image-studio-compare > footer {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) 38px auto;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-top: 1px solid rgba(112, 122, 148, 0.18);
  background: #0c1118;
}

.image-studio-compare > footer span,
.image-studio-compare > footer output { color: #798393; font-size: 8px; }
.image-studio-compare > footer input { width: 100%; accent-color: #4e55ff; }
.image-studio-compare > footer button {
  height: 29px;
  padding: 0 10px;
  border: 1px solid rgba(100, 107, 255, 0.48);
  border-radius: 3px;
  background: rgba(39, 45, 189, 0.34);
  color: #e1e3ff;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.image-studio-filmstrip {
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  padding: 9px 12px 10px;
  border-top: 1px solid rgba(112, 122, 148, 0.18);
  background: #0b1017;
}

.image-studio-view-sets {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(92, 99, 255, 0.24);
  border-radius: 5px;
  background: #0d141f;
}

.image-studio-view-sets > header,
.image-view-set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-studio-view-sets > header > div,
.image-view-set-head > div {
  display: grid;
  gap: 3px;
}

.image-studio-view-sets > header span {
  color: #7178ff;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.image-studio-view-sets > header strong,
.image-view-set-head strong { color: #e6e9ef; font-size: 11px; }
.image-studio-view-sets > header > em,
.image-view-set-head span,
.image-view-set-head > em { color: #7d8796; font-size: 8px; font-style: normal; }
.image-view-set-head > em[data-status="succeeded"] { color: #72e1b7; }
.image-view-set-head > em[data-status="failed"] { color: #ff8f96; }

.image-studio-view-sets > article {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(128, 139, 158, 0.14);
}

.image-view-set-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.image-view-set-grid > div {
  position: relative;
  display: grid;
  grid-template-rows: 116px auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 137, 157, 0.18);
  border-radius: 4px;
  background: #111a26;
}

.image-view-set-grid > div[data-status="succeeded"] { border-color: rgba(62, 204, 151, 0.42); }
.image-view-set-grid > div[data-status="failed"] { border-color: rgba(240, 100, 105, 0.48); }
.image-view-set-grid > div > button:first-child { width: 100%; height: 116px; padding: 0; border: 0; background: #080d14; cursor: pointer; }
.image-view-set-grid img { width: 100%; height: 116px; object-fit: cover; }
.image-view-set-grid img.is-source-placeholder { opacity: 0.16; filter: grayscale(1); }
.image-view-set-grid > div > span { display: grid; gap: 2px; padding: 7px; }
.image-view-set-grid > div > span b { color: #dfe3e9; font-size: 9px; }
.image-view-set-grid > div > span em { overflow: hidden; color: #768190; font-size: 7px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.image-view-set-retry { position: absolute; right: 5px; bottom: 5px; min-height: 22px; padding: 0 6px; border: 1px solid rgba(240, 100, 105, 0.42); border-radius: 3px; background: #351821; color: #ff9ba0; font-size: 7px; cursor: pointer; }

.multi-view-set-panel { width: min(940px, calc(100vw - 36px)); }
.multi-view-set-panel > header p { margin: 4px 0 0; color: #788394; font-size: 10px; }
.multi-view-set-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 18px; }
.multi-view-set-body > aside { display: grid; align-content: start; gap: 6px; min-width: 0; }
.multi-view-set-body > aside img { width: 100%; aspect-ratio: 3 / 4; border: 1px solid rgba(130, 140, 158, 0.2); border-radius: 4px; background: #080d13; object-fit: cover; }
.multi-view-set-body > aside span { color: #737d8d; font-size: 8px; text-transform: uppercase; }
.multi-view-set-body > aside strong { overflow: hidden; color: #e4e7ec; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.multi-view-set-body > main { display: grid; align-content: start; gap: 12px; }
.multi-view-set-body > main > label { display: grid; gap: 6px; color: #98a2b1; font-size: 9px; }
.multi-view-set-body textarea { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid rgba(132, 143, 162, 0.22); border-radius: 4px; background: #0b111a; color: #e5e8ed; font: 500 10px/1.55 inherit; }
.multi-view-set-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.multi-view-set-options label { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; min-height: 64px; padding: 8px; border: 1px solid rgba(117, 128, 148, 0.2); border-radius: 4px; background: #111925; cursor: pointer; }
.multi-view-set-options label:has(input:checked) { border-color: rgba(91, 98, 255, 0.68); background: rgba(39, 45, 189, 0.17); }
.multi-view-set-options input { accent-color: #5960ff; }
.multi-view-set-options span { display: grid; gap: 4px; }
.multi-view-set-options b { color: #e6e9ee; font-size: 10px; }
.multi-view-set-options em { color: #778292; font-size: 8px; font-style: normal; line-height: 1.45; }
.multi-view-set-contract { display: grid; gap: 3px; margin: 0; padding: 9px 10px; border-left: 2px solid #575eff; background: rgba(49, 56, 198, 0.1); }
.multi-view-set-contract strong { color: #d9ddff; font-size: 9px; }
.multi-view-set-contract span { color: #8a94a3; font-size: 8px; line-height: 1.45; }

.image-studio-filmstrip header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-studio-filmstrip header > div { display: flex; align-items: baseline; gap: 8px; }
.image-studio-filmstrip header strong { color: #dce1e9; font-size: 10px; }
.image-studio-filmstrip header button {
  border: 0;
  background: transparent;
  color: #8e96ff;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.image-studio-filmstrip-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}

.image-studio-filmstrip-actions > span { color: #949dab; font-size: 8px; }
.image-studio-filmstrip-actions button {
  height: 25px;
  padding: 0 7px;
  border: 1px solid rgba(105, 116, 143, 0.28);
  border-radius: 3px;
  background: #141b25;
  color: #cbd2dc;
}
.image-studio-filmstrip-actions button.is-approve { border-color: rgba(62, 204, 151, 0.42); color: #70e7b8; }
.image-studio-filmstrip-actions button.is-reject { border-color: rgba(240, 100, 105, 0.42); color: #ff9297; }
.image-studio-filmstrip-actions button:disabled { opacity: 0.4; cursor: default; }

.image-studio-filmstrip > div {
  display: flex;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.image-studio-filmstrip > div > button {
  position: relative;
  flex: 0 0 66px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(105, 116, 143, 0.28);
  border-radius: 3px;
  background: #080c12;
  cursor: pointer;
}

.image-studio-filmstrip > div > button.is-selected {
  border-color: #7177ff;
  box-shadow: inset 0 0 0 2px rgba(78, 85, 255, 0.42);
}

.image-studio-filmstrip > div > button.is-batch-selected {
  border-color: #65dcae;
  box-shadow: inset 0 0 0 2px rgba(62, 204, 151, 0.38);
}

.image-studio-filmstrip > div > button > i {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(156, 166, 184, 0.55);
  border-radius: 2px;
  background: rgba(5, 8, 12, 0.84);
  color: #fff;
  font-size: 9px;
  font-style: normal;
}

.image-studio-filmstrip > div > button.is-batch-selected > i { border-color: #65dcae; background: #27805e; }

.image-studio-filmstrip > div > button.is-rejected { opacity: 0.48; }
.image-studio-filmstrip > div > button.quality-blocked { border-color: rgba(240, 100, 105, 0.7); }
.image-studio-filmstrip > div > button > b {
  position: absolute;
  top: 4px;
  left: 4px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(240, 100, 105, 0.7);
  border-radius: 2px;
  background: rgba(114, 22, 30, 0.88);
  color: #ffb1b5;
  font-size: 9px;
}
.image-studio-filmstrip img { width: 100%; height: 100%; object-fit: cover; }
.image-studio-batch-governance {
  display: grid;
  gap: 8px;
  padding: 9px 8px;
  border-bottom: 1px solid rgba(105, 116, 143, 0.2);
  background: #0d131b;
}
.image-studio-batch-governance > header { display: flex; align-items: end; justify-content: space-between; gap: 7px; }
.image-studio-batch-governance > header div { display: grid; gap: 3px; }
.image-studio-batch-governance > header span { color: #6f7989; font: 750 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.image-studio-batch-governance > header strong { color: #e2e6ec; font-size: 9px; }
.image-studio-batch-governance > header em { color: #727c8c; font-size: 7px; font-style: normal; text-align: right; }
.image-studio-batch-governance > div { display: grid; gap: 6px; }
.image-studio-batch-production {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(91, 99, 255, 0.38);
  border-radius: 4px;
  background: rgba(31, 35, 171, 0.1);
}
.image-studio-batch-production > header { display: flex; align-items: end; justify-content: space-between; gap: 7px; }
.image-studio-batch-production > header div { display: grid; gap: 3px; }
.image-studio-batch-production > header span { color: #858bff; font: 750 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.image-studio-batch-production > header strong { color: #eef0ff; font-size: 9px; }
.image-studio-batch-production > header em { color: #878fa2; font-size: 7px; font-style: normal; text-align: right; }
.image-studio-batch-production > label,
.image-studio-batch-operation-fields label { display: grid; gap: 3px; color: #9ba4b5; font-size: 7px; }
.image-studio-batch-operation-fields { display: grid; gap: 6px; }
.image-studio-batch-operation-fields textarea { min-height: 48px; padding: 6px; resize: vertical; }
.image-studio-batch-operation-fields p,
.image-studio-batch-production > p { margin: 0; color: #98a1b2; font-size: 7px; line-height: 1.45; }
.image-studio-batch-production input,
.image-studio-batch-production select,
.image-studio-batch-production textarea { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #343d51; border-radius: 3px; outline: 0; background: #101724; color: #e2e6ef; font-size: 8px; }
.image-studio-batch-production input,
.image-studio-batch-production select { height: 27px; padding: 0 6px; }
.image-studio-batch-production input:focus,
.image-studio-batch-production select:focus,
.image-studio-batch-production textarea:focus { border-color: #676eff; }
.image-studio-batch-production > button { min-height: 30px; border: 1px solid #555cff; border-radius: 3px; background: #1f23ab; color: #fff; font-size: 8px; font-weight: 850; }
.image-studio-batch-production > button:disabled { opacity: 0.42; cursor: not-allowed; }
.image-studio-batch-progress { display: grid; gap: 2px; padding: 6px; border-left: 2px solid #6870ff; background: rgba(8, 12, 20, 0.56); }
.image-studio-batch-progress[data-running="true"] { border-left-color: #65dcae; }
.image-studio-batch-progress strong { color: #dfe3ec; font-size: 8px; }
.image-studio-batch-progress span { color: #8791a2; font-size: 7px; }
.image-studio-batch-organize-fields { padding-top: 2px; border-top: 1px solid rgba(105, 116, 143, 0.18); }
.image-studio-batch-governance label { display: grid; gap: 3px; color: #788291; font-size: 7px; }
.image-studio-batch-governance input,
.image-studio-batch-governance select { box-sizing: border-box; width: 100%; height: 27px; min-width: 0; padding: 0 6px; border: 1px solid #2a3240; border-radius: 3px; outline: 0; background: #111923; color: #d8dde5; font-size: 8px; }
.image-studio-batch-governance input:focus,
.image-studio-batch-governance select:focus { border-color: #555cff; }
.image-studio-batch-governance footer { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.image-studio-batch-governance footer button { min-height: 28px; border: 1px solid #303847; border-radius: 3px; background: #141b25; color: #cbd2dc; font-size: 8px; font-weight: 800; }
.image-studio-batch-governance footer button.primary { border-color: #4e55ff; background: #1f23ab; color: #fff; }
.image-studio-batch-governance footer button.danger { border-color: rgba(231, 91, 98, 0.44); color: #ff9ca1; }
.image-studio-batch-governance footer button:disabled { opacity: 0.42; cursor: not-allowed; }
.image-studio-batch-governance > p { margin: 0; color: #a58a57; font-size: 7px; line-height: 1.45; }
.image-studio-filmstrip button span {
  position: absolute;
  overflow: hidden;
  inset: auto 3px 3px;
  padding: 3px;
  background: rgba(5, 8, 12, 0.78);
  color: #dfe3ea;
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image-studio-side {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #0a0f16;
}

.image-studio-operation > .media-inspector-content { padding: 16px; }

.image-studio-overview {
  display: grid;
  gap: 15px;
  padding: 17px;
}

.image-studio-overview h2 {
  overflow: hidden;
  margin: 5px 0 0;
  color: #f1f3f7;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image-studio-overview dl { display: grid; gap: 1px; margin: 0; }
.image-studio-overview dl > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(105, 116, 143, 0.14);
}
.image-studio-overview dt { color: #6f7989; font-size: 9px; }
.image-studio-overview dd { overflow: hidden; margin: 0; color: #dbe0e7; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.image-studio-overview dd.is-pass { color: #70e7b8; }
.image-studio-overview dd.is-warn { color: #f0c66d; }
.image-studio-overview dd.is-blocked { color: #ff9297; }
.image-studio-overview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.image-studio-overview-actions button,
.image-studio-history button,
.image-studio-empty button {
  min-height: 32px;
  border: 1px solid rgba(105, 116, 143, 0.3);
  border-radius: 3px;
  background: #141b25;
  color: #c9d0da;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.image-studio-overview-actions button.primary,
.image-studio-empty button:first-child { border-color: #4e55ff; background: #272dbd; color: #fff; }

.image-studio-governance {
  margin: 0 12px 14px;
  border: 1px solid rgba(105, 116, 143, 0.22);
  border-radius: 4px;
  background: #0d131c;
}

.image-studio-governance > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  color: #dce1e9;
  cursor: pointer;
  list-style: none;
}

.image-studio-governance > summary::-webkit-details-marker { display: none; }
.image-studio-governance > summary > span { display: grid; min-width: 0; gap: 3px; }
.image-studio-governance > summary b { font-size: 10px; }
.image-studio-governance > summary em { overflow: hidden; color: #747f90; font-size: 8px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.image-studio-governance > summary i { color: #747f90; font-size: 9px; font-style: normal; }
.image-studio-governance[open] > summary { border-bottom: 1px solid rgba(105, 116, 143, 0.18); }
.image-studio-governance[open] > summary i { transform: rotate(180deg); }
.image-studio-governance > div { display: grid; gap: 9px; padding: 10px; }
.image-studio-governance label { display: grid; gap: 5px; color: #818b9b; font-size: 8px; }
.image-studio-governance input[type="text"],
.image-studio-governance select {
  box-sizing: border-box;
  width: 100%;
  height: 31px;
  padding: 0 8px;
  border: 1px solid rgba(105, 116, 143, 0.28);
  border-radius: 3px;
  outline: 0;
  background: #111923;
  color: #dce1e9;
  font-size: 9px;
}
.image-studio-governance input:focus,
.image-studio-governance select:focus { border-color: #555cff; }
.image-studio-governance label.is-checkbox { display: flex; align-items: center; gap: 7px; }
.image-studio-governance label.is-checkbox input { accent-color: #555cff; }
.image-studio-governance footer { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.image-studio-governance button {
  min-height: 31px;
  border: 1px solid rgba(105, 116, 143, 0.3);
  border-radius: 3px;
  background: #141b25;
  color: #c9d0da;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.image-studio-governance button.primary { border-color: #4e55ff; background: #1f23ab; color: #fff; }
.image-studio-governance button.danger { border-color: rgba(231, 91, 98, 0.44); color: #ff9ca1; }
.image-studio-governance.is-unavailable { display: grid; gap: 8px; padding: 11px; }
.image-studio-governance.is-unavailable header span { color: #6f7989; font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.image-studio-governance.is-unavailable header strong { display: block; margin-top: 4px; color: #dce1e9; font-size: 10px; }
.image-studio-governance.is-unavailable p { margin: 0; color: #747f90; font-size: 8px; line-height: 1.55; }
.image-studio-history { display: grid; gap: 6px; }
.image-studio-history > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.image-studio-history > div strong { color: #dfe3e9; font-size: 10px; }
.image-studio-history button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 9px; text-align: left; }
.image-studio-history button span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.image-studio-history button em { color: #7f8998; font-size: 8px; font-style: normal; }
.image-studio-history button em[data-status="running"],
.image-studio-history button em[data-status="queued"] { color: #e4b75d; }
.image-studio-history button em[data-status="succeeded"] { color: #65dcae; }
.image-studio-history button em[data-status="failed"] { color: #ff8e94; }
.image-studio-history p { margin: 0; color: #727c8c; font-size: 9px; line-height: 1.55; }

.image-studio-branch-tree {
  display: grid;
  gap: 8px;
  padding: 14px 12px 18px;
  border-top: 1px solid rgba(105, 116, 143, 0.18);
}

.image-studio-branch-tree > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 9px;
}

.image-studio-branch-tree > header div { display: grid; gap: 3px; }
.image-studio-branch-tree > header span { color: #6f7989; font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.image-studio-branch-tree > header strong { color: #e4e8ee; font-size: 11px; }
.image-studio-branch-tree > header > em { color: #757f8f; font-size: 8px; font-style: normal; }
.image-studio-branch-tree > div { display: grid; gap: 4px; }

.image-studio-branch-tree > div > button {
  position: relative;
  display: grid;
  grid-template-columns: 2px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 45px;
  margin-left: calc(var(--branch-depth) * 9px);
  padding: 5px 6px;
  border: 1px solid rgba(105, 116, 143, 0.18);
  border-radius: 3px;
  background: #0c1219;
  color: #cdd3dc;
  text-align: left;
  cursor: pointer;
}

.image-studio-branch-tree > div > button:hover,
.image-studio-branch-tree > div > button.is-current { border-color: rgba(100, 107, 255, 0.6); background: rgba(39, 45, 189, 0.13); }
.image-studio-branch-tree button > i { width: 2px; height: 100%; background: #4e55ff; opacity: 0.42; }
.image-studio-branch-tree button.is-current > i { opacity: 1; }
.image-studio-branch-tree button > img { width: 34px; height: 34px; border-radius: 2px; object-fit: cover; }
.image-studio-branch-tree button > span { display: grid; min-width: 0; gap: 3px; }
.image-studio-branch-tree button > span strong { overflow: hidden; color: #dce1e9; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.image-studio-branch-tree button > span em { overflow: hidden; color: #737d8d; font-size: 7px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.image-studio-branch-tree button > b { color: #87909e; font-size: 7px; font-weight: 800; }
.image-studio-branch-tree button > b.is-approved { color: #64dbaa; }
.image-studio-branch-tree button > b.is-rejected { color: #ff858b; }

.image-studio-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
}
.image-studio-empty > span { color: #7178ff; font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.image-studio-empty > strong { color: #f0f2f6; font-size: 20px; }
.image-studio-empty > p { max-width: 460px; margin: 0; color: #7b8493; font-size: 11px; line-height: 1.65; }
.image-studio-empty > div { display: flex; gap: 7px; margin-top: 4px; }
.image-studio-empty button { padding: 0 14px; }

.image-studio-current-empty {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(300px, 0.62fr);
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 0;
  background: #080c12;
}

.image-studio-current-empty > section {
  display: grid;
  place-content: center;
  justify-items: start;
  gap: 12px;
  padding: clamp(40px, 7vw, 110px);
  border-right: 1px solid rgba(113, 123, 148, 0.18);
}

.image-studio-current-empty > section > span,
.image-studio-current-empty > aside header span { color: #737aff; font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.image-studio-current-empty > section > strong { color: #f4f6f9; font-size: 24px; }
.image-studio-current-empty > section > p { max-width: 540px; margin: 0; color: #8a94a3; font-size: 11px; line-height: 1.8; }
.image-studio-current-empty > section > div { display: flex; gap: 8px; }
.image-studio-current-empty button { min-height: 32px; border: 1px solid rgba(113, 123, 148, 0.32); border-radius: 3px; background: #151b24; color: #d9dee6; cursor: pointer; }
.image-studio-current-empty button.primary { border-color: #555cff; background: #272dbd; color: #fff; }

.image-studio-current-empty > aside { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; min-width: 0; min-height: 0; padding: 18px; overflow: hidden; }
.image-studio-current-empty > aside header { display: flex; align-items: end; justify-content: space-between; }
.image-studio-current-empty > aside header div { display: grid; gap: 5px; }
.image-studio-current-empty > aside header strong { color: #e8ebf0; font-size: 13px; }
.image-studio-current-empty > aside header em { color: #818b9a; font-size: 8px; font-style: normal; }
.image-studio-current-empty > aside > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 7px; overflow: auto; }
.image-studio-current-empty > aside > div > button { position: relative; overflow: hidden; aspect-ratio: 4 / 5; padding: 0; text-align: left; }
.image-studio-current-empty > aside img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.image-studio-current-empty > aside button span { position: absolute; display: grid; gap: 3px; inset: auto 0 0; padding: 24px 8px 8px; background: linear-gradient(transparent, rgba(5, 8, 12, 0.94)); }
.image-studio-current-empty > aside button strong { overflow: hidden; color: #f4f6f9; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.image-studio-current-empty > aside button em { color: #9ba4b1; font-size: 7px; font-style: normal; }
.image-studio-current-empty > aside > p { margin: 0; color: #727c8b; font-size: 8px; line-height: 1.6; }

@media (max-width: 980px) {
  .image-studio-current-empty { grid-template-columns: 1fr; overflow: auto; }
  .image-studio-current-empty > section { min-height: 390px; border-right: 0; border-bottom: 1px solid rgba(113, 123, 148, 0.18); }
  .image-studio-current-empty > aside { min-height: 440px; }
}

.media-canvas-viewport {
  --canvas-grid-x: 0px;
  --canvas-grid-y: 0px;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background-color: #080c12;
  overscroll-behavior: contain;
}

.media-canvas-viewport::before {
  position: absolute;
  z-index: 0;
  inset: -22px;
  background-image: radial-gradient(circle, rgba(89, 101, 129, 0.28) 1px, transparent 1px);
  background-size: 22px 22px;
  content: "";
  pointer-events: none;
  transform: translate3d(var(--canvas-grid-x), var(--canvas-grid-y), 0);
  will-change: transform;
}

.media-canvas-viewport.is-panning {
  cursor: grabbing;
}

.media-canvas-surface {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto 0;
  width: 5200px;
  height: 2200px;
  contain: layout paint style;
  transform-origin: 0 0;
}

.media-canvas-viewport.is-transforming .media-canvas-surface {
  will-change: transform;
}

.media-canvas-viewport.is-transforming .media-flow-node {
  pointer-events: none;
}

.media-canvas-edges,
.media-canvas-stage-labels,
.media-canvas-node-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.media-canvas-edges {
  overflow: visible;
  pointer-events: none;
}

.media-canvas-edges path {
  fill: none;
  stroke: rgba(88, 99, 124, 0.42);
  stroke-width: 2;
}

.media-canvas-edges path.is-active {
  stroke: #5d64ff;
  stroke-width: 2.5;
}

.media-canvas-edges path.is-connecting {
  stroke: #7a82ff;
  stroke-width: 2.5;
  stroke-dasharray: 9 7;
  filter: drop-shadow(0 0 5px rgba(93, 100, 255, 0.5));
}

.media-canvas-stage-labels {
  pointer-events: none;
}

.media-canvas-stage-label {
  position: absolute;
  color: #515a69;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.media-flow-node {
  position: absolute;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(91, 103, 128, 0.32);
  border-radius: 6px;
  background: #101620;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}

.media-flow-node:hover {
  border-color: rgba(128, 139, 169, 0.56);
}

.media-flow-node.is-selected {
  box-shadow: 0 0 0 2px rgba(78, 85, 255, 0.34), 0 18px 45px rgba(0, 0, 0, 0.28);
}

.media-flow-node[data-completeness="complete"] {
  border-color: #4e55ff;
}

.media-flow-node[data-completeness="incomplete"] {
  border-color: #d94f59;
}

.media-flow-node[data-status="running"] {
  border-color: #d9a44f;
}

.media-flow-node[data-status="failed"],
.media-flow-node[data-status="blocked"] {
  border-color: #f06469;
}

.media-flow-node[data-status="succeeded"] {
  border-color: #48c997;
}

.media-flow-node[data-status="needs-selection"] {
  border-color: #d9a44f;
}

.media-flow-node[data-status="planned"] {
  border-color: rgba(91, 103, 128, 0.5);
}

.media-flow-node.is-recipe-step {
  overflow: visible;
  background: #0e1520;
}

.media-flow-node.is-recipe-step > header {
  border-radius: 5px 5px 0 0;
  background: #0e1520;
}

.media-flow-node.is-recipe-step > .media-flow-node-body {
  border-radius: 0 0 5px 5px;
  background: #0e1520;
}

.media-flow-port {
  position: absolute;
  z-index: 8;
  top: 50%;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2px solid #69748a;
  border-radius: 50%;
  background: #0a0f17;
  box-shadow: 0 0 0 4px rgba(10, 15, 23, 0.88);
  cursor: crosshair;
  transform: translateY(-50%);
}

.media-flow-port::after {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #69748a;
  content: "";
}

.media-flow-port.is-input {
  left: -9px;
}

.media-flow-port.is-output {
  right: -9px;
}

.media-flow-port:hover,
.media-flow-port:focus-visible,
.media-flow-port.is-valid-target {
  border-color: #7a82ff;
  outline: 0;
}

.media-flow-port:hover::after,
.media-flow-port:focus-visible::after,
.media-flow-port.is-valid-target::after {
  background: #7a82ff;
}

.media-flow-port.is-drop-target {
  border-color: #5ee0b2;
  box-shadow: 0 0 0 7px rgba(94, 224, 178, 0.18), 0 0 18px rgba(94, 224, 178, 0.55);
  transform: translateY(-50%) scale(1.2);
}

.media-flow-port.is-drop-target::after {
  background: #5ee0b2;
}

.media-canvas-viewport.is-connecting,
.media-canvas-viewport.is-connecting .media-flow-node {
  cursor: crosshair;
}

.media-flow-node.is-recipe-step[data-status="ready"] {
  border-color: #5962ff;
  box-shadow: 0 0 0 1px rgba(89, 98, 255, 0.12), 0 14px 36px rgba(0, 0, 0, 0.22);
}

.media-flow-node.is-operation-node header > i {
  background: #8a70ff;
}

.media-flow-node.is-recipe-step[data-status="succeeded"] header > i {
  background: #48c997;
}

.media-flow-node.is-recipe-step[data-status="running"] header > i,
.media-flow-node.is-recipe-step[data-status="needs-selection"] header > i {
  background: #d9a44f;
}

.media-flow-node header {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 11px;
  border-bottom: 1px solid rgba(101, 111, 137, 0.15);
  cursor: move;
}

.media-flow-node header > i {
  width: 4px;
  height: 24px;
  border-radius: 2px;
  background: #596274;
}

.media-flow-node[data-completeness="complete"] header > i {
  background: #525aff;
}

.media-flow-node[data-completeness="incomplete"] header > i {
  background: #ef626a;
}

.media-flow-node header > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.media-flow-node header span {
  color: #697383;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.media-flow-node header strong {
  overflow: hidden;
  margin-top: 4px;
  color: #eef1f5;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.media-flow-node header em {
  padding: 5px 7px;
  border: 1px solid rgba(105, 116, 143, 0.25);
  border-radius: 3px;
  color: #8d96a5;
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.media-flow-node[data-completeness="complete"] header em {
  border-color: rgba(82, 90, 255, 0.45);
  color: #9ca1ff;
}

.media-flow-node[data-completeness="incomplete"] header em {
  border-color: rgba(239, 98, 106, 0.42);
  color: #ff9399;
}

.media-flow-node-body {
  min-height: 0;
  overflow: auto;
  padding: 11px;
}

.generation-recipe-step-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(100, 112, 142, 0.22);
  border-radius: 4px;
  background: #0a1018;
}

.generation-recipe-order {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.generation-recipe-order b {
  color: #7d84ff;
  font: 800 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.generation-recipe-order span,
.generation-recipe-step-summary small {
  color: #6f7a8b;
  font-size: 8px;
}

.generation-recipe-step-summary p {
  margin: 0;
  color: #cbd2dd;
  font-size: 10px;
  line-height: 1.5;
}

.generation-recipe-contract {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(100, 112, 142, 0.2);
  border-radius: 4px;
  background: #0a1018;
}

.generation-recipe-contract span {
  color: #737fff;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.generation-recipe-contract strong,
.generation-recipe-contract em {
  overflow: hidden;
  color: #cbd2dd;
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-recipe-contract em {
  color: #6f7a8b;
}

.generation-recipe-selection {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(217, 164, 79, 0.4);
  border-radius: 4px;
  background: rgba(87, 59, 17, 0.18);
}

.generation-recipe-selection > strong {
  color: #e7bd75;
  font-size: 10px;
}

.generation-recipe-selection > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.generation-recipe-selection button {
  display: grid;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(217, 164, 79, 0.28);
  border-radius: 3px;
  background: #0b1119;
  color: #cbd2dd;
  cursor: pointer;
}

.generation-recipe-selection img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.generation-recipe-selection span {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-recipe-selection em {
  color: #7f8ba0;
  font-size: 8px;
  font-style: normal;
}

.generation-recipe-selection button.is-selected {
  border-color: #5f6cff;
  box-shadow: inset 0 0 0 1px rgba(95, 108, 255, 0.35);
}

.generation-recipe-selection button.is-selected em {
  color: #9da5ff;
}

.generation-recipe-runtime {
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid rgba(100, 112, 142, 0.22);
  border-left: 2px solid #5f6cff;
  border-radius: 4px;
  background: rgba(8, 13, 20, 0.86);
}

.generation-recipe-runtime span {
  color: #737fff;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.generation-recipe-runtime strong,
.generation-recipe-runtime em {
  overflow: hidden;
  color: #cbd2dd;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-recipe-runtime em {
  color: #7f8ba0;
}

.generation-recipe-runtime-detail {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(100, 112, 142, 0.28);
  border-left: 2px solid #5f6cff;
  border-radius: 4px;
  background: #080e16;
}

.generation-recipe-runtime-detail[data-run-status="paused"] {
  border-left-color: #d9a44f;
}

.generation-recipe-runtime-detail[data-run-status="failed"],
.generation-recipe-runtime-detail[data-node-status="failed"] {
  border-left-color: #ef626a;
}

.generation-recipe-runtime-detail[data-run-status="succeeded"] {
  border-left-color: #48ba97;
}

.generation-recipe-runtime-detail > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.generation-recipe-runtime-detail > header div {
  display: grid;
  gap: 4px;
}

.generation-recipe-runtime-detail > header span,
.generation-recipe-runtime-detail > header em {
  color: #737fff;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
}

.generation-recipe-runtime-detail > header strong {
  color: #e4e8ef;
  font-size: 10px;
}

.generation-recipe-runtime-detail dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.generation-recipe-runtime-detail dl > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
}

.generation-recipe-runtime-detail dt,
.generation-recipe-runtime-detail dd {
  margin: 0;
  font-size: 8px;
  line-height: 1.35;
}

.generation-recipe-runtime-detail dt {
  color: #667185;
}

.generation-recipe-runtime-detail dd {
  overflow: hidden;
  color: #b8c0cc;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-recipe-runtime-detail ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 7px 0 0;
  border-top: 1px solid rgba(100, 112, 142, 0.18);
  list-style: none;
}

.generation-recipe-runtime-detail li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #737e90;
  font-size: 8px;
}

.generation-recipe-runtime-detail li b {
  color: #a9b1be;
  font-weight: 600;
}

.generation-recipe-runtime-error {
  margin: 0;
  padding: 7px;
  border: 1px solid rgba(239, 98, 106, 0.3);
  background: rgba(86, 22, 28, 0.24);
  color: #ff9ca1;
  font-size: 8px;
  line-height: 1.45;
}

.generation-recipe-usage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid rgba(103, 115, 145, 0.26);
  border-radius: 3px;
  background: #0d141e;
}

.generation-recipe-usage > span,
.generation-recipe-usage > strong,
.generation-recipe-usage > em {
  grid-column: 1;
}

.generation-recipe-usage > strong {
  color: #eef1f5;
  font-size: 10px;
}

.generation-recipe-usage > em {
  color: #788499;
  font-size: 8px;
  font-style: normal;
  white-space: normal;
}

.generation-recipe-usage > button {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  min-width: 48px;
  min-height: 28px;
  border: 1px solid rgba(108, 119, 145, 0.4);
  border-radius: 3px;
  background: #151d29;
  color: #c6ceda;
  font-size: 8px;
  cursor: pointer;
}

.generation-recipe-usage[data-status="ready"] {
  border-color: rgba(72, 186, 151, 0.38);
}

.generation-recipe-usage[data-status="ready"] > span,
.generation-recipe-usage[data-status="ready"] > strong {
  color: #72d5b5;
}

.generation-recipe-usage[data-status="blocked"] {
  border-color: rgba(239, 98, 106, 0.42);
}

.generation-recipe-usage[data-status="blocked"] > span,
.generation-recipe-usage[data-status="blocked"] > strong {
  color: #ff9298;
}

.generation-recipe-usage[data-status="loading"] {
  border-color: rgba(217, 164, 79, 0.38);
}

.generation-recipe-runtime-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.generation-recipe-runtime-actions button {
  min-height: 27px;
  padding: 0 7px;
  border: 1px solid rgba(108, 119, 145, 0.34);
  border-radius: 3px;
  background: #101722;
  color: #b9c1cd;
  font-size: 8px;
  cursor: pointer;
}

.generation-recipe-runtime-actions button.primary {
  border-color: #5f6cff;
  background: #292daa;
  color: #fff;
}

.generation-recipe-runtime-actions button:disabled {
  cursor: wait;
  opacity: 0.5;
}

.workflow-branch-modal {
  position: fixed;
  z-index: 150;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.workflow-branch-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 4, 8, 0.8);
  backdrop-filter: blur(8px);
}

.workflow-branch-modal > section {
  position: relative;
  display: grid;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid rgba(95, 108, 255, 0.42);
  border-radius: 6px;
  background: #090f17;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.workflow-branch-modal header,
.workflow-branch-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}

.workflow-branch-modal header {
  border-bottom: 1px solid rgba(106, 117, 143, 0.2);
}

.workflow-branch-modal header div {
  display: grid;
  gap: 5px;
}

.workflow-branch-modal header span {
  color: #7d84ff;
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.workflow-branch-modal h2,
.workflow-branch-modal p {
  margin: 0;
}

.workflow-branch-modal h2 {
  color: #f2f4f7;
  font-size: 18px;
}

.workflow-branch-modal header p,
.workflow-branch-modal footer p {
  color: #7f8998;
  font-size: 10px;
}

.workflow-branch-modal header > button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(106, 117, 143, 0.3);
  border-radius: 3px;
  background: #111925;
  color: #c3cad4;
  font-size: 18px;
  cursor: pointer;
}

.workflow-branch-modal main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 14px;
  padding: 18px;
}

.workflow-branch-values {
  display: grid;
  gap: 8px;
  color: #aeb6c3;
  font-size: 10px;
}

.workflow-branch-values textarea {
  min-height: 210px;
  resize: vertical;
  border: 1px solid rgba(106, 117, 143, 0.35);
  border-radius: 4px;
  background: #0d141f;
  color: #e7eaf0;
  line-height: 1.6;
}

.workflow-branch-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

.workflow-branch-choices label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid rgba(106, 117, 143, 0.3);
  border-radius: 4px;
  background: #0d141f;
  color: #c5ccd6;
  font-size: 10px;
}

.workflow-branch-modal main aside {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid rgba(106, 117, 143, 0.24);
  border-radius: 4px;
  background: #0b121c;
}

.workflow-branch-modal main aside strong {
  color: #dfe3e9;
  font-size: 11px;
}

.workflow-branch-modal main aside span {
  color: #7f8998;
  font-size: 9px;
  line-height: 1.5;
}

.workflow-branch-modal footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(106, 117, 143, 0.2);
}

.workflow-branch-modal footer p {
  margin-right: auto;
  color: #ff9ca1;
}

.workflow-branch-modal footer button {
  min-width: 94px;
  min-height: 34px;
  border: 1px solid rgba(106, 117, 143, 0.35);
  border-radius: 3px;
  background: #111925;
  color: #c3cad4;
  cursor: pointer;
}

.workflow-branch-modal footer button.primary {
  border-color: #5f6cff;
  background: #292daa;
  color: #fff;
}

@media (max-width: 720px) {
  .workflow-branch-modal main {
    grid-template-columns: 1fr;
  }
}

/* Reusable people and background libraries for the outfit workflow. */
.fashion-flow-slot-actions .library {
  border-color: #cbd3f4;
  background: #f5f6ff;
  color: var(--studio-blue);
}

.fashion-flow-library-warning {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e9d9a8;
  border-radius: 6px;
  background: #fffaf0;
  color: #765d16;
  font-size: 12px;
}

.fashion-reference-library-modal {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
}

.fashion-reference-library-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 22, 37, 0.42);
  backdrop-filter: blur(5px);
}

.fashion-reference-library-modal > section {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(1080px, 94vw);
  height: min(760px, 88vh);
  overflow: hidden;
  border: 1px solid #dfe3ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(25, 31, 67, 0.2);
}

.fashion-reference-library-modal > section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 28px 20px;
  border-bottom: 1px solid var(--studio-line);
}

.fashion-reference-library-modal header div { display: grid; gap: 5px; }
.fashion-reference-library-modal header span { color: var(--studio-blue); font-size: 10px; font-weight: 850; }
.fashion-reference-library-modal header h2 { margin: 0; color: var(--studio-ink); font-size: 26px; letter-spacing: 0; }
.fashion-reference-library-modal header p { margin: 0; color: var(--studio-muted); font-size: 12px; }
.fashion-reference-library-modal header > button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--studio-line-strong);
  border-radius: 50%;
  background: #fff;
  color: #687086;
  font-size: 20px;
}

.fashion-reference-library-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--studio-line);
  background: var(--studio-soft);
}

.fashion-reference-library-toolbar form { display: flex; width: min(440px, 65%); }
.fashion-reference-library-toolbar > div { display: flex; gap: 8px; }
.fashion-reference-library-toolbar input {
  min-width: 0;
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--studio-line-strong);
  border-radius: 5px 0 0 5px;
  background: #fff;
}
.fashion-reference-library-toolbar button {
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--studio-line-strong);
  border-radius: 5px;
  background: #fff;
  color: var(--studio-ink);
  font-weight: 750;
}
.fashion-reference-library-toolbar form button { border-left: 0; border-radius: 0 5px 5px 0; }
.fashion-reference-library-toolbar > div button.primary { border-color: var(--studio-blue); background: var(--studio-blue); color: #fff; }

.fashion-reference-library-body { min-height: 0; overflow: auto; padding: 22px 28px 30px; }
.fashion-reference-library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fashion-reference-library-card {
  overflow: hidden;
  border: 1px solid var(--studio-line);
  border-radius: 7px;
  background: #fff;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.fashion-reference-library-card:hover { transform: translateY(-2px); border-color: #c7cdf0; box-shadow: var(--studio-shadow); }
.fashion-video-image-card.is-selected {
  border-color: var(--studio-blue);
  box-shadow: 0 0 0 2px rgba(31, 35, 171, 0.1);
}
.fashion-video-image-card footer button:disabled {
  border-color: #dfe2eb;
  background: #eef0f5;
  color: #8b91a3;
  cursor: default;
}
.fashion-reference-library-preview { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #f1f3f8; }
.fashion-reference-library-preview img { width: 100%; height: 100%; object-fit: cover; }
.fashion-reference-library-preview span { position: absolute; right: 9px; bottom: 9px; padding: 5px 7px; border-radius: 4px; background: rgba(18, 22, 37, .78); color: #fff; font-size: 9px; }
.fashion-reference-library-card > div { display: grid; gap: 5px; padding: 13px 14px 10px; }
.fashion-reference-library-card > div strong { overflow: hidden; color: var(--studio-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.fashion-reference-library-card > div em { overflow: hidden; color: var(--studio-muted); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.fashion-reference-library-card footer { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 14px 14px; }
.fashion-reference-library-card footer button { min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--studio-line-strong); border-radius: 5px; background: #fff; color: var(--studio-ink); font-size: 10px; font-weight: 760; }
.fashion-reference-library-card footer button.primary,
.fashion-reference-library-state button.primary { border-color: var(--studio-blue); background: var(--studio-blue); color: #fff; }
.fashion-reference-library-state { display: grid; place-items: center; align-content: center; gap: 9px; min-height: 390px; text-align: center; }
.fashion-reference-library-state strong { color: var(--studio-ink); font-size: 18px; }
.fashion-reference-library-state span { color: var(--studio-muted); font-size: 12px; }
.fashion-reference-library-state button { height: 36px; padding: 0 15px; border: 1px solid var(--studio-line-strong); border-radius: 5px; background: #fff; }
.fashion-reference-library-state.is-error strong { color: #b42343; }

@media (max-width: 980px) {
  .fashion-reference-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .fashion-reference-library-modal { padding: 10px; }
  .fashion-reference-library-modal > section { width: 100%; height: 94vh; }
  .fashion-reference-library-toolbar { align-items: stretch; flex-direction: column; }
  .fashion-reference-library-toolbar form { width: 100%; }
  .fashion-reference-library-toolbar > div { display: grid; grid-template-columns: 1fr 1fr; }
  .fashion-reference-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ai-person-generator-modal {
  position: fixed;
  z-index: 190;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.ai-person-generator-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 29, 49, 0.44);
  backdrop-filter: blur(6px);
}

.ai-person-generator-modal > section {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(980px, 94vw);
  max-height: min(760px, 92vh);
  overflow: hidden;
  border: 1px solid #dfe3ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(25, 31, 67, 0.22);
}

.ai-person-generator-modal header,
.ai-person-generator-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--studio-line);
}

.ai-person-generator-modal header > div { display: grid; gap: 4px; }
.ai-person-generator-modal header span { color: var(--studio-blue); font-size: 10px; font-weight: 850; }
.ai-person-generator-modal header h2 { margin: 0; color: var(--studio-ink); font-size: 24px; letter-spacing: 0; }
.ai-person-generator-modal header p { margin: 0; color: var(--studio-muted); font-size: 12px; }
.ai-person-generator-modal header > button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--studio-line-strong);
  border-radius: 50%;
  background: #fff;
  color: #687086;
  font-size: 20px;
}

.ai-person-generator-modal main {
  display: grid;
  grid-template-columns: minmax(300px, .84fr) minmax(360px, 1.16fr);
  min-height: 0;
  overflow: auto;
}

.ai-person-generator-inputs {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 24px;
  border-right: 1px solid var(--studio-line);
  background: #fbfcff;
}

.ai-person-reference-picker,
.ai-person-prompt { display: grid; gap: 8px; color: var(--studio-ink); font-size: 12px; font-weight: 800; }
.ai-person-reference-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ai-person-reference-picker > div {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 210px;
  overflow: hidden;
  border: 1px dashed #b8c0d8;
  border-radius: 6px;
  background: #fff;
  color: var(--studio-muted);
  cursor: pointer;
}
.ai-person-reference-picker > div:hover { border-color: var(--studio-blue); background: #f7f8ff; }
.ai-person-reference-picker > div > img { width: 100%; height: 210px; object-fit: contain; background: #f2f4f8; }
.ai-person-reference-picker > div > span { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 0 12px 12px; }
.ai-person-reference-picker strong { color: var(--studio-ink); font-size: 12px; }
.ai-person-reference-picker em { color: var(--studio-muted); font-size: 10px; font-style: normal; font-weight: 500; }
.ai-person-prompt textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  padding: 12px;
  border: 1px solid var(--studio-line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--studio-ink);
  font: inherit;
  font-weight: 500;
  line-height: 1.65;
}
.ai-person-prompt textarea:focus { border-color: var(--studio-blue); outline: 3px solid rgba(31, 35, 171, .08); }
.ai-person-realism-note { display: grid; gap: 5px; margin: 0; padding: 12px 13px; border-left: 3px solid var(--studio-blue); background: #f2f4ff; }
.ai-person-realism-note strong { color: var(--studio-ink); font-size: 11px; }
.ai-person-realism-note span { color: #5c6477; font-size: 10px; line-height: 1.6; }

.ai-person-generator-result { display: grid; min-height: 520px; padding: 24px; background: #f4f5f8; }
.ai-person-generator-state { display: grid; place-items: center; align-content: center; gap: 8px; color: var(--studio-muted); text-align: center; }
.ai-person-generator-state strong { color: var(--studio-ink); font-size: 18px; }
.ai-person-generator-state span { max-width: 300px; font-size: 11px; line-height: 1.6; }
.ai-person-generator-state.is-error strong { color: #b42343; }
.ai-person-generator-state.is-loading i { width: 28px; height: 28px; border: 3px solid #d9ddf7; border-top-color: var(--studio-blue); border-radius: 50%; animation: ai-person-spin 800ms linear infinite; }
@keyframes ai-person-spin { to { transform: rotate(360deg); } }
.ai-person-generator-output { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; margin: 0; overflow: hidden; border: 1px solid var(--studio-line); border-radius: 7px; background: #fff; }
.ai-person-generator-output img { width: 100%; height: 100%; min-height: 430px; object-fit: contain; background: #edf0f5; }
.ai-person-generator-output figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; }
.ai-person-generator-output figcaption strong { color: var(--studio-ink); font-size: 12px; }
.ai-person-generator-output figcaption span { color: var(--studio-muted); font-size: 10px; }
.ai-person-generator-modal footer { justify-content: flex-end; border-top: 1px solid var(--studio-line); border-bottom: 0; }
.ai-person-generator-modal footer button { height: 38px; padding: 0 17px; border: 1px solid var(--studio-line-strong); border-radius: 5px; background: #fff; color: var(--studio-ink); font-weight: 800; }
.ai-person-generator-modal footer button.primary { border-color: var(--studio-blue); background: var(--studio-blue); color: #fff; }
.ai-person-generator-modal footer button:disabled { cursor: wait; opacity: .58; }

@media (max-width: 760px) {
  .ai-person-generator-modal { padding: 8px; }
  .ai-person-generator-modal > section { width: 100%; max-height: 96vh; }
  .ai-person-generator-modal main { grid-template-columns: 1fr; }
  .ai-person-generator-inputs { border-right: 0; border-bottom: 1px solid var(--studio-line); }
  .ai-person-generator-result { min-height: 430px; }
}

.image-canvas-upload-modal {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.image-canvas-upload-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 4, 8, 0.78);
  backdrop-filter: blur(8px);
}

.image-canvas-upload-modal > section {
  position: relative;
  display: grid;
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid rgba(95, 108, 255, 0.4);
  border-radius: 6px;
  background: #0a1018;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
}

.image-canvas-upload-modal header,
.image-canvas-upload-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(100, 112, 142, 0.2);
}

.image-canvas-upload-modal footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(100, 112, 142, 0.2);
  border-bottom: 0;
}

.image-canvas-upload-modal header span {
  color: #737fff;
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.image-canvas-upload-modal h2 {
  margin: 5px 0 0;
  color: #f4f6fa;
  font-size: 18px;
}

.image-canvas-upload-modal button {
  min-height: 34px;
  border: 1px solid rgba(100, 112, 142, 0.32);
  border-radius: 4px;
  padding: 0 13px;
  color: #cbd2dd;
  background: #111923;
  font: inherit;
  cursor: pointer;
}

.image-canvas-upload-modal button.primary {
  border-color: #5f6cff;
  color: #fff;
  background: #1f23ab;
}

.image-canvas-upload-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.1fr);
  gap: 20px;
  padding: 18px;
}

.image-canvas-upload-body > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(100, 112, 142, 0.24);
  border-radius: 4px;
  object-fit: contain;
  background: #05080d;
}

.image-canvas-upload-body > div {
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
}

.image-canvas-upload-body strong {
  overflow-wrap: anywhere;
  color: #f4f6fa;
  font-size: 14px;
}

.image-canvas-upload-body span,
.image-canvas-upload-body p {
  margin: 0;
  color: #8c97a8;
  font-size: 11px;
  line-height: 1.6;
}

.image-canvas-upload-body label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(95, 108, 255, 0.26);
  border-radius: 4px;
  background: rgba(31, 35, 171, 0.12);
}

.image-canvas-upload-body label input {
  margin-top: 3px;
}

.image-canvas-upload-body em {
  min-height: 18px;
  color: #ff7b8d;
  font-size: 10px;
  font-style: normal;
}

@media (max-width: 680px) {
  .image-canvas-upload-body {
    grid-template-columns: 1fr;
  }

  .image-canvas-upload-body > img {
    max-height: 38vh;
  }
}

.media-node-copy {
  margin: 0;
  color: #a6afbd;
  font-size: 10px;
  line-height: 1.55;
}

.media-node-facts {
  display: grid;
  gap: 6px;
}

.media-node-facts > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(106, 116, 142, 0.12);
}

.media-node-facts span {
  color: #697282;
  font-size: 9px;
}

.media-node-facts strong {
  overflow: hidden;
  color: #dce1e9;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
  text-overflow: ellipsis;
}

.media-node-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.media-node-gallery figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(105, 116, 143, 0.23);
  border-radius: 4px;
  background: #080c12;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}

.media-node-gallery img,
.media-node-gallery video {
  width: 100%;
  height: 100%;
  image-rendering: auto;
  object-fit: cover;
}

.media-node-gallery figcaption {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  inset: auto 5px 5px;
  pointer-events: none;
}

.media-card-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  pointer-events: auto;
}

.media-node-gallery figcaption strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.82);
  font-size: 8px;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px #000;
}

.media-node-gallery .media-video-frame-action,
.media-node-gallery .media-review-action {
  flex: 0 0 auto;
  height: 25px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  background: rgba(7, 10, 15, 0.82);
  color: #fff;
  font-size: 9px;
  cursor: pointer;
  pointer-events: auto;
}

.media-node-gallery .media-video-frame-action.is-blocked {
  border-color: rgba(239, 98, 106, 0.38);
  background: rgba(67, 25, 31, 0.9);
  color: #ffb1b6;
}

.video-frame-readiness {
  display: grid;
  gap: 9px;
}

.video-frame-readiness > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(99, 110, 139, 0.18);
}

.video-frame-readiness > header div { display: grid; gap: 2px; }
.video-frame-readiness > header span { color: #777ff4; font-size: 8px; font-weight: 900; }
.video-frame-readiness > header strong { color: #e4e8ef; font-size: 11px; }
.video-frame-readiness > header em { color: #f0bc74; font-size: 8px; font-style: normal; }

.video-frame-readiness > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 430px;
  overflow-y: auto;
}

.video-frame-readiness article {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(215, 94, 106, 0.28);
  border-radius: 4px;
  background: rgba(70, 24, 32, 0.12);
}

.video-frame-readiness article.is-ready { border-color: rgba(67, 201, 150, 0.35); background: rgba(22, 92, 67, 0.12); }
.video-frame-readiness article.is-selected { border-color: #6e75ff; box-shadow: inset 0 0 0 1px rgba(110, 117, 255, 0.22); }
.video-frame-readiness article > img { width: 82px; height: 108px; border-radius: 3px; background: #060a10; object-fit: cover; }
.video-frame-readiness article > div { display: grid; align-content: start; gap: 5px; min-width: 0; }
.video-frame-readiness article strong { overflow: hidden; color: #dce1ea; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.video-frame-readiness article ul { display: flex; flex-wrap: wrap; gap: 3px; margin: 0; padding: 0; list-style: none; }
.video-frame-readiness article li { padding: 2px 4px; border: 1px solid rgba(215, 94, 106, 0.28); border-radius: 3px; color: #b8878d; font-size: 7px; }
.video-frame-readiness article li[data-ready="true"] { border-color: rgba(67, 201, 150, 0.3); color: #70e7b8; }
.video-frame-readiness article p { margin: 0; color: #8f99a8; font-size: 7px; line-height: 1.4; }
.video-frame-readiness article button { justify-self: start; min-height: 24px; padding: 0 7px; font-size: 8px; }

.video-frame-readiness-empty { display: grid; gap: 7px; padding: 12px; border: 1px solid rgba(215, 94, 106, 0.28); border-radius: 4px; }
.video-frame-readiness-empty strong { color: #e1e5ec; font-size: 10px; }
.video-frame-readiness-empty p { margin: 0; color: #8d96a5; font-size: 9px; line-height: 1.5; }

@media (max-width: 780px) {
  .video-frame-readiness > div { grid-template-columns: 1fr; }
}

.media-node-gallery .media-review-action {
  border-color: rgba(132, 139, 255, 0.48);
  background: rgba(31, 35, 171, 0.86);
}

.media-asset-approval {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  background: rgba(7, 10, 15, 0.82);
  color: #d8dde5;
  font-size: 8px;
  font-weight: 850;
}

.image-quality-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  background: rgba(7, 10, 15, 0.86);
  color: #d8dde5;
  font-size: 8px;
  font-weight: 850;
}

.image-quality-badge.is-pass { border-color: rgba(62, 204, 151, 0.46); color: #70e7b8; }
.image-quality-badge.is-warn { border-color: rgba(229, 176, 72, 0.54); color: #f0c66d; }
.image-quality-badge.is-blocked { border-color: rgba(240, 100, 105, 0.58); color: #ff9297; }

.media-node-gallery figure.is-approved .media-asset-approval {
  border-color: rgba(62, 204, 151, 0.46);
  color: #6ee7b7;
}

.media-node-gallery figure.is-rejected {
  opacity: 0.66;
}

.media-node-gallery figure.is-rejected .media-asset-approval {
  border-color: rgba(240, 100, 105, 0.5);
  color: #ff8d91;
}

.media-node-gallery figure.is-selected {
  border-color: #646bff;
  box-shadow: 0 0 0 2px rgba(78, 85, 255, 0.3);
}

.media-asset-check {
  position: absolute;
  display: grid;
  place-items: center;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4e55ff;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.35);
}

.image-asset-operation-bar {
  position: absolute;
  display: block;
  inset: auto 5px 36px;
  padding: 5px;
  border: 1px solid rgba(127, 133, 255, 0.35);
  border-radius: 4px;
  background: rgba(7, 10, 18, 0.9);
  backdrop-filter: blur(5px);
}

.image-asset-operation-bar button {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(128, 136, 255, 0.35);
  border-radius: 3px;
  background: rgba(39, 45, 189, 0.34);
  color: #dfe1ff;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.media-node-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.media-node-actions button,
.media-inspector-actions button {
  min-height: 28px;
  border: 1px solid rgba(105, 116, 143, 0.28);
  border-radius: 4px;
  background: #141b25;
  color: #c5ccd7;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.media-node-actions button {
  padding: 0 9px;
}

.media-node-actions button.primary,
.media-inspector-actions button.primary {
  border-color: #4047d2;
  background: #252bb1;
  color: #fff;
}

.media-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.media-settings-grid label {
  display: grid;
  gap: 4px;
  color: #737d8c;
  font-size: 8px;
}

.media-settings-grid .media-settings-model {
  grid-column: 1 / -1;
}

.media-settings-grid select,
.media-settings-grid input,
.media-inspector-form select,
.media-inspector-form input,
.media-inspector-form textarea {
  min-width: 0;
  height: 30px;
  border: 1px solid rgba(105, 116, 143, 0.28);
  border-radius: 3px;
  outline: 0;
  background: #0a0f16;
  color: #dce1e9;
  padding: 0 8px;
  font: 500 10px/1 inherit;
}

.media-inspector-form textarea {
  height: auto;
  min-height: 74px;
  resize: vertical;
  padding: 8px;
  line-height: 1.45;
}

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

.media-storyboard-list > div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 7px;
  border: 1px solid rgba(105, 116, 143, 0.17);
  border-radius: 3px;
  background: #0b1118;
}

.media-storyboard-list b {
  color: #7078ff;
  font: 750 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.media-storyboard-list strong {
  color: #cbd2dc;
  font-size: 9px;
  font-weight: 600;
}

.media-storyboard-list span {
  color: #697282;
  font-size: 8px;
}

.video-reference-summary {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(100, 107, 255, 0.34);
  border-radius: 4px;
  background: rgba(31, 35, 171, 0.12);
}

.video-reference-summary span,
.video-reference-summary em {
  color: #7e8796;
  font-size: 8px;
  font-style: normal;
  line-height: 1.4;
}

.video-reference-summary strong {
  color: #eef0ff;
  font-size: 12px;
}

.video-reference-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 6px;
  margin-top: 8px;
}

.video-reference-controls label {
  display: grid;
  gap: 4px;
  color: #737d8c;
  font-size: 8px;
}

.video-reference-controls select {
  min-width: 0;
  height: 30px;
  border: 1px solid rgba(105, 116, 143, 0.28);
  border-radius: 3px;
  background: #0a0f16;
  color: #dce1e9;
  padding: 0 7px;
  font-size: 8px;
}

.video-reference-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.video-reference-strip button {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(105, 116, 143, 0.24);
  border-radius: 3px;
  padding: 0;
  background: #080d13;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}

.video-reference-strip button.is-selected { border-color: #6d73ff; }
.video-reference-strip img { width: 100%; height: 100%; object-fit: cover; }
.video-reference-strip span { position: absolute; inset: auto 4px 4px; padding: 3px; background: rgba(4, 7, 12, 0.82); color: #fff; font-size: 7px; }

.video-reference-video-picker {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  color: #737d8c;
  font-size: 8px;
}

.video-reference-video-picker select {
  height: 30px;
  border: 1px solid rgba(105, 116, 143, 0.28);
  border-radius: 3px;
  background: #0a0f16;
  color: #dce1e9;
  padding: 0 8px;
}

.video-reference-provider-note {
  margin: 7px 0 0;
  border-left: 2px solid #4d55ff;
  padding: 5px 7px;
  background: rgba(31, 35, 171, 0.12);
  color: #a8b0c0;
  font-size: 8px;
  line-height: 1.5;
}

.video-storyboard-editor {
  display: grid;
  gap: 8px;
}

.video-storyboard-editor section {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(105, 116, 143, 0.22);
  border-radius: 4px;
  background: #0b1118;
}

.video-storyboard-editor header,
.video-storyboard-editor section > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  align-items: center;
}

.video-storyboard-editor header strong { color: #8187ff; font-size: 9px; }
.video-storyboard-editor header button { justify-self: end; border: 0; background: transparent; color: #e87a84; font-size: 8px; cursor: pointer; }
.video-storyboard-editor label { display: grid; gap: 4px; color: #778191; font-size: 8px; }
.video-storyboard-editor input,
.video-storyboard-editor select { min-width: 0; height: 30px; border: 1px solid rgba(105, 116, 143, 0.28); border-radius: 3px; background: #080d13; color: #dce1e9; padding: 0 8px; }
.video-storyboard-editor > button { height: 32px; border: 1px dashed rgba(100, 107, 255, 0.48); border-radius: 3px; background: rgba(31, 35, 171, 0.12); color: #abb0ff; cursor: pointer; }

.media-task-state {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 12px;
  border: 1px dashed rgba(106, 117, 145, 0.3);
  border-radius: 4px;
  text-align: center;
}

.media-task-state strong {
  color: #dce1e9;
  font-size: 13px;
}

.media-task-state span {
  margin-top: 5px;
  color: #788292;
  font-size: 9px;
}

.media-task-state[data-status="running"],
.media-task-state[data-status="queued"] {
  border-color: rgba(222, 170, 74, 0.45);
}

.media-task-state[data-status="failed"] {
  border-color: rgba(239, 98, 106, 0.5);
}

.media-video-quality-warning,
.media-video-quality-pass,
.media-video-quality-pending {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
  padding: 9px;
  border: 1px solid rgba(239, 98, 106, 0.5);
  border-radius: 4px;
  background: rgba(94, 24, 31, 0.22);
}

.media-video-quality-pass {
  border-color: rgba(62, 204, 151, 0.4);
  background: rgba(18, 86, 64, 0.18);
}

.media-video-quality-pending {
  border-color: rgba(222, 170, 74, 0.4);
  background: rgba(105, 71, 18, 0.18);
}

.media-video-quality-warning strong,
.media-video-quality-pass strong,
.media-video-quality-pending strong {
  color: #f1f3f7;
  font-size: 10px;
}

.media-video-quality-warning span,
.media-video-quality-warning em,
.media-video-quality-pass span,
.media-video-quality-pending span {
  color: #9ba4b2;
  font-size: 8px;
  font-style: normal;
}

.ai-task-center-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 24px;
}

.ai-task-center-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.78);
  backdrop-filter: blur(8px);
}

.ai-task-center-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, calc(100vw - 48px));
  height: min(780px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(86, 96, 123, 0.42);
  border-radius: 6px;
  background: #080d14;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}

.ai-task-center-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.28);
  background: #0b1119;
}

.ai-task-center-panel > header > div:first-child {
  display: grid;
  gap: 5px;
}

.ai-task-center-panel > header span {
  color: #777fff;
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ai-task-center-panel > header h2 {
  margin: 0;
  color: #f4f6fa;
  font-size: 20px;
  letter-spacing: 0;
}

.ai-task-center-panel > header p {
  margin: 0;
  color: #707a89;
  font-size: 10px;
}

.ai-task-center-panel > header > div:last-child {
  display: flex;
  gap: 8px;
}

.ai-task-center-panel button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(103, 113, 142, 0.34);
  border-radius: 4px;
  background: #131a24;
  color: #ccd2dc;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.ai-task-center-panel button:hover {
  border-color: rgba(110, 118, 255, 0.62);
  color: #fff;
}

.ai-task-center-panel button.active,
.ai-task-center-panel button.primary {
  border-color: #4249dd;
  background: #272db6;
  color: #fff;
}

.ai-task-center-panel button.danger {
  border-color: rgba(229, 83, 94, 0.46);
  color: #ff9ca4;
}

.ai-task-center-body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  padding: 16px 20px 20px;
}

.ai-task-center-summary {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid rgba(89, 99, 126, 0.24);
  border-radius: 4px;
  background: #0b1119;
}

.ai-task-center-summary > div {
  display: grid;
  gap: 8px;
  padding: 13px 15px;
  border-right: 1px solid rgba(89, 99, 126, 0.2);
}

.ai-task-center-summary > div:last-child {
  border-right: 0;
}

.ai-task-center-summary span {
  color: #707a89;
  font-size: 9px;
}

.ai-task-center-summary strong {
  color: #eef1f6;
  font: 750 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ai-task-center-summary [data-state="active"] strong {
  color: #e7ba68;
}

.ai-task-center-summary [data-state="failed"] strong {
  color: #f17c84;
}

.ai-task-center-summary [data-state="completed"] strong {
  color: #65d3aa;
}

.ai-task-center-summary [data-state="quality"] strong {
  color: #ff9297;
}

.ai-task-center-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 10px;
}

.ai-task-center-modes,
.ai-task-center-filters {
  display: flex;
  gap: 6px;
}

.ai-task-center-filter-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ai-task-center-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 238px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(103, 113, 142, 0.34);
  border-radius: 4px;
  background: #0d141d;
}

.ai-task-center-search span {
  color: #777fff;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ai-task-center-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eef1f6;
  font-size: 10px;
}

.workflow-template-history-modal > section {
  width: min(760px, calc(100vw - 32px));
  height: min(680px, calc(100vh - 32px));
}

.workflow-template-history-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 16px;
  overflow: auto;
}

.workflow-template-history-list article {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(89, 99, 126, 0.3);
  border-radius: 4px;
  background: #0c131c;
}

.workflow-template-history-list article[data-current="true"] {
  border-color: rgba(90, 98, 255, 0.6);
  background: rgba(31, 35, 171, 0.13);
}

.workflow-template-history-list article > div:first-child,
.workflow-template-history-list dl,
.workflow-template-history-list dl > div {
  display: flex;
  align-items: center;
}

.workflow-template-history-list article > div:first-child {
  gap: 8px;
}

.workflow-template-history-list article b {
  color: #fff;
  font: 800 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.workflow-template-history-list article span,
.workflow-template-history-list article em,
.workflow-template-history-list dt {
  color: #788394;
  font-size: 9px;
  font-style: normal;
}

.workflow-template-history-list dl {
  gap: 18px;
  margin: 0;
}

.workflow-template-history-list dl > div {
  gap: 6px;
}

.workflow-template-history-list dd {
  margin: 0;
  color: #d9dee8;
  font-size: 10px;
}

.ai-task-center-list {
  min-height: 0;
  overflow: auto;
  border-top: 1px solid rgba(89, 99, 126, 0.22);
}

.quality-benchmark {
  min-height: 0;
  overflow: auto;
  border-top: 1px solid rgba(89, 99, 126, 0.22);
}

.quality-benchmark > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 2px 12px;
}

.quality-benchmark > header > div {
  display: grid;
  gap: 4px;
}

.quality-benchmark > header span,
.quality-benchmark-grid > section > header span,
.quality-benchmark-kpis span,
.quality-benchmark-target > span {
  color: #737d8d;
  font-size: 9px;
  font-weight: 800;
}

.quality-benchmark > header > div > span {
  color: #7478ff;
}

.quality-benchmark > header strong,
.quality-benchmark-grid > section > header strong {
  color: #eef1f6;
  font-size: 12px;
}

.quality-benchmark > header p {
  margin: 0;
  color: #788291;
  font-size: 9px;
}

.quality-benchmark-header-actions {
  display: flex !important;
  grid-template-columns: none !important;
  flex: 0 0 auto;
  gap: 7px !important;
}

.quality-regression-suite-modal,
.quality-regression-run-modal,
.quality-regression-mask-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
}

.quality-regression-suite-modal { z-index: 330; }
.quality-regression-run-modal { z-index: 340; }
.quality-regression-mask-modal { z-index: 350; }

.quality-regression-suite-backdrop,
.quality-regression-run-backdrop,
.quality-regression-mask-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.84);
  backdrop-filter: blur(8px);
}

.quality-regression-mask-modal > section {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid rgba(87, 94, 232, 0.62);
  border-radius: 6px;
  background: #080d14;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.64);
}

.quality-regression-mask-modal > section > header,
.quality-regression-mask-modal > section > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(91, 101, 127, 0.25);
}

.quality-regression-mask-modal > section > header > div { display: grid; gap: 3px; }
.quality-regression-mask-modal > section > header span { color: #797dff; font-size: 8px; font-weight: 900; }
.quality-regression-mask-modal > section > header h2 { margin: 0; color: #eef1f6; font-size: 17px; }
.quality-regression-mask-modal > section > header p { margin: 0; color: #7e8998; font-size: 9px; }
.quality-regression-mask-modal > section > header > button { width: 31px; height: 31px; padding: 0; font-size: 17px; }

.quality-regression-mask-body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(230px, 0.7fr);
  gap: 14px;
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

.quality-regression-mask-body > aside { display: grid; align-content: start; gap: 12px; }
.quality-regression-mask-body > aside label { display: grid; gap: 5px; color: #8d98a8; font-size: 9px; font-weight: 800; }
.quality-regression-mask-body > aside input,
.quality-regression-mask-body > aside textarea { width: 100%; padding: 9px; border: 1px solid rgba(91, 101, 127, 0.34); border-radius: 4px; background: #090f17; color: #edf0f5; font: inherit; line-height: 1.5; }
.quality-regression-mask-body > aside dl { display: grid; gap: 1px; margin: 0; background: rgba(91, 101, 127, 0.18); }
.quality-regression-mask-body > aside dl div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; padding: 8px; background: #0c131d; }
.quality-regression-mask-body > aside dt { color: #758091; font-size: 8px; }
.quality-regression-mask-body > aside dd { min-width: 0; margin: 0; overflow: hidden; color: #cfd5df; font: 700 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.quality-regression-mask-body > aside > p { margin: 0; color: #8d98a8; font-size: 9px; line-height: 1.55; }
.quality-regression-mask-body [data-quality-mask-error] { min-height: 18px; color: #ff9297; font-size: 9px; }
.quality-regression-mask-modal > section > footer { justify-content: flex-end; border-top: 1px solid rgba(91, 101, 127, 0.25); border-bottom: 0; }

.quality-regression-suite-modal > section {
  position: relative;
  width: min(1240px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid rgba(87, 94, 232, 0.52);
  border-radius: 6px;
  background: #080d14;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.58);
}

.quality-regression-suite-content {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.quality-regression-suite-content > header,
.quality-regression-suite-content > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(91, 101, 127, 0.24);
}

.quality-regression-suite-content > footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(91, 101, 127, 0.24);
  border-bottom: 0;
  background: #0a1018;
}

.quality-regression-suite-content > header > div {
  display: grid;
  gap: 4px;
}

.quality-regression-suite-content > header span,
.quality-regression-run-modal header span {
  color: #797dff;
  font-size: 9px;
  font-weight: 900;
}

.quality-regression-suite-content h2,
.quality-regression-run-modal h3 {
  margin: 0;
  color: #f2f4f8;
  font-size: 18px;
}

.quality-regression-suite-content > header p,
.quality-regression-run-modal header p {
  margin: 0;
  color: #7f8998;
  font-size: 10px;
}

.quality-regression-suite-content > header > button {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
}

.quality-suite-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid rgba(91, 101, 127, 0.24);
  background: rgba(91, 101, 127, 0.18);
}

.quality-suite-summary > div {
  display: grid;
  gap: 4px;
  padding: 11px 16px;
  background: #0c131d;
}

.quality-suite-summary span,
.quality-suite-summary p {
  color: #737f8f;
  font-size: 8px;
}

.quality-suite-summary strong {
  color: #e8ecf2;
  font: 750 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.quality-suite-summary[data-status="ready"] strong { color: #70e7b8; }
.quality-suite-summary[data-status="blocked"] strong { color: #ff9297; }

.quality-suite-summary > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 16px;
  background: #090f17;
  line-height: 1.45;
}

.quality-suite-blockers {
  display: grid;
  gap: 8px;
  margin: 10px 12px 0;
  padding: 11px 12px;
  border: 1px solid rgba(215, 94, 106, 0.45);
  border-left: 3px solid #d75e6a;
  border-radius: 4px;
  background: rgba(103, 30, 43, 0.14);
}

.quality-suite-blockers.is-ready {
  border-color: rgba(79, 201, 154, 0.4);
  border-left-color: #4fc99a;
  background: rgba(28, 108, 79, 0.12);
}

.quality-suite-blockers > header,
.quality-suite-blockers > header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quality-suite-blockers > header > div { justify-content: flex-start; }
.quality-suite-blockers > header span { color: #ff9297; font-size: 8px; font-weight: 900; }
.quality-suite-blockers.is-ready > header span { color: #70e7b8; }
.quality-suite-blockers > header strong { color: #eef1f6; font-size: 11px; }
.quality-suite-blockers > header em { color: #a98d91; font-size: 8px; font-style: normal; }
.quality-suite-blockers.is-ready > header em { color: #89b9a6; }

.quality-suite-blockers > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.quality-suite-blockers > div > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 7px 9px;
  border-color: rgba(215, 94, 106, 0.3);
  background: #0b111a;
  text-align: left;
}

.quality-suite-blockers > div > button span { display: grid; gap: 2px; min-width: 0; }
.quality-suite-blockers > div > button b { overflow: hidden; color: #e7d6d9; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.quality-suite-blockers > div > button em { color: #8f7b7f; font-size: 7px; font-style: normal; }
.quality-suite-blockers > div > button strong { flex: 0 0 auto; color: #ff9297; font-size: 8px; }

.quality-suite-migration {
  display: grid;
  gap: 4px;
  margin: 10px 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 182, 72, 0.42);
  background: rgba(96, 59, 8, 0.24);
  color: #f4c36b;
}

.quality-suite-migration strong {
  font-size: 11px;
}

.quality-suite-migration p {
  margin: 0;
  color: #c9ae7c;
  font-size: 9px;
  line-height: 1.5;
}

.quality-suite-source-recovery {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1.58fr);
  align-items: center;
  gap: 12px;
  margin: 10px 12px 0;
  padding: 12px;
  border: 1px solid rgba(215, 94, 106, 0.45);
  border-left: 3px solid #d75e6a;
  border-radius: 4px;
  background: rgba(103, 30, 43, 0.14);
}

.quality-suite-source-recovery[data-status="available"] {
  border-color: rgba(213, 169, 77, 0.42);
  border-left-color: #d5a94d;
  background: rgba(96, 59, 8, 0.18);
}

.quality-suite-source-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.quality-suite-source-recovery span {
  color: #d5a94d;
  font-size: 8px;
  font-weight: 900;
}

.quality-suite-source-recovery strong { color: #eef1f6; font-size: 11px; }

.quality-suite-source-recovery p {
  margin: 0;
  color: #9ca5b2;
  font-size: 9px;
  line-height: 1.45;
}

.quality-suite-source-gallery {
  display: flex;
  gap: 7px;
  min-width: 0;
  padding-bottom: 2px;
  overflow-x: auto;
}

.quality-suite-source-gallery label {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(86px, 1fr);
  align-items: center;
  gap: 7px;
  flex: 0 0 164px;
  min-width: 0;
  padding: 5px;
  border: 1px solid rgba(91, 101, 127, 0.35);
  border-radius: 4px;
  background: #0a1018;
  cursor: pointer;
}

.quality-suite-source-gallery label:has(input:checked) {
  border-color: #6e75ff;
  background: rgba(31, 35, 171, 0.2);
  box-shadow: inset 0 0 0 1px rgba(110, 117, 255, 0.28);
}

.quality-suite-source-gallery input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quality-suite-source-gallery img {
  width: 48px;
  height: 52px;
  border-radius: 3px;
  background: #05080d;
  object-fit: cover;
}

.quality-suite-source-gallery label > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.quality-suite-source-gallery label strong {
  overflow: hidden;
  color: #dce1e9;
  font-size: 8px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-suite-source-gallery label em {
  color: #7f8998;
  font-size: 7px;
  font-style: normal;
}

.quality-suite-source-recovery > button { min-height: 34px; }

.quality-suite-source-controls,
.quality-suite-source-upload {
  display: grid;
  gap: 6px;
}

.quality-suite-source-controls {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.quality-suite-source-upload {
  grid-template-columns: minmax(180px, 0.75fr) minmax(260px, 1.25fr) auto;
  align-items: center;
  padding: 7px;
  border: 1px solid rgba(91, 101, 127, 0.35);
  border-radius: 4px;
  background: #0a1018;
}

.quality-suite-source-upload label {
  display: grid;
  gap: 4px;
  color: #aeb6c2;
  font-size: 8px;
  font-weight: 800;
}

.quality-suite-source-upload label:has(input[type="checkbox"]) {
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
}

.quality-suite-source-upload input[type="file"] {
  min-width: 0;
  color: #8993a2;
  font-size: 8px;
}

.quality-suite-source-upload button {
  min-height: 30px;
  border-color: rgba(110, 117, 255, 0.48);
  background: #1f23ab;
  color: #fff;
  font-size: 8px;
}

.quality-suite-source-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 5px;
}

.quality-suite-source-actions button { min-height: 30px; font-size: 8px; white-space: nowrap; }

.quality-suite-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 1 auto;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  overflow: auto;
}

.quality-suite-groups {
  display: grid;
  align-content: start;
  flex: 1 1 auto;
  gap: 8px;
  min-height: 0;
  padding: 0 12px 12px;
  overflow: auto;
}

.quality-suite-group {
  border: 1px solid rgba(91, 101, 127, 0.3);
  border-radius: 5px;
  background: #0a1018;
}

.quality-suite-group > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}

.quality-suite-group > summary::-webkit-details-marker { display: none; }
.quality-suite-group > summary > span { display: grid; gap: 3px; min-width: 0; }
.quality-suite-group > summary b { color: #edf0f5; font-size: 11px; }
.quality-suite-group > summary em { overflow: hidden; color: #778292; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.quality-suite-group > summary strong { color: #8f97ff; font: 750 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.quality-suite-group > summary small { color: #8f99a8; font: 700 8px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.quality-suite-group > summary i { min-width: 62px; color: #70e7b8; font-size: 8px; font-style: normal; text-align: right; }
.quality-suite-group > summary i[data-status="blocked"] { color: #ff9297; }
.quality-suite-group > .quality-suite-cases { border-top: 1px solid rgba(91, 101, 127, 0.24); }

.quality-suite-evidence {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(91, 101, 127, 0.24);
  background: rgba(5, 9, 14, 0.5);
}

.quality-suite-evidence > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quality-suite-evidence > header span { color: #797dff; font-size: 8px; font-weight: 900; }
.quality-suite-evidence > header strong { color: #9ca6b4; font-size: 8px; }
.quality-suite-evidence > p { margin: 0; color: #768191; font-size: 8px; }

.quality-suite-evidence > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.quality-suite-evidence article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(91, 101, 127, 0.25);
  border-left: 2px solid #5962ea;
  border-radius: 4px;
  background: #0b1119;
}

.quality-suite-evidence article[data-status="pass"] { border-left-color: #4fc99a; }
.quality-suite-evidence article[data-status="blocked"] { border-left-color: #d75e6a; }
.quality-suite-evidence-preview { width: 58px; height: 62px; padding: 0; overflow: hidden; border: 0; }
.quality-suite-evidence-preview img { width: 100%; height: 100%; object-fit: cover; }
.quality-suite-evidence article > div { display: grid; gap: 2px; min-width: 0; }
.quality-suite-evidence article > div span { color: #8e98a7; font-size: 7px; }
.quality-suite-evidence article > div strong { overflow: hidden; color: #e0e5ec; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.quality-suite-evidence article > div em { overflow: hidden; color: #747f8f; font-size: 7px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.quality-suite-evidence article > div p { margin: 1px 0 0; color: #909aa8; font-size: 7px; line-height: 1.4; }
.quality-suite-evidence article > footer { display: grid; gap: 4px; }
.quality-suite-evidence article > footer button { min-height: 25px; padding: 0 7px; font-size: 7px; white-space: nowrap; }

.quality-suite-matrix {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 12px;
  padding: 10px 0;
}

.quality-suite-matrix button {
  min-height: 31px;
  font-size: 9px;
}

.quality-suite-matrix button b {
  color: #8f97ff;
  font-size: 9px;
}

.quality-suite-case {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(91, 101, 127, 0.28);
  border-top: 2px solid #5158e7;
  border-radius: 5px;
  background: #0c131d;
}

.quality-suite-case[data-status="blocked"] { border-top-color: #d75e6a; }
.quality-suite-case[data-status="queued"],
.quality-suite-case[data-status="running"] { border-top-color: #d5a94d; }
.quality-suite-case.is-focused { box-shadow: 0 0 0 2px rgba(255, 146, 151, 0.72), 0 0 28px rgba(215, 94, 106, 0.18); }

.quality-suite-case > header,
.quality-suite-case > footer {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.quality-suite-case > header > div {
  display: grid;
  gap: 3px;
}

.quality-suite-case > header span {
  color: #777dff;
  font-size: 8px;
  font-weight: 900;
}

.quality-suite-case > header strong {
  color: #edf0f5;
  font-size: 12px;
}

.quality-suite-case > header p,
.quality-suite-case > footer p {
  margin: 0;
  color: #778292;
  font-size: 8px;
  line-height: 1.45;
}

.quality-suite-case > header b {
  flex: 0 0 auto;
  color: #70e7b8;
  font-size: 9px;
}

.quality-suite-case[data-status="blocked"] > header b { color: #ff9297; }

.quality-suite-case-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quality-suite-case-fields label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.quality-suite-case-fields label.wide { grid-column: 1 / -1; }

.quality-suite-case-fields label > span,
.quality-suite-mask > span {
  color: #788493;
  font-size: 8px;
  font-weight: 800;
}

.quality-suite-case-fields input,
.quality-suite-case-fields select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(91, 101, 127, 0.36);
  border-radius: 4px;
  background: #080e16;
  color: #e4e8ef;
  font-size: 9px;
}

.quality-suite-model-upload,
.quality-suite-existing-model,
.quality-suite-fabric-upload,
.quality-suite-fabric-extract {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(81, 88, 231, 0.32);
  border-radius: 4px;
  background: rgba(31, 35, 171, 0.08);
}

.quality-suite-model-upload > header,
.quality-suite-model-upload > header > div,
.quality-suite-existing-model > header,
.quality-suite-existing-model > header > div,
.quality-suite-fabric-upload > header,
.quality-suite-fabric-upload > header > div,
.quality-suite-fabric-extract > header,
.quality-suite-fabric-extract > header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quality-suite-model-upload > header > div,
.quality-suite-existing-model > header > div,
.quality-suite-fabric-upload > header > div,
.quality-suite-fabric-extract > header > div { justify-content: flex-start; }
.quality-suite-model-upload > header span,
.quality-suite-existing-model > header span,
.quality-suite-fabric-upload > header span,
.quality-suite-fabric-extract > header span { color: #7f89ff; font-size: 8px; font-weight: 900; }
.quality-suite-model-upload > header strong,
.quality-suite-existing-model > header strong,
.quality-suite-fabric-upload > header strong,
.quality-suite-fabric-extract > header strong { color: #dce1ea; font-size: 9px; }
.quality-suite-model-upload > header em,
.quality-suite-existing-model > header em,
.quality-suite-fabric-upload > header em,
.quality-suite-fabric-extract > header em { color: #70e7b8; font-size: 8px; font-style: normal; }

.quality-suite-model-upload > div,
.quality-suite-existing-model > div,
.quality-suite-fabric-upload > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.quality-suite-model-upload > div .wide,
.quality-suite-fabric-upload > div .wide { grid-column: 1 / -1; }

.quality-suite-existing-model-gallery {
  display: flex !important;
  grid-column: 1 / -1;
  gap: 6px !important;
  min-width: 0;
  padding-bottom: 2px;
  overflow-x: auto;
}

.quality-suite-existing-model-gallery label {
  position: relative;
  display: grid;
  flex: 0 0 88px;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(91, 101, 127, 0.32);
  border-radius: 4px;
  background: #090f17;
  cursor: pointer;
}

.quality-suite-existing-model-gallery label:has(input:checked) { border-color: #6e75ff; background: rgba(31, 35, 171, 0.18); }
.quality-suite-existing-model-gallery input { position: absolute; opacity: 0; pointer-events: none; }
.quality-suite-existing-model-gallery img { width: 100%; height: 66px; border-radius: 3px; background: #05080d; object-fit: cover; }
.quality-suite-existing-model-gallery span { overflow: hidden; color: #aeb7c5; font-size: 7px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.quality-suite-existing-model-empty {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(215, 94, 106, 0.28);
  border-radius: 4px;
  background: rgba(120, 32, 45, 0.1);
  color: #c3a8ac;
  font-size: 8px;
  line-height: 1.55;
}

.quality-suite-model-rights {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 7px !important;
  color: #9ca6b4;
  font-size: 8px;
  line-height: 1.45;
}

.quality-suite-model-rights input { width: auto; min-height: 0; margin: 1px 0 0; }
.quality-suite-model-upload > button,
.quality-suite-existing-model > button,
.quality-suite-fabric-upload > button,
.quality-suite-fabric-extract > button { justify-self: end; min-height: 29px; }

.quality-suite-fabric-extract > label { display: grid; gap: 5px; }

.quality-suite-mask {
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  border: 1px solid rgba(215, 94, 106, 0.35);
  border-radius: 4px;
  background: rgba(120, 32, 45, 0.12);
}

.quality-suite-mask[data-status="ready"] {
  border-color: rgba(79, 201, 154, 0.35);
  background: rgba(28, 108, 79, 0.12);
}

.quality-suite-mask strong { color: #ff9297; font-size: 9px; }
.quality-suite-mask[data-status="ready"] strong { color: #70e7b8; }
.quality-suite-mask em { color: #778292; font-size: 8px; font-style: normal; }

.quality-suite-fixture {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid rgba(81, 88, 231, 0.22);
  border-radius: 4px;
  background: rgba(31, 35, 171, 0.08);
}

.quality-suite-fixture span {
  max-width: 100%;
  overflow: hidden;
  color: #8f99a8;
  font: 700 7px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-suite-thresholds {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.quality-suite-thresholds span {
  padding: 4px 6px;
  border: 1px solid rgba(91, 101, 127, 0.26);
  border-radius: 3px;
  color: #9ba4b2;
  font-size: 7px;
}

.quality-suite-case > footer {
  align-items: center;
  padding-top: 3px;
}

.quality-suite-case > footer button { flex: 0 0 auto; min-height: 28px; font-size: 8px; }
.quality-regression-suite-content > footer > p { flex: 1 1 auto; margin: 0; color: #ff9297; font-size: 9px; }
.quality-regression-suite-content button.danger,
.quality-regression-run-modal button.danger { border-color: rgba(215, 94, 106, 0.55); background: #7e2834; color: #fff; }

.quality-regression-run-modal > section {
  position: relative;
  width: min(460px, 92vw);
  padding: 18px;
  border: 1px solid rgba(215, 94, 106, 0.55);
  border-radius: 6px;
  background: #090f17;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.62);
}

.quality-regression-run-modal header { display: grid; gap: 5px; }
.quality-regression-run-modal > section > div { display: flex; align-items: end; justify-content: space-between; margin: 16px 0 10px; padding: 12px; background: #0e1621; }
.quality-regression-run-modal > section > div strong { color: #ff9297; font: 750 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.quality-regression-run-modal > section > div span { color: #7f8998; font-size: 9px; }
.quality-regression-run-modal ul { display: grid; gap: 1px; margin: 0 0 12px; padding: 0; list-style: none; background: rgba(91, 101, 127, 0.2); }
.quality-regression-run-modal li { display: flex; justify-content: space-between; padding: 8px 10px; background: #0c131d; color: #a8b0bd; font-size: 9px; }
.quality-regression-run-modal label { display: flex; align-items: start; gap: 8px; color: #c5cbd4; font-size: 9px; line-height: 1.45; }
.quality-regression-run-modal label input { margin: 1px 0 0; }
.quality-regression-run-modal [data-quality-run-error] { min-height: 18px; margin: 8px 0; color: #ff9297; font-size: 9px; }
.quality-regression-run-modal footer { display: flex; justify-content: flex-end; gap: 7px; }

@media (max-width: 820px) {
  .quality-regression-suite-modal { padding: 8px; }
  .quality-regression-suite-modal > section,
  .quality-regression-suite-content { max-height: 96vh; }
  .quality-suite-summary,
  .quality-suite-cases,
  .quality-suite-blockers > div,
  .quality-suite-evidence > div { grid-template-columns: minmax(0, 1fr); }
  .quality-suite-evidence article { grid-template-columns: 52px minmax(0, 1fr); }
  .quality-suite-evidence article > footer { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quality-suite-source-recovery { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .quality-suite-source-controls,
  .quality-suite-source-upload,
  .quality-suite-source-actions { grid-template-columns: minmax(0, 1fr); }
  .quality-regression-mask-body { grid-template-columns: minmax(0, 1fr); }
  .quality-suite-summary > p { grid-column: auto; }
  .quality-regression-suite-content > footer { flex-wrap: wrap; }
}

.quality-benchmark-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(89, 99, 126, 0.24);
  background: rgba(89, 99, 126, 0.2);
}

.quality-benchmark-kpis article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 13px;
  background: #0b1119;
}

.quality-benchmark-kpis strong {
  color: #eef1f6;
  font: 750 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.quality-benchmark-kpis em {
  overflow: hidden;
  color: #687383;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-benchmark-kpis .is-pass strong,
.quality-benchmark-case b.is-pass,
.quality-benchmark b.is-pass { color: #70e7b8; }
.quality-benchmark-kpis .is-warn strong,
.quality-benchmark-case b.is-warn { color: #f0c66d; }
.quality-benchmark-kpis .is-blocked strong,
.quality-benchmark-case b.is-blocked,
.quality-benchmark b.is-blocked { color: #ff9297; }

.quality-benchmark-target {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
}

.quality-benchmark-target > span { margin-right: 4px; }

.quality-benchmark-target button {
  min-width: 48px;
  min-height: 28px;
}

.quality-benchmark-target button[aria-pressed="true"] {
  border-color: #5158e7;
  background: #1f23ab;
  color: #fff;
}

.quality-fixed-suite {
  margin: 0 0 12px;
  border: 1px solid rgba(89, 99, 126, 0.24);
  background: #0b1119;
}

.quality-release-gate {
  margin: 0 0 12px;
  border: 1px solid rgba(215, 94, 106, 0.42);
  background: #0b1119;
}

.quality-release-gate[data-status="pass"] {
  border-color: rgba(79, 201, 154, 0.44);
}

.quality-release-gate > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.18);
}

.quality-release-gate > header > div {
  display: grid;
  gap: 3px;
}

.quality-release-gate > header span {
  color: #ff9297;
  font-size: 8px;
  font-weight: 900;
}

.quality-release-gate[data-status="pass"] > header span { color: #70e7b8; }

.quality-release-gate > header strong {
  color: #eef1f6;
  font-size: 12px;
}

.quality-release-gate > header p {
  margin: 0;
  color: #7d8796;
  font-size: 9px;
}

.quality-release-gate > header > b {
  color: #ff9297;
  font-size: 11px;
}

.quality-release-gate[data-status="pass"] > header > b { color: #70e7b8; }

.quality-release-gate > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(89, 99, 126, 0.18);
}

.quality-release-gate .quality-release-run {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(99, 102, 241, 0.32);
  background: rgba(31, 35, 171, 0.1);
}

.quality-release-gate .quality-release-run span,
.quality-release-gate .quality-release-run em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.quality-release-gate .quality-release-run strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-release-gate article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 11px 12px;
  border-top: 2px solid #5b6475;
  background: #0d141e;
}

.quality-release-gate article[data-status="pass"] { border-top-color: #4fc99a; }
.quality-release-gate article[data-status="warn"] { border-top-color: #d5a94d; }
.quality-release-gate article[data-status="blocked"] { border-top-color: #d75e6a; }

.quality-release-gate article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quality-release-gate article strong { color: #e9edf3; font-size: 10px; }
.quality-release-gate article span { color: #ff9297; font-size: 8px; font-weight: 800; }
.quality-release-gate article[data-status="pass"] span { color: #70e7b8; }
.quality-release-gate article[data-status="warn"] span { color: #f0c66d; }

.quality-release-gate article p,
.quality-release-gate article small {
  margin: 0;
  color: #7d8796;
  font-size: 8px;
  line-height: 1.45;
}

.quality-release-gate article button {
  justify-self: start;
  min-height: 26px;
  font-size: 8px;
}

.quality-fixed-suite > header {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.18);
}

.quality-fixed-suite > header span {
  display: block;
  margin-bottom: 3px;
  color: #7478ff;
  font-size: 8px;
  font-weight: 900;
}

.quality-fixed-suite > header strong {
  color: #eef1f6;
  font-size: 12px;
}

.quality-fixed-suite > header p {
  margin: 3px 0 0;
  color: #737d8d;
  font-size: 9px;
}

.quality-fixed-suite > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(89, 99, 126, 0.18);
}

.quality-fixed-suite article {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border-top: 2px solid #555f70;
  background: #0d141e;
}

.quality-fixed-suite article[data-status="pass"] { border-top-color: #4fc99a; }
.quality-fixed-suite article[data-status="warn"] { border-top-color: #d5a94d; }
.quality-fixed-suite article[data-status="blocked"] { border-top-color: #d75e6a; }
.quality-fixed-suite article[data-status="missing"],
.quality-fixed-suite article[data-status="waiting"] { border-top-color: #5b6475; }

.quality-fixed-suite article > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.quality-fixed-suite article > header > div {
  display: grid;
  gap: 3px;
}

.quality-fixed-suite article > header strong {
  color: #e9edf3;
  font-size: 11px;
}

.quality-fixed-suite article > header span,
.quality-fixed-suite article > header b {
  color: #778292;
  font-size: 8px;
}

.quality-fixed-suite article[data-status="pass"] > header b { color: #70e7b8; }
.quality-fixed-suite article[data-status="warn"] > header b { color: #f0c66d; }
.quality-fixed-suite article[data-status="blocked"] > header b { color: #ff9297; }

.quality-fixed-suite dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
}

.quality-fixed-suite dl > div {
  display: grid;
  gap: 2px;
  padding: 5px;
  background: #111a25;
}

.quality-fixed-suite dt { color: #6e7989; font-size: 7px; }
.quality-fixed-suite dd { margin: 0; color: #cfd5df; font-size: 9px; }

.quality-fixed-suite article > p {
  margin: 0;
  overflow: hidden;
  color: #778292;
  font-size: 8px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-fixed-suite article > button {
  justify-self: start;
  min-height: 26px;
  font-size: 8px;
}

.quality-benchmark-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 12px;
  padding-bottom: 16px;
}

.quality-benchmark-grid > section {
  min-width: 0;
  border: 1px solid rgba(89, 99, 126, 0.24);
  background: #0b1119;
}

.quality-benchmark-grid > section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.18);
}

.quality-benchmark-grid article {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(100px, 0.8fr) 48px;
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.14);
}

.quality-benchmark-grid article:last-child { border-bottom: 0; }

.quality-benchmark-grid article > div:first-child {
  display: grid;
  gap: 4px;
}

.quality-benchmark-grid article strong { color: #dde2ea; font-size: 10px; }
.quality-benchmark-grid article span,
.quality-benchmark-grid article small { color: #6f7988; font-size: 8px; }
.quality-benchmark-grid article small { grid-column: 1 / -1; }

.quality-benchmark-bar {
  height: 4px;
  overflow: hidden;
  background: #1a2330;
}

.quality-benchmark-bar i {
  display: block;
  height: 100%;
  background: #5860ed;
}

.quality-benchmark-grid .quality-benchmark-case {
  grid-template-columns: minmax(120px, 0.8fr) 90px minmax(150px, 1.2fr) auto;
}

.quality-benchmark-case p {
  margin: 0;
  overflow: hidden;
  color: #778190;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-benchmark-case b { font-size: 9px; }

.quality-benchmark-case > div:last-child {
  display: flex;
  gap: 5px;
}

.quality-benchmark-case > div:last-child button {
  min-height: 28px;
  white-space: nowrap;
}

.quality-baseline-ineligible {
  align-self: center;
  max-width: 140px;
  color: #778190;
  font-size: 8px;
  line-height: 1.4;
}

@media (max-width: 1000px) {
  .quality-release-gate > div,
  .quality-fixed-suite > div { grid-template-columns: minmax(0, 1fr); }
}

.quality-benchmark-empty {
  margin: 0;
  padding: 28px 12px;
  color: #737d8d;
  font-size: 9px;
  text-align: center;
}

.ai-task-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 170px 190px;
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.18);
}

.ai-task-row:hover {
  background: rgba(20, 28, 40, 0.62);
}

.ai-task-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8c96a5;
  font-size: 9px;
}

.ai-task-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #717b8a;
}

.ai-task-row[data-status="queued"] .ai-task-status i,
.ai-task-row[data-status="running"] .ai-task-status i,
.ai-task-row[data-status="uncertain"] .ai-task-status i {
  background: #e3ae55;
  box-shadow: 0 0 0 4px rgba(227, 174, 85, 0.12);
}

.ai-task-row[data-status="succeeded"] .ai-task-status i {
  background: #55c99d;
}

.ai-task-row[data-status="failed"] .ai-task-status i,
.ai-task-row[data-status="cancelled"] .ai-task-status i,
.ai-task-row[data-status="partial"] .ai-task-status i,
.ai-task-row[data-status="missing"] .ai-task-status i {
  background: #e55b67;
}

.ai-batch-row {
  background: rgba(39, 45, 182, 0.07);
}

.ai-workflow-template-row {
  background: rgba(31, 35, 171, 0.09);
}

.ai-workflow-template-row .ai-task-status i,
.ai-task-row[data-status="active"] .ai-task-status i,
.ai-task-row[data-status="ready"] .ai-task-status i {
  background: #6f75ff;
  box-shadow: 0 0 0 4px rgba(111, 117, 255, 0.12);
}

.ai-workflow-tags {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.ai-workflow-tags span {
  padding: 3px 6px;
  border: 1px solid rgba(105, 112, 255, 0.3);
  border-radius: 3px;
  color: #aeb3ff;
  font-size: 8px;
}

.ai-task-main {
  min-width: 0;
}

.ai-task-main > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.ai-task-main strong {
  color: #e8ebf1;
  font-size: 12px;
}

.ai-task-main code {
  overflow: hidden;
  color: #596373;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-task-main p {
  margin: 7px 0 9px;
  overflow: hidden;
  color: #778190;
  font-size: 9px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-task-quality {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(89, 99, 126, 0.34);
  border-radius: 3px;
  color: #8e98a7;
  font-size: 8px;
  font-weight: 800;
}

.ai-task-quality.is-pass { border-color: rgba(62, 204, 151, 0.42); color: #70e7b8; }
.ai-task-quality.is-warn { border-color: rgba(229, 176, 72, 0.5); color: #f0c66d; }
.ai-task-quality.is-blocked { border-color: rgba(240, 100, 105, 0.55); color: #ff9297; }

.ai-task-row[data-quality="blocked"] {
  background: rgba(151, 37, 45, 0.08);
}

.ai-task-progress {
  height: 3px;
  overflow: hidden;
  background: #1a2330;
}

.ai-task-progress span {
  display: block;
  height: 100%;
  background: #545cff;
}

.ai-task-meta {
  display: grid;
  gap: 5px;
  color: #707a89;
  font-size: 9px;
}

.ai-task-meta span:first-child {
  overflow: hidden;
  color: #9ca5b2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-task-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-task-center-loading,
.ai-task-center-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 260px;
  color: #7e8795;
  text-align: center;
}

.ai-task-center-loading strong,
.ai-task-center-empty strong {
  color: #e0e4eb;
  font-size: 13px;
}

.ai-task-center-loading span,
.ai-task-center-empty span {
  font-size: 10px;
}

.ai-batch-modal {
  position: fixed;
  inset: 0;
  z-index: 205;
  display: grid;
  place-items: center;
  padding: 24px;
}

.ai-batch-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.82);
  backdrop-filter: blur(8px);
}

.ai-batch-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1120px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(98, 107, 147, 0.48);
  border-radius: 6px;
  background: #080d14;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7);
}

.ai-batch-dialog > header,
.ai-batch-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.26);
  background: #0b1119;
}

.ai-batch-dialog > footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(89, 99, 126, 0.26);
  border-bottom: 0;
}

.ai-batch-dialog > header > div:first-child,
.ai-batch-dialog > footer > div:first-child {
  display: grid;
  gap: 5px;
  margin-right: auto;
}

.ai-batch-dialog > header span,
.ai-batch-assets header span {
  color: #777fff;
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ai-batch-dialog > header h2 {
  margin: 0;
  color: #f2f5f9;
  font-size: 20px;
}

.ai-batch-dialog > header p,
.ai-batch-dialog > footer span,
.ai-batch-dialog > footer p {
  margin: 0;
  color: #778190;
  font-size: 9px;
}

.ai-batch-dialog > footer p {
  max-width: 330px;
  color: #f17c84;
}

.ai-batch-confirmation {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 190px;
  color: #adb5c2;
  font-size: 9px;
  cursor: pointer;
}

.ai-batch-confirmation input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #4249dd;
}

.ai-batch-confirmation:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.48;
}

.ai-batch-dialog button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(103, 113, 142, 0.36);
  border-radius: 4px;
  background: #131a24;
  color: #d3d8e1;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.ai-batch-dialog button.primary {
  border-color: #4249dd;
  background: #292fbd;
  color: #fff;
}

.ai-batch-dialog button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.ai-batch-body {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  min-height: 0;
}

.ai-batch-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  padding: 18px 20px;
  overflow: auto;
  border-right: 1px solid rgba(89, 99, 126, 0.22);
}

.ai-batch-settings label,
.ai-batch-operation-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ai-batch-settings .wide,
.ai-batch-operation-fields.wide {
  grid-column: 1 / -1;
}

.ai-batch-operation-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ai-batch-settings label > span,
.ai-batch-operation-fields label > span {
  color: #7e8898;
  font-size: 9px;
  font-weight: 700;
}

.ai-batch-settings input,
.ai-batch-settings select,
.ai-batch-settings textarea,
.ai-batch-operation-fields input,
.ai-batch-operation-fields select,
.ai-batch-operation-fields textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(103, 113, 142, 0.36);
  border-radius: 4px;
  outline: 0;
  background: #101720;
  color: #edf0f5;
  font: inherit;
  resize: vertical;
}

.ai-batch-settings input:focus,
.ai-batch-settings select:focus,
.ai-batch-settings textarea:focus {
  border-color: #555cff;
}

.ai-batch-assets {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 18px 20px;
}

.ai-batch-assets > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding-bottom: 12px;
}

.ai-batch-assets > header > div {
  display: grid;
  gap: 5px;
}

.ai-batch-assets > header strong {
  color: #e7ebf1;
  font-size: 12px;
}

.ai-batch-assets > header em {
  color: #7d8795;
  font-size: 9px;
  font-style: normal;
}

.ai-batch-assets > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  align-content: start;
  min-height: 0;
  overflow: auto;
}

.ai-batch-assets > div > label {
  position: relative;
  display: grid;
  grid-template-rows: 116px auto auto;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(89, 99, 126, 0.28);
  border-radius: 4px;
  background: #0d141e;
  cursor: pointer;
}

.ai-batch-assets > div > label:has(input:checked) {
  border-color: #555cff;
  box-shadow: inset 0 0 0 1px rgba(85, 92, 255, 0.38);
}

.ai-batch-assets input[type="checkbox"] {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 1;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: #4249dd;
}

.ai-batch-assets img {
  width: 100%;
  height: 116px;
  object-fit: cover;
  background: #111923;
}

.ai-batch-assets strong,
.ai-batch-assets span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-batch-assets strong {
  color: #dfe3ea;
  font-size: 9px;
}

.ai-batch-assets span {
  color: #6f7a8a;
  font-size: 8px;
}

.ai-batch-assets > p {
  display: grid;
  place-items: center;
  margin: 0;
  color: #7c8695;
  font-size: 10px;
  text-align: center;
}

.project-asset-center-modal {
  position: fixed;
  inset: 0;
  z-index: 185;
  display: grid;
  place-items: center;
  padding: 24px;
}

.project-asset-center-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.8);
  backdrop-filter: blur(8px);
}

.project-asset-center-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1320px, calc(100vw - 48px));
  height: min(860px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(86, 96, 123, 0.42);
  border-radius: 6px;
  background: #080d14;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}

.project-asset-center-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.28);
  background: #0b1119;
}

.project-asset-center-panel > header > div:first-child {
  display: grid;
  gap: 5px;
}

.project-asset-center-panel > header span {
  color: #777fff;
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.project-asset-center-panel > header h2 {
  margin: 0;
  color: #f4f6fa;
  font-size: 20px;
}

.project-asset-center-panel > header p {
  margin: 0;
  color: #707a89;
  font-size: 10px;
}

.project-asset-center-panel > header > div:last-child,
.project-asset-card > footer {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.project-asset-center-panel button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(103, 113, 142, 0.34);
  border-radius: 4px;
  background: #131a24;
  color: #ccd2dc;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.project-asset-center-panel button:hover {
  border-color: rgba(110, 118, 255, 0.62);
  color: #fff;
}

.project-asset-center-panel button.active,
.project-asset-center-panel button.primary {
  border-color: #4249dd;
  background: #272db6;
  color: #fff;
}

.project-asset-center-panel button.danger {
  border-color: rgba(229, 83, 94, 0.46);
  color: #ff9ca4;
}

.project-asset-center-body {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
  padding: 16px 20px 20px;
}

.project-asset-center-body:has(.project-asset-batchbar) {
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
}

.project-asset-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(89, 99, 126, 0.24);
  border-radius: 4px;
  background: #0b1119;
}

.project-asset-summary > div {
  display: grid;
  gap: 8px;
  padding: 13px 15px;
  border-right: 1px solid rgba(89, 99, 126, 0.2);
}

.project-asset-summary > div:last-child {
  border-right: 0;
}

.project-asset-summary span {
  color: #707a89;
  font-size: 9px;
}

.project-asset-summary strong {
  color: #eef1f6;
  font: 750 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.project-asset-summary [data-quality="blocked"] strong {
  color: #ff9297;
}

.project-asset-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 12px;
}

.project-asset-batchbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(87, 96, 255, 0.42);
  border-radius: 4px;
  background: #101626;
}

.project-asset-batchbar > div,
.project-asset-batch-actions,
.project-asset-batch-actions label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.project-asset-batchbar strong {
  margin-right: 3px;
  color: #edf0f7;
  font-size: 10px;
}

.project-asset-batch-actions {
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.project-asset-batch-actions label {
  min-height: 30px;
  padding-left: 9px;
  border: 1px solid rgba(103, 113, 142, 0.34);
  border-radius: 4px;
  background: #0b111a;
}

.project-asset-batch-actions label > span {
  color: #717c8b;
  font-size: 8px;
  font-weight: 750;
}

.project-asset-batch-actions input,
.project-asset-batch-actions select {
  min-height: 28px;
  border: 0;
  border-left: 1px solid rgba(103, 113, 142, 0.24);
  outline: 0;
  background: #111925;
  color: #dce1e9;
  font-size: 9px;
}

.project-asset-batch-actions input {
  width: 170px;
  padding: 0 9px;
}

.project-asset-batch-actions select {
  padding: 0 8px;
}

.project-asset-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-asset-filters button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.project-asset-filters em {
  color: #7d8796;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
}

.project-asset-folderbar {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(103, 113, 142, 0.28);
  border-radius: 4px;
  background: #0b111a;
}

.project-asset-folderbar > header,
.project-asset-folderbar > header > div,
.project-asset-folderbar > div,
.project-asset-folder {
  display: flex;
  align-items: center;
}

.project-asset-folderbar > header {
  justify-content: space-between;
  gap: 8px;
}

.project-asset-folderbar > header > div {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.project-asset-folderbar > header span {
  color: #657080;
  font: 700 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.project-asset-folderbar > header strong {
  color: #e5e9f1;
  font-size: 10px;
}

.project-asset-folderbar > div {
  flex-wrap: wrap;
  gap: 6px;
}

.project-asset-folderbar > div > p {
  margin: 0;
  color: #657080;
  font-size: 9px;
}

.project-asset-folder {
  margin-left: calc(var(--folder-depth, 0) * 10px);
  border: 1px solid rgba(103, 113, 142, 0.3);
  border-radius: 4px;
  overflow: hidden;
  background: #101720;
}

.project-asset-folder button {
  border: 0;
  border-right: 1px solid rgba(103, 113, 142, 0.24);
  border-radius: 0;
}

.project-asset-folder button:first-child {
  min-width: 108px;
  justify-content: space-between;
}

.project-asset-folder button:last-child {
  border-right: 0;
}

.project-asset-folder button.active {
  background: #1f23ab;
  color: #fff;
}

.project-asset-folder em {
  color: #8993a2;
  font-style: normal;
}

.project-asset-folder-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: grid;
  place-items: center;
  padding: 24px;
}

.project-asset-folder-editor-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(2, 5, 10, 0.76);
  backdrop-filter: blur(5px);
}

.project-asset-folder-editor-modal > section {
  position: relative;
  width: min(460px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(102, 110, 255, 0.58);
  border-radius: 6px;
  background: #0b111a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58);
}

.project-asset-folder-editor-modal header,
.project-asset-folder-editor-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(103, 113, 142, 0.28);
}

.project-asset-folder-editor-modal header > div {
  display: grid;
  gap: 4px;
}

.project-asset-folder-editor-modal header span {
  color: #7d83ff;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.project-asset-folder-editor-modal h2 {
  margin: 0;
  color: #f0f3f8;
  font-size: 15px;
  letter-spacing: 0;
}

.project-asset-folder-editor-modal footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(103, 113, 142, 0.28);
  border-bottom: 0;
}

.project-asset-folder-editor-modal button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(103, 113, 142, 0.42);
  border-radius: 4px;
  background: #151d28;
  color: #e7eaf0;
  font-size: 10px;
  cursor: pointer;
}

.project-asset-folder-editor-modal button.primary {
  border-color: #3d43db;
  background: #1f23ab;
  color: #fff;
}

.project-asset-folder-editor-modal button.danger {
  border-color: rgba(255, 91, 112, 0.58);
  background: rgba(126, 31, 48, 0.46);
  color: #ffbdc5;
}

.project-asset-folder-editor-modal button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.project-asset-folder-editor-body {
  display: grid;
  gap: 14px;
  padding: 18px 16px;
}

.project-asset-folder-editor-body label {
  display: grid;
  gap: 7px;
  color: #aab1be;
  font-size: 10px;
}

.project-asset-folder-editor-body input,
.project-asset-folder-editor-body select {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(103, 113, 142, 0.44);
  border-radius: 4px;
  outline: 0;
  background: #101720;
  color: #f1f3f7;
  font-size: 12px;
}

.project-asset-folder-editor-body input:focus,
.project-asset-folder-editor-body select:focus {
  border-color: #676eff;
  box-shadow: 0 0 0 2px rgba(103, 110, 255, 0.14);
}

.project-asset-folder-editor-body > p {
  margin: 0;
  color: #778292;
  font-size: 10px;
  line-height: 1.6;
}

.project-asset-folder-delete-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(103, 113, 142, 0.3);
  border-radius: 4px;
  background: #101720;
}

.project-asset-folder-delete-summary strong {
  color: #f1f3f7;
  font-size: 12px;
}

.project-asset-folder-delete-summary span {
  color: #8791a0;
  font-size: 9px;
}

.project-asset-folder-editor-warning,
.project-asset-folder-editor-error {
  padding: 9px 10px;
  border: 1px solid rgba(255, 91, 112, 0.34);
  border-radius: 4px;
  background: rgba(114, 27, 42, 0.22);
  color: #ff9cab !important;
}

.project-asset-search {
  display: flex;
  align-items: center;
  min-width: 300px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(103, 113, 142, 0.34);
  border-radius: 4px;
  background: #101720;
}

.project-asset-search span {
  margin-right: 9px;
  color: #697484;
  font-size: 9px;
}

.project-asset-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #edf0f5;
  font-size: 10px;
}

.project-asset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
  padding: 2px 3px 16px 0;
  overflow: auto;
}

.project-asset-card {
  display: grid;
  grid-template-rows: 190px minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(89, 99, 126, 0.26);
  border-radius: 5px;
  background: #0d141d;
}

.project-asset-card:hover {
  border-color: rgba(102, 111, 255, 0.58);
  background: #101823;
}

.project-asset-card.is-selected {
  border-color: #666eff;
  box-shadow: 0 0 0 1px rgba(102, 110, 255, 0.5), 0 14px 34px rgba(18, 22, 86, 0.28);
}

.project-asset-card.is-trashed {
  border-style: dashed;
  opacity: 0.72;
}

.project-asset-card.is-trashed:hover {
  opacity: 0.94;
}

.project-asset-preview {
  position: relative;
  overflow: hidden;
  background: #070b11;
}

.project-asset-select {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: grid;
  width: 24px;
  min-height: 24px !important;
  padding: 0 !important;
  place-items: center;
  border-color: rgba(154, 164, 182, 0.56) !important;
  border-radius: 3px !important;
  background: rgba(7, 11, 17, 0.88) !important;
  color: #fff !important;
  font-size: 12px !important;
}

.project-asset-select.is-selected {
  border-color: #747bff !important;
  background: #343bd0 !important;
}

.project-asset-favorite {
  position: absolute;
  right: 10px;
  bottom: 11px;
  color: #f5cf67;
  font-size: 14px;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.project-asset-preview:has(.project-asset-select) .project-asset-favorite {
  right: 42px;
}

.project-asset-preview img,
.project-asset-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-asset-preview > span {
  display: grid;
  height: 100%;
  place-items: center;
  color: #4f5a6a;
  font: 800 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.project-asset-preview b,
.project-asset-preview em {
  position: absolute;
  top: 9px;
  padding: 5px 7px;
  border-radius: 3px;
  background: rgba(5, 9, 15, 0.86);
  color: #bfc7d2;
  font-size: 8px;
  font-style: normal;
}

.project-asset-preview b {
  left: 9px;
}

.project-asset-preview em {
  right: 9px;
  color: #f2b86a;
}

.project-asset-info {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
}

.project-asset-info > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.project-asset-info > header strong {
  overflow: hidden;
  color: #edf0f5;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-asset-info > header span {
  flex: 0 0 auto;
  color: #8d96a4;
  font-size: 8px;
}

.project-asset-taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.project-asset-taxonomy span,
.project-asset-taxonomy em {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid rgba(100, 111, 141, 0.3);
  border-radius: 3px;
  background: #121a24;
  color: #9ea7b5;
  font-size: 8px;
  font-style: normal;
}

.project-asset-taxonomy span {
  border-color: rgba(100, 109, 255, 0.42);
  color: #aeb3ff;
}

@media (max-width: 1060px) {
  .project-asset-batchbar,
  .project-asset-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .project-asset-batch-actions {
    justify-content: flex-start;
  }

  .project-asset-search {
    width: 100%;
    min-width: 0;
  }

  .project-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.project-asset-card[data-approval="approved"] .project-asset-info > header span {
  color: #65d3aa;
}

.project-asset-card[data-approval="rejected"] .project-asset-info > header span {
  color: #f17c84;
}

.project-asset-info p {
  min-height: 28px;
  margin: 0;
  color: #747e8d;
  font-size: 9px;
  line-height: 1.55;
}

.project-asset-quality {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(89, 99, 126, 0.28);
  border-radius: 4px;
  background: rgba(6, 10, 16, 0.56);
}

.project-asset-quality span {
  color: #929baa;
  font-size: 8px;
  font-weight: 800;
}

.project-asset-quality p {
  min-height: 0;
  color: #8d97a6;
  font-size: 8px;
  line-height: 1.45;
}

.project-asset-quality.is-pass { border-color: rgba(62, 204, 151, 0.36); }
.project-asset-quality.is-pass span { color: #70e7b8; }
.project-asset-quality.is-warn { border-color: rgba(229, 176, 72, 0.46); }
.project-asset-quality.is-warn span { color: #f0c66d; }
.project-asset-quality.is-blocked { border-color: rgba(240, 100, 105, 0.52); background: rgba(151, 37, 45, 0.1); }
.project-asset-quality.is-blocked span { color: #ff9297; }

.project-asset-release {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 8px;
  border: 1px solid rgba(229, 176, 72, 0.38);
  border-radius: 4px;
  background: rgba(92, 62, 15, 0.12);
}

.project-asset-release span,
.project-asset-release strong {
  font-size: 8px;
  font-weight: 800;
}

.project-asset-release span { color: #a7afbb; }
.project-asset-release strong { color: #f0c66d; }
.project-asset-release p { grid-column: 1 / -1; min-height: 0; color: #9a8d70; font-size: 8px; line-height: 1.45; }
.project-asset-release[data-status="pass"] { border-color: rgba(62, 204, 151, 0.38); background: rgba(25, 91, 67, 0.12); }
.project-asset-release[data-status="pass"] strong { color: #70e7b8; }
.project-asset-release[data-status="pass"] p { color: #7cae99; }
.project-asset-release[data-status="no-results"] { border-color: rgba(112, 126, 151, 0.38); background: rgba(67, 78, 99, 0.1); }
.project-asset-release[data-status="no-results"] strong { color: #aab4c3; }
.project-asset-release[data-status="no-results"] p { color: #8792a3; }
.project-asset-release[data-status="asset-failed"],
.project-asset-release[data-status="pass-rate-blocked"] { border-color: rgba(240, 100, 105, 0.45); background: rgba(117, 27, 34, 0.12); }
.project-asset-release[data-status="asset-failed"] strong,
.project-asset-release[data-status="pass-rate-blocked"] strong { color: #ff9297; }

.project-asset-info dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.project-asset-info dl > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px;
  color: #6f7988;
  font-size: 8px;
}

.project-asset-info dt,
.project-asset-info dd {
  margin: 0;
}

.project-asset-info dd {
  overflow: hidden;
  color: #9aa3b0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-asset-card > footer {
  align-content: center;
  min-height: 50px;
  padding: 9px 12px;
  border-top: 1px solid rgba(89, 99, 126, 0.2);
}

.project-asset-card > footer button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 8px;
}

.project-asset-card > footer button.rework {
  border-color: rgba(240, 100, 105, 0.48);
  background: #a43745;
}

.project-asset-empty {
  display: grid;
  grid-column: 1 / -1;
  min-height: 280px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #7e8795;
  text-align: center;
}

.project-asset-empty strong {
  color: #e0e4eb;
  font-size: 13px;
}

.project-asset-empty span {
  font-size: 10px;
}

.team-asset-promotion-modal,
.team-asset-library-modal {
  position: fixed;
  inset: 0;
  z-index: 215;
  display: grid;
  place-items: center;
  padding: 24px;
}

.team-asset-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.84);
  backdrop-filter: blur(8px);
}

.team-asset-promotion-modal > section,
.team-asset-library-modal > section {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(86, 96, 123, 0.46);
  border-radius: 6px;
  background: #080d14;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.66);
}

.team-asset-promotion-modal > section {
  width: min(780px, calc(100vw - 48px));
}

.team-asset-library-modal > section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1240px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
}

.team-asset-promotion-modal header,
.team-asset-promotion-modal footer,
.team-asset-library-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 19px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.26);
  background: #0c131c;
}

.team-asset-promotion-modal footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(89, 99, 126, 0.26);
  border-bottom: 0;
}

.team-asset-promotion-modal header > div,
.team-asset-library-modal header > div:first-child {
  display: grid;
  gap: 5px;
}

.team-asset-promotion-modal header span,
.team-asset-library-modal header span {
  color: #777fff;
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.team-asset-promotion-modal h2,
.team-asset-library-modal h2 {
  margin: 0;
  color: #f4f6fa;
  font-size: 18px;
}

.team-asset-promotion-modal header p,
.team-asset-library-modal header p {
  margin: 0;
  color: #707a89;
  font-size: 9px;
}

.team-asset-promotion-modal button,
.team-asset-library-modal button {
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid rgba(103, 113, 142, 0.36);
  border-radius: 4px;
  background: #131a24;
  color: #ccd2dc;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.team-asset-promotion-modal button.primary,
.team-asset-library-modal button.primary,
.team-asset-library-modal button.active {
  border-color: #4249dd;
  background: #272db6;
  color: #fff;
}

.team-asset-promotion-modal button:disabled,
.team-asset-library-modal button:disabled {
  cursor: default;
  opacity: 0.5;
}

.team-asset-promotion-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  padding: 19px;
}

.team-asset-promotion-preview {
  display: grid;
  min-height: 280px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(89, 99, 126, 0.3);
  border-radius: 5px;
  background: #060a10;
  color: #657080;
}

.team-asset-promotion-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.team-asset-promotion-fields {
  display: grid;
  align-content: start;
  gap: 14px;
}

.team-asset-promotion-fields > label {
  display: grid;
  gap: 7px;
  color: #909aa8;
  font-size: 9px;
}

.team-asset-promotion-fields input[type="text"],
.team-asset-promotion-fields input:not([type]) {
  width: 100%;
}

.team-asset-promotion-fields input:not([type="checkbox"]),
.team-asset-toolbar input {
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid rgba(103, 113, 142, 0.36);
  border-radius: 4px;
  outline: 0;
  background: #101720;
  color: #edf0f5;
  padding: 0 11px;
  font-size: 10px;
}

.team-asset-promotion-fields em {
  color: #646f7e;
  font-size: 8px;
  font-style: normal;
}

.team-asset-promotion-fields dl,
.team-asset-card-info dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.team-asset-promotion-fields dl > div,
.team-asset-card-info dl > div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  color: #6f7988;
  font-size: 8px;
}

.team-asset-promotion-fields dt,
.team-asset-promotion-fields dd,
.team-asset-card-info dt,
.team-asset-card-info dd {
  margin: 0;
}

.team-asset-promotion-fields dd,
.team-asset-card-info dd {
  overflow: hidden;
  color: #a3abb7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-asset-rights {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  line-height: 1.5;
}

.team-asset-form-error {
  min-height: 16px;
  margin: 0;
  color: #ff9297;
  font-size: 9px;
}

.team-asset-library-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 16px 19px 19px;
}

.team-asset-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
}

.team-asset-type-filters,
.team-asset-toolbar form,
.team-asset-library-modal header > div:last-child,
.team-asset-card footer {
  display: flex;
  gap: 7px;
}

.team-asset-toolbar form {
  min-width: 380px;
}

.team-asset-toolbar input {
  flex: 1 1 auto;
  min-width: 0;
}

.team-asset-library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
  overflow: auto;
}

.team-asset-card {
  display: grid;
  grid-template-rows: 180px minmax(0, 1fr) auto;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(89, 99, 126, 0.28);
  border-radius: 5px;
  background: #0d141d;
}

.team-asset-card-preview {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #060a10;
  color: #5e6877;
}

.team-asset-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.team-asset-card-preview > span {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 5px 7px;
  border-radius: 3px;
  background: rgba(5, 9, 15, 0.86);
  color: #bfc7d2;
  font-size: 8px;
}

.team-asset-card-info {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
}

.team-asset-card-info header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.team-asset-card-info header strong {
  overflow: hidden;
  color: #edf0f5;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-asset-card-info header em {
  flex: 0 0 auto;
  color: #65d3aa;
  font-size: 8px;
  font-style: normal;
}

.team-asset-card-info p {
  min-height: 28px;
  margin: 0;
  color: #747e8d;
  font-size: 9px;
  line-height: 1.55;
}

.team-asset-card footer {
  align-items: center;
  min-height: 50px;
  padding: 9px 12px;
  border-top: 1px solid rgba(89, 99, 126, 0.2);
}

.project-fabric-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 24px;
}

.project-fabric-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.82);
  backdrop-filter: blur(8px);
}

.project-fabric-editor-modal > section {
  position: relative;
  width: min(820px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid rgba(86, 96, 123, 0.45);
  border-radius: 6px;
  background: #0a1017;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.64);
}

.project-fabric-editor-modal header,
.project-fabric-editor-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 19px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.26);
  background: #0c131c;
}

.project-fabric-editor-modal footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(89, 99, 126, 0.26);
  border-bottom: 0;
}

.project-fabric-editor-modal header > div {
  display: grid;
  gap: 5px;
}

.project-fabric-editor-modal header span {
  color: #777fff;
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.project-fabric-editor-modal h2 {
  margin: 0;
  color: #f4f6fa;
  font-size: 18px;
}

.project-fabric-editor-modal button {
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid rgba(103, 113, 142, 0.36);
  border-radius: 4px;
  background: #131a24;
  color: #ccd2dc;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.project-fabric-editor-modal button.primary {
  border-color: #4249dd;
  background: #272db6;
  color: #fff;
}

.project-fabric-editor-modal button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.project-fabric-editor-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  padding: 19px;
}

.project-fabric-file {
  display: grid;
  min-height: 290px;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 18px;
  border: 1px dashed rgba(103, 113, 142, 0.48);
  border-radius: 5px;
  background: #080d14;
  color: #798392;
  text-align: center;
  cursor: pointer;
}

.project-fabric-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.project-fabric-file > span {
  color: #777fff;
  font-size: 9px;
  font-weight: 800;
}

.project-fabric-file strong {
  max-width: 210px;
  overflow: hidden;
  color: #e4e8ee;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-fabric-file em {
  color: #626d7c;
  font-size: 8px;
  font-style: normal;
}

.project-fabric-fields {
  display: grid;
  gap: 11px;
}

.project-fabric-fields > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.project-fabric-fields label {
  display: grid;
  gap: 6px;
}

.project-fabric-fields label > span {
  color: #858f9e;
  font-size: 9px;
  font-weight: 700;
}

.project-fabric-fields input,
.project-fabric-fields textarea {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(103, 113, 142, 0.34);
  border-radius: 4px;
  outline: 0;
  background: #111822;
  color: #edf0f5;
  font: inherit;
  font-size: 10px;
  resize: vertical;
}

.project-fabric-fields input:focus,
.project-fabric-fields textarea:focus {
  border-color: #565eff;
}

.project-fabric-fields .project-fabric-rights {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.project-fabric-rights input {
  width: 14px;
  min-height: 14px;
  margin-top: 1px;
  padding: 0;
}

.project-fabric-fields [data-fabric-editor-error] {
  min-height: 16px;
  margin: 0;
  color: #f17c84;
  font-size: 9px;
}

.project-fabric-swatch-modal {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: grid;
  place-items: center;
  padding: 20px;
}

.project-fabric-swatch-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.88);
  backdrop-filter: blur(8px);
}

.project-fabric-swatch-modal > section {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1120px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: hidden;
  border: 1px solid rgba(91, 101, 139, 0.48);
  border-radius: 6px;
  background: #080e16;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7);
}

.project-fabric-swatch-modal header,
.project-fabric-swatch-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(91, 101, 139, 0.28);
  background: #0c131c;
}

.project-fabric-swatch-modal footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(91, 101, 139, 0.28);
  border-bottom: 0;
}

.project-fabric-swatch-modal header > div { display: grid; gap: 4px; }
.project-fabric-swatch-modal header span { color: #7f89ff; font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.project-fabric-swatch-modal header h2 { margin: 0; color: #f3f5f8; font-size: 19px; }
.project-fabric-swatch-modal header p { margin: 0; color: #7e8898; font-size: 9px; }
.project-fabric-swatch-modal button { min-height: 32px; padding: 0 12px; border: 1px solid rgba(104, 114, 144, 0.36); border-radius: 4px; background: #141b25; color: #d6dbe4; font-size: 10px; font-weight: 750; cursor: pointer; }
.project-fabric-swatch-modal button.primary { border-color: #5158f2; background: #292fc2; color: #fff; }
.project-fabric-swatch-modal button:disabled { cursor: wait; opacity: 0.55; }

.project-fabric-swatch-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.78fr);
  min-height: 0;
  overflow: auto;
}

.fabric-swatch-workspace {
  display: grid;
  min-width: 0;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 20px;
  border-right: 1px solid rgba(91, 101, 139, 0.24);
  background: #050a10;
}

.fabric-swatch-image-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: min(62vh, 680px);
  overflow: hidden;
  border: 1px solid rgba(109, 119, 151, 0.34);
  background: #020407;
  line-height: 0;
  touch-action: none;
  user-select: none;
}

.fabric-swatch-image-frame > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(62vh, 680px);
  object-fit: contain;
}

.fabric-swatch-selection {
  position: absolute;
  min-height: 0 !important;
  padding: 0 !important;
  border: 2px solid #747bff !important;
  border-radius: 2px !important;
  outline: 999px solid rgba(1, 3, 7, 0.62);
  background: transparent !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 18px rgba(66, 73, 221, 0.4);
  cursor: move !important;
  touch-action: none;
}

.fabric-swatch-selection > i {
  position: absolute;
  inset: 33.333% 0 auto;
  height: 33.333%;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.fabric-swatch-selection > i::before,
.fabric-swatch-selection > i::after {
  position: absolute;
  top: -100%;
  width: 1px;
  height: 300%;
  background: rgba(255, 255, 255, 0.4);
  content: "";
}

.fabric-swatch-selection > i::before { left: 33.333%; }
.fabric-swatch-selection > i::after { right: 33.333%; }
.fabric-swatch-selection > span { position: absolute; top: 6px; left: 7px; padding: 4px 5px; background: rgba(8, 12, 20, 0.78); color: #fff; font-size: 8px; line-height: 1; pointer-events: none; }
.fabric-swatch-selection > b { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border: 2px solid #fff; background: #5158f2; cursor: nwse-resize; }
.fabric-swatch-workspace > p { max-width: 620px; margin: 0; color: #727d8d; font-size: 9px; line-height: 1.55; text-align: center; }

.fabric-swatch-settings {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  overflow: auto;
  background: #0b1119;
}

.fabric-swatch-preview {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px;
  border: 1px solid rgba(91, 101, 139, 0.3);
  background: #080d14;
}

.fabric-swatch-preview canvas { grid-row: 1 / 3; width: 84px; height: 84px; border: 1px solid rgba(122, 132, 162, 0.3); background: #03060a; object-fit: cover; }
.fabric-swatch-preview span { align-self: end; color: #798494; font-size: 8px; font-weight: 800; }
.fabric-swatch-preview strong { align-self: start; color: #edf0f5; font-size: 11px; }
.fabric-swatch-position, .fabric-swatch-fields { display: grid; gap: 9px; }
.fabric-swatch-position label, .fabric-swatch-fields label { display: grid; gap: 5px; }
.fabric-swatch-position label { grid-template-columns: 74px minmax(0, 1fr); align-items: center; }
.fabric-swatch-position span, .fabric-swatch-fields span { color: #8c96a5; font-size: 9px; font-weight: 750; }
.fabric-swatch-position input[type="range"] { width: 100%; accent-color: #555cff; }
.fabric-swatch-fields > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fabric-swatch-fields input, .fabric-swatch-fields textarea { width: 100%; min-width: 0; min-height: 34px; padding: 8px 9px; border: 1px solid rgba(103, 113, 142, 0.34); border-radius: 4px; outline: 0; background: #111822; color: #edf0f5; font: inherit; font-size: 9px; resize: vertical; }
.fabric-swatch-fields input:focus, .fabric-swatch-fields textarea:focus { border-color: #565eff; }
.fabric-swatch-confirm { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid rgba(81, 88, 231, 0.3); background: rgba(31, 35, 171, 0.1); color: #a9b1bf; font-size: 9px; line-height: 1.45; }
.fabric-swatch-confirm input { flex: 0 0 auto; margin: 2px 0 0; }
.fabric-swatch-lineage { display: grid; gap: 3px; padding: 9px 10px; border-left: 2px solid #5158f2; background: #080e16; }
.fabric-swatch-lineage span { color: #737df0; font-size: 8px; font-weight: 850; }
.fabric-swatch-lineage strong { color: #e4e8ef; font-size: 10px; }
.fabric-swatch-lineage em { overflow: hidden; color: #758091; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.fabric-swatch-error { min-height: 15px; margin: 0; color: #ff858e; font-size: 9px; }

@media (max-width: 860px) {
  .project-fabric-swatch-modal { padding: 10px; }
  .project-fabric-swatch-modal > section { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .project-fabric-swatch-body { grid-template-columns: 1fr; }
  .fabric-swatch-workspace { border-right: 0; border-bottom: 1px solid rgba(91, 101, 139, 0.24); }
  .fabric-swatch-image-frame, .fabric-swatch-image-frame > img { max-height: 42vh; }
}

.media-usage-estimate {
  margin: 8px 0 0;
  color: #8f98aa;
  font-size: 9px;
  line-height: 1.4;
}

.workspace-login-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #05080d;
}

.workspace-login-modal::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(72, 81, 111, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(72, 81, 111, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  content: "";
  pointer-events: none;
}

.workspace-login-modal > section {
  position: relative;
  width: min(420px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid rgba(86, 96, 123, 0.5);
  border-radius: 6px;
  background: #0a1017;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.7);
}

.workspace-login-modal header {
  display: grid;
  gap: 7px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.28);
  background: #0c131c;
}

.workspace-login-modal header span {
  color: #777fff;
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.workspace-login-modal h1 {
  margin: 0;
  color: #f4f6fa;
  font-size: 24px;
  letter-spacing: 0;
}

.workspace-login-modal header p {
  margin: 0;
  color: #707a89;
  font-size: 10px;
}

.workspace-login-modal form {
  display: grid;
  gap: 15px;
  padding: 24px;
}

.workspace-login-modal label {
  display: grid;
  gap: 7px;
  color: #909aa8;
  font-size: 9px;
}

.workspace-login-modal input {
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid rgba(103, 113, 142, 0.38);
  border-radius: 4px;
  outline: 0;
  background: #101720;
  color: #edf0f5;
  padding: 0 12px;
  font-size: 11px;
}

.workspace-login-modal input:focus {
  border-color: #555deb;
}

.workspace-login-modal form p {
  min-height: 16px;
  margin: 0;
  color: #ff9297;
  font-size: 9px;
}

.workspace-login-modal button {
  min-height: 42px;
  border: 1px solid #4249dd;
  border-radius: 4px;
  background: #272db6;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.workspace-login-modal button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.workspace-usage-modal {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  padding: 24px;
}

.workspace-usage-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.8);
  backdrop-filter: blur(8px);
}

.workspace-usage-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(86, 96, 123, 0.42);
  border-radius: 6px;
  background: #080d14;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}

.workspace-usage-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.28);
  background: #0b1119;
}

.workspace-usage-dialog > header > div:first-child {
  display: grid;
  gap: 5px;
}

.workspace-usage-dialog > header span {
  color: #777fff;
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.workspace-usage-dialog > header h2 {
  margin: 0;
  color: #f4f6fa;
  font-size: 20px;
}

.workspace-usage-dialog > header p {
  margin: 0;
  color: #707a89;
  font-size: 10px;
}

.workspace-usage-dialog > header > div:last-child {
  display: flex;
  gap: 8px;
}

.workspace-usage-dialog button {
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid rgba(103, 113, 142, 0.34);
  border-radius: 4px;
  background: #131a24;
  color: #ccd2dc;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.workspace-usage-dialog button:hover {
  border-color: rgba(110, 118, 255, 0.62);
  color: #fff;
}

.workspace-usage-body {
  min-height: 0;
  padding: 18px 20px 24px;
  overflow: auto;
}

.workspace-usage-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(89, 99, 126, 0.24);
  border-radius: 4px;
  background: #0b1119;
}

.workspace-usage-summary article {
  display: grid;
  gap: 7px;
  padding: 14px 16px;
  border-right: 1px solid rgba(89, 99, 126, 0.2);
}

.workspace-usage-summary article:last-child {
  border-right: 0;
}

.workspace-usage-summary span,
.workspace-usage-summary em {
  color: #707a89;
  font-size: 9px;
  font-style: normal;
}

.workspace-usage-summary strong {
  color: #eef1f6;
  font: 750 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.workspace-usage-summary article:nth-child(2) strong {
  color: #e7ba68;
}

.workspace-usage-summary article[data-state="ready"] strong {
  color: #65d3aa;
}

.workspace-usage-summary article[data-state="blocked"] strong {
  color: #f17c84;
}

.workspace-usage-meter {
  display: grid;
  gap: 7px;
  margin: 14px 0;
  padding: 13px 15px;
  border: 1px solid rgba(89, 99, 126, 0.22);
  border-radius: 4px;
  background: #0b1119;
}

.workspace-usage-meter > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8a94a4;
  font-size: 10px;
}

.workspace-usage-meter strong {
  color: #e9ecf2;
}

.workspace-usage-meter > i {
  height: 5px;
  overflow: hidden;
  background: #1a2330;
}

.workspace-usage-meter > i b {
  display: block;
  height: 100%;
  background: #555cff;
}

.workspace-usage-meter p,
.workspace-usage-disclaimer {
  margin: 0;
  color: #697484;
  font-size: 9px;
}

.workspace-usage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 14px;
}

.workspace-usage-panel {
  min-width: 0;
  border: 1px solid rgba(89, 99, 126, 0.22);
  border-radius: 4px;
  background: #0b1119;
}

.workspace-usage-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.2);
}

.workspace-usage-panel > header > div {
  display: grid;
  gap: 4px;
}

.workspace-usage-panel > header span {
  color: #6973e9;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.workspace-usage-panel > header strong {
  color: #e7ebf1;
  font-size: 12px;
}

.workspace-usage-panel > header em {
  color: #6e7888;
  font-size: 8px;
  font-style: normal;
}

.workspace-rate-list,
.workspace-provider-list {
  display: grid;
}

.workspace-rate-list article,
.workspace-provider-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.16);
}

.workspace-rate-list article:last-child,
.workspace-provider-list article:last-child {
  border-bottom: 0;
}

.workspace-rate-list article > div,
.workspace-provider-list article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.workspace-rate-list strong,
.workspace-provider-list strong {
  color: #dfe3ea;
  font-size: 10px;
}

.workspace-rate-list span,
.workspace-provider-list span {
  color: #687383;
  font-size: 8px;
}

.workspace-rate-list b,
.workspace-provider-list b {
  color: #9ea5ff;
  font: 750 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.workspace-rate-list small {
  color: #6e7888;
  font-size: 8px;
}

.workspace-rate-list article[data-free="true"] b {
  color: #65d3aa;
}

.workspace-provider-list > p {
  margin: 0;
  padding: 22px 14px;
  color: #6f7988;
  font-size: 9px;
}

.workspace-ledger-panel {
  margin-top: 14px;
}

.workspace-ledger-list {
  max-height: 230px;
  overflow: auto;
}

.workspace-ledger-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 100px 92px;
  gap: 12px;
  align-items: center;
  min-height: 57px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.16);
}

.workspace-ledger-list article:last-child {
  border-bottom: 0;
}

.workspace-ledger-list article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.workspace-ledger-list strong {
  color: #dfe3ea;
  font-size: 10px;
}

.workspace-ledger-list span,
.workspace-ledger-list time {
  overflow: hidden;
  color: #687383;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-ledger-list b {
  color: #d5a954;
  font-size: 9px;
}

.workspace-ledger-list article[data-status="settled"] b {
  color: #65d3aa;
}

.workspace-ledger-list article[data-status="released"] b {
  color: #7d8795;
}

.workspace-ledger-list em {
  color: #a8afbb;
  font-size: 9px;
  font-style: normal;
  text-align: right;
}

.workspace-usage-empty {
  padding: 24px 14px;
  color: #6f7988;
  font-size: 9px;
}

.workspace-usage-policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px auto;
  gap: 14px;
  align-items: end;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(89, 99, 126, 0.22);
  border-radius: 4px;
  background: #0b1119;
}

.workspace-usage-policy > div,
.workspace-usage-policy label {
  display: grid;
  gap: 5px;
}

.workspace-usage-policy span {
  color: #6973e9;
  font-size: 8px;
  font-weight: 850;
}

.workspace-usage-policy strong {
  color: #e6eaf0;
  font-size: 11px;
}

.workspace-usage-policy p {
  margin: 0;
  color: #697484;
  font-size: 9px;
}

.workspace-usage-policy input,
.workspace-usage-policy select {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(103, 113, 142, 0.34);
  border-radius: 4px;
  background: #111822;
  color: #edf0f5;
}

.workspace-auth-policy {
  grid-template-columns: minmax(0, 1fr) 160px 210px auto;
}

.workspace-create-policy {
  grid-template-columns: minmax(210px, 1.35fr) repeat(3, minmax(140px, 1fr)) auto;
}

.workspace-create-policy > label:nth-of-type(n + 4) {
  grid-row: 2;
}

.workspace-create-policy > button {
  grid-column: -2 / -1;
  grid-row: 2;
}

.workspace-session-actor {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(103, 113, 142, 0.28);
  border-radius: 4px;
  color: #aeb5c0 !important;
}

.workspace-usage-policy button {
  border-color: #4249dd;
  background: #272db6;
  color: #fff;
}

.workspace-commercial-report {
  margin-top: 14px;
}

.workspace-report-filters {
  display: grid;
  grid-template-columns: 132px repeat(5, minmax(125px, 1fr)) auto auto;
  gap: 8px;
  align-items: end;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.18);
  overflow-x: auto;
}

.workspace-report-filters label {
  display: grid;
  gap: 5px;
}

.workspace-report-filters label > span {
  color: #6f7989;
  font-size: 8px;
  font-weight: 700;
}

.workspace-report-filters input,
.workspace-report-filters select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(103, 113, 142, 0.34);
  border-radius: 4px;
  outline: 0;
  background: #111822;
  color: #e9ecf2;
  font-size: 9px;
}

.workspace-report-filters input:focus,
.workspace-report-filters select:focus {
  border-color: #555cff;
}

.workspace-report-filters button.primary {
  border-color: #4249dd;
  background: #272db6;
  color: #fff;
}

.workspace-report-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid rgba(89, 99, 126, 0.18);
}

.workspace-report-summary article {
  display: grid;
  gap: 6px;
  padding: 11px 14px;
  border-right: 1px solid rgba(89, 99, 126, 0.16);
}

.workspace-report-summary article:last-child {
  border-right: 0;
}

.workspace-report-summary span {
  color: #687383;
  font-size: 8px;
}

.workspace-report-summary strong {
  color: #edf0f5;
  font: 750 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.workspace-report-table-wrap {
  max-height: 310px;
  overflow: auto;
}

.workspace-report-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.workspace-report-table th,
.workspace-report-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(89, 99, 126, 0.14);
  color: #8e98a7;
  font-size: 8px;
  text-align: left;
  vertical-align: middle;
}

.workspace-report-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #0f1620;
  color: #6f7a8a;
  font-weight: 750;
}

.workspace-report-table th:nth-child(1) { width: 76px; }
.workspace-report-table th:nth-child(2) { width: 16%; }
.workspace-report-table th:nth-child(3) { width: 11%; }
.workspace-report-table th:nth-child(4) { width: 19%; }
.workspace-report-table th:nth-child(5) { width: 18%; }
.workspace-report-table th:nth-child(6) { width: 72px; }
.workspace-report-table th:nth-child(7),
.workspace-report-table th:nth-child(8) { width: 52px; text-align: right; }
.workspace-report-table th:nth-child(9) { width: 58px; text-align: center; }

.workspace-report-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-report-table td:nth-child(7),
.workspace-report-table td:nth-child(8) {
  color: #dfe3ea;
  font: 750 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}

.workspace-report-table td strong,
.workspace-report-table td span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-report-table td strong {
  color: #dfe3ea;
  font-size: 9px;
}

.workspace-report-table td span {
  margin-top: 4px;
  color: #647080;
}

.workspace-report-table td[data-status="settled"] {
  color: #65d3aa;
}

.workspace-report-table td[data-status="reserved"] {
  color: #e7ba68;
}

.workspace-report-table td[data-status="released"] {
  color: #7d8795;
}

.workspace-report-table td:last-child button {
  min-height: 26px;
  padding: 0 9px;
  border-color: rgba(231, 186, 104, 0.52);
  background: rgba(95, 70, 29, 0.32);
  color: #f0c779;
}

.workspace-usage-reconcile-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 18px;
}

.workspace-usage-reconcile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.78);
  backdrop-filter: blur(7px);
}

.workspace-usage-reconcile-modal > section {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(560px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid rgba(111, 120, 255, 0.44);
  border-radius: 5px;
  background: #0b1119;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62);
}

.workspace-usage-reconcile-modal header,
.workspace-usage-reconcile-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workspace-usage-reconcile-modal header div {
  display: grid;
  gap: 5px;
}

.workspace-usage-reconcile-modal header span {
  color: #777fff;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.workspace-usage-reconcile-modal h3,
.workspace-usage-reconcile-modal p {
  margin: 0;
}

.workspace-usage-reconcile-modal h3 {
  color: #f1f3f7;
  font-size: 16px;
}

.workspace-usage-reconcile-modal p {
  padding: 10px 12px;
  border-left: 2px solid #d7a94e;
  background: rgba(83, 61, 24, 0.2);
  color: #b7a47e;
  font-size: 9px;
  line-height: 1.6;
}

.workspace-usage-reconcile-context {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr;
  border: 1px solid rgba(89, 99, 126, 0.24);
}

.workspace-usage-reconcile-context article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border-right: 1px solid rgba(89, 99, 126, 0.18);
}

.workspace-usage-reconcile-context article:last-child {
  border-right: 0;
}

.workspace-usage-reconcile-context span,
.workspace-usage-reconcile-context em {
  overflow: hidden;
  color: #6d7787;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-usage-reconcile-context strong {
  overflow: hidden;
  color: #e5e9ef;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-usage-reconcile-modal label {
  display: grid;
  gap: 6px;
}

.workspace-usage-reconcile-modal [hidden] {
  display: none;
}

.workspace-usage-reconcile-modal label > span {
  color: #828c9b;
  font-size: 9px;
  font-weight: 750;
}

.workspace-usage-reconcile-modal select,
.workspace-usage-reconcile-modal input,
.workspace-usage-reconcile-modal textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(103, 113, 142, 0.38);
  border-radius: 4px;
  outline: 0;
  background: #111822;
  color: #edf0f5;
  font: inherit;
  resize: vertical;
}

.workspace-usage-reconcile-modal select:focus,
.workspace-usage-reconcile-modal input:focus,
.workspace-usage-reconcile-modal textarea:focus {
  border-color: #555cff;
}

.workspace-usage-reconcile-modal button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(103, 113, 142, 0.38);
  border-radius: 4px;
  background: #131a24;
  color: #cbd1db;
  cursor: pointer;
}

.workspace-usage-reconcile-modal button.primary {
  border-color: #4249dd;
  background: #272db6;
  color: #fff;
}

.workspace-usage-reconcile-modal button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.workspace-usage-disclaimer {
  padding: 12px 2px 0;
}

@media (max-width: 880px) {
  .ai-batch-modal {
    padding: 8px;
  }

  .ai-batch-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }

  .ai-batch-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .ai-batch-settings {
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid rgba(89, 99, 126, 0.22);
  }

  .ai-batch-assets {
    min-height: 420px;
  }

  .ai-batch-assets > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-task-center-modal {
    padding: 8px;
  }

  .ai-task-center-panel {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }

  .ai-task-center-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-task-center-summary > div {
    border-bottom: 1px solid rgba(89, 99, 126, 0.2);
  }

  .ai-task-center-controls {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-task-center-filter-group {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .ai-task-center-search {
    width: 100%;
  }

  .workflow-template-history-list article {
    grid-template-columns: 1fr;
  }

  .ai-task-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .ai-task-meta,
  .ai-task-actions {
    grid-column: 2;
  }

  .ai-task-actions {
    justify-content: flex-start;
  }

  .workspace-usage-modal {
    padding: 8px;
  }

  .workspace-usage-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }

  .project-asset-center-modal {
    padding: 8px;
  }

  .project-asset-center-panel {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }

  .project-asset-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-asset-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .project-asset-search {
    min-width: 0;
  }

  .project-asset-grid {
    grid-template-columns: 1fr;
  }

  .team-asset-promotion-modal,
  .team-asset-library-modal {
    padding: 8px;
  }

  .team-asset-promotion-modal > section,
  .team-asset-library-modal > section {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .team-asset-promotion-modal > section {
    overflow: auto;
  }

  .team-asset-library-modal > section {
    height: calc(100vh - 16px);
  }

  .team-asset-promotion-body {
    grid-template-columns: 1fr;
  }

  .team-asset-promotion-preview {
    min-height: 180px;
  }

  .team-asset-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .team-asset-toolbar form {
    min-width: 0;
  }

  .team-asset-library-grid {
    grid-template-columns: 1fr;
  }

  .project-fabric-editor-modal {
    padding: 8px;
  }

  .project-fabric-editor-modal > section {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow: auto;
  }

  .project-fabric-editor-body {
    grid-template-columns: 1fr;
  }

  .project-fabric-file {
    min-height: 140px;
  }

  .project-fabric-fields > div {
    grid-template-columns: 1fr;
  }

  .workspace-usage-summary,
  .workspace-usage-grid {
    grid-template-columns: 1fr 1fr;
  }

  .workspace-usage-policy {
    grid-template-columns: 1fr;
  }

  .workspace-report-filters {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .workspace-report-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workspace-ledger-list article {
    grid-template-columns: minmax(0, 1fr) 70px;
  }

  .workspace-ledger-list em,
  .workspace-ledger-list time {
    grid-column: 2;
  }
}

.media-inspector-content {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.media-inspector-content.is-image-toolbox {
  align-content: start;
}

.image-inspector-current {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(100, 107, 255, 0.38);
  border-radius: 4px;
  background: #0a0f16;
}

.image-inspector-current > img {
  grid-row: 1 / 3;
  width: 58px;
  height: 72px;
  border-radius: 3px;
  object-fit: cover;
}

.image-inspector-current > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.image-inspector-current span,
.image-inspector-current em {
  color: #737d8d;
  font: 700 8px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
}

.image-inspector-current strong {
  overflow: hidden;
  color: #eef0f6;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image-inspector-current > button {
  grid-column: 2;
  justify-self: start;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(100, 107, 255, 0.45);
  border-radius: 3px;
  background: rgba(37, 43, 177, 0.3);
  color: #dfe1ff;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.image-operation-launcher {
  display: grid;
  gap: 10px;
}

.image-operation-launcher-group {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(105, 116, 143, 0.22);
  border-radius: 4px;
  background: #0c1219;
}

.image-operation-launcher-group header strong {
  display: block;
  color: #eef0f6;
  font-size: 11px;
}

.image-operation-launcher-group header span {
  display: block;
  margin-top: 4px;
  color: #6f7989;
  font: 500 8px/1.35 inherit;
}

.image-operation-launcher-group > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.image-operation-launcher-group button {
  display: grid;
  min-width: 0;
  min-height: 44px;
  gap: 4px;
  align-content: center;
  padding: 7px 8px;
  border: 1px solid rgba(92, 102, 130, 0.3);
  border-radius: 3px;
  background: #111924;
  color: #dce1e9;
  text-align: left;
  cursor: pointer;
}

.image-operation-launcher-group button:hover {
  border-color: #646bff;
  background: rgba(37, 43, 177, 0.22);
}

.image-operation-launcher-group button span {
  overflow: hidden;
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image-operation-launcher-group button em {
  overflow: hidden;
  color: #747f90;
  font-size: 7px;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image-inspector-empty {
  padding: 12px;
  border: 1px dashed rgba(105, 116, 143, 0.32);
  border-radius: 4px;
}

.image-inspector-empty strong {
  color: #dce1e9;
  font-size: 11px;
}

.image-inspector-empty p {
  margin: 6px 0 0;
  color: #737d8d;
  font-size: 9px;
  line-height: 1.5;
}

.media-inspector-content header span {
  color: #687282;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.media-inspector-content h2 {
  margin: 6px 0 0;
  color: #f1f3f7;
  font-size: 16px;
  letter-spacing: 0;
}

.media-inspector-state {
  padding: 10px;
  border: 1px solid rgba(91, 101, 126, 0.28);
  border-radius: 4px;
  background: #0c1219;
}

.media-inspector-state[data-state="complete"] {
  border-color: rgba(78, 85, 255, 0.5);
}

.media-inspector-state[data-state="incomplete"] {
  border-color: rgba(222, 79, 88, 0.52);
}

.media-inspector-state strong {
  color: #dce1e9;
  font-size: 11px;
}

.media-inspector-state p {
  margin: 6px 0 0;
  color: #798292;
  font-size: 9px;
  line-height: 1.5;
}

.media-inspector-form {
  display: grid;
  gap: 9px;
}

.media-inspector-form label {
  display: grid;
  gap: 5px;
  color: #7b8494;
  font-size: 9px;
}

.media-inspector-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.media-inspector-actions button {
  padding: 0 8px;
}

.media-inspector-actions button:disabled,
.media-node-actions button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.media-inspector-actions button.danger {
  border-color: rgba(239, 98, 106, 0.38);
  color: #ff9ca1;
}

.image-operation-source {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 9px;
  padding: 6px;
  border: 1px solid rgba(105, 116, 143, 0.2);
  border-radius: 4px;
  background: #0a0f16;
}

.image-operation-source img {
  width: 46px;
  height: 52px;
  border-radius: 3px;
  object-fit: cover;
}

.image-operation-source div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.image-operation-source span,
.image-operation-results > span {
  color: #717b8b;
  font: 700 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.image-operation-source strong {
  overflow: hidden;
  color: #dce1e9;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image-operation-audit-note {
  margin: 0 0 9px;
  padding: 7px 8px;
  border-left: 3px solid #d5a24d;
  background: rgba(171, 119, 35, 0.1);
  color: #d8bb84;
  font-size: 9px;
  line-height: 1.45;
}

.image-operation-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 7px;
}

.image-operation-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #7b8494;
  font-size: 8px;
}

.image-operation-form label.wide {
  grid-column: 1 / -1;
}

.image-operation-form input,
.image-operation-form select,
.image-operation-form textarea {
  min-width: 0;
  height: 30px;
  border: 1px solid rgba(105, 116, 143, 0.28);
  border-radius: 3px;
  outline: 0;
  background: #0a0f16;
  color: #dce1e9;
  padding: 0 8px;
  font: 500 9px/1 inherit;
}

.image-operation-form input[type="color"] {
  padding: 3px;
}

.image-operation-form textarea {
  min-height: 54px;
  resize: vertical;
  padding: 7px 8px;
  line-height: 1.4;
}

.image-operation-file input {
  height: auto;
  padding: 6px;
}

.image-operation-file span {
  overflow: hidden;
  color: #697384;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image-operation-garment-grid {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
}

.image-operation-garment-grid > span,
.image-operation-garment-grid > em {
  color: #7b8494;
  font-size: 8px;
  font-style: normal;
}

.image-operation-garment-grid > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.image-operation-garment-grid label {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(105, 116, 143, 0.24);
  border-radius: 3px;
  background: #0a0f16;
  cursor: pointer;
}

.image-operation-garment-grid label:has(input:checked) {
  border-color: #6269f2;
  box-shadow: inset 0 0 0 1px rgba(98, 105, 242, 0.3);
}

.image-operation-garment-grid input {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 13px;
  height: 13px;
  accent-color: #4e55ff;
}

.image-operation-garment-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  object-fit: cover;
  object-position: center top;
}

.image-operation-garment-grid strong {
  overflow: hidden;
  color: #dce1e9;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-operation-fabric-preview {
  width: 100%;
  height: 52px;
  border-radius: 3px;
  object-fit: cover;
}

.media-asset-binding {
  margin: 0;
  color: #777ff7;
  font-size: 8px;
  line-height: 1.4;
  word-break: break-all;
}

.image-operation-error {
  margin: 8px 0 0;
  padding: 7px 8px;
  border: 1px solid rgba(239, 98, 106, 0.35);
  border-radius: 3px;
  background: rgba(142, 35, 43, 0.12);
  color: #ff9ca1;
  font-size: 9px;
  line-height: 1.45;
}

.image-operation-results {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(105, 116, 143, 0.16);
}

.image-operation-results .media-node-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.image-operation-results .media-node-gallery figcaption strong,
.image-operation-results .media-video-frame-action {
  display: none;
}

.image-operation-results .image-asset-operation-bar {
  grid-template-columns: 1fr;
  inset: auto 3px 5px;
  gap: 2px;
  padding: 3px;
}

.image-operation-results .image-asset-operation-bar button {
  height: 19px;
  font-size: 7px;
}

.image-operation-inspector .image-operation-form {
  grid-template-columns: minmax(0, 1fr) 82px;
}

@media (max-width: 1100px) {
  .media-commandbar {
    grid-template-columns: minmax(0, 1fr) 170px 200px;
  }

  .media-commandbar > div:first-child {
    display: none;
  }

  .media-canvas-main {
    grid-template-columns: minmax(0, 1fr) 270px;
  }

  .image-canvas-studio {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .image-canvas-flow-shell {
    grid-template-columns: minmax(0, 1fr) 270px;
  }

  .canvas-workspace-tabs em {
    display: none;
  }

  .canvas-workspace-tabs button {
    grid-template-columns: 28px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .canvas-workspace-shell {
    height: calc(100dvh - 182px);
    min-height: 620px;
    grid-template-rows: 44px minmax(0, 1fr);
  }

  .canvas-workspace-tabs {
    gap: 3px;
    padding: 3px;
  }

  .canvas-workspace-tabs button {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 5px 7px;
    text-align: center;
  }

  .canvas-workspace-tabs span {
    display: none;
  }

  .canvas-workspace-tabs strong {
    font-size: 10px;
  }

  .media-canvas-workbench {
    grid-template-rows: 112px 92px minmax(0, 1fr) 30px;
  }

  .media-canvas-contextbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px 8px;
  }

  .media-canvas-contextbar .canvas-mode-switch,
  .media-canvas-contextbar .canvas-view-controls button:last-child {
    display: none;
  }

  .media-canvas-contextbar .media-current-review {
    grid-column: 1 / -1;
    width: 100%;
  }

  .media-canvas-contextbar .media-workflow-entry {
    grid-column: 1 / -1;
  }

  .media-canvas-contextbar .image-view-switch {
    grid-column: 1 / -1;
    width: max-content;
  }

  .media-capability-badge {
    min-width: 116px;
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .media-canvas-contextbar .canvas-view-controls {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .media-commandbar {
    grid-template-columns: minmax(0, 1fr) 132px;
    grid-template-rows: minmax(0, 1fr) 24px;
    gap: 6px;
    padding: 7px;
  }

  .media-command-actions {
    grid-template-columns: 1fr;
  }

  .media-command-actions button:first-child {
    grid-column: auto;
  }

  .media-commandbar > p {
    grid-column: 1 / -1;
    padding: 3px 7px;
  }

  .media-commandbar > p span {
    display: none;
  }

  .media-canvas-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(330px, 1fr) 190px;
  }

  .image-canvas-studio {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(420px, 1fr) minmax(240px, auto);
    overflow: auto;
  }

  .image-studio-asset-actions {
    align-items: flex-start;
    flex-direction: column;
    right: auto;
    max-width: calc(100% - 28px);
  }

  .image-studio-edit-actions,
  .image-studio-review-actions {
    max-width: 100%;
    overflow-x: auto;
  }

  .image-studio-view-controls {
    grid-template-columns: 26px minmax(70px, 1fr) 34px 26px auto;
    top: 104px;
    right: 14px;
    left: 14px;
  }

  .image-studio-preview-button {
    padding-top: 148px;
  }

  .image-studio-stage {
    min-height: 420px;
    border-right: 0;
    border-bottom: 1px solid rgba(116, 126, 151, 0.17);
  }

  .image-studio-side {
    max-height: 420px;
  }

  .image-canvas-flow-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(330px, 1fr) 190px;
  }

  .media-canvas-main .design-canvas-inspector {
    border-top: 1px solid rgba(146, 154, 177, 0.14);
    border-left: 0;
  }

  .media-inspector-content {
    grid-template-columns: 0.8fr 1.2fr;
    padding: 10px;
  }

  .media-inspector-content.is-image-toolbox {
    grid-template-columns: minmax(0, 1fr);
  }

  .media-inspector-actions {
    align-content: start;
  }
}

@media (max-width: 760px) {
  .design-clarification-panel {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }

  .clarification-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(180px, 0.72fr) minmax(280px, 1.28fr);
  }

  .clarification-analysis {
    border-right: 0;
    border-bottom: 1px solid rgba(146, 154, 177, 0.14);
    padding: 12px;
  }

  .clarification-inferred-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .clarification-question {
    padding: 18px 14px;
  }

  .clarification-question h3 {
    font-size: 18px;
  }

  .clarification-options,
  .clarification-review-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-clarification-panel > footer {
    padding: 9px;
  }

  .design-clarification-panel > footer button {
    min-width: 76px;
  }
}

.techsheet-editor-panel .techsheet-confirm input[type="checkbox"] {
  display: inline-block;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
}

/* 2026-08-03: Lightchain-parity production shell. Branding and real Jingzhi data stay native. */
.fashion-dashboard {
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 50px minmax(0, 1fr);
  background: #070a0f;
}

.workspace-chrome {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  padding: 0 18px;
  border-bottom: 1px solid #202630;
  background: #090d12;
}

.workspace-chrome-brand,
.workspace-product-nav,
.workspace-chrome-actions {
  display: flex;
  align-items: center;
}

.workspace-chrome-brand {
  gap: 10px;
  min-width: 0;
}

.workspace-chrome-mark {
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid #8589ff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px #090d12, inset 0 0 0 7px #1f23ab;
}

.workspace-chrome-brand strong {
  color: #f5f6f8;
  font-size: 14px;
  font-weight: 900;
}

.workspace-chrome-brand i {
  width: 1px;
  height: 18px;
  background: #2a303a;
}

.workspace-chrome-brand em {
  overflow: hidden;
  color: #8e97a4;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.workspace-product-nav {
  flex: 1 1 auto;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.workspace-product-nav button {
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #8993a0;
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
  cursor: pointer;
}

.workspace-product-nav button:hover {
  border-color: #303744;
  background: #121720;
  color: #fff;
}

.workspace-product-nav button.active {
  border-color: #343ad0;
  background: #1f23ab;
  color: #fff;
}

.workspace-chrome-actions {
  flex: 0 0 auto;
  gap: 6px;
}

.workspace-chrome-actions button {
  height: 30px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #a7afba;
  font-size: 10px;
  font-weight: 760;
  cursor: pointer;
}

.workspace-chrome-actions button:hover {
  border-color: #343b47;
  background: #151a22;
  color: #fff;
}

.workspace-chrome-actions .workspace-chrome-primary {
  border-color: #3036c9;
  background: #1f23ab;
  color: #fff;
}

.dash-rail {
  grid-column: 1;
  grid-row: 2;
  grid-template-rows: 52px repeat(9, 44px) minmax(0, 1fr) 44px;
  border-right-color: #202630;
  background: #090d13;
}

.dash-logo {
  width: 20px;
  height: 20px;
  border-color: #686eff;
  box-shadow: inset 0 0 0 4px #090d13;
}

.dash-icon {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  color: #6f7886;
  font-size: 15px;
}

.dash-icon.active,
.dash-icon:hover {
  background: rgba(31, 35, 171, 0.42);
  color: #fff;
  box-shadow: inset 3px 0 0 #7378ff;
}

.dash-workspace {
  grid-column: 2;
  grid-row: 2;
  background: #070b10;
}

.fashion-dashboard.canvas-mode .dash-workspace,
.fashion-dashboard.canvas-mode.media-workspace-mode .dash-workspace {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.fashion-dashboard.canvas-mode .dash-topbar,
.fashion-dashboard.canvas-mode .dash-toolbar,
.fashion-dashboard.canvas-mode.media-workspace-mode .dash-topbar,
.fashion-dashboard.canvas-mode.media-workspace-mode .dash-toolbar {
  display: none;
}

.canvas-workspace-shell {
  grid-template-rows: 44px minmax(0, 1fr);
  gap: 0;
  background: #070b10;
}

.canvas-workspace-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 5px 12px;
  border: 0;
  border-bottom: 1px solid #202630;
  border-radius: 0;
  background: #0b1016;
}

.canvas-workspace-tabs button {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
  min-width: 142px;
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-right: 1px solid #252b35;
  border-radius: 0;
}

.canvas-workspace-tabs button.active {
  border-color: #252b35;
  background: rgba(31, 35, 171, 0.32);
  box-shadow: inset 0 -2px 0 #7378ff;
}

.canvas-workspace-tabs span {
  color: #656e7b;
  font-size: 9px;
}

.canvas-workspace-tabs strong {
  font-size: 11px;
}

.canvas-workspace-tabs em {
  display: none;
}

.design-canvas-workbench,
.media-canvas-workbench {
  border: 0;
  border-radius: 0;
  background: #080c12;
}

.design-canvas-contextbar,
.media-canvas-contextbar {
  min-height: 44px;
  padding: 5px 12px;
  border-bottom-color: #202630;
  background: #0b1017;
}

.design-view-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid #29313c;
  border-radius: 4px;
  background: #0e141c;
}

.design-view-switch button {
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 3px;
  color: #808a98;
  background: transparent;
  font-size: 9px;
}

.design-view-switch button.active {
  color: #fff;
  background: #1f23ab;
}

.design-canvas-workbench.is-studio-view {
  grid-template-rows: 44px minmax(0, 1fr) 24px;
}

.design-canvas-workbench.is-flow-view {
  grid-template-rows: 44px 76px minmax(0, 1fr) 24px;
}

.design-production-studio {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 352px;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #070b10;
}

.design-canvas-workbench.is-studio-view > .canvas-commandbar {
  display: none;
}

.design-production-studio > .design-production-assets,
.design-production-studio > .design-production-stage,
.design-production-studio > .design-production-properties {
  grid-row: 2;
}

.design-production-studio[hidden] {
  display: none;
}

.design-canvas-main[hidden] {
  display: none;
}

.design-canvas-workbench.is-studio-view > .design-canvas-contextbar > .canvas-mode-switch,
.design-canvas-workbench.is-studio-view > .design-canvas-contextbar > .canvas-view-controls {
  display: none;
}

.design-production-assets,
.design-production-properties {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #0a0f15;
}

.design-production-assets {
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr);
  border-right: 1px solid #202630;
}

.design-production-assets > header,
.design-production-properties > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #202630;
}

.design-production-assets > header div,
.design-production-properties > header {
  min-width: 0;
}

.design-production-assets > header span,
.design-production-properties > header span {
  display: block;
  color: #777cff;
  font-size: 8px;
}

.design-production-assets > header strong,
.design-production-properties > header strong {
  color: #eef1f5;
  font-size: 11px;
}

.design-production-assets > header button,
.design-production-properties button {
  min-height: 26px;
  border: 1px solid #303744;
  border-radius: 3px;
  color: #cbd1da;
  background: #111720;
  font-size: 8px;
}

.design-production-assets > header nav {
  display: flex;
  gap: 5px;
}

.design-production-assets > div {
  display: grid;
  align-content: start;
  gap: 0;
  padding: 6px;
  overflow-y: auto;
}

.design-production-assets > div > button {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 5px;
  border: 1px solid transparent;
  border-bottom-color: #1c222b;
  border-radius: 3px;
  text-align: left;
  background: transparent;
}

.design-production-assets > div > button.is-selected {
  border-color: #4a50de;
  background: rgba(31, 35, 171, 0.22);
  box-shadow: inset 3px 0 0 #7378ff;
}

.design-production-assets > div > button.is-stale {
  opacity: .58;
}

.design-production-assets img {
  width: 52px;
  height: 52px;
  border-radius: 2px;
  object-fit: cover;
  background: #05080c;
}

.design-production-assets button span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.design-production-assets button strong,
.design-production-assets button em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.design-production-assets button strong {
  color: #dfe3e9;
  font-size: 9px;
}

.design-production-assets button em {
  color: #717b89;
  font-size: 8px;
  font-style: normal;
}

.design-production-assets p {
  padding: 14px 10px;
  color: #707987;
  font-size: 9px;
  line-height: 1.7;
}

.design-production-stage {
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr) auto 34px;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #202630;
  background: #070b10;
}

.design-production-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  overflow-x: auto;
  border-bottom: 1px solid #202630;
  background: #0a0f15;
}

.design-production-tools > i {
  flex: 1 1 auto;
}

.design-production-tool-entry {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
}

.design-production-tool-entry > button:first-child {
  border-radius: 3px 0 0 3px;
}

.design-production-tools .design-production-quality-action {
  width: 30px;
  padding: 0;
  border-left: 0;
  border-radius: 0 3px 3px 0;
  color: #f1c36f;
  background: #241d12;
  font-size: 8px;
}

.design-production-tools .design-production-quality-action:hover,
.design-production-tools .design-production-quality-action:focus-visible {
  color: #fff;
  border-color: #b9852d;
  background: #6d4c17;
}

.design-production-tools button {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #303744;
  border-radius: 3px;
  color: #cbd1da;
  background: #111720;
  font-size: 9px;
}

.design-production-tools button span,
.design-production-tools button em {
  display: block;
  line-height: 1.1;
}

.design-production-tools button em {
  margin-top: 2px;
  color: #707b89;
  font-size: 7px;
  font-style: normal;
}

.design-production-tools button.is-production em {
  color: #76cbae;
}

.design-production-tools button.is-internal em {
  color: #e8b766;
}

.design-production-tools button.primary {
  border-color: #343ad0;
  color: #fff;
  background: #1f23ab;
}

.design-production-canvas {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  background-color: #070b10;
  background-image: linear-gradient(45deg, rgba(255,255,255,.012) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.012) 25%, transparent 25%);
  background-size: 24px 24px;
}

.design-production-preview {
  position: absolute;
  inset: 18px;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.design-production-preview img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.38));
}

.design-production-preview > span {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(61,69,82,.75);
  border-radius: 3px;
  background: rgba(9,13,19,.9);
}

.design-production-preview strong {
  color: #f3f5f8;
  font-size: 10px;
}

.design-production-preview em {
  color: #8a93a0;
  font-size: 8px;
  font-style: normal;
}

.design-production-inline-compare {
  position: absolute;
  inset: 14px;
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr) 36px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #303744;
  border-radius: 4px;
  background: #090e14;
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
}

.design-production-inline-compare > header {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 30px minmax(120px, 1fr) 30px;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-bottom: 1px solid #252c36;
}

.design-production-inline-compare label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.design-production-inline-compare label span {
  color: #717b89;
  font-size: 7px;
}

.design-production-inline-compare select,
.design-production-inline-compare button {
  min-width: 0;
  height: 28px;
  border: 1px solid #303744;
  border-radius: 3px;
  color: #dfe3e9;
  background: #111720;
  font-size: 8px;
}

.design-production-compare-canvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #05080c;
}

.design-production-compare-canvas > img,
.design-production-compare-right,
.design-production-compare-right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.design-production-compare-right {
  overflow: hidden;
  clip-path: inset(0 0 0 var(--compare-position));
}

.design-production-compare-canvas > i {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--compare-position);
  width: 1px;
  background: #f4f6ff;
  box-shadow: 0 0 0 1px rgba(31,35,171,.8), 0 0 18px rgba(119,124,255,.7);
}

.design-production-compare-canvas > span {
  position: absolute;
  z-index: 3;
  bottom: 10px;
  padding: 5px 7px;
  border: 1px solid rgba(61,69,82,.8);
  border-radius: 2px;
  color: #eef1f5;
  background: rgba(7,11,16,.84);
  font-size: 8px;
}

.design-production-compare-canvas > span.is-left { left: 10px; }
.design-production-compare-canvas > span.is-right { right: 10px; }

.design-production-inline-compare > footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid #252c36;
}

.design-production-inline-compare input[type="range"] {
  width: 100%;
  accent-color: #686dff;
}

.design-production-inline-compare output {
  color: #aeb5ff;
  font-size: 8px;
  text-align: right;
}

.design-production-review > div:first-child nav {
  display: flex;
  gap: 5px;
}

.design-production-lineage {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 92px;
  padding: 8px 12px;
  border-top: 1px solid #202630;
  background: #090e14;
}

.design-production-lineage > div {
  display: grid;
  gap: 3px;
}

.design-production-lineage > div span {
  color: #777cff;
  font-size: 7px;
}

.design-production-lineage > div strong {
  color: #e6eaf0;
  font-size: 10px;
}

.design-production-lineage > div em {
  color: #6f7987;
  font-size: 8px;
  font-style: normal;
}

.design-production-lineage nav {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
}

.design-production-lineage nav button {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(92px, 1fr);
  flex: 0 0 172px;
  height: 66px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid #2d3541;
  border-radius: 3px;
  background: #0d131b;
}

.design-production-lineage nav button.is-selected {
  border-color: #686dff;
  box-shadow: 0 0 0 1px #343ad0;
}

.design-production-lineage nav img {
  width: 58px;
  height: 58px;
  object-fit: cover;
}

.design-production-lineage nav span {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 2px 6px;
  text-align: left;
}

.design-production-lineage nav b,
.design-production-lineage nav strong,
.design-production-lineage nav em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.design-production-lineage nav b {
  color: #777cff;
  font-size: 7px;
  font-weight: 600;
}

.design-production-lineage nav strong {
  color: #f0f2f5;
  font-size: 8px;
}

.design-production-lineage nav em {
  color: #7d8794;
  font-size: 7px;
  font-style: normal;
}

.design-production-lineage nav button[data-task-status="failed"] {
  border-color: rgba(231, 95, 110, .55);
}

.design-production-lineage nav button[data-task-status="queued"],
.design-production-lineage nav button[data-task-status="running"],
.design-production-lineage nav button[data-task-status="uncertain"] {
  border-color: rgba(232, 183, 102, .6);
}

.design-production-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 420px;
  text-align: center;
}

.design-production-empty span {
  color: #777cff;
  font-size: 8px;
}

.design-production-empty strong {
  color: #f3f5f8;
  font-size: 20px;
}

.design-production-empty p {
  color: #727c89;
  font-size: 10px;
  line-height: 1.7;
}

.design-production-empty button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #343ad0;
  border-radius: 3px;
  color: #fff;
  background: #1f23ab;
}

.design-production-stage > footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  border-top: 1px solid #202630;
  color: #7e8794;
  background: #090e14;
  font-size: 8px;
}

.design-production-stage > footer strong {
  color: #cfd5dd;
  font-weight: 500;
}

.design-production-stage > footer em {
  margin-left: auto;
  color: #777cff;
  font-style: normal;
}

.design-production-properties {
  overflow-y: auto;
}

.design-production-side-tabs {
  position: sticky;
  z-index: 5;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 7px;
  border-bottom: 1px solid #202630;
  background: #0a0f15;
}

.design-production-side-tabs button {
  height: 30px;
  border: 1px solid #2d3541;
  border-radius: 3px;
  color: #8993a0;
  background: #111720;
  font-size: 9px;
}

.design-production-side-tabs button.active {
  border-color: #4a50de;
  color: #fff;
  background: #1f23ab;
}

.design-production-assistant {
  display: grid;
  grid-template-rows: auto auto minmax(120px, 1fr) auto auto;
  min-height: 100%;
  background: #0a0f15;
}

.design-production-assistant > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #202630;
}

.design-production-assistant > header div {
  display: grid;
  gap: 3px;
}

.design-production-assistant > header span,
.design-production-assistant-current small {
  color: #777cff;
  font-size: 7px;
}

.design-production-assistant > header strong {
  color: #eef1f5;
  font-size: 11px;
}

.design-production-assistant > header em {
  color: #7d8794;
  font-size: 8px;
  font-style: normal;
}

.design-production-assistant > header em[data-mode="ai"] {
  color: #69c6a4;
}

.design-production-assistant-current {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  margin: 10px 12px 0;
  padding: 6px;
  border: 1px solid #303744;
  border-radius: 3px;
  background: #0d131b;
}

.design-production-assistant-current[data-current="true"] {
  border-color: #454bd5;
}

.design-production-assistant-current img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  background: #05080c;
}

.design-production-assistant-current span {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.design-production-assistant-current strong,
.design-production-assistant-current em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.design-production-assistant-current strong {
  color: #e8ebf0;
  font-size: 9px;
}

.design-production-assistant-current em,
.design-production-assistant-empty span {
  color: #77818e;
  font-size: 8px;
  font-style: normal;
}

.design-production-assistant-empty {
  display: grid;
  gap: 4px;
  margin: 10px 12px 0;
  padding: 10px;
  border: 1px solid #2b323d;
  background: #0d131b;
}

.design-production-assistant-empty strong {
  color: #dfe3e9;
  font-size: 9px;
}

.design-production-assistant-thread {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 120px;
  padding: 10px 12px;
  overflow-y: auto;
}

.design-production-assistant-thread .canvas-assistant-message {
  padding: 9px 10px;
}

.design-production-assistant-thread .canvas-assistant-assets {
  grid-template-columns: 1fr;
}

.design-production-assistant-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 7px;
}

.design-production-assistant-results button {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 3px;
  border: 1px solid #303744;
  background: #0a0f15;
}

.design-production-assistant-results > article {
  min-width: 0;
  border: 1px solid #303744;
  background: #0a0f15;
}

.design-production-assistant-results > article > button {
  width: 100%;
  border: 0;
}

.design-production-assistant-results footer,
.design-production-assistant-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  border-top: 1px solid #252c36;
}

.design-production-assistant-results footer button,
.design-production-assistant-result-actions button {
  min-height: 24px;
  flex: 1 1 auto;
  padding: 0 6px;
  border: 1px solid #343d4a;
  background: #131a24;
  color: #cbd1db;
  font-size: 7px;
  cursor: pointer;
}

.design-production-assistant-results footer button:first-of-type {
  border-color: #4a50de;
  background: #1f23ab;
  color: #fff;
}

.design-production-assistant-results footer em {
  align-self: center;
  padding: 0 3px;
  color: #72c9a9;
  font-size: 7px;
  font-style: normal;
}

.design-production-assistant-result-actions {
  margin-top: 7px;
  padding: 7px 0 0;
}

.design-production-assistant-results img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #05080c;
}

.design-production-assistant-results span {
  overflow: hidden;
  color: #aeb6c1;
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.design-production-assistant-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid #202630;
}

.design-production-assistant-actions button {
  min-width: 0;
  height: 28px;
  padding: 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 8px;
}

.design-production-assistant-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid #202630;
  background: #090e14;
}

.design-production-assistant-composer textarea {
  min-width: 0;
  min-height: 66px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid #303744;
  border-radius: 3px;
  color: #edf0f4;
  background: #101720;
  font: inherit;
  font-size: 9px;
  line-height: 1.55;
}

.design-production-assistant-composer textarea:focus {
  outline: 1px solid #686dff;
  border-color: #686dff;
}

.design-production-assistant-composer button {
  border-color: #454bd5;
  color: #fff;
  background: #1f23ab;
}

.design-production-assistant-composer button:disabled,
.design-production-assistant-composer textarea:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.design-production-properties > header {
  display: grid;
  grid-template-columns: 1fr auto;
}

.design-production-properties > header span {
  grid-column: 1 / -1;
}

.design-production-properties > header em {
  color: #7d8794;
  font-size: 8px;
  font-style: normal;
}

.design-production-properties > section {
  padding: 14px 16px;
  border-bottom: 1px solid #202630;
}

.design-production-review[data-quality="pass"] {
  box-shadow: inset 3px 0 0 #56b693;
}

.design-production-review[data-quality="warn"] {
  box-shadow: inset 3px 0 0 #d6a752;
}

.design-production-review[data-quality="blocked"] {
  box-shadow: inset 3px 0 0 #e75f6e;
}

.design-production-quality-gate {
  box-shadow: inset 3px 0 0 #d5a94d;
}

.design-production-quality-gate[data-status="pass"] {
  box-shadow: inset 3px 0 0 #56b693;
}

.design-production-quality-gate > p {
  margin: 0 0 10px;
  color: #7e8794;
  font-size: 8px;
  line-height: 1.55;
}

.design-production-quality-list {
  display: grid;
  gap: 5px;
}

.design-production-properties .design-production-quality-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 7px 8px;
  border: 1px solid #2a303a;
  border-radius: 3px;
  background: #0d1219;
}

.design-production-quality-list article > div {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.design-production-quality-list article strong {
  color: #dce1e8;
  font-size: 8px;
}

.design-production-quality-list article em {
  color: #e7b65d;
  font-size: 7px;
  font-style: normal;
}

.design-production-quality-list article[data-status="pass"] em {
  color: #6dc6a5;
}

.design-production-quality-list article[data-status="no-results"] em {
  color: #9aa4b3;
}

.design-production-properties .design-production-quality-list article p {
  margin: 0;
  padding: 0;
  color: #7b8490;
  font-size: 7px;
  line-height: 1.45;
}

.design-production-quality-list article p small {
  display: block;
  margin-top: 3px;
  color: #aeb5bf;
  font-size: 7px;
}

.design-production-quality-list article nav {
  display: flex;
  align-self: center;
  gap: 4px;
}

.design-production-quality-list article button {
  align-self: center;
  min-height: 24px;
  padding: 0 7px;
  border-color: #604c29;
  color: #efc36e;
  background: #1b1710;
  font-size: 7px;
}

.design-production-review > footer {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 6px;
  margin-top: 12px;
}

.design-production-review > footer button {
  min-height: 30px;
}

.design-production-review > footer button.primary {
  border-color: #343ad0;
  color: #fff;
  background: #1f23ab;
}

.design-production-review > footer button.danger {
  border-color: rgba(231, 95, 110, .45);
  color: #f08a95;
}

.design-production-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px 16px !important;
  border-left: 3px solid #686dff;
  background: #0c121a;
}

.design-production-task > div {
  display: grid !important;
  justify-content: initial !important;
  gap: 3px !important;
  margin: 0 !important;
}

.design-production-task span {
  color: #777cff;
  font-size: 7px;
}

.design-production-task strong {
  color: #e2e6ec;
  font-size: 10px;
}

.design-production-task em {
  color: #8a94a1;
  font-size: 8px;
  font-style: normal;
}

.design-production-task progress,
.design-production-task p {
  grid-column: 1 / -1;
  width: 100%;
}

.design-production-task progress {
  height: 4px;
  accent-color: #686dff;
}

.design-production-task p {
  margin: 0;
  color: #e18b94;
  font-size: 8px;
  line-height: 1.5;
}

.design-production-task > button {
  align-self: center;
  padding: 0 8px;
}

.design-production-task-history > div {
  margin-bottom: 8px !important;
}

.design-production-task-history > div em {
  color: #777cff;
  font-size: 8px;
  font-style: normal;
}

.design-production-task-history nav {
  display: grid;
  gap: 4px;
}

.design-production-task-history nav button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px;
  border-color: #252c36;
  text-align: left;
  background: #0c1219;
}

.design-production-task-history nav button.is-selected {
  border-color: #5b61ed;
  box-shadow: inset 2px 0 0 #777cff;
}

.design-production-task-history nav button[data-status="failed"] {
  border-color: rgba(231, 95, 110, .45);
}

.design-production-task-history nav button[data-status="uncertain"],
.design-production-task-history nav button[data-status="queued"],
.design-production-task-history nav button[data-status="running"] {
  border-color: rgba(232, 183, 102, .45);
}

.design-production-task-history nav img,
.design-production-task-history nav i {
  width: 38px;
  height: 38px;
  border-radius: 2px;
  object-fit: cover;
  background: #151b24;
}

.design-production-task-history nav span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.design-production-task-history nav strong,
.design-production-task-history nav em,
.design-production-task-history nav small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.design-production-task-history nav strong {
  color: #e1e5eb;
  font-size: 8px;
}

.design-production-task-history nav em,
.design-production-task-history nav small {
  color: #727c89;
  font-size: 7px;
  font-style: normal;
}

.design-production-task-history nav b {
  padding-right: 4px;
  color: #9ca5b1;
  font-size: 7px;
  font-weight: 500;
}

.design-production-task-history nav button[data-status="succeeded"] b {
  color: #6dc6a5;
}

.design-production-task-history nav button[data-status="failed"] b {
  color: #ef7b87;
}

.design-production-task-history > footer {
  margin-top: 7px;
}

.design-production-task-history > footer button {
  width: 100%;
}

.design-production-task-detail {
  display: grid;
  gap: 10px;
  border-color: #4249bb !important;
  background: #0a101a !important;
  box-shadow: inset 2px 0 0 #686dff;
}

.design-production-task-detail > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0 0 8px;
  border-bottom: 1px solid #252d39;
}

.design-production-task-detail > header div {
  display: grid;
  gap: 2px;
}

.design-production-task-detail > header span,
.design-production-task-detail-params > span {
  color: #777cff;
  font-size: 7px;
  font-weight: 700;
}

.design-production-task-detail > header strong {
  color: #eef1f5;
  font-size: 11px;
}

.design-production-task-detail > header button {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 15px;
}

.design-production-task-state {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px !important;
  margin: 0 !important;
}

.design-production-task-state strong {
  color: #dfe3ea;
  font-size: 9px;
}

.design-production-task-state em {
  color: #747f8d;
  font-size: 7px;
  font-style: normal;
}

.design-production-task-state progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  accent-color: #686dff;
}

.design-production-task-detail > dl,
.design-production-task-params dl {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 5px 8px;
  margin: 0;
}

.design-production-task-detail dd,
.design-production-task-params dd {
  overflow-wrap: anywhere;
}

.design-production-task-error {
  margin: 0 !important;
  padding: 7px;
  border: 1px solid rgba(231, 95, 110, .42);
  color: #f09aa3 !important;
  background: rgba(95, 25, 34, .22);
  line-height: 1.5;
}

.design-production-task-usage {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 3px 8px !important;
  margin: 0 !important;
  padding: 8px;
  border: 1px solid #2a3341;
  background: #0d141e;
}

.design-production-task-usage > span {
  grid-row: 1 / 3;
  color: #7c8798;
  font-size: 8px;
}

.design-production-task-usage strong {
  color: #dce1e8;
  font-size: 9px;
}

.design-production-task-usage em {
  color: #7f8997;
  font-size: 8px;
  font-style: normal;
  line-height: 1.45;
}

.design-production-task-usage[data-status="settled"] {
  border-color: rgba(77, 188, 145, .42);
}

.design-production-task-usage[data-status="released"] {
  border-color: rgba(122, 135, 154, .42);
}

.design-production-task-usage[data-status="uncertain"] {
  border-color: rgba(231, 95, 110, .52);
  background: rgba(95, 25, 34, .18);
}

.design-production-task-usage > button {
  grid-column: 2;
  justify-self: start;
}

.image-operation-usage-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(680px, calc(100vw - 40px));
}

.image-operation-usage-panel > main {
  display: grid;
  gap: 18px;
  padding: 20px;
  overflow: auto;
}

.image-operation-usage-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.image-operation-usage-summary article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #293241;
  background: #111923;
}

.image-operation-usage-summary article.is-wide {
  grid-column: 1 / -1;
}

.image-operation-usage-summary span,
.image-operation-usage-panel ol {
  color: #7f8997;
  font-size: 10px;
}

.image-operation-usage-summary strong {
  overflow-wrap: anywhere;
  color: #f1f3f7;
  font-size: 14px;
}

.image-operation-usage-panel ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  line-height: 1.55;
}

.image-operation-usage-panel > main > label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #d9dee7;
  font-size: 11px;
  line-height: 1.5;
}

.design-production-task-assets {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px !important;
  margin: 0 !important;
}

.design-production-task-assets button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 7px;
  min-width: 0;
  min-height: 48px;
  padding: 3px;
  text-align: left;
}

.design-production-task-assets img {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  object-fit: cover;
}

.design-production-task-assets span {
  color: #777cff;
  font-size: 7px;
}

.design-production-task-assets strong {
  overflow: hidden;
  color: #dce1e8;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.design-production-task-params {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding-top: 8px;
  border-top: 1px solid #252d39;
}

.design-production-task-detail > footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 8px;
  border-top: 1px solid #252d39;
}

.design-production-task-detail > footer button {
  flex: 1 1 92px;
}

@media (max-width: 1180px) {
  .design-production-studio {
    grid-template-columns: 184px minmax(0, 1fr) 292px;
  }

  .design-production-tools button {
    padding: 0 7px;
  }
}

.design-production-properties > section > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.design-production-properties > section > div:first-child > span {
  color: #f0f2f5;
  font-size: 10px;
  font-weight: 700;
}

.design-production-properties dl {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px 10px;
  margin: 0;
  font-size: 9px;
}

.design-production-properties dt {
  color: #6f7885;
}

.design-production-properties dd {
  margin: 0;
  color: #cbd1d9;
}

.design-production-properties article,
.design-production-properties section > p {
  display: grid;
  gap: 3px;
  margin: 0 0 7px;
  color: #838d9a;
  font-size: 9px;
}

.design-production-properties article strong {
  color: #dce1e7;
  font-size: 9px;
}

.design-production-palette {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  margin: 0 !important;
}

.design-production-palette i {
  width: 32px;
  height: 32px;
  border: 1px solid #3a414d;
  border-radius: 3px;
  background: var(--swatch);
}

.design-production-pattern-asset {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px;
  text-align: left;
}

.design-production-pattern-asset img {
  width: 48px;
  height: 48px;
  border: 1px solid #353d49;
  border-radius: 2px;
  object-fit: cover;
}

.design-production-pattern-asset span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.design-production-pattern-asset strong,
.design-production-pattern-asset em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.design-production-pattern-asset strong {
  color: #e7eaf0;
  font-size: 9px;
}

.design-production-pattern-asset em {
  color: #66cdaa;
  font-size: 8px;
  font-style: normal;
}

.design-production-properties > footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 14px 16px;
}

.design-production-properties > footer button {
  min-height: 32px;
}

.pattern-repeat-modal {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: grid;
  place-items: center;
  padding: 24px;
}

.pattern-repeat-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, .86);
  backdrop-filter: blur(9px);
}

.pattern-repeat-modal > section {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1060px, calc(100vw - 48px));
  max-height: min(820px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid #3a4351;
  border-radius: 6px;
  background: #090f16;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .72);
}

.pattern-repeat-modal header,
.pattern-repeat-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #242c37;
  background: #0c131c;
}

.pattern-repeat-modal footer {
  justify-content: flex-end;
  border-top: 1px solid #242c37;
  border-bottom: 0;
}

.pattern-repeat-modal footer > span {
  margin-right: auto;
  color: #737e8c;
  font-size: 9px;
}

.pattern-repeat-modal header > div {
  display: grid;
  gap: 5px;
}

.pattern-repeat-modal header span,
.pattern-repeat-result > div > span,
.pattern-repeat-result-meta > span {
  color: #777fff;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pattern-repeat-modal h2 {
  margin: 0;
  color: #f3f5f8;
  font-size: 18px;
}

.pattern-repeat-modal button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #37404d;
  border-radius: 3px;
  color: #ccd2dc;
  background: #131a24;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.pattern-repeat-modal button.primary {
  border-color: #444ae0;
  color: #fff;
  background: #1f23ab;
}

.pattern-repeat-modal button:disabled {
  opacity: .5;
  cursor: wait;
}

.pattern-repeat-modal main {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.pattern-repeat-controls {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  overflow-y: auto;
  border-right: 1px solid #242c37;
  background: #0a1017;
}

.pattern-repeat-controls label {
  display: grid;
  gap: 6px;
  color: #858f9e;
  font-size: 9px;
}

.pattern-repeat-controls input,
.pattern-repeat-controls select {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid #333c49;
  border-radius: 3px;
  color: #e4e8ee;
  background: #111821;
  font-size: 10px;
}

.pattern-repeat-source {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 68px;
  padding: 5px;
  border: 1px solid #2b3440;
  background: #0d141d;
}

.pattern-repeat-source img {
  width: 58px;
  height: 58px;
  object-fit: cover;
}

.pattern-repeat-source div {
  display: grid;
  gap: 4px;
}

.pattern-repeat-source strong {
  color: #e4e8ee;
  font-size: 10px;
}

.pattern-repeat-source span {
  color: #75808e;
  font-size: 8px;
}

.pattern-repeat-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.pattern-repeat-upload strong {
  display: grid;
  place-items: center;
  min-height: 36px;
  border: 1px dashed #3d4755;
  color: #bec6d1;
  background: #101720;
  cursor: pointer;
}

.pattern-repeat-rights {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center;
}

.pattern-repeat-rights input {
  width: 15px;
  min-height: 15px;
}

.pattern-repeat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.pattern-repeat-mode {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  padding: 10px;
  border: 1px solid rgba(86, 184, 149, .35);
  background: rgba(40, 108, 82, .1);
}

.pattern-repeat-mode span {
  grid-column: 1 / -1;
  color: #798391;
  font-size: 8px;
}

.pattern-repeat-mode strong {
  color: #dbe0e7;
  font-size: 10px;
}

.pattern-repeat-mode em {
  color: #66cdaa;
  font-size: 8px;
  font-style: normal;
}

.pattern-colorway-controls {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid #303947;
  background: #0d141d;
}

.pattern-colorway-controls > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.pattern-colorway-controls > div:first-child span {
  color: #dce1e8;
  font-size: 10px;
  font-weight: 700;
}

.pattern-colorway-controls > div:first-child em,
.pattern-colorway-controls small {
  color: #778290;
  font-size: 8px;
  font-style: normal;
  line-height: 1.5;
}

.pattern-colorway-controls > div:nth-child(2) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.pattern-colorway-controls label {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 5px;
}

.pattern-colorway-controls input[type="color"] {
  width: 28px;
  min-height: 28px;
  padding: 2px;
}

.pattern-colorway-controls input[type="text"] {
  min-height: 28px;
  padding: 0 6px;
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.pattern-repeat-controls > p {
  min-height: 16px;
  margin: 0;
  color: #ff8e98;
  font-size: 9px;
}

.pattern-repeat-result {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 440px;
  padding: 22px;
  overflow: hidden;
  background-color: #060a0f;
  background-image: linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.018) 25%, transparent 25%);
  background-size: 20px 20px;
}

.pattern-repeat-result > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.pattern-result-versions {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: grid;
  gap: 7px;
  max-width: min(360px, calc(100% - 390px));
  padding: 9px;
  border: 1px solid rgba(71, 81, 96, .86);
  background: rgba(8, 13, 19, .94);
}

.pattern-result-versions > span {
  color: #8d96a3;
  font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pattern-result-versions nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.pattern-result-versions button {
  position: relative;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  min-height: 54px;
  padding: 2px;
  border-color: #343d49;
}

.pattern-result-versions button.is-active {
  border-color: #7479ff;
  box-shadow: inset 0 0 0 1px #7479ff;
}

.pattern-result-versions img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pattern-result-versions em {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 2px 3px;
  color: #f1f3f6;
  background: rgba(5, 8, 12, .86);
  font-size: 7px;
  font-style: normal;
}

.pattern-repeat-result > div:not(.pattern-repeat-result-meta, .pattern-result-versions) {
  display: grid;
  justify-items: center;
  gap: 9px;
  max-width: 320px;
  text-align: center;
}

.pattern-repeat-result > div > strong {
  color: #e9edf2;
  font-size: 17px;
}

.pattern-repeat-result > div > p {
  margin: 0;
  color: #737e8c;
  font-size: 10px;
  line-height: 1.65;
}

.pattern-repeat-result-meta {
  position: absolute;
  right: 30px;
  bottom: 30px;
  width: min(330px, calc(100% - 60px));
  padding: 13px;
  border: 1px solid rgba(71, 81, 96, .86);
  background: rgba(8, 13, 19, .94);
}

.pattern-repeat-result-meta > strong {
  display: block;
  margin: 7px 0 11px;
  color: #f0f2f5;
  font-size: 11px;
}

.pattern-result-palette {
  display: flex;
  gap: 4px;
  margin: -3px 0 10px;
}

.pattern-result-palette i {
  width: 22px;
  height: 13px;
  border: 1px solid rgba(255,255,255,.16);
  background: var(--pattern-color);
}

.pattern-repeat-result-meta dl {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 6px 9px;
  margin: 0;
  font-size: 8px;
}

.pattern-repeat-result-meta dt {
  color: #707b89;
}

.pattern-repeat-result-meta dd {
  margin: 0;
  overflow: hidden;
  color: #ccd2da;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pattern-repeat-result-meta nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

@media (max-width: 820px) {
  .pattern-repeat-modal main {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .pattern-repeat-controls {
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid #242c37;
  }

  .pattern-repeat-result {
    min-height: 420px;
  }

  .pattern-result-versions {
    right: 22px;
    bottom: 190px;
    max-width: none;
  }
}

.canvas-commandbar,
.media-commandbar {
  border-bottom-color: #202630;
  background: #090e14;
}

#imageCanvasWorkbench {
  grid-template-rows: 44px 76px auto minmax(0, 1fr) 24px;
}

.image-canvas-asset-context {
  padding: 6px 10px;
  border-bottom-color: #202630;
  background: #080d13;
}

.image-asset-context-toolbar {
  min-height: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.image-asset-context-current {
  min-height: 38px;
  border-right-color: #242a34;
}

.image-asset-context-menu > summary,
.image-asset-context-review,
.image-asset-quick-trigger,
.image-asset-context-library {
  height: 30px;
  border-color: #303744;
  border-radius: 4px;
  background: #111720;
}

.image-asset-quick-trigger {
  border-color: #343ad0;
  background: #1f23ab;
}

.image-canvas-studio {
  grid-template-columns: 232px minmax(0, 1fr) 352px;
  background: #070b10;
}

.image-canvas-studio:has(.image-studio-empty) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.image-studio-filmstrip {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-right: 1px solid #202630;
  background: #0a0f15;
}

.image-studio-filmstrip header {
  min-height: 46px;
  padding: 8px 10px;
  border-bottom: 1px solid #202630;
}

.image-studio-filmstrip header > div:first-child {
  display: grid;
  gap: 3px;
}

.image-studio-filmstrip header strong {
  font-size: 11px;
}

.image-studio-filmstrip-actions {
  gap: 3px;
}

.image-studio-filmstrip-actions > span {
  display: none;
}

.image-studio-filmstrip-actions button {
  height: 24px;
  padding: 0 6px;
  font-size: 8px;
}

.image-studio-filmstrip > div {
  display: grid;
  align-content: start;
  gap: 0;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
}

.image-studio-task-queue {
  display: grid;
  gap: 5px;
  margin: 0 0 8px;
  padding: 7px;
  border: 1px solid #252d39;
  border-radius: 4px;
  background: #0d131b;
}

.image-studio-task-queue > header {
  display: flex;
  min-height: 0;
  align-items: end;
  justify-content: space-between;
  padding: 0 1px 3px;
  border: 0;
  background: transparent;
}

.image-studio-task-queue > header div {
  display: grid;
  gap: 2px;
}

.image-studio-task-queue > header span {
  color: #777cff;
  font: 750 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.image-studio-task-queue > header strong {
  color: #e3e7ed;
  font-size: 9px;
}

.image-studio-task-queue > header em {
  color: #7d8796;
  font-size: 8px;
  font-style: normal;
}

.image-studio-task-queue > div {
  display: grid;
  gap: 4px;
}

.image-studio-task-queue > div > button {
  position: relative;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 7px;
  width: 100%;
  min-height: 46px;
  padding: 7px;
  border: 1px solid #29313e;
  border-radius: 3px;
  background: #111822;
  color: #dce1e8;
  text-align: left;
  cursor: pointer;
}

.image-studio-task-queue > div > button:hover,
.image-studio-task-queue > div > button.is-current {
  border-color: #5157e4;
  background: rgba(31, 35, 171, 0.2);
}

.image-studio-task-queue > div > button > i {
  grid-row: 1 / 3;
  width: 5px;
  height: 28px;
  border-radius: 1px;
  background: #5d6471;
}

.image-studio-task-queue > div > button[data-status="queued"] > i,
.image-studio-task-queue > div > button[data-status="running"] > i { background: #666cff; }
.image-studio-task-queue > div > button[data-status="failed"] > i { background: #ed626a; }
.image-studio-task-queue > div > button[data-status="uncertain"] > i { background: #e3ae4f; }

.image-studio-task-queue > div > button > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.image-studio-task-queue > div > button > span strong,
.image-studio-task-queue > div > button > span em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image-studio-task-queue > div > button > span strong { font-size: 8px; }
.image-studio-task-queue > div > button > span em { color: #737d8b; font-size: 7px; font-style: normal; }
.image-studio-task-queue > div > button > b { color: #9ca5b3; font-size: 7px; font-weight: 800; }
.image-studio-task-queue > div > button > progress {
  grid-column: 2 / 4;
  width: 100%;
  height: 3px;
  border: 0;
  accent-color: #666cff;
}

.image-studio-filmstrip > div > button {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 64px;
  padding: 5px;
  border: 1px solid transparent;
  border-bottom-color: #1c222b;
  border-radius: 3px;
  text-align: left;
}

.image-studio-filmstrip > div > button:hover {
  border-color: #343b47;
  background: #111821;
}

.image-studio-filmstrip > div > button.is-selected {
  border-color: #4a50de;
  background: rgba(31, 35, 171, 0.22);
  box-shadow: inset 3px 0 0 #7378ff;
}

.image-studio-filmstrip > div > button > img {
  width: 52px;
  height: 52px;
  border-radius: 2px;
  background: #05080c;
  object-fit: cover;
}

.image-studio-filmstrip > div > button > span {
  position: static;
  display: grid;
  min-width: 0;
  gap: 5px;
  inset: auto;
  padding: 0;
  background: transparent;
}

.image-studio-filmstrip > div > button > span strong,
.image-studio-filmstrip > div > button > span em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image-studio-filmstrip > div > button > span strong {
  color: #dfe3e9;
  font-size: 9px;
}

.image-studio-filmstrip > div > button > span em {
  color: #717b89;
  font-size: 8px;
  font-style: normal;
}

.image-studio-filmstrip > div > button > b,
.image-studio-filmstrip > div > button > i {
  top: 8px;
  right: 8px;
  left: auto;
}

.image-studio-stage {
  grid-template-rows: minmax(0, 1fr) auto;
  border-right-color: #202630;
  background: #070b10;
}

.image-studio-output-dock {
  display: grid;
  gap: 8px;
  max-height: 252px;
  padding: 8px;
  overflow: auto;
  border-top: 1px solid #202630;
  background: #090e14;
}

.image-studio-output-dock:empty { display: none; }

.image-studio-result-strip {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.image-studio-result-strip > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.image-studio-result-strip > header > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.image-studio-result-strip > header span {
  color: #777cff;
  font: 750 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.image-studio-result-strip > header strong { color: #e3e7ed; font-size: 10px; }
.image-studio-result-strip > header em { color: #737d8b; font-size: 8px; font-style: normal; }

.image-studio-result-strip > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 6px;
}

.image-studio-result-strip button {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 58px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid #29313e;
  border-radius: 3px;
  background: #0e151e;
  color: #dce1e8;
  text-align: left;
  cursor: pointer;
}

.image-studio-result-strip button:hover,
.image-studio-result-strip button.is-selected {
  border-color: #5157e4;
  background: rgba(31, 35, 171, 0.22);
}

.image-studio-result-strip button.is-historical { opacity: 0.68; }
.image-studio-result-strip img { width: 48px; height: 48px; border-radius: 2px; background: #05080c; object-fit: cover; }
.image-studio-result-strip button > span { display: grid; min-width: 0; gap: 4px; }
.image-studio-result-strip button strong,
.image-studio-result-strip button em { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.image-studio-result-strip button strong { font-size: 8px; }
.image-studio-result-strip button em { color: #778190; font-size: 7px; font-style: normal; }
.image-studio-result-strip button > b { position: absolute; top: 4px; right: 4px; color: #e0b25d; font-size: 7px; }

.image-studio-historical-actions {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  inset: 12px 12px auto;
  padding: 10px 12px;
  border: 1px solid rgba(227, 174, 79, 0.5);
  border-radius: 4px;
  background: rgba(24, 19, 11, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.image-studio-historical-actions > div { display: grid; min-width: 0; gap: 3px; }
.image-studio-historical-actions span { color: #e3ae4f; font: 750 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.image-studio-historical-actions strong { color: #f1e4c9; font-size: 10px; }
.image-studio-historical-actions em { color: #a99470; font-size: 8px; font-style: normal; }
.image-studio-historical-actions button,
.image-asset-context-toolbar.is-historical > button {
  min-height: 30px;
  border: 1px solid #343ad0;
  border-radius: 4px;
  background: #1f23ab;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.image-studio-preview.is-historical .image-studio-preview-button { cursor: default; }
.image-studio-preview.is-historical .image-studio-preview-button img,
.image-studio-filmstrip > div > button.is-historical img { filter: saturate(0.55) brightness(0.78); }

.image-studio-overview.is-historical > p {
  margin: 0;
  padding: 9px 10px;
  border-left: 2px solid #e3ae4f;
  background: rgba(138, 96, 24, 0.12);
  color: #ab9b7d;
  font-size: 9px;
  line-height: 1.55;
}

.image-asset-context-toolbar.is-historical {
  grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) auto auto;
}

.image-asset-context-stale { display: grid; min-width: 0; gap: 3px; }
.image-asset-context-stale strong,
.image-asset-context-stale span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.image-asset-context-stale strong { color: #e8bd69; font-size: 9px; }
.image-asset-context-stale span { color: #7e8794; font-size: 8px; }

.image-studio-preview {
  background-color: #070b10;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.014) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.014) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.014) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.014) 75%);
}

.image-studio-asset-actions {
  top: 12px;
  right: 12px;
  left: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.image-studio-asset-actions > div {
  pointer-events: auto;
}

.image-studio-asset-actions button {
  height: 30px;
  border-color: #323947;
  border-radius: 4px;
  background: rgba(13, 18, 26, 0.94);
  backdrop-filter: blur(12px);
}

.image-studio-asset-actions button.primary {
  border-color: #343ad0;
  background: #1f23ab;
}

.image-studio-preview-button img {
  max-width: calc(100% - 60px);
  max-height: calc(100% - 96px);
}

.image-studio-preview-meta {
  right: 16px;
  bottom: 14px;
  left: 16px;
}

.image-studio-side {
  border-left: 0;
  background: #0a0f15;
}

.image-studio-overview,
.image-studio-operation > .media-inspector-content {
  padding: 16px;
}

.image-studio-branch-tree {
  border-top-color: #202630;
}

.media-canvas-contextbar .canvas-project-context span,
.image-studio-filmstrip header span,
.image-studio-overview header span,
.image-studio-branch-tree > header span {
  color: #777cff;
}

.media-canvas-contextbar button.active,
.image-view-switch button.active,
.media-commandbar > button,
.media-command-actions button:first-child,
.image-studio-overview-actions button.primary,
.image-studio-empty button:first-child {
  border-color: #343ad0;
  background: #1f23ab;
}

.design-canvas-sidebar,
.media-canvas-main .design-canvas-inspector {
  width: 352px;
  border-left-color: #202630;
  background: #0a0f15;
}

.design-canvas-statusbar {
  min-height: 24px;
  border-top-color: #202630;
  background: #090e14;
}

@media (max-width: 1180px) {
  .image-canvas-studio {
    grid-template-columns: 176px minmax(0, 1fr) 300px;
  }

  .image-studio-filmstrip > div > button {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .image-studio-filmstrip > div > button > img {
    width: 42px;
    height: 48px;
  }

  .workspace-chrome-actions button:not(.workspace-chrome-primary) {
    display: none;
  }

  .workspace-product-nav button {
    padding: 0 8px;
    font-size: 10px;
  }
}

@media (max-width: 760px) {
  .fashion-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 48px 48px minmax(0, 1fr);
    min-height: 100dvh;
  }

  .workspace-chrome {
    grid-row: 1;
    padding: 0 10px;
  }

  .workspace-chrome-brand em,
  .workspace-chrome-brand i,
  .workspace-chrome-actions {
    display: none;
  }

  .workspace-product-nav {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .workspace-product-nav button {
    flex: 0 0 auto;
  }

  .dash-rail {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    height: 48px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #202630;
  }

  .dash-logo,
  .rail-bottom {
    display: none;
  }

  .dash-workspace {
    grid-column: 1;
    grid-row: 3;
    min-height: 720px;
  }

  .canvas-workspace-tabs {
    overflow-x: auto;
  }

  .canvas-workspace-tabs button {
    min-width: 124px;
  }

  .image-canvas-studio {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(420px, 1fr) auto;
  }

  .image-studio-filmstrip {
    display: none;
  }

  .image-studio-side {
    max-height: 260px;
    border-top: 1px solid #202630;
  }
}

/* 2026-08-17: commercial light shell. Keep generation assets prominent while
   moving navigation, editing and review surfaces to a blue-white system. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --rail: #f7f8ff;
  --panel: #ffffff;
  --panel-soft: #f5f7fc;
  --panel-strong: #edf0ff;
  --ink: #151a36;
  --muted: #58627a;
  --subtle: #7b859d;
  --line: #dce1ee;
  --line-strong: #c8cfdf;
  --mint: #1f23ab;
  --mint-strong: #171a82;
  --accent-text: #1f23ab;
  --shadow: 0 12px 34px rgba(31, 35, 79, 0.08);
}

html,
body,
.app-shell,
.main-stage,
.hero-section,
.view-panel {
  background: #ffffff;
  color: var(--ink);
}

.fashion-dashboard {
  grid-template-columns: 168px minmax(0, 1fr);
  background: #f5f7fc;
}

.workspace-chrome {
  border-bottom-color: #dce1ee;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(28, 36, 67, 0.03);
}

.workspace-chrome-mark {
  border-color: #1f23ab;
  box-shadow: inset 0 0 0 5px #ffffff, inset 0 0 0 7px #7378ff;
}

.workspace-chrome-brand strong,
.workspace-product-nav button:hover,
.workspace-chrome-actions button:hover {
  color: #141a35;
}

.workspace-chrome-brand strong {
  white-space: nowrap;
}

.workspace-chrome-brand i {
  background: #dce1ee;
}

.workspace-chrome-brand em,
.workspace-product-nav button,
.workspace-chrome-actions button {
  color: #667087;
}

.workspace-product-nav button:hover,
.workspace-chrome-actions button:hover {
  border-color: #d5daea;
  background: #f2f4fa;
}

.workspace-product-nav button.active,
.workspace-chrome-actions .workspace-chrome-primary {
  border-color: #1f23ab;
  background: #1f23ab;
  color: #ffffff;
  box-shadow: 0 5px 14px rgba(31, 35, 171, 0.18);
}

.dash-rail {
  grid-template-rows: 52px repeat(9, 44px) minmax(0, 1fr) 44px;
  justify-items: stretch;
  padding: 0 10px 10px;
  border-right-color: #dce1ee;
  background: #f7f8ff;
}

.dash-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #171a82;
}

.dash-logo-mark {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 2px solid #1f23ab;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #f7f8ff, inset 0 0 0 6px #7478ff;
}

.dash-logo-label {
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.dash-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #59647a;
  font-size: 14px;
  text-align: left;
}

.dash-icon-glyph {
  display: grid;
  flex: 0 0 20px;
  width: 20px;
  place-items: center;
  color: #79839a;
  font-size: 16px;
}

.dash-icon-label {
  overflow: hidden;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dash-icon.active,
.dash-icon:hover {
  border-color: #1f23ab;
  background: #1f23ab;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(31, 35, 171, 0.18);
}

.dash-icon.active .dash-icon-glyph,
.dash-icon:hover .dash-icon-glyph {
  color: #ffffff;
}

.dash-workspace,
.fashion-dashboard.canvas-mode .dash-workspace,
.fashion-dashboard.canvas-mode.media-workspace-mode .dash-workspace {
  background-color: #f5f7fc;
  background-image:
    linear-gradient(rgba(31, 35, 171, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 35, 171, 0.025) 1px, transparent 1px);
}

.canvas-workspace-shell,
.design-canvas-workbench,
.media-canvas-workbench,
.design-production-studio,
.design-production-stage,
.design-production-assets,
.design-production-properties,
.design-production-assistant,
.image-canvas-studio,
.image-studio-stage,
.image-studio-side,
.media-canvas-main,
.design-canvas-main,
.design-canvas-sidebar,
.media-canvas-main .design-canvas-inspector {
  border-color: #dce1ee;
  background: #ffffff;
  color: #151a36;
}

.canvas-workspace-tabs,
.design-canvas-contextbar,
.media-canvas-contextbar,
.canvas-commandbar,
.media-commandbar,
.design-production-tools,
.design-production-assets > header,
.design-production-properties > header,
.design-production-side-tabs,
.design-production-lineage,
.design-production-stage > footer,
.image-studio-filmstrip,
.image-studio-filmstrip header,
.image-studio-output-dock,
.image-studio-result-strip,
.image-studio-overview,
.image-studio-operation,
.image-studio-branch-tree,
.canvas-sidebar-tabs,
.design-canvas-statusbar {
  border-color: #dce1ee;
  background: #ffffff;
}

.canvas-workspace-tabs button {
  border-right-color: #e0e4ef;
  color: #69738a;
}

.canvas-workspace-tabs button:hover {
  background: #f1f3fa;
  color: #171d3a;
}

.canvas-workspace-tabs button.active {
  border-color: #dce1ee;
  background: #eef0ff;
  color: #1f23ab;
  box-shadow: inset 0 -2px 0 #1f23ab;
}

.canvas-workspace-tabs button.active strong,
.canvas-workspace-tabs button.active span {
  color: #1f23ab;
}

.canvas-project-context strong,
.canvas-command-label strong,
.media-commandbar strong,
.design-production-assets > header strong,
.design-production-properties > header strong,
.design-production-assistant > header strong,
.image-studio-filmstrip header strong,
.image-studio-overview header strong,
.image-studio-branch-tree > header strong,
.canvas-inspector-empty strong,
.design-production-empty strong,
.image-studio-empty > strong,
.image-studio-current-empty > section > strong {
  color: #151a36;
}

.canvas-project-context span,
.canvas-command-label span,
.media-commandbar > div > span,
.design-production-assets > header span,
.design-production-properties > header span,
.design-production-assistant > header span,
.media-canvas-contextbar .canvas-project-context span,
.image-studio-filmstrip header span,
.image-studio-overview header span,
.image-studio-branch-tree > header span {
  color: #1f23ab;
}

.design-view-switch,
.canvas-engine-control > div,
.canvas-mode-switch,
.canvas-view-controls,
.image-view-switch {
  border-color: #d8ddeb;
  background: #f4f6fb;
}

.design-view-switch button,
.canvas-engine-control button,
.canvas-mode-switch button,
.canvas-view-controls button,
.image-view-switch button,
.media-workflow-entry button,
.design-production-assets > header button,
.design-production-properties button,
.design-production-tools button,
.design-production-side-tabs button,
.image-studio-filmstrip-actions button,
.image-studio-asset-actions button,
.image-studio-overview-actions button,
.image-studio-governance button,
.canvas-inspector-actions button {
  border-color: #d3d9e7;
  background: #ffffff;
  color: #4f5a72;
}

.design-view-switch button:hover,
.canvas-engine-control button:hover,
.canvas-mode-switch button:hover,
.canvas-view-controls button:hover,
.image-view-switch button:hover,
.media-workflow-entry button:hover,
.design-production-assets > header button:hover,
.design-production-properties button:hover,
.design-production-tools button:hover {
  border-color: #aeb7d1;
  background: #eef0f8;
  color: #171d3a;
}

.design-view-switch button.active,
.canvas-engine-control button.active,
.canvas-mode-switch button.active,
.image-view-switch button.active,
.design-production-tools button.primary,
.design-production-side-tabs button.active,
.image-studio-asset-actions button.primary,
.image-studio-overview-actions button.primary,
.image-studio-governance button.primary,
.canvas-inspector-actions button.primary,
.media-commandbar .media-command-actions button:first-child,
.canvas-command-actions > button:first-child,
.canvas-command-actions .canvas-generate-image {
  border-color: #1f23ab;
  background: #1f23ab;
  color: #ffffff;
}

.canvas-command-input textarea,
.media-commandbar textarea,
.canvas-assistant-composer textarea,
.design-production-assistant textarea,
.fashion-dashboard input:not([type="range"]):not([type="checkbox"]),
.fashion-dashboard select,
.fashion-dashboard textarea {
  border-color: #cfd6e6;
  background: #ffffff;
  color: #171d3a;
  caret-color: #1f23ab;
}

.canvas-command-input textarea::placeholder,
.media-commandbar textarea::placeholder,
.canvas-assistant-composer textarea::placeholder,
.fashion-dashboard input::placeholder,
.fashion-dashboard textarea::placeholder {
  color: #929bb0;
}

.design-production-canvas,
.design-production-compare-canvas,
.image-studio-preview,
.media-canvas-viewport,
.design-canvas-viewport {
  background-color: #f5f7fc;
  background-image:
    linear-gradient(45deg, rgba(31, 35, 171, 0.025) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(31, 35, 171, 0.025) 25%, transparent 25%);
}

.design-canvas-viewport::before,
.media-canvas-viewport::before {
  background-image:
    radial-gradient(circle, rgba(31, 35, 171, 0.2) 1px, transparent 1.2px);
}

.design-canvas-node,
.media-flow-node,
.design-production-inline-compare,
.design-production-assistant-current,
.design-production-assistant-empty,
.design-production-assistant-results > article,
.design-production-lineage nav button,
.image-studio-task-queue,
.image-studio-task-queue > div > button,
.image-studio-filmstrip > div > button,
.image-studio-result-strip button,
.image-studio-governance,
.image-studio-branch-tree > div > button,
.canvas-assistant-message,
.canvas-inspector-section,
.canvas-inspector-metrics div {
  border-color: #d8deeb;
  background: #ffffff;
  color: #151a36;
  box-shadow: 0 6px 18px rgba(31, 35, 79, 0.06);
}

.design-canvas-node:hover,
.media-flow-node:hover,
.design-production-assets > div > button:hover,
.image-studio-filmstrip > div > button:hover,
.image-studio-branch-tree > div > button:hover {
  border-color: #939dcc;
  background: #f5f6ff;
}

.design-canvas-node.is-selected,
.media-flow-node.is-selected,
.design-production-assets > div > button.is-selected,
.image-studio-filmstrip > div > button.is-selected,
.image-studio-branch-tree > div > button.is-current {
  border-color: #1f23ab;
  background: #eef0ff;
  box-shadow: 0 0 0 1px #1f23ab, 0 8px 22px rgba(31, 35, 171, 0.12);
}

.design-canvas-node-header,
.media-flow-node header,
.design-production-inline-compare > header,
.design-production-inline-compare > footer,
.image-studio-task-queue > header,
.image-studio-result-strip > header,
.image-studio-branch-tree > header {
  border-color: #e0e4ef;
  background: #f8f9fc;
}

.design-canvas-node-title strong,
.media-flow-node header strong,
.design-production-assets button strong,
.design-production-lineage nav strong,
.design-production-assistant-current strong,
.design-production-assistant-empty strong,
.image-studio-task-queue strong,
.image-studio-filmstrip strong,
.image-studio-result-strip strong,
.image-studio-history button strong,
.image-studio-branch-tree button > span strong,
.canvas-assistant-message strong,
.canvas-inspector-head h2,
.canvas-inspector-metrics strong {
  color: #1b213d;
}

.design-canvas-node-body p,
.design-production-assets button em,
.design-production-lineage nav em,
.design-production-assistant-current em,
.design-production-assistant-empty span,
.image-studio-task-queue em,
.image-studio-filmstrip em,
.image-studio-result-strip em,
.image-studio-branch-tree button > span em,
.canvas-assistant-message p,
.canvas-inspector-empty p,
.canvas-inspector-section > p,
.design-production-empty p,
.image-studio-empty > p {
  color: #68728a;
}

.design-production-preview > span,
.image-studio-preview-meta {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(31, 35, 79, 0.08);
}

.design-production-preview strong,
.image-studio-preview-meta strong {
  color: #151a36;
}

.design-production-stage > footer,
.design-canvas-statusbar {
  color: #788299;
}

.design-production-stage > footer strong {
  color: #3f4a63;
}

.toast {
  border-color: #b9c1dc;
  background: #ffffff;
  color: #171d3a;
  box-shadow: 0 14px 34px rgba(31, 35, 79, 0.16);
}

@media (max-width: 1180px) {
  .fashion-dashboard {
    grid-template-columns: 148px minmax(0, 1fr);
  }

  .dash-rail {
    padding-inline: 8px;
  }

  .dash-icon {
    gap: 8px;
    padding-inline: 9px;
  }
}

@media (max-width: 760px) {
  .fashion-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 48px 52px minmax(0, 1fr);
  }

  .dash-rail {
    display: flex;
    gap: 6px;
    height: 52px;
    padding: 6px 8px;
    border-right: 0;
    border-bottom: 1px solid #dce1ee;
    background: #f7f8ff;
  }

  .dash-icon {
    flex: 0 0 auto;
    width: auto;
    min-width: 108px;
    height: 38px;
    padding-inline: 10px;
  }

  .dash-icon-label {
    display: inline;
  }

  .dash-workspace {
    min-height: 680px;
  }
}

/* Light treatment for the asset-first image workspace. */
.image-canvas-asset-context,
.image-asset-context-toolbar {
  border-color: #dce1ee;
  background: #ffffff;
}

.image-asset-context-current {
  border-right-color: #dce1ee;
}

.image-asset-context-current span,
.image-asset-direct-tools button em,
.image-asset-context-menu > div button em,
.image-studio-overview em,
.image-studio-history button em {
  color: #7a8499;
}

.image-asset-context-current strong,
.image-asset-direct-tools button span,
.image-asset-context-menu > summary,
.image-asset-context-menu > div button,
.image-asset-context-review,
.image-studio-overview strong,
.image-studio-history button strong {
  color: #222943;
}

.image-asset-direct-tools {
  border-right-color: #dce1ee;
}

.image-asset-direct-tools button:hover,
.image-asset-context-menu > div button:hover,
.image-asset-context-menu > div button.is-active {
  border-color: #b9c1dc;
  background: #eef0ff;
  color: #1f23ab;
}

.image-asset-context-menu > summary,
.image-asset-context-review,
.image-studio-view-controls,
.image-studio-history button,
.image-studio-overview-actions button,
.image-studio-edit-actions button,
.image-studio-review-actions button {
  border-color: #d3d9e7;
  background: #ffffff;
  color: #4d5870;
}

.image-asset-context-menu[open] > summary,
.image-asset-context-menu > summary:hover,
.image-asset-context-review:hover {
  border-color: #9da8ca;
  background: #f0f2fa;
  color: #1f23ab;
}

.image-asset-context-menu > div {
  border-color: #d3d9e7;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(31, 35, 79, 0.14);
}

.image-asset-context-menu > div button {
  background: transparent;
}

.media-capability-badge {
  border-color: #b8d8cf;
  background: #edf8f4;
  color: #17694f;
}

#imageCanvasCompileRecipe,
#videoCanvasCompileRecipe {
  border-color: #d3d9e7;
  background: #ffffff;
  color: #4d5870;
}

#imageCanvasCommandStatus,
#videoCanvasCommandStatus,
.canvas-command-status {
  border-color: #d5daea;
  background: #f3f5fb;
  color: #59647b;
}

#imageCanvasCommandStatus strong,
#videoCanvasCommandStatus strong,
.canvas-command-status strong {
  color: #1c2340;
}

.image-studio-view-controls {
  box-shadow: 0 10px 26px rgba(31, 35, 79, 0.14);
}

.image-studio-view-controls button,
.image-studio-view-controls output {
  color: #3f4a63;
}

.image-studio-view-controls input[type="range"] {
  accent-color: #1f23ab;
}

.image-studio-overview,
.image-studio-operation,
.image-studio-branch-tree,
.image-studio-history,
.image-studio-task-queue,
.image-studio-output-dock {
  color: #202741;
}

.image-studio-overview > section,
.image-studio-overview > div,
.image-studio-operation > section,
.image-studio-governance,
.image-studio-history button,
.image-studio-branch-tree > div > button,
.image-studio-task-queue > div > button {
  border-color: #dce1ee;
  background: #ffffff;
}

.image-studio-history button:hover,
.image-studio-task-queue > div > button:hover {
  border-color: #aeb7d1;
  background: #f3f5fb;
}

.image-studio-history button.is-current,
.image-studio-task-queue > div > button.is-current {
  border-color: #1f23ab;
  background: #eef0ff;
}

.image-studio-side input,
.image-studio-side select,
.image-studio-side textarea,
.image-studio-governance input[type="text"],
.image-studio-governance select {
  border-color: #cfd6e6;
  background: #ffffff;
  color: #1b213d;
}

.image-studio-result-strip,
.image-studio-result-strip > header,
.image-studio-result-strip button {
  border-color: #dce1ee;
  background: #ffffff;
}

.image-studio-result-strip button:hover,
.image-studio-result-strip button.is-selected {
  border-color: #1f23ab;
  background: #eef0ff;
}

.image-studio-historical-actions,
.image-studio-overview.is-historical > p {
  border-color: #e4c98d;
  background: #fff8e9;
  color: #69542c;
  box-shadow: 0 8px 24px rgba(115, 85, 28, 0.08);
}

.image-studio-historical-actions strong {
  color: #57431d;
}

.source-drift-banner,
.runtime-drift-banner {
  border-color: #e3b3b8;
  background: #fff0f1;
  color: #7d2b35;
  box-shadow: 0 10px 28px rgba(117, 36, 45, 0.12);
}

.image-studio-edit-actions,
.image-studio-review-actions {
  border-color: #d3d9e7;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(31, 35, 79, 0.1);
}

.image-studio-tool-group > summary {
  border-color: #d3d9e7;
  background: #ffffff;
  color: #4d5870;
}

.image-studio-tool-group > summary::after {
  color: #8791a6;
}

.image-studio-tool-group[open] > summary,
.image-studio-tool-group > summary:hover {
  border-color: #1f23ab;
  background: #eef0ff;
  color: #1f23ab;
}

.image-studio-tool-group > div {
  border-color: #d3d9e7;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(31, 35, 79, 0.16);
}

.image-studio-more-tools > div > section > header {
  border-bottom-color: #e1e5ef;
}

.image-studio-more-tools > div > section > header strong { color: #222943; }
.image-studio-more-tools > div > section > header span { color: #7a8499; }
.image-studio-primary-tools > button[data-release-status="no-results"] {
  border-color: #cfd6e6;
  background: #f5f7fb;
}

.image-studio-preview-meta .is-unreviewed,
.image-studio-preview-meta em.is-unreviewed {
  background: #fff6df;
  color: #8a641e;
}

.server-source-drift-warning {
  border-color: #e3b3b8;
  background: #fff0f1;
  color: #7d2b35;
  box-shadow: 0 14px 36px rgba(117, 36, 45, 0.14);
}

.server-source-drift-warning strong {
  color: #722630;
}

.server-source-drift-warning span {
  color: #98616a;
}

.server-source-drift-warning code {
  border-color: #e3b3b8;
  background: #fff8f8;
}

.design-production-tools .design-production-quality-action {
  border-color: #e4c98d;
  background: #fff6df;
  color: #8a641e;
}

.design-production-assistant-results footer button,
.design-production-assistant-result-actions button,
.canvas-assistant-result-actions button {
  border-color: #d3d9e7;
  background: #ffffff;
  color: #4d5870;
}

.design-production-assistant-results footer button:first-of-type,
.design-production-assistant-result-actions button:first-child,
.canvas-assistant-result-actions button:first-child {
  border-color: #1f23ab;
  background: #1f23ab;
  color: #ffffff;
}

/* Current-asset shortcuts stay readable and wrap before they can crowd the image. */
.image-studio-asset-actions {
  align-items: flex-start;
  flex-wrap: wrap;
}

.image-studio-edit-actions {
  flex: 1 1 430px;
  flex-wrap: wrap;
  max-width: 100%;
}

.image-studio-review-actions {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
}

.image-studio-primary-tools {
  flex: 0 1 auto;
  flex-wrap: wrap;
}

.image-studio-primary-tools > button {
  min-height: 48px;
  height: auto;
}

.image-studio-more-tools > summary {
  min-height: 48px;
  height: auto;
}

@media (max-width: 760px) {
  .image-studio-preview {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .image-studio-asset-actions {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: 100%;
    max-width: none;
    padding: 10px 10px 0;
    box-sizing: border-box;
  }

  .image-studio-edit-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
  }

  .image-studio-instruction-action {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-height: 48px;
    font-size: 12px;
  }

  .image-studio-primary-tools {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .image-studio-primary-tools > button {
    min-width: 0;
    padding-inline: 5px;
    text-align: center;
  }

  .image-studio-more-tools {
    grid-column: 2;
    grid-row: 1;
  }

  .image-studio-more-tools > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .image-studio-review-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
  }

  .image-studio-view-controls {
    position: static;
    grid-row: 2;
    grid-template-columns: 28px minmax(0, 1fr) 38px 28px auto;
    width: auto;
    margin: 6px 10px 0;
  }

  .image-studio-preview-button {
    grid-row: 3;
    padding: 8px 10px 48px;
  }

  .image-studio-preview-button img {
    max-width: 100%;
    max-height: 100%;
  }
}

/* 2026-08-17: complete blue-white surface system.
   White is the application canvas, not only the navigation shell. */
html,
body,
.app-shell,
.main-stage,
.view-panel,
.case-section,
.fashion-dashboard,
.dash-workspace,
.canvas-workspace-shell {
  background-color: #ffffff !important;
  color: #17203a;
}

/* Feature containers inherit one commercial light surface system. */
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class^="project-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class*=" project-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class^="asset-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class*=" asset-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class^="sample-review"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class*=" sample-review"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class^="template-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class*=" template-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class^="team-asset"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class*=" team-asset"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class^="image-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class*=" image-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class^="video-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class*=" video-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class^="quality-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class*=" quality-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class^="workspace-usage"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class*=" workspace-usage"] {
  border-color: #dce2ef !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #17203a;
}

/* Page-level project library and sample review. */
.case-section {
  background: #ffffff !important;
}

.case-section .view-head,
.case-section .case-filter,
.case-section .project-filter-tools,
.case-section .library-status,
.case-section .asset-library-panel,
.case-section .delivery-board,
.case-section .template-shelf,
.case-section .version-shelf,
.case-section .project-library-grid {
  border-color: #dce2ef !important;
  background: #ffffff !important;
  color: #17203a;
}

.case-section .case-filter,
.case-section .project-filter-tools,
.case-section .library-status {
  box-shadow: 0 4px 14px rgba(31, 35, 79, 0.04);
}

.case-section :is(
  .asset-upload-card,
  .asset-gap-card,
  .sample-review-card,
  .asset-grid-card,
  .sample-review-summary,
  .sample-review-empty,
  .sample-review-row,
  .asset-focus-summary,
  .asset-focus-ready,
  .asset-focus-empty,
  .asset-focus-row,
  .asset-gap-list article,
  .asset-card,
  .asset-empty,
  .delivery-board article,
  .template-shelf-head,
  .template-card,
  .version-card,
  .project-card,
  .case-card,
  .project-detail-drawer,
  .template-manager-panel,
  .template-manager-preview,
  .template-manager-form
) {
  border-color: #dce2ef !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #17203a !important;
  box-shadow: 0 7px 22px rgba(31, 35, 79, 0.055);
}

.case-section .sample-review-card.is-focused,
.case-section .project-card:hover,
.case-section .template-card:hover {
  border-color: #9199d5 !important;
  box-shadow: 0 0 0 1px rgba(31, 35, 171, 0.08), 0 10px 28px rgba(31, 35, 79, 0.08);
}

.case-section :is(h1, h2, h3, h4, strong, b, legend),
.project-asset-center-modal :is(h1, h2, h3, h4, strong, b, legend),
.fashion-dashboard :is(.image-studio-current-empty, .image-studio-empty) :is(strong, h2, h3) {
  color: #17203a;
}

.case-section :is(p, span, em, small, dt),
.project-asset-center-modal :is(p, span, em, small, dt) {
  color: #69748b;
}

.case-section .eyebrow,
.case-section .console-head > span,
.case-section .project-card-kicker,
.case-section .template-shelf-head > span,
.project-asset-center-panel > header span {
  color: #1f23ab !important;
}

.case-section :is(input, select, textarea),
.project-asset-center-modal :is(input, select, textarea),
.project-asset-folder-editor-modal :is(input, select, textarea),
.team-asset-library-modal :is(input, select, textarea),
.team-asset-promotion-modal :is(input, select, textarea),
.project-fabric-editor-modal :is(input, select, textarea),
.project-fabric-swatch-modal :is(input, select, textarea) {
  border-color: #cbd3e4 !important;
  background: #ffffff !important;
  color: #17203a !important;
  caret-color: #1f23ab;
}

.case-section :is(input, textarea)::placeholder,
.project-asset-center-modal :is(input, textarea)::placeholder {
  color: #929caf;
}

.case-section button:not(.primary-button):not(.active),
.case-section a.secondary-button,
.project-asset-center-panel button:not(.primary):not(.active),
.project-asset-folder-editor-modal button:not(.primary):not(.active),
.team-asset-library-modal button:not(.primary):not(.active),
.team-asset-promotion-modal button:not(.primary):not(.active),
.project-fabric-editor-modal button:not(.primary):not(.active),
.project-fabric-swatch-modal button:not(.primary):not(.active) {
  border-color: #cbd3e4 !important;
  background: #ffffff !important;
  color: #46516a !important;
}

.case-section :is(button, a.secondary-button):hover,
.project-asset-center-panel button:hover {
  border-color: #929bd0 !important;
  background: #f1f3ff !important;
  color: #1f23ab !important;
}

.case-section :is(.primary-button, button.active),
.project-asset-center-panel :is(button.primary, button.active),
.project-asset-folder-editor-modal button.primary,
.team-asset-library-modal button.primary,
.team-asset-promotion-modal button.primary,
.project-fabric-editor-modal button.primary,
.project-fabric-swatch-modal button.primary {
  border-color: #1f23ab !important;
  background: #1f23ab !important;
  color: #ffffff !important;
}

.case-section :is(.primary-button, button.active) :is(strong, span, em),
.project-asset-center-panel :is(button.primary, button.active) :is(strong, span, em) {
  color: #ffffff !important;
}

.case-section .project-progress,
.case-section progress {
  background: #e8ebf4 !important;
  accent-color: #1f23ab;
}

.case-section .asset-preview,
.case-section .template-card-cover,
.project-asset-preview {
  border-color: #dce2ef !important;
  background-color: #f4f6fb !important;
  background-image: none !important;
}

/* Asset center and every supporting editor use light modals. */
:is(
  .project-asset-center-backdrop,
  .project-asset-folder-editor-backdrop,
  .team-asset-modal-backdrop,
  .project-fabric-editor-backdrop,
  .project-fabric-swatch-backdrop,
  .image-canvas-upload-backdrop,
  .quality-regression-mask-backdrop,
  .quality-regression-run-backdrop,
  .quality-regression-suite-backdrop,
  .workspace-usage-backdrop,
  .workspace-usage-reconcile-backdrop
) {
  background: rgba(39, 48, 74, 0.24) !important;
  backdrop-filter: blur(6px);
}

:is(
  .project-asset-center-panel,
  .project-asset-folder-editor-modal > section,
  .project-asset-copy-panel,
  .team-asset-library-body,
  .team-asset-promotion-body,
  .project-fabric-editor-body,
  .project-fabric-swatch-body,
  .image-canvas-upload-body,
  .quality-regression-mask-body,
  .quality-regression-run-modal,
  .quality-regression-suite-content,
  .workspace-usage-dialog,
  .workspace-usage-reconcile-context
) {
  border-color: #cdd5e5 !important;
  background: #ffffff !important;
  color: #17203a !important;
  box-shadow: 0 24px 72px rgba(31, 35, 79, 0.16) !important;
}

.project-asset-center-panel > header,
.project-asset-center-body,
.project-asset-summary,
.project-asset-batchbar,
.project-asset-folderbar,
.project-asset-folder,
.project-asset-card,
.project-asset-info,
.project-asset-info dl > div,
.project-asset-quality,
.project-asset-release,
.project-asset-card > footer,
.project-asset-folder-editor-modal :is(header, footer, .project-asset-folder-editor-body),
.team-asset-library-body :is(header, footer, section, article),
.team-asset-promotion-body :is(header, footer, section, article),
.project-fabric-editor-body :is(header, footer, section, article),
.project-fabric-swatch-body :is(header, footer, section, article) {
  border-color: #dce2ef !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #17203a !important;
}

.project-asset-summary > div,
.project-asset-card > footer,
.project-asset-center-panel > header {
  border-color: #dce2ef !important;
}

.project-asset-summary strong,
.project-asset-folderbar strong,
.project-asset-card strong,
.project-asset-info :is(strong, dd),
.project-asset-folder-editor-modal :is(h2, strong),
.team-asset-library-modal :is(h2, h3, strong),
.team-asset-promotion-modal :is(h2, h3, strong),
.project-fabric-editor-modal :is(h2, h3, strong),
.project-fabric-swatch-modal :is(h2, h3, strong) {
  color: #17203a !important;
}

.project-asset-card:hover,
.project-asset-card.is-selected {
  border-color: #8d97d3 !important;
  background: #f7f8ff !important;
  box-shadow: 0 8px 24px rgba(31, 35, 79, 0.08) !important;
}

.project-asset-preview > :is(b, em),
.project-asset-select {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #26304b !important;
  box-shadow: 0 4px 12px rgba(31, 35, 79, 0.09);
}

.project-asset-select.is-selected {
  border-color: #1f23ab !important;
  background: #1f23ab !important;
  color: #ffffff !important;
}

/* Image and video production canvases are light workspaces, including empty states. */
.image-canvas-studio,
.image-studio-stage,
.image-studio-preview,
.image-studio-preview-button,
.image-studio-current-empty,
.image-studio-current-empty > section,
.image-studio-current-empty > aside,
.image-studio-side,
.image-studio-filmstrip,
.image-studio-output-dock,
.image-studio-compare,
.image-studio-compare-canvas,
.image-studio-view-sets,
.image-view-set-grid,
.image-studio-batch-production,
.image-studio-batch-governance,
.image-operation-launcher,
.image-operation-inspector,
.image-operation-form,
.image-operation-results,
.image-operation-usage-panel,
.image-quick-edit-popover,
.image-mask-editor-panel,
.video-storyboard-editor,
.video-frame-readiness,
.video-reference-controls,
.video-reference-strip {
  border-color: #dce2ef !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #17203a !important;
}

.image-studio-preview,
.image-studio-current-empty,
.image-studio-compare-canvas {
  background-color: #f7f8fc !important;
  background-image:
    linear-gradient(45deg, rgba(31, 35, 171, 0.025) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(31, 35, 171, 0.025) 25%, transparent 25%) !important;
}

.image-studio-current-empty > section,
.image-studio-current-empty > aside,
.image-studio-empty,
.image-view-set-grid > div,
.image-studio-batch-production > section,
.image-studio-batch-governance > section,
.video-frame-readiness article,
.video-storyboard-editor article {
  border-color: #dce2ef !important;
  background: #ffffff !important;
  color: #17203a !important;
  box-shadow: 0 6px 20px rgba(31, 35, 79, 0.05);
}

.fashion-dashboard :is(
  .image-studio-current-empty,
  .image-studio-empty,
  .image-operation-launcher,
  .image-operation-inspector,
  .image-operation-form,
  .image-operation-results,
  .image-quick-edit-popover,
  .image-mask-editor-panel,
  .video-storyboard-editor,
  .video-frame-readiness,
  .quality-regression-suite-content
) :is(h1, h2, h3, h4, strong, b, label, legend) {
  color: #17203a !important;
}

.fashion-dashboard :is(
  .image-studio-current-empty,
  .image-studio-empty,
  .image-operation-launcher,
  .image-operation-inspector,
  .image-operation-form,
  .image-operation-results,
  .image-quick-edit-popover,
  .image-mask-editor-panel,
  .video-storyboard-editor,
  .video-frame-readiness,
  .quality-regression-suite-content
) :is(p, span, em, small, dt, dd) {
  color: #69748b;
}

.fashion-dashboard :is(
  .image-operation-launcher,
  .image-operation-inspector,
  .image-operation-form,
  .image-quick-edit-popover,
  .image-mask-editor-panel,
  .video-storyboard-editor,
  .video-frame-readiness,
  .quality-regression-suite-content
) :is(input, select, textarea) {
  border-color: #cbd3e4 !important;
  background: #ffffff !important;
  color: #17203a !important;
}

.image-studio-asset-actions button:not(.primary),
.image-studio-current-empty button:not(.primary),
.image-studio-empty button:not(:first-child),
.image-view-set-grid button,
.video-storyboard-editor button,
.video-frame-readiness button {
  border-color: #cbd3e4 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #46516a !important;
}

.image-studio-asset-actions button.primary,
.image-studio-current-empty button.primary,
.image-studio-empty button:first-child,
.image-studio-batch-production > button,
.video-storyboard-editor button.primary,
.video-frame-readiness button.primary {
  border-color: #1f23ab !important;
  background: #1f23ab !important;
  color: #ffffff !important;
}

/* Status semantics remain visible without reintroducing dark panels. */
.fashion-dashboard :is(.is-warn, [data-status="warn"], [data-quality="warn"]),
.case-section :is(.is-warn, [data-status="warn"], [data-quality="warn"]) {
  border-color: #e6c36e !important;
  background-color: #fff8e7 !important;
}

.fashion-dashboard :is(.is-blocked, [data-status="blocked"], [data-quality="blocked"]),
.case-section :is(.is-blocked, [data-status="blocked"], [data-quality="blocked"]) {
  border-color: #df9aa2 !important;
  background-color: #fff1f3 !important;
}

.fashion-dashboard :is(.is-pass, [data-status="pass"], [data-quality="pass"]),
.case-section :is(.is-pass, [data-status="pass"], [data-quality="pass"]) {
  border-color: #9acdbd !important;
  background-color: #eef9f5 !important;
}

.fashion-dashboard :is(button.primary, button.active, button[aria-pressed="true"]),
.case-section :is(button.primary, button.active, button[aria-pressed="true"]) {
  border-color: #1f23ab !important;
  background: #1f23ab !important;
  color: #ffffff !important;
}

@media (max-width: 760px) {
  .project-asset-center-modal {
    padding: 8px;
  }

  .project-asset-center-panel {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
  }

  .case-section {
    padding: 12px;
  }

  .workspace-chrome-brand {
    flex: 0 0 auto;
  }

  .workspace-chrome-brand strong {
    min-width: 30px;
    white-space: nowrap;
  }
}

/* Residual production controls must not fall back to charcoal. */
.media-inspector-state,
.media-inspector-actions,
.image-studio-task-queue > div > button > span {
  border-color: #dce2ef !important;
  background: #ffffff !important;
  color: #17203a !important;
}

.media-inspector-state {
  box-shadow: 0 6px 20px rgba(31, 35, 79, 0.05);
}

.media-inspector-state :is(strong, b) {
  color: #17203a !important;
}

.media-inspector-state :is(p, span, em),
.image-studio-task-queue > div > button > span em {
  color: #69748b !important;
}

.media-inspector-actions button:not(.primary),
.image-studio-view-controls button,
.image-studio-view-controls output {
  border-color: #cbd3e4 !important;
  background: #ffffff !important;
  color: #46516a !important;
}

.media-inspector-actions button.danger {
  border-color: #e2a3aa !important;
  background: #fff1f3 !important;
  color: #a43847 !important;
}

.media-inspector-actions button.primary {
  border-color: #1f23ab !important;
  background: #1f23ab !important;
  color: #ffffff !important;
}

.project-asset-center-panel > header h2 {
  color: #17203a !important;
}

.project-asset-search {
  border-color: #cbd3e4 !important;
  background: #ffffff !important;
  color: #17203a !important;
}

.project-asset-search span {
  color: #69748b !important;
}

.project-asset-taxonomy :is(span, em) {
  border-color: #d6dcea !important;
  background: #f5f7fb !important;
  color: #59657d !important;
}

.project-asset-taxonomy span {
  border-color: #bdc3ef !important;
  background: #f0f1ff !important;
  color: #1f23ab !important;
}

/* Design canvas and assistant are part of the same light product, not dark islands. */
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class^="design-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class*=" design-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class^="canvas-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class*=" canvas-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class^="media-"],
:is(div, section, article, aside, header, footer, nav, form, fieldset, dl)[class*=" media-"] {
  border-color: #dce2ef !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #17203a;
}

.design-canvas-viewport,
.media-canvas-viewport,
.design-production-canvas,
.design-production-compare-canvas,
.design-canvas-minimap {
  border-color: #dce2ef !important;
  background-color: #f7f8fc !important;
}

.design-canvas-viewport {
  background-image: radial-gradient(circle, rgba(31, 35, 171, 0.14) 1px, transparent 1.2px) !important;
}

.design-canvas-assistant,
.design-canvas-assistant :is(section, article, aside, header, footer, nav, form, fieldset, dl, div),
.design-canvas-node :is(section, article, aside, header, footer, nav, form, fieldset, dl, div),
.canvas-reference-empty,
.canvas-provenance {
  border-color: #dce2ef !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #17203a !important;
}

.design-canvas-node :is(section, article, div),
.canvas-reference-empty,
.canvas-provenance,
.canvas-assistant-message,
.canvas-assistant-composer,
.canvas-assistant-asset-preview {
  box-shadow: none !important;
}

.design-canvas-assistant :is(h1, h2, h3, h4, strong, b, label, legend),
.design-canvas-node :is(h1, h2, h3, h4, strong, b, label, legend),
.canvas-reference-empty :is(strong, b),
.canvas-provenance :is(strong, b) {
  color: #17203a !important;
}

.design-canvas-assistant :is(p, span, em, small, dt, dd),
.design-canvas-node :is(p, span, em, small, dt, dd),
.canvas-reference-empty :is(p, span, em),
.canvas-provenance :is(p, span, em) {
  color: #69748b;
}

.design-canvas-assistant :is(input, select, textarea),
.design-canvas-node :is(input, select, textarea) {
  border-color: #cbd3e4 !important;
  background: #ffffff !important;
  color: #17203a !important;
}

.design-canvas-assistant button:not(.primary):not(.active),
.design-canvas-node button:not(.primary):not(.active),
.canvas-reference-empty button,
.canvas-provenance button,
.design-production-properties button:not(.primary):not(.active) {
  border-color: #cbd3e4 !important;
  background: #ffffff !important;
  color: #46516a !important;
}

.design-canvas-assistant :is(button.primary, button.active),
.design-canvas-node :is(button.primary, button.active),
.design-production-properties :is(button.primary, button.active) {
  border-color: #1f23ab !important;
  background: #1f23ab !important;
  color: #ffffff !important;
}

.canvas-workspace-tabs button.active {
  border-color: #1f23ab !important;
  background: #1f23ab !important;
  color: #ffffff !important;
}

.canvas-workspace-tabs button.active :is(span, strong, em) {
  color: #ffffff !important;
}

.design-canvas-assistant .canvas-assistant-asset-preview,
.design-canvas-assistant button[data-canvas-assistant-action^="select"],
.design-canvas-assistant button[data-canvas-assistant-action^="open"] {
  border-color: #dce2ef !important;
  background-color: #f7f8fc !important;
}

.design-canvas-node .is-selected,
.design-canvas-assistant .is-selected {
  border-color: #8e98d6 !important;
  background-color: #f0f2ff !important;
  color: #17203a !important;
}

.design-canvas-node .canvas-chip-list span {
  border-color: #d5dbea !important;
  background: #f5f7fb !important;
  color: #59657d !important;
}

/* Video storyboard, references and recipe diagnostics also stay light. */
.video-storyboard-editor :is(section, article, aside, header, footer, nav, form, fieldset, dl, div),
.video-reference-controls :is(section, article, aside, header, footer, nav, form, fieldset, dl, div),
.video-reference-strip :is(section, article, aside, header, footer, nav, form, fieldset, dl, div),
.video-frame-readiness :is(section, article, aside, header, footer, nav, form, fieldset, dl, div),
.generation-recipe-contract {
  border-color: #dce2ef !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #17203a !important;
}

.video-storyboard-editor :is(h1, h2, h3, h4, strong, b, label, legend),
.video-reference-controls :is(h1, h2, h3, h4, strong, b, label, legend),
.video-reference-strip :is(h1, h2, h3, h4, strong, b, label, legend),
.video-frame-readiness :is(h1, h2, h3, h4, strong, b, label, legend),
.generation-recipe-contract :is(h1, h2, h3, h4, strong, b, label, legend) {
  color: #17203a !important;
}

.video-storyboard-editor :is(p, span, em, small, dt, dd),
.video-reference-controls :is(p, span, em, small, dt, dd),
.video-reference-strip :is(p, span, em, small, dt, dd),
.video-frame-readiness :is(p, span, em, small, dt, dd),
.generation-recipe-contract :is(p, span, em, small, dt, dd) {
  color: #69748b;
}

.video-storyboard-editor button:not(.primary),
.video-reference-controls button:not(.primary),
.video-reference-strip button:not(.primary),
.video-frame-readiness button:not(.primary),
.generation-recipe-contract button:not(.primary) {
  border-color: #cbd3e4 !important;
  background: #ffffff !important;
  color: #46516a !important;
}

.video-storyboard-editor :is(input, select, textarea),
.video-reference-controls :is(input, select, textarea),
.video-frame-readiness :is(input, select, textarea) {
  border-color: #cbd3e4 !important;
  background: #ffffff !important;
  color: #17203a !important;
}

.media-flow-node :is(section, article, aside, header, footer, nav, form, fieldset, dl, div),
.media-node-actions,
.media-storyboard-list > div {
  border-color: #dce2ef !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #17203a !important;
}

.media-flow-node :is(h1, h2, h3, h4, strong, b, label, legend) {
  color: #17203a !important;
}

.media-flow-node :is(p, span, em, small, dt, dd) {
  color: #69748b;
}

.media-flow-node button:not(.primary):not(.active),
.media-node-actions button:not(.primary):not(.active) {
  border-color: #cbd3e4 !important;
  background: #ffffff !important;
  color: #46516a !important;
}

/* Lightchain benchmark: a short, asset-backed creation path before deep editing. */
.design-creation-dock {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 11px 14px 12px;
  border-bottom: 1px solid #dce2ef;
  background: #ffffff;
}

.design-creation-dock > header,
.design-creation-dock > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.design-creation-dock > header > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.design-creation-dock > header span,
.design-creation-dock > header em {
  color: #727d93;
  font-size: 9px;
  font-style: normal;
}

.design-creation-dock > header > div:first-child > span {
  color: #1f23ab;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.design-creation-dock > header strong {
  color: #171d3a;
  font-size: 13px;
}

.design-creation-dock-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.design-creation-dock-actions > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-creation-dock-actions > button {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid #cbd3e4;
  border-radius: 4px;
  background: #ffffff;
  color: #46516a;
  font-size: 9px;
  font-weight: 800;
}

.design-creation-dock-actions > button:hover,
.design-creation-dock.is-collapsed .design-creation-dock-actions > button {
  border-color: #1f23ab;
  background: #1f23ab;
  color: #ffffff;
}

.design-creation-dock.is-collapsed {
  gap: 0;
  padding-block: 8px;
}

.design-creation-dock.is-collapsed > header > div:first-child > em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-creation-model {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

.design-creation-model i,
.design-creation-readiness span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c8cedc;
}

.design-creation-model[data-status="ready"] i,
.design-creation-readiness span[data-ready="true"] i {
  background: #279a72;
}

.design-creation-model[data-status="blocked"] i,
.design-creation-readiness span[data-ready="false"] i {
  background: #dc5968;
}

.design-creation-model strong {
  max-width: 250px;
  overflow: hidden;
  color: #46516a !important;
  font-size: 9px !important;
  text-overflow: ellipsis;
}

.design-creation-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 8px;
}

.design-creation-command textarea {
  min-height: 52px;
  resize: none;
  border: 1px solid #cbd3e4;
  border-radius: 4px;
  background: #f9faff;
  color: #171d3a;
  padding: 9px 11px;
  font-size: 11px;
  line-height: 1.5;
}

.design-creation-command > button,
.design-creation-submit button {
  min-height: 34px;
  border: 1px solid #cbd3e4;
  border-radius: 4px;
  background: #ffffff;
  color: #46516a;
  font-size: 10px;
  font-weight: 800;
}

.design-creation-command > button {
  border-color: #1f23ab;
  background: #1f23ab;
  color: #ffffff;
}

.design-creation-inputs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.design-creation-inputs > button {
  position: relative;
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid #d6dce9;
  border-radius: 4px;
  background: #f7f8fc;
  text-align: left;
}

.design-creation-inputs > button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #d6dce9;
}

.design-creation-inputs > button[data-ready="true"]::before {
  background: #1f23ab;
}

.design-creation-inputs span,
.design-creation-inputs em {
  color: #7a8499;
  font-size: 8px;
  font-style: normal;
}

.design-creation-inputs strong {
  overflow: hidden;
  color: #202743;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-creation-inputs b {
  position: absolute;
  right: 7px;
  bottom: 6px;
  display: flex;
}

.design-creation-inputs b img {
  width: 22px;
  height: 22px;
  margin-left: -4px;
  border: 2px solid #ffffff;
  border-radius: 3px;
  object-fit: cover;
}

.design-creation-keywords {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.design-creation-keywords > span {
  flex: 0 0 auto;
  color: #6c768c;
  font-size: 9px;
  font-weight: 800;
}

.design-creation-keywords > div {
  display: flex;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
}

.design-creation-keywords button {
  flex: 0 0 auto;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid #d4dae8;
  border-radius: 3px;
  background: #ffffff;
  color: #626d84;
  font-size: 8px;
}

.design-creation-keywords button[aria-pressed="true"] {
  border-color: #1f23ab;
  background: #eef0ff;
  color: #1f23ab;
}

.design-creation-readiness,
.design-creation-submit {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.design-creation-readiness span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #5d687f;
  font-size: 8px;
  font-weight: 800;
}

.design-creation-readiness em,
.design-creation-submit > span {
  overflow: hidden;
  color: #7a8499;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-creation-submit button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 11px;
}

.design-creation-submit button.primary {
  border-color: #1f23ab;
  background: #1f23ab;
  color: #ffffff;
}

.design-creation-submit button:disabled {
  border-color: #d7dce8;
  background: #eceff5;
  color: #9ba4b7;
  cursor: not-allowed;
}

.design-creation-activity {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding-top: 9px;
  border-top: 1px solid #e3e7f0;
}

.design-creation-activity > header {
  display: grid;
  align-content: space-between;
  gap: 6px;
  min-width: 0;
}

.design-creation-activity > header > div {
  display: grid;
  gap: 2px;
}

.design-creation-activity > header span,
.design-creation-activity > header em {
  color: #7b8599;
  font: 700 7px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
}

.design-creation-activity > header strong {
  color: #202743;
  font-size: 10px;
}

.design-creation-activity > header button {
  justify-self: start;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #ccd3e2;
  border-radius: 3px;
  background: #ffffff;
  color: #5d687f;
  font-size: 8px;
  font-weight: 800;
}

.design-creation-activity > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.design-creation-activity > div > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  min-width: 0;
  min-height: 58px;
  padding: 7px 8px;
  overflow: hidden;
  border: 1px solid #d7dce8;
  border-radius: 4px;
  background: #f8f9fc;
  text-align: left;
}

.design-creation-activity > div > button[data-status="running"] {
  border-color: #8990e6;
  background: #f2f3ff;
}

.design-creation-activity > div > button[data-status="uncertain"],
.design-creation-activity > div > button[data-status="failed"] {
  border-color: #e3a4ab;
  background: #fff7f8;
}

.design-creation-activity > div > button[data-status="succeeded"] {
  border-color: #9bcdbb;
  background: #f5fbf8;
}

.design-creation-activity > div > button > span {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  gap: 2px 5px;
  min-width: 0;
}

.design-creation-activity > div > button > span i {
  grid-row: 1 / span 2;
  align-self: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca5b8;
}

.design-creation-activity > div > button[data-status="running"] > span i {
  background: #1f23ab;
}

.design-creation-activity > div > button[data-status="succeeded"] > span i {
  background: #279a72;
}

.design-creation-activity > div > button:is([data-status="uncertain"], [data-status="failed"]) > span i {
  background: #dc5968;
}

.design-creation-activity > div > button > span strong,
.design-creation-activity > div > button > span em,
.design-creation-activity > div > button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-creation-activity > div > button > span strong {
  color: #26304c;
  font-size: 8px;
}

.design-creation-activity > div > button > span em {
  color: #7b8599;
  font-size: 7px;
  font-style: normal;
}

.design-creation-activity > div > button > b {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 28px;
}

.design-creation-activity > div > button > b img,
.design-creation-activity > div > button > b > span {
  width: 28px;
  height: 34px;
  margin-left: -7px;
  border: 2px solid #ffffff;
  border-radius: 3px;
  background: #e7eaf2;
  object-fit: cover;
}

.design-creation-activity > div > button > b > span {
  display: grid;
  place-items: center;
  margin-left: 0;
  color: #59647b;
  font-size: 8px;
}

.design-creation-activity > div > button small {
  grid-column: 1 / -1;
  color: #707b91;
  font-size: 7px;
  font-weight: 600;
}

.design-style-library-panel {
  width: min(860px, calc(100vw - 32px));
}

.design-style-library-panel > header p {
  margin: 4px 0 0;
  color: #7a8499;
  font-size: 10px;
}

.design-style-library-panel > main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-height: 0;
  padding: 16px 18px;
  overflow: auto;
}

.design-style-library-panel > main > section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #69748b;
  font-size: 10px;
}

.design-style-library-panel > main > section > div {
  display: grid;
  gap: 7px;
}

.design-style-library-panel [data-style-library-id] {
  display: grid;
  gap: 5px;
  min-height: 78px;
  padding: 10px 11px;
  border: 1px solid #d5dbe8;
  border-radius: 4px;
  background: #f8f9fc;
  text-align: left;
}

.design-style-library-panel [data-style-library-id][aria-pressed="true"] {
  border-color: #1f23ab;
  background: #eef0ff;
  box-shadow: inset 3px 0 0 #1f23ab;
}

.design-style-library-panel [data-style-library-id] span {
  color: #1f23ab;
  font-size: 9px;
  font-weight: 900;
}

.design-style-library-panel [data-style-library-id] strong {
  color: #1e2541;
  font-size: 11px;
}

.design-style-library-panel [data-style-library-id] em,
.design-style-library-panel > main p {
  color: #727d93;
  font-size: 9px;
  font-style: normal;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .design-creation-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .design-creation-dock > footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .design-creation-activity > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .design-creation-command {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-creation-inputs {
    display: flex;
    overflow-x: auto;
  }

  .design-creation-inputs > button {
    flex: 0 0 180px;
  }

  .design-style-library-panel > main {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-creation-activity {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-creation-activity > header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .design-creation-activity > div {
    display: flex;
    overflow-x: auto;
  }

  .design-creation-activity > div > button {
    flex: 0 0 190px;
  }
}

/* 2026-08-17: focused product home. Existing production tools remain intact
   behind three explicit workflow entries. */
body.home-view-active {
  overflow: auto;
  background: #ffffff;
}

body.home-view-active .app-shell {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100vh;
  padding: 0;
}

body.home-view-active .primary-rail,
body.home-view-active .site-nav {
  display: none;
}

body.home-view-active .main-stage {
  display: block;
  min-height: 100vh;
}

.product-home {
  min-height: 100vh;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #ffffff !important;
  box-shadow: none;
}

.product-home.active {
  display: block;
}

.product-home-inner {
  display: grid;
  grid-template-rows: minmax(360px, 48vh) minmax(250px, 1fr);
  gap: 24px;
  width: min(1460px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 40px 40px;
}

.home-command {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #d9deeb;
  border-radius: 8px;
  background: #f6f7ff;
}

.home-command::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 28%;
  height: 4px;
  background: #1f23ab;
}

.home-command-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid #e0e4ef;
  background: #ffffff;
}

.home-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #161c38;
  text-decoration: none;
}

.home-brand-mark {
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid #1f23ab;
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px #ffffff, inset 0 0 0 7px #7478ff;
}

.home-brand strong {
  font-size: 20px;
  font-weight: 950;
}

.home-library-link {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid #cbd2e2;
  border-radius: 5px;
  background: #ffffff;
  color: #46516a;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.home-library-link:hover {
  border-color: #1f23ab;
  color: #1f23ab;
}

.home-command-body {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  width: min(980px, calc(100% - 48px));
  margin: 0 auto;
  padding: 26px 0 34px;
}

.home-command-kicker {
  color: #1f23ab;
  font-size: 10px;
  font-weight: 950;
}

.home-command h1 {
  margin: 8px 0 22px;
  color: #141a35;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 950;
  line-height: 1.08;
}

.home-design-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  min-height: 118px;
  padding: 8px;
  border: 1px solid #aeb6d4;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(31, 35, 79, 0.08);
}

.home-design-form:focus-within {
  border-color: #1f23ab;
  box-shadow: 0 0 0 3px rgba(31, 35, 171, 0.09), 0 16px 42px rgba(31, 35, 79, 0.08);
}

.home-design-form textarea {
  width: 100%;
  min-height: 100px;
  padding: 18px 20px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #151b36;
  font-size: 16px;
  line-height: 1.65;
}

.home-design-form textarea::placeholder {
  color: #9199ab;
}

.home-design-form button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  min-height: 100px;
  padding: 0 20px;
  border: 1px solid #1f23ab;
  border-radius: 6px;
  background: #1f23ab;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.home-design-form button:hover {
  background: #171a82;
}

.home-design-form button:disabled {
  opacity: 0.62;
  cursor: wait;
}

.home-design-form button b {
  font-size: 21px;
  font-weight: 500;
}

.home-design-status {
  margin: 9px 2px 0;
  color: #737d92;
  font-size: 11px;
}

.home-workflows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-self: start;
  height: 280px;
  min-height: 0;
}

.home-workflow-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  grid-template-rows: 208px 72px;
  gap: 0 10px;
  min-width: 0;
  height: 280px;
  min-height: 280px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d7ddea;
  border-radius: 8px;
  background: #ffffff;
  color: #171d39;
  text-align: left;
  cursor: pointer;
}

.home-workflow-card > img {
  grid-column: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid #e0e4ee;
  transition: transform 0.28s ease;
}

.home-workflow-card:nth-child(2) > img {
  object-position: center 24%;
}

.home-workflow-card:hover {
  border-color: #9098d1;
  box-shadow: 0 15px 34px rgba(31, 35, 79, 0.1);
  transform: translateY(-2px);
}

.home-workflow-card:hover > img {
  transform: scale(1.015);
}

.home-workflow-index {
  display: grid;
  place-items: center;
  min-height: 66px;
  margin-left: 16px;
  color: #1f23ab;
  font-size: 10px;
  font-weight: 950;
}

.home-workflow-copy {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 12px 0;
}

.home-workflow-copy strong {
  color: #171d39;
  font-size: 17px;
  font-weight: 920;
}

.home-workflow-copy em {
  color: #7a8498;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.home-workflow-card > b {
  display: grid;
  place-items: center;
  min-height: 66px;
  margin-right: 12px;
  color: #69738a;
  font-size: 18px;
  font-weight: 500;
}

.home-workflow-card:hover > b {
  color: #1f23ab;
}

@media (max-width: 920px) {
  .product-home-inner {
    grid-template-rows: auto auto;
    padding: 18px;
  }

  .home-command {
    min-height: 390px;
  }

  .home-workflows {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .home-workflow-card {
    grid-template-columns: minmax(180px, 42%) 42px minmax(0, 1fr) 30px;
    grid-template-rows: 180px;
    height: 180px;
    min-height: 180px;
  }

  .home-workflow-card > img {
    grid-column: 1;
    min-height: 180px;
    border-right: 1px solid #e0e4ee;
    border-bottom: 0;
  }

  .home-workflow-index {
    grid-column: 2;
    min-height: 180px;
    margin-left: 10px;
  }

  .home-workflow-copy {
    grid-column: 3;
  }

  .home-workflow-card > b {
    grid-column: 4;
    min-height: 180px;
  }
}

@media (max-width: 620px) {
  .product-home-inner {
    gap: 14px;
    padding: 12px;
  }

  .home-command-header {
    min-height: 56px;
    padding: 0 16px;
  }

  .home-command-body {
    width: calc(100% - 28px);
    padding: 24px 0 28px;
  }

  .home-command h1 {
    margin-bottom: 17px;
    font-size: 34px;
  }

  .home-design-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-design-form textarea {
    min-height: 108px;
    padding: 15px;
    font-size: 14px;
  }

  .home-design-form button {
    min-height: 48px;
    padding: 0 16px;
  }

  .home-workflow-card {
    grid-template-columns: 34% 38px minmax(0, 1fr) 24px;
    grid-template-rows: 126px;
    height: 126px;
    min-height: 126px;
  }

  .home-workflow-card > img,
  .home-workflow-index,
  .home-workflow-card > b {
    min-height: 126px;
  }

  .home-workflow-copy strong {
    font-size: 15px;
  }
}

/* 2026-08-17 v4: icon-led workflow cards, no photographic previews. */
.product-home .home-command h1 {
  display: block;
  margin-top: 0;
  color: #111522;
  font-size: 42px;
}

.product-home .home-workflows {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  height: 154px;
}

.product-home .home-workflow-card {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 42px;
  grid-template-rows: 154px;
  height: 154px;
  min-height: 154px;
  overflow: hidden;
  border-color: #dde1ec;
  background: rgba(255, 255, 255, 0.92);
}

.home-workflow-icon-wrap {
  display: grid;
  grid-column: 1;
  place-items: center;
  min-width: 0;
  background: #f8f9fd;
}

.home-workflow-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid #d8dcef;
  border-radius: 8px;
  background: #ffffff;
  color: #1f23ab;
  box-shadow: 0 8px 20px rgba(31, 35, 90, 0.08);
  animation: home-icon-float 3.2s ease-in-out infinite;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.home-workflow-card:nth-child(2) .home-workflow-icon {
  animation-delay: -1.05s;
}

.home-workflow-card:nth-child(3) .home-workflow-icon {
  animation-delay: -2.1s;
}

.home-workflow-icon::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #5f65e7;
  box-shadow: 0 0 0 1px rgba(31, 35, 171, 0.14);
}

.home-workflow-icon svg {
  width: 26px;
  height: 26px;
  transition: transform 220ms cubic-bezier(.2,.75,.25,1);
}

.home-workflow-icon-image {
  color: #3453c6;
}

.home-workflow-icon-video {
  color: #35406d;
}

.product-home .home-workflow-card:hover .home-workflow-icon {
  border-color: #adb3da;
  box-shadow: 0 10px 24px rgba(31, 35, 90, 0.12);
  transform: translateY(-2px);
}

.product-home .home-workflow-card:hover .home-workflow-icon-design svg {
  transform: rotate(-3deg) scale(1.04);
}

.product-home .home-workflow-card:hover .home-workflow-icon-image svg {
  transform: translate(1px, -1px) scale(1.04);
}

.product-home .home-workflow-card:hover .home-workflow-icon-video svg {
  transform: scale(1.08);
}

.product-home .home-workflow-copy {
  grid-column: 2;
  align-self: stretch;
  padding: 0 10px 0 18px;
}

.product-home .home-workflow-card > b {
  grid-column: 3;
  min-height: 154px;
}

@keyframes home-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (max-width: 920px) {
  .product-home .home-workflows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
  }

  .product-home .home-workflow-design {
    grid-column: 1 / -1;
  }

  .product-home .home-workflow-card {
    grid-template-columns: 88px minmax(0, 1fr) 40px;
    grid-template-rows: 132px;
    height: 132px;
    min-height: 132px;
  }

  .product-home .home-workflow-card > b {
    min-height: 132px;
  }
}

@media (max-width: 620px) {
  .product-home .home-workflows {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-home .home-workflow-design {
    grid-column: auto;
  }

  .product-home .home-workflow-card {
    grid-template-columns: 80px minmax(0, 1fr) 38px;
    grid-template-rows: 108px;
    height: 108px;
    min-height: 108px;
  }

  .product-home .home-workflow-card > b {
    min-height: 108px;
  }

  .home-workflow-icon {
    width: 52px;
    height: 52px;
  }
}

.lightchain-design-center > header nav {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
}

.lightchain-design-center > header nav button {
  flex: 0 0 auto;
}

.lightchain-design-center > header nav button.primary {
  background: #1f23ab;
  color: #ffffff;
}

.lightchain-advanced-tools {
  border: 1px solid #dce2ef;
  border-radius: 6px;
  background: #ffffff;
}

.lightchain-advanced-tools > summary {
  padding: 12px 14px;
  color: #252d49;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.lightchain-advanced-tools[open] > summary {
  border-bottom: 1px solid #e1e5ef;
}

.lightchain-advanced-tools > :not(summary) {
  margin: 0;
  border-right: 0;
  border-left: 0;
}

.lightchain-advanced-tools .design-production-tools {
  flex-wrap: wrap;
  padding: 9px;
  overflow: visible;
  background: #f8f9fc;
}

.lightchain-advanced-tools .design-production-assistant,
.lightchain-advanced-tools .design-production-review,
.lightchain-advanced-tools .design-production-task,
.lightchain-advanced-tools .design-production-task-detail,
.lightchain-advanced-tools .design-production-quality-gate,
.lightchain-advanced-tools .design-production-lineage {
  border-color: #e0e5ef;
  background: #ffffff;
  color: #222a46;
}

@media (max-width: 1180px) {
  .lightchain-design-center > header > div span { display: none; }
}

/* 2026-08-17: Krea-inspired creator home, adapted to a fashion workflow. */
body.home-view-active {
  color: #171923;
  background: #ffffff;
}

.product-home-inner {
  display: grid;
  grid-template-rows: 72px auto auto;
  gap: 0;
  width: min(1380px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 42px 52px;
}

.product-home .home-command-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #e7e9ef;
  background: #ffffff;
}

.product-home .home-brand {
  gap: 10px;
  color: #141722;
}

.product-home .home-brand-mark {
  position: relative;
  width: 21px;
  height: 21px;
  border: 1.5px solid #1f23ab;
  border-radius: 50%;
  box-shadow: none;
}

.product-home .home-brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #1f23ab;
}

.product-home .home-brand strong {
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0;
}

.product-home .home-brand em {
  margin-left: 4px;
  padding-left: 14px;
  border-left: 1px solid #dfe2e9;
  color: #747b8b;
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0;
}

.home-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.product-home .home-library-link,
.home-account-button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #555d6f;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.product-home .home-library-link:hover {
  border-color: #dfe2ea;
  color: #1f23ab;
}

.home-account-button {
  border-color: #1f23ab;
  background: #1f23ab;
  color: #ffffff;
}

.home-account-button:hover {
  background: #171a83;
}

.product-home .home-command {
  position: relative;
  display: block;
  min-height: 0;
  padding: 68px 0 56px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.product-home .home-command::after {
  display: none;
}

.product-home .home-command-body {
  display: block;
  width: min(940px, 100%);
  margin: 0 auto;
  padding: 0;
  animation: home-enter 420ms cubic-bezier(.2,.75,.25,1) both;
}

.product-home .home-command-kicker,
.home-workspace-section > header span {
  display: block;
  color: #1f23ab;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0;
}

.product-home .home-command h1 {
  margin: 7px 0 0;
  color: #10131d;
  font-size: 54px;
  font-weight: 820;
  line-height: 1;
  letter-spacing: 0;
}

.home-command-subtitle {
  margin: 12px 0 30px;
  color: #697184;
  font-size: 15px;
  font-weight: 500;
}

.product-home .home-design-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 208px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cfd4df;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(29, 34, 54, 0.055);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-home .home-design-form:focus-within {
  border-color: #1f23ab;
  box-shadow: 0 0 0 3px rgba(31, 35, 171, 0.08), 0 16px 38px rgba(29, 34, 54, 0.07);
  transform: translateY(-1px);
}

.home-composer-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  padding: 0 18px;
  border-bottom: 1px solid #edf0f4;
  background: #fafbfc;
}

.home-composer-label span {
  color: #1f23ab;
  font-size: 12px;
  font-weight: 800;
}

.home-composer-label small {
  padding-left: 10px;
  border-left: 1px solid #dfe3ea;
  color: #8b92a1;
  font-size: 10px;
  font-weight: 600;
}

.product-home .home-design-form textarea {
  min-height: 102px;
  padding: 20px 20px 10px;
  color: #151824;
  font-size: 16px;
  line-height: 1.6;
}

.product-home .home-design-form textarea::placeholder {
  color: #9aa1af;
}

.home-composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  padding: 10px 11px 10px 18px;
}

.home-prompt-examples {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.home-prompt-examples::-webkit-scrollbar {
  display: none;
}

.home-prompt-examples button {
  flex: 0 0 auto;
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid #e0e3e9;
  border-radius: 4px;
  background: #ffffff;
  color: #626a7b;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.home-prompt-examples button:hover {
  border-color: #aeb3dd;
  background: #f7f7ff;
  color: #1f23ab;
}

.product-home .home-design-form .home-composer-footer > #homeStartDesign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 132px;
  align-self: auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #1f23ab;
  border-radius: 5px;
  background: #1f23ab;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  transition: background-color 150ms ease, transform 150ms ease;
}

.product-home .home-design-form .home-composer-footer > #homeStartDesign:hover {
  background: #171a83;
  transform: translateY(-1px);
}

.product-home .home-design-form .home-composer-footer > #homeStartDesign b {
  font-size: 17px;
}

.product-home .home-design-status {
  min-height: 16px;
  margin: 9px 2px 0;
  color: #7b8292;
  font-size: 10px;
}

.home-workspace-section {
  padding-top: 28px;
  border-top: 1px solid #e7e9ef;
  animation: home-enter 460ms 80ms cubic-bezier(.2,.75,.25,1) both;
}

.home-workspace-section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.home-workspace-section > header h2 {
  margin: 4px 0 0;
  color: #151824;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
}

.home-workspace-section > header > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #666e80;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.home-workspace-section > header > button:hover {
  color: #1f23ab;
}

.product-home .home-workflows {
  display: grid;
  grid-template-columns: 1.35fr 0.82fr 0.82fr;
  gap: 12px;
  height: 294px;
}

.product-home .home-workflow-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  grid-template-rows: 218px 76px;
  gap: 0;
  height: 294px;
  min-height: 294px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe3ea;
  border-radius: 6px;
  background: #ffffff;
  color: #171a24;
  text-align: left;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-home .home-workflow-card:hover {
  border-color: #b3b8cc;
  box-shadow: 0 12px 26px rgba(27, 31, 48, 0.07);
  transform: translateY(-2px);
}

.home-workflow-media {
  grid-column: 1 / -1;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-bottom: 1px solid #e5e8ee;
  background: #f3f4f7;
}

.product-home .home-workflow-card .home-workflow-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.86) contrast(.98);
  transition: transform 400ms cubic-bezier(.2,.75,.25,1), filter 220ms ease;
}

.product-home .home-workflow-design .home-workflow-media img {
  object-position: center 30%;
}

.product-home .home-workflow-card:nth-child(2) .home-workflow-media img {
  object-position: center 32%;
}

.product-home .home-workflow-card:hover .home-workflow-media img {
  filter: saturate(.96) contrast(1);
  transform: scale(1.012);
}

.product-home .home-workflow-copy {
  display: grid;
  grid-template-columns: 30px minmax(0, auto);
  grid-template-rows: 22px 18px;
  align-content: center;
  gap: 0 9px;
  padding: 11px 0 11px 16px;
}

.product-home .home-workflow-copy i {
  grid-row: 1 / 3;
  align-self: center;
  color: #1f23ab;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.product-home .home-workflow-copy strong {
  color: #151824;
  font-size: 15px;
  font-weight: 800;
}

.product-home .home-workflow-copy em {
  overflow: hidden;
  color: #808797;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-home .home-workflow-card > b {
  display: grid;
  place-items: center;
  min-height: 0;
  margin: 0;
  color: #777f90;
  font-size: 17px;
  font-weight: 500;
  transition: color 150ms ease, transform 150ms ease;
}

.product-home .home-workflow-card:hover > b {
  color: #1f23ab;
  transform: translateX(2px);
}

@keyframes home-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 920px) {
  .product-home-inner {
    grid-template-rows: 66px auto auto;
    padding: 0 22px 36px;
  }

  .product-home .home-command-header {
    min-height: 66px;
  }

  .product-home .home-command {
    padding: 48px 0 42px;
  }

  .product-home .home-workflows {
    grid-template-columns: 1fr 1fr;
    height: auto;
  }

  .product-home .home-workflow-design {
    grid-column: 1 / -1;
  }

  .product-home .home-workflow-card {
    grid-template-columns: minmax(0, 1fr) 42px;
    grid-template-rows: 206px 72px;
    height: 278px;
    min-height: 278px;
  }

  .product-home .home-workflow-copy {
    grid-column: 1;
  }

  .product-home .home-workflow-card > b {
    grid-column: 2;
  }
}

@media (max-width: 620px) {
  .product-home-inner {
    padding: 0 14px 28px;
  }

  .product-home .home-brand em,
  .product-home .home-library-link {
    display: none;
  }

  .product-home .home-command {
    padding: 38px 0 34px;
  }

  .product-home .home-command h1 {
    font-size: 42px;
  }

  .home-command-subtitle {
    margin-bottom: 22px;
    font-size: 13px;
  }

  .product-home .home-design-form textarea {
    min-height: 116px;
    padding: 16px 15px 8px;
    font-size: 14px;
  }

  .home-composer-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    padding: 8px 10px 10px;
  }

  .product-home .home-design-form .home-composer-footer > #homeStartDesign {
    flex-basis: 42px;
    width: 100%;
  }

  .home-workspace-section > header {
    align-items: center;
  }

  .product-home .home-workflows {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-home .home-workflow-design {
    grid-column: auto;
  }

  .product-home .home-workflow-card {
    grid-template-columns: 40% minmax(0, 1fr) 34px;
    grid-template-rows: 124px;
    height: 124px;
    min-height: 124px;
  }

  .home-workflow-media {
    grid-column: 1;
    border-right: 1px solid #e5e8ee;
    border-bottom: 0;
  }

  .product-home .home-workflow-copy {
    grid-column: 2;
    padding-left: 12px;
  }

  .product-home .home-workflow-card > b {
    grid-column: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-home .home-command-body,
  .home-workspace-section {
    animation: none;
  }

  .product-home *,
  .product-home *::before,
  .product-home *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* 服装设计：清晰的选择、生成、继续编辑链路。 */
.design-canvas-workbench.is-studio-view {
  grid-template-rows: minmax(0, 1fr);
  border-radius: 6px;
  box-shadow: 0 14px 42px rgba(24, 31, 68, 0.07);
}

.design-canvas-workbench.is-studio-view > .design-canvas-contextbar,
.design-canvas-workbench.is-studio-view > .canvas-commandbar,
.design-canvas-workbench.is-studio-view > .design-canvas-statusbar {
  display: none !important;
}

.design-production-studio.lightchain-design-studio {
  grid-template-columns: 272px minmax(520px, 1fr) 314px;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  background: #f5f6fa;
}

.lightchain-design-left,
.lightchain-design-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow-y: auto;
  background: #fff;
}

.lightchain-design-left { border-right: 1px solid #e1e4ec; }
.lightchain-design-right { border-left: 1px solid #e1e4ec; }

.lightchain-control-card,
.lightchain-generate-panel {
  display: grid;
  gap: 14px;
  padding: 22px 20px;
  border: 0;
  border-bottom: 1px solid #e5e7ee;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.lightchain-control-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lightchain-control-card > header strong {
  color: #171a29;
  font-size: 14px;
  font-weight: 760;
}

.lightchain-control-card > header span {
  padding: 0;
  background: transparent;
  color: #8a91a3;
  font-size: 11px;
  font-weight: 650;
}

.lightchain-control-card.is-required > header span { color: #1f23ab; }

.lightchain-choice-button,
.lightchain-reference-upload {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 3px 10px;
  min-height: 72px;
  padding: 13px 14px;
  border: 1px solid #d5d9e4;
  border-radius: 6px;
  background: #fafbfc;
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.lightchain-choice-button:hover,
.lightchain-reference-upload:hover {
  border-color: #9298d4;
  background: #f7f7ff;
  box-shadow: 0 8px 24px rgba(31, 35, 92, 0.08);
  transform: translateY(-2px);
}

.lightchain-choice-button b,
.lightchain-reference-upload b {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #cfd3e2;
  border-radius: 50%;
  background: #fff;
  color: #1f23ab;
  font-size: 20px;
  font-weight: 400;
}

.lightchain-choice-button span,
.lightchain-reference-upload span {
  color: #24283a;
  font-size: 13px;
  font-weight: 720;
}

.lightchain-choice-button em {
  color: #7f8699;
  font-size: 11px;
  font-style: normal;
}

.lightchain-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lightchain-reference-grid img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid #e2e5ed;
  border-radius: 5px;
  object-fit: cover;
  animation: designResultIn 220ms ease both;
}

.lightchain-design-center {
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #f5f6fa;
}

.lightchain-design-center > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 24px;
  border-bottom: 1px solid #e1e4ec;
  background: rgba(255, 255, 255, 0.96);
}

.lightchain-design-center > header > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.lightchain-design-center > header strong { color: #171a29; font-size: 15px; }
.lightchain-design-center > header span { color: #8b91a1; font-size: 11px; }
.lightchain-design-center > header nav { display: flex; gap: 8px; }

.lightchain-design-center > header button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #d7dbe6;
  border-radius: 5px;
  background: #fff;
  color: #596073;
  font-size: 11px;
  font-weight: 700;
}

.lightchain-design-center > header button:hover { border-color: #9fa5c5; color: #1f23ab; }
.lightchain-design-center > header button.primary { border-color: #1f23ab; background: #1f23ab; color: #fff; }

.lightchain-design-results {
  min-height: 0;
  padding: 28px;
  overflow: auto;
  background: #f5f6fa;
}

.lightchain-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-content: start;
  gap: 18px;
}

.lightchain-result-grid > article {
  display: grid;
  grid-template-rows: minmax(300px, 1fr) 52px;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid #e0e3eb;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(24, 30, 62, 0.07);
  animation: designResultIn 260ms cubic-bezier(.2, .7, .2, 1) both;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.lightchain-result-grid > article:nth-child(2) { animation-delay: 45ms; }
.lightchain-result-grid > article:nth-child(3) { animation-delay: 90ms; }
.lightchain-result-grid > article:hover { border-color: #aeb3d7; box-shadow: 0 18px 44px rgba(24, 30, 72, 0.12); transform: translateY(-3px); }
.lightchain-result-grid > article.is-selected { border-color: #1f23ab; box-shadow: 0 0 0 1px #1f23ab, 0 18px 44px rgba(31, 35, 171, 0.13); }
.lightchain-result-grid > article.is-stale { opacity: 0.66; }

.lightchain-result-image {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 0;
  background: #eef0f4;
}

.lightchain-result-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 220ms ease; }
.lightchain-result-image:hover img { transform: scale(1.015); }
.lightchain-result-image > span {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 8px 12px;
  border-radius: 4px;
  background: rgba(18, 22, 39, 0.88);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.lightchain-result-image:hover > span { opacity: 1; transform: translateY(0); }

.lightchain-result-grid article > footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border-top: 1px solid #e5e7ed;
}

.lightchain-result-grid article > footer button {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid #e5e7ed;
  background: #fff;
  color: #596073;
  font-size: 11px;
  text-align: left;
}

.lightchain-result-grid article > footer button:first-child { border-left: 0; }
.lightchain-result-grid article > footer strong { overflow: hidden; color: #24283a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lightchain-result-grid article > footer span { color: #8a91a2; font-size: 10px; }

.lightchain-design-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 13px;
  min-height: 100%;
  text-align: center;
}

.lightchain-design-empty > i {
  width: 64px;
  height: 78px;
  border: 1px solid #cbd0dc;
  border-radius: 32px 32px 7px 7px;
  background: #fff;
  box-shadow: inset 0 -15px 0 #e9eaff, 14px 13px 0 -8px #fff, 14px 13px 0 -7px #ccd1dc;
}

.lightchain-design-empty[data-running="true"] > i { animation: designGenerating 1.7s ease-in-out infinite; }
.lightchain-design-empty strong { color: #1b1f32; font-size: 22px; }
.lightchain-design-empty p { max-width: 380px; margin: 0; color: #777f91; font-size: 12px; line-height: 1.7; }
.lightchain-design-empty button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 5px; background: #1f23ab; color: #fff; font-weight: 720; }

.lightchain-style-card > div,
.lightchain-keyword-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lightchain-current-style {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid #d9dde7;
  border-radius: 5px;
  background: #fafbfc;
  text-align: left;
}

.lightchain-current-style strong { color: #24283a; font-size: 12px; }
.lightchain-current-style span { color: #838a9c; font-size: 10px; }

.lightchain-style-card > div button,
.lightchain-keyword-card > div button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d8dce6;
  border-radius: 4px;
  background: #fff;
  color: #697084;
  font-size: 10px;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.lightchain-style-card > div button:hover,
.lightchain-keyword-card > div button:hover { border-color: #9ca2ca; color: #1f23ab; }
.lightchain-style-card > div button[aria-pressed="true"],
.lightchain-keyword-card > div button[aria-pressed="true"] { border-color: #b6b9e4; background: #f0f0ff; color: #1f23ab; }

.lightchain-keyword-card textarea {
  min-height: 150px;
  resize: vertical;
  padding: 13px;
  border: 1px solid #d8dce6;
  border-radius: 5px;
  background: #fafbfc;
  color: #25293a;
  font-size: 12px;
  line-height: 1.65;
}

.lightchain-keyword-card textarea:focus { border-color: #858bd1; box-shadow: 0 0 0 3px rgba(31, 35, 171, 0.08); outline: 0; }
.lightchain-generate-panel { margin-top: auto; gap: 13px; border-top: 1px solid #e5e7ee; border-bottom: 0; }
.lightchain-generate-panel > div { display: flex; justify-content: space-between; gap: 10px; color: #6f7688; font-size: 10px; }
.lightchain-generate-panel > div span { color: #25293a; font-weight: 720; }
.lightchain-generate-panel > div em { font-style: normal; }
.lightchain-generate-panel > button { min-height: 44px; border: 0; border-radius: 5px; background: #1f23ab; color: #fff; font-size: 13px; font-weight: 760; box-shadow: 0 9px 22px rgba(31, 35, 171, 0.2); transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.lightchain-generate-panel > button:hover:not(:disabled) { background: #171b93; box-shadow: 0 13px 28px rgba(31, 35, 171, 0.25); transform: translateY(-1px); }
.lightchain-generate-panel > button:disabled { background: #e4e6ec; color: #949bad; box-shadow: none; }

.lightchain-generation-activity { display: grid; gap: 8px; padding: 12px 18px; border-top: 1px solid #e1e4ec; background: #fff; }
.lightchain-generation-activity > header { display: flex; justify-content: space-between; }
.lightchain-generation-activity > header strong { color: #34394b; font-size: 11px; }
.lightchain-generation-activity > header button { border: 0; background: transparent; color: #1f23ab; font-size: 10px; }
.lightchain-generation-activity > div { display: flex; gap: 8px; overflow-x: auto; }
.lightchain-generation-activity > div > button { display: grid; grid-template-columns: auto minmax(86px, 1fr) auto; gap: 8px; flex: 0 0 auto; min-height: 32px; padding: 0 10px; border: 1px solid #e0e3ea; border-radius: 4px; background: #fafbfc; color: #697084; font-size: 9px; }

.creation-category-modal {
  box-sizing: border-box;
  pointer-events: none;
}

.creation-category-modal .choice-modal-backdrop { display: none; }
.creation-category-panel {
  position: fixed;
  top: 82px;
  right: 28px;
  left: auto;
  z-index: 1;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(900px, calc(100vw - 56px));
  max-height: min(720px, calc(100dvh - 110px));
  padding: 0;
  overflow: hidden;
  pointer-events: auto;
  transform: none;
  border: 1px solid #dce0e9;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(25, 30, 58, 0.24);
  animation: categoryPanelIn 200ms cubic-bezier(.2, .7, .2, 1) both;
}

.creation-category-panel > header { padding: 22px 26px 16px; border-bottom: 0; }
.creation-category-panel > header h2 { margin: 0; color: #181b2a; font-size: 22px; }
.creation-category-panel > header p { margin: 5px 0 0; color: #858c9c; font-size: 11px; }
.creation-category-panel .choice-modal-close { border-color: #e0e3ea; background: #fff; color: #4e5568; }
.creation-category-panel .choice-modal-close:hover { border-color: #aeb4c3; background: #f5f6f9; color: #1f23ab; }
.creation-category-tabs { display: flex; gap: 28px; padding: 0 26px; border-bottom: 1px solid #e4e6ec; }
.creation-category-tabs button { position: relative; min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: #6e7485; cursor: pointer; font-size: 12px; font-weight: 700; }
.creation-category-tabs button[aria-pressed="true"] { color: #1f23ab; }
.creation-category-tabs button[aria-pressed="true"]::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #1f23ab; content: ""; }
.creation-category-panel > main { min-height: 390px; padding: 22px 26px; overflow-y: auto; background: #f7f8fa; }
.creation-category-panel [data-category-panel][hidden] { display: none; }
.creation-category-group { display: grid; gap: 10px; margin-bottom: 22px; }
.creation-category-group > strong { color: #4a5061; font-size: 11px; }
.creation-category-group > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.creation-category-group button { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 62px; padding: 9px 11px; border: 1px solid #dde1e9; border-radius: 5px; background: #fff; color: #34394b; text-align: left; transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.creation-category-group button:hover { border-color: #9ea4d1; box-shadow: 0 7px 20px rgba(31, 35, 90, 0.08); transform: translateY(-1px); }
.creation-category-group button[aria-pressed="true"] { border-color: #1f23ab; box-shadow: 0 0 0 1px #1f23ab; color: #1f23ab; }
.creation-category-icon { display: grid; place-items: center; width: 38px; height: 42px; border-radius: 4px; background: #f3f4f8; color: #697084; transition: color 150ms ease, background 150ms ease; }
.creation-category-icon svg { width: 27px; height: 30px; }
.creation-category-group button:hover .creation-category-icon,
.creation-category-group button[aria-pressed="true"] .creation-category-icon { background: #eef0ff; color: #1f23ab; }
.creation-category-group button span { overflow: hidden; font-size: 11px; font-weight: 690; text-overflow: ellipsis; white-space: nowrap; }
.creation-category-panel > footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px; border-top: 1px solid #e3e6ed; background: #fff; }
.creation-category-panel > footer span { color: #747b8d; font-size: 11px; }

@keyframes designResultIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes designGenerating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes categoryPanelIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .design-production-studio.lightchain-design-studio { grid-template-columns: 238px minmax(430px, 1fr) 278px; }
  .creation-category-group > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .design-production-studio.lightchain-design-studio { display: grid; grid-template-columns: 230px minmax(420px, 1fr); overflow: auto; }
  .lightchain-design-right { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 240px; border-top: 1px solid #e1e4ec; border-left: 0; }
  .lightchain-generate-panel { margin-top: 0; }
  .creation-category-group > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .design-production-studio.lightchain-design-studio { display: block; overflow-y: auto; }
  .lightchain-design-left,
  .lightchain-design-right { display: block; border: 0; }
  .lightchain-design-center { min-height: 620px; }
  .lightchain-design-right { grid-template-columns: 1fr; }
  .creation-category-panel { top: 10px; right: 10px; width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .creation-category-group > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .lightchain-result-grid > article,
  .lightchain-reference-grid img,
  .creation-category-panel,
  .lightchain-design-empty[data-running="true"] > i { animation: none; }
}

/* Phone account center */
.workspace-login-modal {
  padding: 20px;
  background: rgba(20, 27, 56, 0.28);
  backdrop-filter: blur(10px);
}

.workspace-login-modal::before {
  display: none;
}

.workspace-login-backdrop {
  position: absolute;
  inset: 0;
}

.workspace-login-modal > section {
  width: min(420px, calc(100vw - 32px));
  border: 1px solid #d9dfed;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(33, 43, 84, 0.2);
}

.workspace-login-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid #e6eaf2;
  background: #ffffff;
}

.workspace-login-modal h1 {
  color: #111827;
  font-size: 22px;
}

.workspace-login-modal header > button {
  display: grid;
  width: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid #dfe4ef;
  border-radius: 5px;
  background: #ffffff;
  color: #5e6678;
  font-size: 20px;
  font-weight: 500;
}

.account-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 20px 24px 0;
  padding: 4px;
  border-radius: 6px;
  background: #f1f3f9;
}

.workspace-login-modal .account-auth-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #687085;
  font-size: 12px;
}

.workspace-login-modal .account-auth-tabs button.active {
  background: #ffffff;
  color: #1f23ab;
  box-shadow: 0 2px 8px rgba(31, 35, 171, 0.08);
}

.workspace-login-modal form {
  gap: 16px;
  padding: 22px 24px 24px;
}

.workspace-login-modal label {
  gap: 8px;
  color: #4e5669;
  font-size: 12px;
  font-weight: 700;
}

.workspace-login-modal input {
  min-height: 46px;
  border-color: #d8deea;
  border-radius: 5px;
  background: #ffffff;
  color: #151a2d;
  font-size: 14px;
}

.workspace-login-modal input:focus {
  border-color: #1f23ab;
  box-shadow: 0 0 0 3px rgba(31, 35, 171, 0.08);
}

.workspace-login-modal form p {
  min-height: 18px;
  color: #d33d54;
  font-size: 12px;
}

.workspace-login-modal form > button.primary {
  min-height: 46px;
  border-color: #1f23ab;
  border-radius: 5px;
  background: #1f23ab;
  font-size: 14px;
}

.workspace-login-modal form > button.primary:hover {
  background: #171a83;
}

.account-profile-panel {
  display: grid;
  justify-items: center;
  padding: 28px 24px 24px;
}

.account-profile-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: #eef0ff;
  color: #1f23ab;
  font-size: 22px;
  font-weight: 850;
}

.account-profile-panel > strong {
  margin-top: 12px;
  color: #151a2d;
  font-size: 17px;
}

.account-profile-panel dl {
  width: 100%;
  margin: 24px 0;
  border-top: 1px solid #e7eaf1;
}

.account-profile-panel dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  border-bottom: 1px solid #e7eaf1;
}

.account-profile-panel dt {
  color: #70788a;
  font-size: 12px;
}

.account-profile-panel dd {
  margin: 0;
  color: #1c2235;
  font-size: 13px;
  font-weight: 700;
}

.workspace-login-modal .account-logout-button {
  width: 100%;
  min-height: 42px;
  border-color: #d8deea;
  background: #ffffff;
  color: #50586b;
  font-size: 13px;
}

.workspace-login-modal .account-logout-button:hover {
  border-color: #b8c1d5;
  color: #1f23ab;
}

/* 2026-08-17 v3: softer creation-first hierarchy aligned with the Jingzhun tool family. */
body.home-view-active,
.product-home {
  background: #f4f6fd !important;
}

.product-home-inner {
  width: 100%;
  max-width: none;
  padding: 0 0 52px;
}

.product-home .home-command-header {
  width: 100%;
  padding: 0 max(28px, calc((100vw - 1320px) / 2));
  border-bottom-color: #e5e8f1;
}

.product-home .home-command {
  padding: 60px 24px 54px;
}

.product-home .home-command-body {
  width: min(900px, 100%);
  text-align: center;
}

.product-home .home-command-kicker {
  color: #6d7486;
  font-size: 11px;
  font-weight: 700;
}

.product-home .home-command h1 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 42px;
  font-weight: 820;
}

.product-home .home-command h1 span {
  color: #1f23ab;
}

.home-command-subtitle {
  margin: 11px 0 28px;
  color: #858c9d;
  font-size: 13px;
}

.product-home .home-design-form {
  width: min(850px, 100%);
  min-height: 164px;
  margin: 0 auto;
  border-color: #dce0eb;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(50, 58, 92, 0.09);
}

.product-home .home-design-form:focus-within {
  box-shadow: 0 0 0 3px rgba(31, 35, 171, 0.07), 0 22px 52px rgba(50, 58, 92, 0.11);
}

.product-home .home-design-form textarea {
  min-height: 102px;
  padding: 22px 23px 8px;
  text-align: left;
}

.home-composer-footer {
  min-height: 62px;
  padding: 8px 10px 10px 18px;
  border-top: 1px solid #eef0f5;
}

.home-composer-actions,
.home-submit-group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.home-composer-actions button {
  min-height: 33px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #687083;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.home-composer-actions button:hover {
  background: #f1f3f8;
  color: #1f23ab;
}

.home-composer-actions button b {
  color: #1f23ab;
  font-size: 15px;
}

.home-submit-group small {
  color: #a0a6b3;
  font-size: 9px;
  font-weight: 600;
}

.product-home .home-design-form .home-submit-group > #homeStartDesign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 124px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid #1f23ab;
  border-radius: 6px;
  background: #1f23ab;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.product-home .home-design-form .home-submit-group > #homeStartDesign:hover {
  background: #171a83;
}

.product-home .home-prompt-examples {
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.product-home .home-prompt-examples button {
  min-height: 32px;
  padding: 0 13px;
  border-color: #e2e5ed;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  color: #7c8393;
  font-weight: 650;
}

.product-home .home-design-status {
  margin-top: 10px;
  text-align: center;
}

.home-workspace-section {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 34px;
  border-top-color: #e3e6ef;
}

.home-workspace-section > header {
  margin-bottom: 18px;
}

.home-workspace-section > header > div {
  text-align: left;
}

.home-workspace-section > header span {
  color: #1f23ab;
}

.home-workspace-section > header h2 {
  margin-top: 6px;
  font-size: 24px;
}

.home-workspace-section > header p {
  margin: 5px 0 0;
  color: #8a91a1;
  font-size: 11px;
}

.product-home .home-workflows {
  grid-template-columns: 1.18fr 0.91fr 0.91fr;
  height: 230px;
}

.product-home .home-workflow-card {
  grid-template-rows: 158px 72px;
  height: 230px;
  min-height: 230px;
  border-color: #dfe3ec;
  background: rgba(255, 255, 255, 0.92);
}

.product-home .home-workflow-card:hover {
  border-color: #b8bed1;
  box-shadow: 0 15px 32px rgba(45, 52, 82, 0.08);
}

.product-home .home-workflow-card .home-workflow-media img {
  filter: saturate(.78) contrast(.97) brightness(1.03);
}

.product-home .home-workflow-card:hover .home-workflow-media img {
  filter: saturate(.92) contrast(1) brightness(1.01);
}

@media (max-width: 920px) {
  .product-home .home-command {
    padding: 48px 22px 44px;
  }

  .home-workspace-section {
    width: calc(100% - 44px);
  }

  .product-home .home-workflows {
    height: auto;
  }

  .product-home .home-workflow-card {
    grid-template-columns: minmax(0, 1fr) 42px;
    grid-template-rows: 158px 70px;
    height: 228px;
    min-height: 228px;
  }
}

@media (max-width: 620px) {
  .product-home .home-command-header {
    padding: 0 14px;
  }

  .product-home .home-command {
    padding: 36px 14px 36px;
  }

  .product-home .home-command h1 {
    flex-wrap: wrap;
    gap: 3px 8px;
    font-size: 34px;
  }

  .home-command-subtitle {
    margin-bottom: 22px;
    font-size: 12px;
  }

  .home-composer-footer {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    padding-left: 8px;
  }

  .home-composer-actions button:last-child,
  .home-submit-group small,
  .product-home .home-design-form .home-submit-group > #homeStartDesign span {
    display: none;
  }

  .product-home .home-design-form .home-submit-group > #homeStartDesign {
    min-width: 44px;
    width: 44px;
    justify-content: center;
  }

  .product-home .home-prompt-examples {
    justify-content: flex-start;
  }

  .home-workspace-section {
    width: calc(100% - 28px);
  }

  .home-workspace-section > header p,
  .home-workspace-section > header > button {
    display: none;
  }

  .product-home .home-workflows {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .product-home .home-workflow-card {
    grid-template-columns: 38% minmax(0, 1fr) 34px;
    grid-template-rows: 122px;
    height: 122px;
    min-height: 122px;
  }
}

/* Final workflow-card layout. Keep this after all legacy home overrides. */
.product-home .home-command h1 {
  display: block;
  margin-top: 0;
  color: #111522;
  font-size: 42px;
}

.product-home .home-workflows {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  height: 154px;
}

.product-home .home-workflow-card {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 42px;
  grid-template-rows: 154px;
  height: 154px;
  min-height: 154px;
}

.product-home .home-workflow-icon-wrap {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  min-width: 0;
  border-right: 1px solid #eceef4;
  background: #f8f9fd;
}

.product-home .home-workflow-copy {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 24px 18px;
  align-content: center;
  align-self: stretch;
  gap: 0 9px;
  min-width: 0;
  padding: 0 10px 0 18px;
}

.product-home .home-workflow-card > b {
  grid-column: 3;
  grid-row: 1;
  min-height: 154px;
}

@media (max-width: 920px) {
  .product-home .home-workflows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
  }

  .product-home .home-workflow-design {
    grid-column: 1 / -1;
  }

  .product-home .home-workflow-card {
    grid-template-columns: 88px minmax(0, 1fr) 40px;
    grid-template-rows: 132px;
    height: 132px;
    min-height: 132px;
  }

  .product-home .home-workflow-card > b {
    min-height: 132px;
  }
}

@media (max-width: 620px) {
  .product-home .home-command h1 {
    font-size: 34px;
  }

  .product-home .home-workflows {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-home .home-workflow-design {
    grid-column: auto;
  }

  .product-home .home-workflow-card {
    grid-template-columns: 80px minmax(0, 1fr) 38px;
    grid-template-rows: 108px;
    height: 108px;
    min-height: 108px;
  }

  .product-home .home-workflow-card > b {
    min-height: 108px;
  }
}

/* Final brand mark: use the extracted whale graphic without wordmark text. */
.brand-sr-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-brand-mark,
.workspace-chrome-mark,
.dash-logo-mark,
.rail-brand-mark {
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/brand/jingzhi-mark.png?v=20260817-brand1") center / contain no-repeat !important;
  box-shadow: none !important;
}

.home-brand-mark::before,
.home-brand-mark::after,
.workspace-chrome-mark::before,
.workspace-chrome-mark::after,
.dash-logo-mark::before,
.dash-logo-mark::after,
.rail-brand-mark::before,
.rail-brand-mark::after {
  display: none !important;
  content: none !important;
}

.product-home .home-brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.workspace-chrome-brand {
  min-width: 40px;
  gap: 0;
}

.workspace-chrome-mark,
.dash-logo-mark {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.rail-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 12px 0;
}

.rail-brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

/* The source image supplies only the whale mark; this is the product wordmark. */
.brand-product-name {
  display: block;
  margin: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.product-home .home-brand {
  gap: 9px;
}

.product-home .home-brand .brand-product-name {
  font-size: 20px;
}

.workspace-chrome-brand {
  min-width: 92px;
  gap: 8px;
}

.workspace-chrome-brand .brand-product-name {
  color: #151b34;
  font-size: 17px;
}

.dash-logo {
  gap: 8px;
}

.dash-logo .brand-product-name {
  color: #171a82;
  font-size: 16px;
}

.rail-brand {
  gap: 9px;
}

.rail-brand .brand-product-name {
  color: inherit;
  font-size: 18px;
}

@media (max-width: 920px) {
  .workspace-chrome-brand {
    min-width: 36px;
  }

  .workspace-chrome-brand .brand-product-name {
    display: none;
  }
}

/* Independent media studios are creation workspaces, not design-status screens. */
.media-canvas-workbench[data-creation-mode="independent"] {
  --independent-line: #dfe3f1;
  --independent-muted: #6f7890;
  --independent-ink: #171b2e;
  background: #f7f8fc;
}

.media-canvas-workbench[data-creation-mode="independent"] .media-canvas-contextbar,
.media-canvas-workbench[data-creation-mode="independent"] .media-commandbar,
.media-canvas-workbench[data-creation-mode="independent"] .design-canvas-statusbar {
  background: #fff;
  border-color: var(--independent-line);
}

.media-canvas-workbench[data-creation-mode="independent"] .canvas-project-context strong,
.media-canvas-workbench[data-creation-mode="independent"] .media-commandbar strong,
.media-canvas-workbench[data-creation-mode="independent"] .design-canvas-statusbar {
  color: var(--independent-ink);
}

.image-asset-context-toolbar.is-independent {
  border-color: var(--independent-line, #dfe3f1);
  background: #fff;
  box-shadow: 0 8px 28px rgba(34, 43, 82, 0.06);
}

.image-asset-context-toolbar.is-independent .image-asset-context-empty strong,
.image-asset-context-toolbar.is-independent .image-asset-context-current strong {
  color: #171b2e;
}

.image-asset-context-toolbar.is-independent .image-asset-context-empty em,
.image-asset-context-toolbar.is-independent .image-asset-context-current span {
  color: #768096;
}

.image-studio-independent-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-column: 1 / -1;
  width: 100%;
  min-height: 100%;
  color: #171b2e;
  background:
    linear-gradient(rgba(31, 35, 171, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 35, 171, 0.035) 1px, transparent 1px),
    #f8f9fd;
  background-size: 28px 28px;
}

.image-canvas-studio.is-independent-empty {
  grid-template-columns: minmax(0, 1fr);
}

.independent-image-launch {
  display: grid;
  place-content: center;
  justify-items: start;
  gap: 14px;
  min-width: 0;
  padding: clamp(42px, 8vw, 110px);
  border-right: 1px solid #e1e5f0;
}

.independent-image-mark {
  position: relative;
  width: 64px;
  height: 64px;
  border: 1px solid #d8dcef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(31, 35, 171, 0.12);
}

.independent-image-mark i {
  position: absolute;
  display: block;
  border: 2px solid #3439d4;
  border-radius: 50%;
}

.independent-image-mark i:nth-child(1) { inset: 15px 25px 25px 15px; }
.independent-image-mark i:nth-child(2) { inset: 25px 15px 15px 25px; border-color: #7b80f3; }
.independent-image-mark i:nth-child(3) { width: 7px; height: 7px; top: 12px; right: 12px; border: 0; background: #1f23ab; }

.independent-image-launch > span,
.independent-image-contract header span {
  color: #3439d4;
  font: 800 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.independent-image-launch > strong {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.12;
}

.independent-image-launch > p {
  max-width: 560px;
  margin: 0;
  color: #6f7890;
  font-size: 14px;
  line-height: 1.8;
}

.independent-image-examples,
.independent-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.independent-image-examples button,
.independent-image-actions button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #d9deec;
  border-radius: 6px;
  background: #fff;
  color: #404961;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.independent-image-examples button:hover,
.independent-image-actions button:hover {
  border-color: #8186ea;
  color: #1f23ab;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(31, 35, 171, 0.08);
}

.independent-image-actions button.primary {
  border-color: #1f23ab;
  background: #1f23ab;
  color: #fff;
}

.independent-image-contract {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 32px 28px;
  background: rgba(255, 255, 255, 0.88);
}

.independent-image-contract header { display: grid; gap: 6px; }
.independent-image-contract header strong { font-size: 18px; }
.independent-image-contract dl { display: grid; gap: 0; margin: 0; border-top: 1px solid #e4e7f0; }
.independent-image-contract dl div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid #e4e7f0; }
.independent-image-contract dt { color: #7c8498; font-size: 12px; }
.independent-image-contract dd { margin: 0; color: #222840; font-size: 12px; font-weight: 700; text-align: right; }
.independent-image-contract p { margin: 0; color: #778096; font-size: 12px; line-height: 1.7; }

@media (max-width: 980px) {
  .image-studio-independent-empty { grid-template-columns: 1fr; overflow: auto; }
  .independent-image-launch { min-height: 540px; border-right: 0; border-bottom: 1px solid #e1e5f0; }
}

/* 2026-08-18: commercial creative-suite shell.
   One visual system, three purpose-built workspaces. */
:root {
  --studio-bg: #f3f5f9;
  --studio-surface: #ffffff;
  --studio-soft: #f8f9fc;
  --studio-line: #e5e8f0;
  --studio-line-strong: #d5dae7;
  --studio-ink: #15182a;
  --studio-muted: #687086;
  --studio-faint: #9299aa;
  --studio-blue: #1f23ab;
  --studio-blue-hover: #171a82;
  --studio-blue-soft: #eef0ff;
  --studio-shadow: 0 10px 30px rgba(25, 31, 67, 0.07);
  --studio-shadow-float: 0 18px 48px rgba(25, 31, 67, 0.12);
}

.fashion-dashboard {
  grid-template-columns: 156px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  background: var(--studio-bg);
}

.workspace-chrome {
  height: 58px;
  padding: 0 22px;
  border-bottom: 1px solid var(--studio-line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
}

.workspace-chrome-brand {
  min-width: 112px;
}

.workspace-product-nav {
  align-self: stretch;
  gap: 26px;
}

.workspace-product-nav button {
  position: relative;
  height: 100%;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #747c8e;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

.workspace-product-nav button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--studio-blue);
  content: "";
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity 160ms ease, transform 180ms ease;
}

.workspace-product-nav button:hover {
  border: 0;
  background: transparent;
  color: var(--studio-ink);
}

.workspace-product-nav button.active {
  border: 0;
  background: transparent;
  color: var(--studio-blue);
  box-shadow: none;
}

.workspace-product-nav button.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.workspace-chrome-actions {
  gap: 2px;
}

.workspace-chrome-actions button {
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  font-size: 10px;
}

.workspace-chrome-actions button:hover {
  border: 0;
  background: #f2f4f8;
}

.workspace-chrome-actions .workspace-chrome-primary {
  margin-left: 6px;
  padding-inline: 13px;
  border: 0;
  background: var(--studio-blue);
  box-shadow: 0 7px 18px rgba(31, 35, 171, .18);
}

.dash-rail {
  grid-row: 1;
  grid-template-rows: 58px repeat(11, 43px) minmax(0, 1fr) 43px;
  gap: 3px;
  padding: 0 10px 12px;
  border-right: 1px solid var(--studio-line);
  background: #fafbfe;
}

.dash-logo {
  height: 58px;
  padding: 0 9px;
}

.dash-icon {
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: #626b7d;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

.dash-icon-glyph {
  color: #8b93a5;
  font-size: 15px;
}

.dash-icon-label {
  font-size: 11px;
  font-weight: 650;
}

.dash-icon:hover {
  border: 0;
  background: #f0f2f8;
  color: var(--studio-ink);
  box-shadow: none;
  transform: translateX(2px);
}

.dash-icon.active {
  border: 0;
  background: var(--studio-blue-soft);
  color: var(--studio-blue);
  box-shadow: inset 3px 0 0 var(--studio-blue);
}

.dash-icon.active .dash-icon-glyph,
.dash-icon:hover .dash-icon-glyph {
  color: var(--studio-blue);
}

.dash-workspace,
.fashion-dashboard.canvas-mode .dash-workspace,
.fashion-dashboard.canvas-mode.media-workspace-mode .dash-workspace {
  grid-row: 1;
  background: var(--studio-bg);
}

.canvas-workspace-shell {
  grid-template-rows: 58px minmax(0, 1fr);
  min-height: 0;
  padding: 0 16px 16px;
  background: var(--studio-bg);
}

.canvas-workspace-tabs {
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 0 10px;
  border: 0;
  background: transparent;
}

.canvas-workspace-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: 26px auto;
  grid-template-rows: 18px 15px;
  flex: 0 0 auto;
  align-content: center;
  gap: 0 8px;
  min-width: 142px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--studio-muted);
  text-align: left;
  box-shadow: none;
}

.canvas-workspace-tabs button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--studio-blue);
  content: "";
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity 160ms ease, transform 180ms ease;
}

.canvas-workspace-tabs button:hover,
.canvas-workspace-tabs button.active {
  border: 0;
  background: transparent;
  color: var(--studio-ink);
  box-shadow: none;
}

.canvas-workspace-tabs button.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.canvas-workspace-tabs span {
  grid-row: 1 / span 2;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  align-self: center;
  border: 1px solid var(--studio-line-strong);
  border-radius: 50%;
  color: #7d8597;
  font-size: 8px;
  font-weight: 800;
}

.canvas-workspace-tabs button.active span {
  border-color: var(--studio-blue);
  background: var(--studio-blue);
  color: #fff;
}

.canvas-workspace-tabs strong {
  align-self: end;
  color: inherit;
  font-size: 11px;
  line-height: 1;
}

.canvas-workspace-tabs em {
  display: block;
  align-self: start;
  color: #969dad;
  font-size: 8px;
  font-style: normal;
  line-height: 1;
}

.design-canvas-workbench,
.media-canvas-workbench {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  background: var(--studio-surface);
  box-shadow: var(--studio-shadow);
}

.design-canvas-workbench.is-studio-view {
  grid-template-rows: 56px minmax(0, 1fr) 28px;
}

.design-canvas-workbench.is-flow-view {
  grid-template-rows: 56px 92px minmax(0, 1fr) 28px;
}

.design-canvas-contextbar,
.media-canvas-contextbar {
  min-height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--studio-line);
  background: #fff;
}

.canvas-project-context {
  gap: 8px;
}

.canvas-project-context span {
  color: var(--studio-faint);
  font-size: 8px;
  letter-spacing: 0;
}

.canvas-project-context strong {
  color: var(--studio-ink);
  font-size: 12px;
}

.canvas-project-context em {
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf8f2;
  color: #22875c;
  font-size: 8px;
}

.design-view-switch,
.media-creation-mode,
.image-view-switch,
.canvas-engine-control > div,
.canvas-mode-switch,
.canvas-view-controls {
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: 6px;
  background: #f3f4f8;
}

.design-view-switch button,
.media-creation-mode button,
.image-view-switch button,
.canvas-engine-control button,
.canvas-mode-switch button,
.canvas-view-controls button {
  min-height: 29px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #737b8e;
  box-shadow: none;
}

.design-view-switch button:hover,
.media-creation-mode button:hover,
.image-view-switch button:hover,
.canvas-engine-control button:hover,
.canvas-mode-switch button:hover,
.canvas-view-controls button:hover {
  border: 0;
  background: rgba(255,255,255,.72);
  color: var(--studio-ink);
}

.design-view-switch button.active,
.media-creation-mode button.active,
.image-view-switch button.active,
.canvas-engine-control button.active,
.canvas-mode-switch button.active {
  border: 0;
  background: #fff;
  color: var(--studio-blue);
  box-shadow: 0 2px 8px rgba(28, 35, 73, .09);
}

.canvas-capability-badge,
.media-capability-badge {
  min-height: 30px;
  border: 1px solid #cfe7dc;
  border-radius: 5px;
  background: #f3fbf7;
  color: #20815a;
}

/* Fashion design: inputs frame the work; generated looks own the center. */
.design-production-studio.lightchain-design-studio {
  grid-template-columns: 252px minmax(420px, 1fr) 292px;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  background: var(--studio-soft);
}

.design-production-studio.lightchain-design-studio > template {
  display: none;
}

.lightchain-design-left,
.lightchain-design-right {
  align-content: start;
  gap: 0;
  padding: 0;
  background: #fff;
  scrollbar-width: thin;
}

.lightchain-design-left {
  border-right: 1px solid var(--studio-line);
}

.lightchain-design-right {
  border-left: 1px solid var(--studio-line);
}

.lightchain-control-card,
.lightchain-generate-panel {
  gap: 12px;
  padding: 18px;
  border: 0;
  border-bottom: 1px solid var(--studio-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.lightchain-control-card > header strong {
  color: var(--studio-ink);
  font-size: 12px;
  font-weight: 750;
}

.lightchain-control-card > header span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--studio-faint);
  font-size: 8px;
}

.lightchain-control-card.is-required > header span {
  background: transparent;
  color: var(--studio-blue);
}

.lightchain-choice-button,
.lightchain-reference-upload {
  min-height: 62px;
  padding: 12px;
  border: 1px dashed #cbd1df;
  border-radius: 6px;
  background: #fafbfc;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.lightchain-choice-button:hover,
.lightchain-reference-upload:hover {
  border-color: #858dc7;
  background: #f5f6ff;
  transform: translateY(-1px);
}

.lightchain-choice-button span,
.lightchain-reference-upload span,
.lightchain-material-summary > button strong,
.lightchain-current-style strong {
  color: #262a3c;
  font-size: 10px;
}

.lightchain-choice-button em,
.lightchain-material-summary > button em,
.lightchain-current-style span {
  color: #8991a3;
  font-size: 8px;
}

.lightchain-reference-grid {
  gap: 8px;
}

.lightchain-reference-grid img {
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0 0 1px var(--studio-line);
}

.lightchain-material-summary > button,
.lightchain-current-style {
  padding: 11px;
  border: 1px solid var(--studio-line);
  border-radius: 6px;
  background: #fafbfc;
}

.lightchain-palette-button i {
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d8dce6;
}

.lightchain-design-center {
  grid-template-rows: 62px minmax(0, 1fr) auto;
  background: #f6f7fa;
}

.lightchain-design-center > header {
  padding: 0 20px;
  border-bottom: 1px solid var(--studio-line);
  background: rgba(255,255,255,.92);
}

.lightchain-design-center > header strong {
  color: var(--studio-ink);
  font-size: 13px;
}

.lightchain-design-center > header span {
  color: var(--studio-faint);
  font-size: 9px;
}

.lightchain-design-center > header nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.lightchain-design-center > header button {
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #697184;
  font-size: 8px;
}

.lightchain-design-center > header button:hover {
  background: #f0f2f6;
  color: var(--studio-ink);
}

.lightchain-design-center > header button.primary {
  background: var(--studio-blue);
  color: #fff;
}

.lightchain-design-results {
  padding: 24px;
  background-color: #f4f5f8;
  background-image: radial-gradient(circle, rgba(42, 48, 82, .1) .7px, transparent .8px);
  background-size: 22px 22px;
}

.lightchain-result-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-content: start;
  gap: 16px;
}

.lightchain-result-grid > article {
  min-height: 340px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 7px 24px rgba(28, 34, 65, .09);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.lightchain-result-grid > article:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(28, 34, 65, .14);
}

.lightchain-result-grid > article.is-selected {
  border: 0;
  box-shadow: 0 0 0 2px var(--studio-blue), 0 16px 38px rgba(31,35,171,.15);
}

.lightchain-result-grid article > footer {
  border-top: 1px solid var(--studio-line);
}

.lightchain-result-grid article > footer button {
  border-left-color: var(--studio-line);
}

.lightchain-design-empty {
  position: relative;
  gap: 12px;
  min-height: 100%;
  padding: 48px;
}

.lightchain-design-empty::before {
  width: 72px;
  height: 92px;
  border: 1px solid #bfc5d5;
  border-radius: 38px 38px 8px 8px;
  background: #fff;
  box-shadow: inset 0 -18px 0 #eef0ff, 18px 16px 0 -10px #fff, 18px 16px 0 -9px #cfd4e0;
  content: "";
}

.lightchain-design-empty span {
  margin-top: 10px;
  color: var(--studio-blue);
  font-size: 8px;
}

.lightchain-design-empty strong {
  color: var(--studio-ink);
  font-size: 24px;
}

.lightchain-design-empty p {
  max-width: 390px;
  color: var(--studio-muted);
  font-size: 11px;
}

.lightchain-design-empty button,
.lightchain-generate-panel > button {
  min-height: 40px;
  border: 0;
  border-radius: 5px;
  background: var(--studio-blue);
  box-shadow: 0 8px 20px rgba(31,35,171,.2);
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.lightchain-design-empty button:hover,
.lightchain-generate-panel > button:hover:not(:disabled) {
  background: var(--studio-blue-hover);
  box-shadow: 0 12px 26px rgba(31,35,171,.24);
  transform: translateY(-1px);
}

.lightchain-style-card > div button,
.lightchain-keyword-card > div button {
  min-height: 29px;
  border-color: var(--studio-line-strong);
  border-radius: 5px;
  background: #fff;
  color: #687084;
}

.lightchain-style-card > div button:hover,
.lightchain-keyword-card > div button:hover {
  border-color: #979fc3;
  color: var(--studio-blue);
}

.lightchain-style-card > div button[aria-pressed="true"],
.lightchain-keyword-card > div button[aria-pressed="true"] {
  border-color: #aeb4e8;
  background: var(--studio-blue-soft);
  color: var(--studio-blue);
}

.lightchain-keyword-card textarea {
  min-height: 132px;
  padding: 12px;
  border: 1px solid var(--studio-line-strong);
  border-radius: 6px;
  background: #fafbfc;
  font-size: 10px;
}

.lightchain-generation-activity {
  padding: 12px 16px;
  border-top: 1px solid var(--studio-line);
}

.lightchain-generation-activity > div > button {
  border-color: var(--studio-line);
  border-radius: 5px;
  background: #fafbfc;
}

.lightchain-advanced-tools {
  border-bottom: 1px solid var(--studio-line);
  background: #fff;
}

.lightchain-advanced-tools > summary {
  min-height: 44px;
  padding: 0 18px;
  color: #626a7d;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

/* Image and video: prompt is the command surface, output is the stage. */
.media-canvas-workbench {
  grid-template-rows: 56px auto auto minmax(0, 1fr) 28px;
}

#videoCanvasWorkbench {
  grid-template-rows: 56px auto minmax(0, 1fr) 28px;
}

.media-canvas-workbench .media-commandbar {
  grid-template-columns: 132px minmax(240px, 1fr) auto 224px;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--studio-line);
  background: #f8f9fc;
}

.media-commandbar > div:first-child {
  padding-left: 8px;
  border-left: 2px solid var(--studio-blue);
}

.media-commandbar > div:first-child span {
  color: var(--studio-faint);
  font-size: 8px;
}

.media-commandbar > div:first-child strong {
  color: var(--studio-ink);
  font-size: 12px;
}

.media-commandbar textarea {
  min-height: 48px;
  padding: 13px 15px;
  border: 1px solid var(--studio-line-strong);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(29, 35, 65, .04);
  font-size: 11px;
  line-height: 1.5;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.media-commandbar textarea:focus {
  border-color: #9299d7;
  box-shadow: 0 0 0 3px rgba(31,35,171,.08), 0 8px 22px rgba(29,35,65,.06);
  outline: 0;
}

.media-command-actions {
  align-self: stretch;
}

.media-command-actions button,
.media-commandbar[data-media-type="video"] > button {
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  background: #eef0f5;
  color: #596175;
}

.media-commandbar .media-command-actions button:first-child,
.media-commandbar[data-media-type="video"] > button {
  background: var(--studio-blue);
  color: #fff;
  box-shadow: 0 7px 18px rgba(31,35,171,.18);
}

.media-commandbar > p {
  min-height: 48px;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--studio-line);
}

.media-commandbar > p strong {
  color: var(--studio-ink);
}

.media-commandbar > p span {
  color: var(--studio-faint);
}

.image-canvas-asset-context,
.image-asset-context-toolbar.is-independent {
  border: 0;
  border-bottom: 1px solid var(--studio-line);
  background: #fff;
  box-shadow: none;
}

.image-studio-independent-empty {
  background-color: #f5f6f9;
  background-image: radial-gradient(circle, rgba(38,44,75,.1) .7px, transparent .8px);
  background-size: 22px 22px;
}

.independent-image-launch {
  border-right-color: var(--studio-line);
}

.independent-image-mark {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(31,35,171,.13);
}

.independent-image-examples button,
.independent-image-actions button {
  border-color: var(--studio-line-strong);
  border-radius: 5px;
}

.independent-image-contract {
  background: rgba(255,255,255,.96);
}

.media-canvas-viewport,
.design-canvas-viewport {
  background-color: #f4f5f8;
  background-image: radial-gradient(circle, rgba(37,43,72,.12) .7px, transparent .8px);
  background-size: 22px 22px;
}

.media-canvas-main .design-canvas-inspector {
  border-left: 1px solid var(--studio-line);
  background: #fff;
  color: var(--studio-ink);
}

.media-canvas-main .design-canvas-inspector :is(h2, h3, strong, b, label, legend) {
  color: var(--studio-ink);
}

.media-canvas-main .design-canvas-inspector :is(p, span, em, small, dt, dd) {
  color: var(--studio-muted);
}

.media-canvas-main .design-canvas-inspector :is(input, select, textarea) {
  border: 1px solid var(--studio-line-strong);
  border-radius: 5px;
  background: #fafbfc;
  color: var(--studio-ink);
}

.media-canvas-main .design-canvas-inspector button:not(.primary) {
  border-color: var(--studio-line-strong);
  border-radius: 5px;
  background: #fff;
  color: #596175;
}

.media-canvas-main .design-canvas-inspector button.primary,
.media-canvas-main .design-canvas-inspector .active {
  border-color: var(--studio-blue);
  border-radius: 5px;
  background: var(--studio-blue);
  color: #fff;
}

#videoCanvasWorkbench .media-canvas-main {
  min-height: 0;
}

#videoCanvasViewport {
  min-height: 0;
}

.media-flow-node,
.design-canvas-node {
  border: 1px solid #dfe3ec;
  border-radius: 8px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 8px 24px rgba(27,33,64,.08);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.media-flow-node:hover,
.design-canvas-node:hover {
  border-color: #a9b0ca;
  background: #fff;
  box-shadow: 0 14px 34px rgba(27,33,64,.12);
  transform: translateY(-2px);
}

.media-flow-node.is-selected,
.design-canvas-node.is-selected {
  border-color: var(--studio-blue);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(31,35,171,.12), 0 16px 38px rgba(31,35,171,.14);
}

.media-flow-node header,
.design-canvas-node-header {
  border-bottom: 1px solid var(--studio-line);
  border-radius: 8px 8px 0 0;
  background: #fff;
}

.media-flow-node[data-task-status="queued"],
.media-flow-node[data-task-status="running"] {
  animation: studioTaskPulse 1.8s ease-in-out infinite;
}

.media-canvas-edges path.is-active,
.design-canvas-edges path.is-active {
  stroke-dasharray: 7 7;
  animation: studioEdgeFlow 1s linear infinite;
}

.design-canvas-statusbar {
  min-height: 28px;
  padding: 0 12px;
  border-top: 1px solid var(--studio-line);
  background: #fff;
  color: #858c9d;
  font-size: 8px;
}

.canvas-workspace-shell > [data-canvas-workspace-panel]:not([hidden]) {
  animation: studioPanelIn 220ms cubic-bezier(.2,.7,.2,1) both;
}

@keyframes studioPanelIn {
  from { opacity: .55; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes studioEdgeFlow {
  to { stroke-dashoffset: -14; }
}

@keyframes studioTaskPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(27,33,64,.08); }
  50% { box-shadow: 0 10px 30px rgba(31,35,171,.2); }
}

@media (max-width: 1240px) {
  .fashion-dashboard { grid-template-columns: 144px minmax(0, 1fr); }
  .design-production-studio.lightchain-design-studio { grid-template-columns: 226px minmax(360px, 1fr) 260px; }
  .media-canvas-workbench .media-commandbar { grid-template-columns: 110px minmax(220px, 1fr) auto 190px; }
  .workspace-product-nav { gap: 14px; }
}

@media (max-width: 980px) {
  .workspace-chrome-actions button:not(.workspace-chrome-primary) { display: none; }
  .design-production-studio.lightchain-design-studio { display: grid; grid-template-columns: 218px minmax(360px, 1fr); }
  .lightchain-design-right { display: none; }
  .media-canvas-workbench .media-commandbar { grid-template-columns: minmax(0, 1fr) auto; }
  .media-commandbar > div:first-child,
  .media-commandbar > p { display: none; }
}

@media (max-width: 760px) {
  .fashion-dashboard { grid-template-columns: minmax(0, 1fr); grid-template-rows: 54px minmax(0, 1fr); }
  .dash-rail { grid-row: 1; }
  .dash-workspace,
  .fashion-dashboard.canvas-mode .dash-workspace,
  .fashion-dashboard.canvas-mode.media-workspace-mode .dash-workspace { grid-row: 2; }
  .workspace-product-nav { gap: 10px; justify-content: flex-start; overflow-x: auto; }
  .workspace-product-nav button { flex: 0 0 auto; font-size: 10px; }
  .canvas-workspace-shell { padding: 0 8px 8px; }
  .canvas-workspace-tabs { gap: 18px; overflow-x: auto; }
  .canvas-workspace-tabs button { min-width: 126px; }
  .design-production-studio.lightchain-design-studio { display: block; overflow-y: auto; }
  .lightchain-design-left,
  .lightchain-design-right { display: block; border: 0; }
  .lightchain-design-center { min-height: 640px; }
  .media-canvas-contextbar { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-workspace-shell > [data-canvas-workspace-panel]:not([hidden]),
  .media-flow-node[data-task-status="queued"],
  .media-flow-node[data-task-status="running"],
  .media-canvas-edges path.is-active,
  .design-canvas-edges path.is-active {
    animation: none;
  }

  .lightchain-result-grid > article,
  .dash-icon,
  .lightchain-choice-button,
  .lightchain-reference-upload {
    transition: none;
  }
}
/* Fashion-first media flow */
#imageCanvasWorkbench > .media-commandbar,
#videoCanvasWorkbench > .media-commandbar,
#videoCanvasWorkbench > .media-canvas-main,
#imageCanvasWorkbench .media-creation-mode,
#videoCanvasWorkbench .media-creation-mode,
#imageCanvasWorkbench .canvas-mode-switch,
#videoCanvasWorkbench .canvas-mode-switch,
#imageCanvasWorkbench .canvas-view-controls,
#videoCanvasWorkbench .canvas-view-controls,
#imageCanvasWorkbench .image-view-switch,
#videoCanvasWorkbench .canvas-mode-switch {
  display: none !important;
}

#imageCanvasWorkbench,
#videoCanvasWorkbench {
  grid-template-rows: 62px minmax(0, 1fr);
}

#imageCanvasWorkbench.is-flow-view .image-view-switch {
  display: flex !important;
}

#imageCanvasWorkbench.is-flow-view #imageCanvasStudioMode {
  display: inline-flex !important;
}

#imageCanvasWorkbench.is-flow-view #imageCanvasStudioMode::after {
  content: "返回图片生成";
}

#imageCanvasWorkbench.is-flow-view #imageCanvasStudioMode {
  font-size: 0;
}

#imageCanvasWorkbench.is-flow-view #imageCanvasStudioMode::after {
  font-size: 13px;
}

#imageCanvasWorkbench.is-flow-view #imageCanvasFlowMode,
#imageCanvasWorkbench.is-flow-view #imageCanvasFocusMode {
  display: none !important;
}

#imageCanvasAssetContext,
#imageCanvasReviewCurrent {
  display: none !important;
}

#imageCanvasWorkbench .media-canvas-contextbar,
#videoCanvasWorkbench .media-canvas-contextbar {
  min-height: 62px;
  padding: 0 28px;
  border-bottom: 1px solid #e5e8f2;
  background: rgba(255, 255, 255, 0.96);
}

#imageCanvasWorkbench .media-workflow-entry {
  margin-left: auto;
}

#imageCanvasWorkbench .image-canvas-main,
#imageCanvasWorkbench .image-canvas-studio,
#videoCanvasWorkbench .video-fashion-studio {
  min-height: calc(100vh - 275px);
  background: #f7f8fc;
}

#imageCanvasWorkbench .image-canvas-studio,
#videoCanvasWorkbench .video-fashion-studio {
  display: block;
  overflow: auto;
  padding: clamp(28px, 4vw, 64px);
}

#imageCanvasWorkbench.is-studio-view .image-canvas-main {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#imageCanvasWorkbench.is-studio-view .image-canvas-studio {
  height: auto;
  min-height: 100%;
  overflow: visible;
  padding-bottom: clamp(72px, 7vh, 104px);
}

.fashion-flow {
  width: min(1480px, 100%);
  margin: 0 auto;
  color: #15182c;
}

.fashion-flow-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 34px;
}

.fashion-flow-heading > div:first-child {
  max-width: 720px;
}

.fashion-flow-heading span,
.fashion-flow-history > span {
  display: block;
  margin-bottom: 8px;
  color: #5964d8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.fashion-flow-heading h2 {
  margin: 0;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.05;
  letter-spacing: 0;
}

.fashion-flow-heading p {
  margin: 13px 0 0;
  color: #6c7287;
  font-size: 15px;
  line-height: 1.65;
}

.fashion-flow-progress {
  display: grid;
  min-width: 126px;
  padding-left: 24px;
  border-left: 1px solid #dfe3ee;
}

.fashion-flow-progress strong {
  color: #1f23ab;
  font-size: 30px;
  line-height: 1;
}

.fashion-flow-progress span {
  margin: 7px 0 0;
  color: #747a8e;
  font-size: 12px;
}

.fashion-image-modes {
  display: inline-flex;
  gap: 3px;
  margin: -10px 0 24px;
  padding: 4px;
  border: 1px solid #d9deeb;
  border-radius: 6px;
  background: #eef1f7;
}

.fashion-image-modes button {
  min-width: 104px;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #697087;
  font-weight: 750;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.fashion-image-modes button.is-active {
  background: #fff;
  color: #1f23ab;
  box-shadow: 0 4px 14px rgba(31, 35, 100, 0.09);
}

.fashion-video-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 10px;
  max-width: 760px;
  margin: -10px 0 24px;
}

.fashion-video-paths button {
  display: grid;
  gap: 5px;
  min-height: 66px;
  padding: 13px 16px;
  border: 1px solid #d9deeb;
  border-radius: 6px;
  background: #fff;
  color: #60677b;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(31, 35, 80, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.fashion-video-paths button:hover {
  transform: translateY(-2px);
  border-color: #aeb6ee;
  box-shadow: 0 12px 28px rgba(31, 35, 171, 0.08);
}

.fashion-video-paths button strong {
  color: #171a2c;
  font-size: 14px;
}

.fashion-video-paths button span {
  font-size: 11px;
  line-height: 1.5;
}

.fashion-video-paths button.is-active {
  border-color: #3438c8;
  background: #f7f8ff;
  box-shadow: inset 3px 0 #1f23ab, 0 12px 30px rgba(31, 35, 171, 0.1);
}

.fashion-video-paths button.is-active strong {
  color: #1f23ab;
}

.fashion-flow-sequence {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) 28px minmax(210px, 1fr) 28px minmax(210px, 1fr) 28px minmax(260px, 1.16fr);
  align-items: stretch;
  gap: 8px;
}

.fashion-garment-swap-sequence {
  grid-template-columns: minmax(260px, 0.88fr) 36px minmax(260px, 0.88fr) 36px minmax(340px, 1.18fr);
}

.fashion-video-sequence {
  grid-template-columns: minmax(280px, 0.9fr) 36px minmax(280px, 0.9fr) 36px minmax(360px, 1.2fr);
}

.fashion-video-five-stage {
  grid-template-columns: minmax(220px, 1fr) 20px minmax(220px, 1fr) 20px minmax(220px, 0.96fr) 20px minmax(245px, 1.08fr) 20px minmax(300px, 1.18fr);
  gap: 6px;
}

.fashion-video-four-stage {
  grid-template-columns: minmax(260px, 0.92fr) 28px minmax(360px, 1.28fr) 28px minmax(280px, 1fr) 28px minmax(320px, 1.14fr);
  gap: 8px;
  min-width: 1320px;
}

.fashion-video-six-stage {
  grid-template-columns: minmax(210px, 0.9fr) 18px minmax(210px, 0.9fr) 18px minmax(300px, 1.2fr) 18px minmax(220px, 0.95fr) 18px minmax(230px, 1fr) 18px minmax(280px, 1.12fr);
  gap: 6px;
  min-width: 1540px;
}

.fashion-video-flow {
  overflow-x: auto;
}

.fashion-motion-preprocess-body {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 285px;
  padding: 14px;
}

.fashion-motion-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fashion-motion-previews figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #dde2ef;
  border-radius: 5px;
  background: #f4f6fb;
}

.fashion-motion-previews video {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  background: #111525;
}

.fashion-motion-previews figcaption {
  padding: 8px 9px;
  color: #30354a;
  font-size: 11px;
  font-weight: 700;
}

.fashion-motion-preprocess-body > p {
  margin: 0;
  color: #737a8f;
  font-size: 11px;
  line-height: 1.6;
}

.fashion-process-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  min-height: 260px;
  color: #747b91;
  text-align: center;
}

.fashion-process-empty span {
  color: #3942cc;
  font-size: 30px;
}

.fashion-process-empty strong {
  max-width: 190px;
  color: #31364b;
  font-size: 12px;
  line-height: 1.6;
}

.fashion-flow-slot,
.fashion-flow-output,
.fashion-flow-process {
  position: relative;
  min-width: 0;
  min-height: 410px;
  overflow: hidden;
  border: 1px solid #dfe3ed;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(31, 35, 80, 0.06);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.fashion-flow-slot:hover,
.fashion-flow-output.is-ready:hover,
.fashion-flow-process.is-ready:hover {
  transform: translateY(-3px);
  border-color: #aeb6ee;
  box-shadow: 0 18px 44px rgba(31, 35, 171, 0.1);
}

.fashion-flow-slot.is-uploading {
  border-color: #6871dc;
  box-shadow: 0 0 0 3px rgba(31, 35, 171, 0.08), 0 18px 44px rgba(31, 35, 171, 0.1);
}

.fashion-upload-progress {
  position: absolute;
  z-index: 4;
  top: 212px;
  left: 14px;
  right: 14px;
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.94);
  color: #20254a;
  box-shadow: 0 8px 26px rgba(22, 28, 75, 0.14);
  backdrop-filter: blur(12px);
}

.fashion-upload-progress strong {
  font-size: 12px;
}

.fashion-upload-progress > span {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e8f2;
}

.fashion-upload-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1f23ab;
  transition: width 180ms ease;
}

.fashion-flow-slot-index {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 25px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f23ab;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(18, 24, 70, 0.08);
  backdrop-filter: blur(10px);
}

.fashion-flow-slot-preview,
.fashion-flow-output-preview {
  position: relative;
  display: grid;
  place-items: center;
  height: 270px;
  overflow: hidden;
  background: #f0f2f8;
}

.fashion-flow-slot-preview img,
.fashion-flow-slot-preview video,
.fashion-flow-output-preview img,
.fashion-flow-output-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fashion-flow-slot.is-empty .fashion-flow-slot-preview {
  background-image: linear-gradient(#e2e5ef 1px, transparent 1px), linear-gradient(90deg, #e2e5ef 1px, transparent 1px);
  background-size: 22px 22px;
}

.fashion-flow-slot-preview > span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid #cbd1df;
  border-radius: 50%;
  background: #fff;
  color: #3942c5;
  font-size: 24px;
  box-shadow: 0 8px 22px rgba(31, 35, 100, 0.08);
}

.fashion-flow-slot-copy {
  padding: 18px 18px 12px;
}

.fashion-flow-slot-copy span {
  color: #777e92;
  font-size: 11px;
  font-weight: 700;
}

.fashion-flow-slot-copy strong {
  display: block;
  min-height: 42px;
  margin-top: 5px;
  overflow: hidden;
  color: #171a2c;
  font-size: 15px;
  line-height: 1.4;
  text-overflow: ellipsis;
}

.fashion-flow-slot-copy em {
  display: block;
  margin-top: 5px;
  color: #8a90a1;
  font-size: 11px;
  font-style: normal;
}

.fashion-flow-slot-actions {
  display: flex;
  gap: 8px;
  padding: 0 18px 18px;
}

.fashion-flow-slot-actions button,
.fashion-flow-footer-actions button,
.fashion-flow-advanced button {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid #ccd2e1;
  border-radius: 5px;
  background: #fff;
  color: #272c44;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.fashion-flow-slot-actions button:hover,
.fashion-flow-footer-actions button:hover,
.fashion-flow-advanced button:hover {
  border-color: #1f23ab;
  color: #1f23ab;
  transform: translateY(-1px);
}

.fashion-flow-slot-actions button:disabled {
  border-color: #dce1eb;
  background: #f1f3f8;
  color: #9299aa;
  cursor: wait;
  transform: none;
}

.fashion-flow-slot-actions .quiet {
  border-color: transparent;
  color: #868ca0;
}

.fashion-flow-connector {
  align-self: center;
  color: #9da4ba;
  font-size: 21px;
  font-style: normal;
  text-align: center;
}

.fashion-flow-output {
  border-color: #bec5dc;
}

.fashion-flow-output.is-ready {
  border-color: #727ce2;
}

.fashion-flow-output.is-running {
  border-color: #1f23ab;
  box-shadow: 0 0 0 3px rgba(31, 35, 171, 0.08);
}

.fashion-flow-output.is-quality-blocked {
  border-color: #d4475b;
  box-shadow: 0 0 0 3px rgba(212, 71, 91, 0.08);
}

.fashion-flow-output.is-quality-blocked .fashion-flow-output-meta span {
  color: #bc3045;
  font-weight: 800;
}

.fashion-flow-output-preview {
  height: 330px;
  background: #111526;
}

.fashion-flow-output-preview > div {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #fff;
  text-align: center;
}

.fashion-flow-output-preview > div > span {
  color: #7e89ff;
  font-size: 36px;
}

.fashion-flow-output-preview > div > strong {
  font-size: 17px;
}

.fashion-flow-output-preview > div > em {
  color: #9da5bd;
  font-size: 12px;
  font-style: normal;
}

.fashion-flow-output-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}

.fashion-flow-output-meta strong {
  font-size: 14px;
}

.fashion-flow-output-meta span {
  color: #626a80;
  font-size: 11px;
}

.fashion-flow-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 74px;
  margin-top: 24px;
  padding: 18px 0;
  overflow: visible;
  border-top: 1px solid #e2e5ed;
  border-bottom: 1px solid #e2e5ed;
}

.fashion-flow-process {
  display: flex;
  flex-direction: column;
}

.fashion-flow-process.is-ready {
  border-color: #b9c0e9;
}

.fashion-flow-process.is-analyzing {
  border-color: #8e98ec;
  box-shadow: 0 0 0 3px rgba(31, 35, 171, 0.06), 0 14px 36px rgba(31, 35, 80, 0.06);
}

.fashion-flow-process.is-failed {
  border-color: #e8aeba;
}

.fashion-flow-process-heading {
  display: grid;
  gap: 5px;
  min-height: 108px;
  padding: 55px 18px 17px;
  border-bottom: 1px solid #e7e9f0;
  background: #fbfcff;
}

.fashion-flow-process-heading span {
  color: #747b91;
  font-size: 11px;
  font-weight: 750;
}

.fashion-flow-process-heading strong {
  color: #171a2c;
  font-size: 17px;
  line-height: 1.35;
}

.fashion-reverse-prompt-body,
.fashion-realism-stage-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 16px 17px;
}

.fashion-motion-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.fashion-motion-facts > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e4e7f0;
  border-radius: 4px;
  background: #f8f9fc;
}

.fashion-motion-facts dt {
  color: #81879a;
  font-size: 10px;
}

.fashion-motion-facts dd {
  margin: 4px 0 0;
  overflow: hidden;
  color: #252a3d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
}

.fashion-motion-summary {
  display: -webkit-box;
  margin: 13px 0 0;
  overflow: hidden;
  color: #555d73;
  font-size: 11px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.fashion-motion-timeline {
  display: grid;
  gap: 0;
  margin-top: 13px;
  border-top: 1px solid #e7e9f0;
}

.fashion-motion-timeline > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #eceef4;
}

.fashion-motion-timeline span {
  color: #1f23ab;
  font-size: 10px;
  font-weight: 800;
}

.fashion-motion-timeline p {
  margin: 0;
  overflow: hidden;
  color: #555d73;
  font-size: 10px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fashion-process-empty {
  display: grid;
  flex: 1;
  place-content: center;
  justify-items: center;
  gap: 12px;
  min-height: 180px;
  color: #7b8296;
  text-align: center;
}

.fashion-process-empty span {
  color: #5963d4;
  font-size: 28px;
}

.fashion-process-empty strong {
  font-size: 12px;
  line-height: 1.55;
}

.fashion-flow-process-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding: 0 17px 16px;
}

.fashion-flow-process-actions button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #cbd1e2;
  border-radius: 4px;
  background: #fff;
  color: #1f23ab;
  font-weight: 750;
  cursor: pointer;
}

.fashion-flow-process-actions button:disabled {
  color: #8e94a7;
  cursor: wait;
}

.fashion-reverse-prompt-body textarea {
  flex: 1;
  width: 100%;
  min-height: 220px;
  resize: none;
  padding: 15px;
  border: 1px solid #d8dce8;
  border-radius: 4px;
  outline: 0;
  background: #f8f9fc;
  color: #1d2134;
  font: inherit;
  font-size: 12px;
  line-height: 1.7;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.fashion-reverse-prompt-body textarea:focus {
  border-color: #1f23ab;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31, 35, 171, 0.08);
}

.fashion-reverse-prompt-body textarea:disabled {
  color: #858b9d;
  cursor: wait;
}

.fashion-reverse-prompt-meta {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin-top: 10px;
  color: #747b8e;
  font-size: 10px;
}

.fashion-recreate-brief-stage .fashion-reverse-prompt-body {
  gap: 12px;
}

.fashion-recreate-brief-stage .fashion-reverse-prompt-body textarea {
  min-height: 208px;
}

.fashion-recreate-reference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dfe3ee;
  border-radius: 5px;
  background: #f8f9fc;
}

.fashion-recreate-reference > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.fashion-recreate-reference strong {
  color: #24283a;
  font-size: 11px;
}

.fashion-recreate-reference span {
  overflow: hidden;
  color: #747b8e;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fashion-recreate-reference > div:last-child {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.fashion-recreate-reference button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #cbd1e2;
  border-radius: 4px;
  background: #fff;
  color: #1f23ab;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.fashion-motion-suitability {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 10px 11px;
  border-left: 3px solid #b7791f;
  background: #fffaf0;
}

.fashion-motion-suitability strong,
.fashion-motion-suitability span {
  line-height: 1.45;
}

.fashion-motion-suitability strong {
  color: #6b4d16;
  font-size: 11px;
}

.fashion-motion-suitability span {
  color: #765c1b;
  font-size: 10px;
}

.fashion-motion-suitability.is-blocked {
  border-left-color: #cf455f;
  background: #fff5f6;
}

.fashion-motion-suitability.is-blocked strong,
.fashion-motion-suitability.is-blocked span {
  color: #9a2940;
}

.fashion-realism-stage-body {
  gap: 8px;
}

.fashion-realism-rule {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 55px;
  padding: 9px 10px;
  border: 1px solid #e3e6ef;
  border-radius: 4px;
  background: #f9fafc;
}

.fashion-realism-rule > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eceeff;
  color: #1f23ab;
  font-size: 11px;
  font-weight: 850;
}

.fashion-realism-rule > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.fashion-realism-rule strong {
  color: #24283a;
  font-size: 11px;
}

.fashion-realism-rule em {
  overflow: hidden;
  color: #747b8e;
  font-size: 10px;
  font-style: normal;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fashion-realism-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: auto;
  border-top: 1px solid #e7e9f0;
  color: #61697f;
  font-size: 10px;
  font-weight: 750;
}

.fashion-realism-stage.is-ready .fashion-realism-rule {
  border-color: #d9ddf3;
  background: #fafaff;
}

.fashion-process-error {
  margin: 12px 0 0;
  color: #a5293d;
  font-size: 11px;
  line-height: 1.5;
}

.fashion-motion-analysis-summary {
  display: grid;
  gap: 14px;
  min-height: 194px;
  padding: 16px;
  border: 1px solid #e1e4ef;
  border-radius: 5px;
  background: #fafbff;
}

.fashion-motion-analysis-summary > strong {
  color: #20243b;
  font-size: 13px;
  line-height: 1.65;
}

.fashion-motion-analysis-summary > span {
  align-self: center;
  color: #7b8295;
  font-size: 12px;
  text-align: center;
}

.fashion-motion-analysis-summary dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.fashion-motion-analysis-summary dl div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #e6e8f1;
}

.fashion-motion-analysis-summary dt,
.fashion-motion-analysis-summary dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.fashion-motion-analysis-summary dt {
  color: #777e91;
}

.fashion-motion-analysis-summary dd {
  color: #30354a;
}

.fashion-motion-warnings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.fashion-motion-warnings strong {
  color: #4e556b;
  font-size: 12px;
}

.fashion-motion-warnings span {
  padding: 6px 9px;
  border: 1px solid #e2d6b4;
  border-radius: 4px;
  background: #fffaf0;
  color: #765c1b;
  font-size: 11px;
}

.fashion-video-five-stage .fashion-flow-output-preview {
  height: 340px;
}

.fashion-video-six-stage .fashion-flow-output-preview {
  height: 340px;
}

.fashion-video-four-stage .fashion-flow-output-preview {
  height: 340px;
}

.fashion-video-five-stage .fashion-flow-output-meta {
  min-height: 68px;
}

.fashion-video-six-stage .fashion-flow-output-meta {
  min-height: 68px;
}

.fashion-video-four-stage .fashion-flow-output-meta {
  min-height: 68px;
}

.fashion-video-task-status {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid #d8ddeb;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(31, 35, 80, 0.05);
}

.fashion-video-task-status > header,
.fashion-video-task-status > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.fashion-video-task-status strong {
  color: #171a2c;
  font-size: 14px;
}

.fashion-video-task-status header span {
  color: #1f23ab;
  font-size: 13px;
  font-weight: 800;
}

.fashion-video-task-status progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e9ebf4;
  appearance: none;
}

.fashion-video-task-status progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #e9ebf4;
}

.fashion-video-task-status progress::-webkit-progress-value {
  border-radius: 999px;
  background: #1f23ab;
  transition: width 320ms ease;
}

.fashion-video-task-status progress:not([value])::-webkit-progress-value {
  width: 38% !important;
  animation: fashion-video-progress 1.25s ease-in-out infinite;
}

.fashion-video-task-status p {
  margin: 0;
  color: #687087;
  font-size: 12px;
  line-height: 1.55;
}

.fashion-video-task-status button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #cbd1e2;
  border-radius: 5px;
  background: #fff;
  color: #292f49;
  font-weight: 700;
  cursor: pointer;
}

.fashion-video-task-status.is-failed,
.fashion-video-task-status.is-quality-blocked,
.fashion-video-task-status.is-cancelled {
  border-color: #efbcc5;
  background: #fff7f8;
}

.fashion-video-task-status.is-failed progress::-webkit-progress-value,
.fashion-video-task-status.is-quality-blocked progress::-webkit-progress-value,
.fashion-video-task-status.is-cancelled progress::-webkit-progress-value {
  background: #d4475b;
}

.fashion-video-task-status.is-pending-review {
  border-color: #cfd3f2;
  background: #fafaff;
}

.fashion-video-task-status.is-succeeded {
  border-color: #b9dfd0;
  background: #f7fcfa;
}

.fashion-video-task-status.is-succeeded progress::-webkit-progress-value {
  background: #218b68;
}

.fashion-video-active-tasks {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #d8ddeb;
  border-radius: 6px;
  background: #f8f9fd;
}

.fashion-video-active-tasks > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fashion-video-active-tasks > header strong {
  color: #171a2c;
  font-size: 13px;
}

.fashion-video-active-tasks > header span {
  color: #1f23ab;
  font-size: 13px;
  font-weight: 800;
}

.fashion-video-active-tasks > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 8px;
}

.fashion-video-active-tasks article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dfe3ef;
  border-radius: 5px;
  background: #fff;
}

.fashion-video-active-tasks article > div {
  display: grid;
  gap: 2px;
}

.fashion-video-active-tasks article strong,
.fashion-video-active-tasks article span {
  font-size: 11px;
}

.fashion-video-active-tasks article span {
  color: #687087;
}

.fashion-video-active-tasks progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: #e7e9f2;
  appearance: none;
}

.fashion-video-active-tasks progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #e7e9f2;
}

.fashion-video-active-tasks progress::-webkit-progress-value {
  border-radius: 999px;
  background: #1f23ab;
}

.fashion-video-active-tasks button {
  align-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1f23ab;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

@keyframes fashion-video-progress {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(165%); }
  100% { transform: translateX(165%); }
}

.fashion-flow-footer > p {
  max-width: 660px;
  margin: 0;
  color: #687087;
  font-size: 13px;
  line-height: 1.6;
}

.fashion-flow-footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.fashion-flow-footer-actions button.primary {
  min-width: 150px;
  border-color: #1f23ab;
  background: #1f23ab;
  color: #fff;
}

.fashion-flow-footer-actions button:disabled {
  border-color: #daddE8;
  background: #e8eaf1;
  color: #9ba1b1;
  cursor: not-allowed;
  transform: none;
}

.fashion-flow-error {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 3px solid #d4475b;
  background: #fff0f2;
  color: #a5293d;
  font-size: 12px;
}

.fashion-flow-history {
  margin-top: 28px;
}

.fashion-flow-history > div {
  display: flex;
  gap: 10px;
}

.fashion-flow-history button {
  position: relative;
  width: 78px;
  height: 96px;
  overflow: hidden;
  padding: 0;
  border: 1px solid #d8dce7;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.fashion-flow-history img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fashion-flow-history em {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  padding: 4px;
  border-radius: 3px;
  background: rgba(16, 20, 40, 0.78);
  color: #fff;
  font-size: 9px;
  font-style: normal;
}

.fashion-flow-advanced {
  margin-top: 18px;
  color: #737a8f;
  font-size: 12px;
}

.fashion-flow-advanced summary {
  width: max-content;
  cursor: pointer;
}

.fashion-flow-advanced > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #e0e3ec;
  border-radius: 5px;
  background: #fff;
}

@media (max-width: 1500px) {
  .fashion-video-four-stage,
  .fashion-video-five-stage,
  .fashion-video-six-stage {
    grid-template-columns: repeat(3, minmax(230px, 1fr));
    gap: 14px;
    min-width: 0;
  }

  .fashion-video-four-stage .fashion-flow-connector,
  .fashion-video-five-stage .fashion-flow-connector,
  .fashion-video-six-stage .fashion-flow-connector {
    display: none;
  }

  .fashion-video-active-tasks > div {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 1180px) {
  .fashion-flow-sequence,
  .fashion-video-sequence,
  .fashion-garment-swap-sequence {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }

  .fashion-flow-connector {
    display: none;
  }

  .fashion-flow-output {
    grid-column: span 2;
  }

  .fashion-video-active-tasks > div {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 720px) {
  #imageCanvasWorkbench .image-canvas-studio,
  #videoCanvasWorkbench .video-fashion-studio {
    padding: 22px 16px 48px;
  }

  .fashion-flow-heading,
  .fashion-flow-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .fashion-video-paths {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .fashion-flow-sequence,
  .fashion-video-sequence,
  .fashion-garment-swap-sequence {
    grid-template-columns: 1fr;
  }

  .fashion-flow-output {
    grid-column: auto;
  }

  .fashion-video-active-tasks > div {
    grid-template-columns: 1fr;
  }

  .fashion-flow-footer-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
/* Product copy policy: technical provider details and decorative copy stay out of the customer UI. */
[hidden],
[data-ui-policy-hidden="true"] {
  display: none !important;
}

.video-output-settings-modal .choice-modal-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(560px, calc(100vw - 32px));
  border: 1px solid #d9def0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(31, 35, 171, 0.18);
}

.video-output-settings-modal header,
.video-output-settings-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #e5e8f2;
}

.video-output-settings-modal footer {
  justify-content: flex-end;
  border-top: 1px solid #e5e8f2;
  border-bottom: 0;
}

.video-output-settings-modal h2 {
  margin: 0;
  color: #171a2e;
  font-size: 18px;
}

.video-output-settings-modal .choice-modal-close,
.video-output-settings-modal footer button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #d5daea;
  border-radius: 6px;
  background: #ffffff;
  color: #30364d;
  cursor: pointer;
}

.video-output-settings-modal footer .primary {
  border-color: #1f23ab;
  background: #1f23ab;
  color: #ffffff;
}

.choice-modal-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 22px 20px;
}

.choice-modal-fields label {
  display: grid;
  gap: 7px;
  color: #596078;
  font-size: 12px;
  font-weight: 700;
}

.choice-modal-fields select {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #d5daea;
  border-radius: 6px;
  background: #ffffff;
  color: #171a2e;
  font: inherit;
}

@media (max-width: 620px) {
  .choice-modal-fields {
    grid-template-columns: 1fr;
  }
}
:where(.retired-module) {
  display: none !important;
}

/* 2026-08-18: spacious creation home with a restrained fashion-tech identity. */
.product-home {
  --home-blue: #1f23ab;
  --home-cyan: #19a8b8;
  --home-ink: #111827;
  --home-line: #dce2ef;
}

.product-home .home-command {
  isolation: isolate;
  min-height: 390px;
  padding: 72px 24px 46px;
  overflow: hidden;
  background: #f5f7ff;
}

.product-home .home-command::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 86px;
  left: 50%;
  width: min(820px, 86vw);
  height: 220px;
  transform: translateX(-50%);
  background-color: #eef5ff;
  background-image: radial-gradient(circle, rgba(31, 35, 171, 0.15) 1px, transparent 1.2px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: 0.72;
  animation: home-dot-drift 14s linear infinite;
}

.product-home .home-command::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 168px;
  left: 50%;
  width: min(980px, 92vw);
  height: 1px;
  transform: translateX(-50%);
  background: rgba(31, 35, 171, 0.12);
}

.product-home .home-command-body {
  width: min(980px, 100%);
}

.home-command-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 34px;
}

.product-home .home-command .home-command-title h1 {
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(40px, 4vw, 54px);
  font-weight: 860;
  line-height: 1;
}

.product-home .home-command .home-command-title h1 span {
  margin-right: 4px;
  color: var(--home-blue);
}

.home-command-title-icon {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid #d5daf0;
  border-radius: 8px;
  background: #ffffff;
  color: var(--home-blue);
  box-shadow: 0 10px 24px rgba(31, 35, 171, 0.12);
  transform: rotate(7deg);
  animation: home-title-icon-float 4.4s ease-in-out infinite;
}

.home-command-title-icon svg {
  width: 31px;
  height: 31px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-command-title-icon i {
  position: absolute;
  top: -5px;
  right: -4px;
  width: 10px;
  height: 10px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--home-cyan);
  animation: home-title-signal 2.2s ease-in-out infinite;
}

.product-home .home-design-form {
  width: min(900px, 100%);
  min-height: 172px;
  border-color: #cfd6e7;
  box-shadow: 0 22px 60px rgba(38, 45, 86, 0.11);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-home .home-design-form:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(31, 35, 171, 0.07), 0 28px 70px rgba(38, 45, 86, 0.14);
}

.product-home .home-design-form textarea {
  min-height: 110px;
  padding-top: 24px;
}

.product-home .home-workspace-section {
  margin-top: 0;
  padding-top: 32px;
}

.product-home .home-workflow-card {
  border-color: var(--home-line);
  box-shadow: 0 8px 22px rgba(31, 38, 72, 0.045);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-home .home-workflow-card:hover {
  border-color: #aeb9df;
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(31, 38, 72, 0.10);
}

.product-home .home-workflow-icon-wrap {
  background: #f0f3ff;
}

.product-home .home-workflow-card:nth-child(2) .home-workflow-icon-wrap {
  background: #edfbfd;
  color: #087f91;
}

.product-home .home-workflow-card:nth-child(3) .home-workflow-icon-wrap {
  background: #f3f1ff;
  color: #5044b8;
}

.product-home .home-workflow-card:hover .home-workflow-icon {
  transform: scale(1.08) rotate(-3deg);
}

.product-home .home-workflow-icon {
  transition: transform 180ms ease;
}

@keyframes home-dot-drift {
  from { background-position: 0 0; }
  to { background-position: 32px 16px; }
}

@keyframes home-title-icon-float {
  0%, 100% { transform: translateY(0) rotate(7deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}

@keyframes home-title-signal {
  0%, 100% { opacity: 0.55; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 620px) {
  .product-home .home-command {
    min-height: 366px;
    padding: 56px 14px 38px;
  }

  .home-command-title {
    gap: 11px;
    margin-bottom: 28px;
  }

  .product-home .home-command .home-command-title h1 {
    font-size: 34px;
  }

  .home-command-title-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .home-command-title-icon svg {
    width: 26px;
    height: 26px;
  }

  .product-home .home-workspace-section {
    margin-top: 0;
    padding-top: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-home .home-command::before,
  .home-command-title-icon,
  .home-command-title-icon i {
    animation: none;
  }
}

/* 最终设计工作台覆盖层，放在所有历史主题之后。 */
.design-canvas-workbench.is-studio-view {
  grid-template-rows: minmax(0, 1fr);
}

.design-canvas-workbench.is-studio-view > .design-canvas-contextbar,
.design-canvas-workbench.is-studio-view > .canvas-commandbar,
.design-canvas-workbench.is-studio-view > .design-canvas-statusbar {
  display: none !important;
}

.design-production-studio.lightchain-design-studio {
  grid-template-columns: 272px minmax(520px, 1fr) 314px;
  background: #f5f6fa;
}

.design-production-studio.lightchain-design-studio .lightchain-design-left,
.design-production-studio.lightchain-design-studio .lightchain-design-right {
  display: flex;
  align-content: initial;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: #fff;
}

.design-production-studio.lightchain-design-studio .lightchain-control-card,
.design-production-studio.lightchain-design-studio .lightchain-generate-panel {
  gap: 14px;
  padding: 22px 20px;
  border: 0;
  border-bottom: 1px solid #e5e7ee;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.design-production-studio.lightchain-design-studio .lightchain-choice-button,
.design-production-studio.lightchain-design-studio .lightchain-reference-upload {
  min-height: 72px;
  padding: 13px 14px;
  border: 1px solid #d5d9e4;
  border-radius: 6px;
  background: #fafbfc;
}

.design-production-studio.lightchain-design-studio .lightchain-design-center {
  grid-template-rows: 64px minmax(0, 1fr) auto;
  background: #f5f6fa;
}

.design-production-studio.lightchain-design-studio .lightchain-design-center > header {
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.96);
}

.design-production-studio.lightchain-design-studio .lightchain-design-results {
  padding: 28px;
  background: #f5f6fa;
}

.design-production-studio.lightchain-design-studio .lightchain-result-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.design-production-studio.lightchain-design-studio .lightchain-result-grid > article {
  grid-template-rows: minmax(300px, 1fr) 52px;
  min-height: 360px;
  border-radius: 6px;
}

.design-production-studio.lightchain-design-studio .lightchain-design-empty::before {
  display: none;
}

.design-production-studio.lightchain-design-studio .lightchain-design-empty strong {
  font-size: 22px;
}

.design-production-studio.lightchain-design-studio .lightchain-keyword-card textarea {
  min-height: 150px;
  font-size: 12px;
}

.design-production-studio.lightchain-design-studio .lightchain-generate-panel {
  margin-top: auto;
  border-top: 1px solid #e5e7ee;
  border-bottom: 0;
}

@media (max-width: 1180px) {
  .design-production-studio.lightchain-design-studio {
    grid-template-columns: 238px minmax(430px, 1fr) 278px;
  }
}

@media (max-width: 900px) {
  .design-production-studio.lightchain-design-studio {
    display: grid;
    grid-template-columns: 230px minmax(420px, 1fr);
    overflow: auto;
  }

  .design-production-studio.lightchain-design-studio .lightchain-design-right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr 240px;
  }
}

@media (max-width: 680px) {
  .design-production-studio.lightchain-design-studio {
    display: block;
    overflow-y: auto;
  }

  .design-production-studio.lightchain-design-studio .lightchain-design-left,
  .design-production-studio.lightchain-design-studio .lightchain-design-right {
    display: block;
  }
}

/* 业务弹窗统一使用蓝白主题，媒体预览画布保留自身背景。 */
.design-choice-modal .choice-modal-backdrop {
  background: rgba(25, 31, 52, 0.24);
  backdrop-filter: blur(5px);
}

.design-choice-modal .choice-modal-panel {
  border-color: #d9dfec;
  background: #ffffff;
  color: #17203a;
  box-shadow: 0 24px 70px rgba(31, 35, 79, 0.18);
}

.design-choice-modal .choice-modal-panel > header,
.design-choice-modal .choice-modal-panel > footer,
.design-choice-modal .choice-modal-panel > main {
  border-color: #e3e7f0;
  background: #ffffff;
  color: #17203a;
}

.design-choice-modal .choice-modal-panel h2,
.design-choice-modal .choice-modal-panel h3,
.design-choice-modal .choice-modal-panel > header strong {
  color: #17203a;
}

.design-choice-modal .choice-modal-close {
  border-color: #d6dcea;
  background: #f5f7fb;
  color: #46516a;
}

.design-choice-modal .choice-modal-close:hover {
  border-color: #1f23ab;
  background: #eef0ff;
  color: #1f23ab;
}

.design-choice-modal .choice-modal-panel :is(input, select, textarea) {
  border-color: #cbd3e4;
  background-color: #ffffff;
  color: #17203a;
}

.design-choice-modal .choice-modal-panel > footer button:not(.primary) {
  border-color: #cbd3e4;
  background: #ffffff;
  color: #46516a;
}

.design-choice-modal .choice-modal-panel > footer button.primary {
  border-color: #1f23ab;
  background: #1f23ab;
  color: #ffffff;
}

.design-choice-modal .choice-modal-panel > footer button:disabled {
  border-color: #dfe3ec;
  background: #eef1f7;
  color: #9aa4b7;
}

.image-operation-usage-panel {
  width: min(680px, calc(100vw - 40px));
}

.image-operation-usage-panel > header {
  min-height: 66px;
}

.image-operation-usage-panel > main {
  gap: 16px;
  padding: 22px;
}

.image-operation-usage-summary {
  gap: 10px;
}

.image-operation-usage-summary article {
  min-height: 76px;
  align-content: center;
  gap: 7px;
  padding: 15px 16px;
  border-color: #dce2ef;
  border-radius: 6px;
  background: #f7f9fd;
}

.image-operation-usage-summary span {
  color: #69748b;
  font-size: 11px;
}

.image-operation-usage-summary strong {
  color: #17203a;
  font-size: 15px;
}

.image-operation-usage-panel ol {
  gap: 6px;
  color: #69748b;
  font-size: 11px;
}

.image-operation-usage-panel > main > label {
  align-items: center;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #dce2ef;
  border-radius: 6px;
  background: #f7f8ff;
  color: #29344f;
  font-size: 12px;
}

.image-operation-usage-panel > main > label input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: #1f23ab;
}

@media (max-width: 560px) {
  .image-operation-usage-summary {
    grid-template-columns: 1fr;
  }

  .image-operation-usage-summary article.is-wide {
    grid-column: auto;
  }
}