:root {
  color-scheme: light;
  --bg: #f6f5f1;
  --bg-2: #eceae4;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-strong: rgba(255, 255, 255, 0.92);
  --line: rgba(18, 18, 18, 0.1);
  --line-strong: rgba(18, 18, 18, 0.34);
  --text: #141414;
  --muted: #6f6d68;
  --cyan: #141414;
  --lime: #e8e6de;
  --amber: #ffc857;
  --coral: #ff7b69;
  --shadow: 0 18px 44px rgba(18, 18, 18, 0.08);
  --radius: 8px;
  --template-columns: 6;
}

/* Legacy AI Canvas dark shell; final home-aligned canvas overrides live at the end of this file. */
body[data-active-view="aiCanvas"],
body[data-theme="light"][data-active-view="aiCanvas"] {
  --bg: #080907;
  --bg-2: #0c0e0b;
  --panel: rgba(20, 22, 18, 0.94);
  --panel-strong: rgba(27, 30, 25, 0.94);
  --text: #f7f3e8;
  --muted: #9fa79b;
  --line: rgba(247, 243, 232, 0.12);
  --line-strong: rgba(247, 243, 232, 0.26);
  color: #f7f3e8;
  background: #080907 !important;
}

body[data-active-view="aiCanvas"] .app-shell,
body[data-theme="light"][data-active-view="aiCanvas"] .app-shell {
  background: #080907 !important;
}

body[data-active-view="aiCanvas"] .main,
body[data-theme="light"][data-active-view="aiCanvas"] .main {
  background:
    radial-gradient(circle at 54% 10%, rgba(199, 255, 128, 0.11), transparent 26%),
    radial-gradient(circle at 84% 72%, rgba(119, 210, 255, 0.08), transparent 30%),
    #080907 !important;
}

body[data-active-view="aiCanvas"] *,
body[data-theme="light"][data-active-view="aiCanvas"] * {
  scrollbar-color: rgba(246, 247, 247, 0.28) rgba(7, 8, 9, 0.32);
  scrollbar-width: thin;
}

body[data-active-view="aiCanvas"] *::-webkit-scrollbar,
body[data-theme="light"][data-active-view="aiCanvas"] *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body[data-active-view="aiCanvas"] *::-webkit-scrollbar-track,
body[data-theme="light"][data-active-view="aiCanvas"] *::-webkit-scrollbar-track {
  background: rgba(7, 8, 9, 0.35);
}

body[data-active-view="aiCanvas"] *::-webkit-scrollbar-thumb,
body[data-theme="light"][data-active-view="aiCanvas"] *::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 8, 9, 0.35);
  border-radius: 999px;
  background: rgba(246, 247, 247, 0.24);
}

body[data-active-view="aiCanvas"] .sidebar,
body[data-theme="light"][data-active-view="aiCanvas"] .sidebar {
  border-color: rgba(247, 243, 232, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(20, 22, 18, 0.96), rgba(12, 14, 11, 0.96)),
    #080907 !important;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.26) !important;
}

body[data-active-view="aiCanvas"] .nav-item,
body[data-active-view="aiCanvas"] .side-status,
body[data-active-view="aiCanvas"] .theme-toggle-card,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item,
body[data-theme="light"][data-active-view="aiCanvas"] .side-status,
body[data-theme="light"][data-active-view="aiCanvas"] .theme-toggle-card {
  color: #9fa79b !important;
  border-color: rgba(247, 243, 232, 0.08) !important;
  background: rgba(247, 243, 232, 0.035) !important;
}

body[data-active-view="aiCanvas"] .nav-item:hover,
body[data-active-view="aiCanvas"] .nav-item.active,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item.active {
  color: #11140e !important;
  border-color: rgba(216, 255, 114, 0.55) !important;
  background: linear-gradient(180deg, #e5ff93, #b9ec58) !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #0c0e0b;
  --wf-surface: rgba(20, 22, 18, 0.94);
  --wf-panel: rgba(27, 30, 25, 0.92);
  --wf-panel-soft: rgba(245, 243, 232, 0.055);
  --wf-ink: #f7f3e8;
  --wf-muted: #9fa79b;
  --wf-line: rgba(247, 243, 232, 0.12);
  --wf-line-strong: rgba(247, 243, 232, 0.26);
  --wf-accent: #d8ff72;
  --wf-accent-2: #89e6c4;
  --wf-blue: #7ac7ff;
  --wf-success: #77e0a8;
  --wf-warning: #ffd36e;
  --wf-danger: #ff7d7d;
  --wf-info: #78c7ff;
  color: #f7f3e8 !important;
}

/* Absolute final AI Canvas theme switch and XiHei typography override. */
body[data-active-view="aiCanvas"] {
  --wf-font: "STXihei", "华文细黑", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  font-family: var(--wf-font) !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] *,
body[data-active-view="aiCanvas"] input,
body[data-active-view="aiCanvas"] select,
body[data-active-view="aiCanvas"] textarea,
body[data-active-view="aiCanvas"] button {
  font-family: var(--wf-font) !important;
  letter-spacing: 0 !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell,
body[data-active-view="aiCanvas"] .workflow-canvas-shell input,
body[data-active-view="aiCanvas"] .workflow-canvas-shell select,
body[data-active-view="aiCanvas"] .workflow-canvas-shell textarea,
body[data-active-view="aiCanvas"] .workflow-canvas-shell button,
body[data-active-view="aiCanvas"] .nav-item,
body[data-active-view="aiCanvas"] .side-status,
body[data-active-view="aiCanvas"] .theme-toggle-card {
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell strong,
body[data-active-view="aiCanvas"] .workflow-canvas-shell b,
body[data-active-view="aiCanvas"] .workflow-canvas-shell em,
body[data-active-view="aiCanvas"] .workflow-canvas-shell small,
body[data-active-view="aiCanvas"] .workflow-node-head span,
body[data-active-view="aiCanvas"] .workflow-node-meta small,
body[data-active-view="aiCanvas"] .workflow-node-contract span,
body[data-active-view="aiCanvas"] .workflow-primary-button,
body[data-active-view="aiCanvas"] .workflow-secondary-button,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-icon-button,
body[data-active-view="aiCanvas"] .workflow-sidebar-tabs button,
body[data-active-view="aiCanvas"] .workflow-palette-card,
body[data-active-view="aiCanvas"] .workflow-template-card,
body[data-active-view="aiCanvas"] .workflow-task-card,
body[data-active-view="aiCanvas"] .workflow-context-menu button,
body[data-active-view="aiCanvas"] .workflow-command-list button {
  font-weight: 400 !important;
}

body[data-active-view="aiCanvas"] .workflow-brand strong,
body[data-active-view="aiCanvas"] .workflow-run-button,
body[data-active-view="aiCanvas"] .workflow-section-head strong,
body[data-active-view="aiCanvas"] .workflow-panel-head strong,
body[data-active-view="aiCanvas"] .workflow-console-title strong {
  font-weight: 500 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] {
  color-scheme: light;
  --bg: #f4f2ed;
  --bg-2: #e9e5dc;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --text: #141414;
  --muted: #686a63;
  --line: rgba(18, 18, 18, 0.11);
  --line-strong: rgba(18, 18, 18, 0.28);
  color: #141414 !important;
  background: #f4f2ed !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .app-shell {
  background: #ede9df !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .main {
  background:
    radial-gradient(circle at 54% 10%, rgba(180, 204, 99, 0.18), transparent 26%),
    radial-gradient(circle at 84% 72%, rgba(72, 150, 185, 0.12), transparent 30%),
    #f4f2ed !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .sidebar {
  border-color: rgba(18, 18, 18, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 239, 231, 0.96)),
    #f4f2ed !important;
  box-shadow: 8px 0 32px rgba(18, 18, 18, 0.08) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .nav-item,
body[data-theme="light"][data-active-view="aiCanvas"] .side-status,
body[data-theme="light"][data-active-view="aiCanvas"] .theme-toggle-card {
  color: #6b6b63 !important;
  border-color: rgba(18, 18, 18, 0.08) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .nav-item:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item.active {
  color: #f7f3e8 !important;
  border-color: rgba(18, 18, 18, 0.2) !important;
  background: linear-gradient(180deg, #262821, #12140f) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #f2efe7;
  --wf-surface: rgba(255, 255, 255, 0.92);
  --wf-panel: rgba(250, 248, 242, 0.94);
  --wf-panel-soft: rgba(18, 18, 18, 0.045);
  --wf-ink: #141414;
  --wf-muted: #6c6e66;
  --wf-line: rgba(18, 18, 18, 0.11);
  --wf-line-strong: rgba(18, 18, 18, 0.28);
  --wf-accent: #151711;
  --wf-accent-2: #277c66;
  --wf-blue: #246f96;
  --wf-success: #16805a;
  --wf-warning: #a66a00;
  --wf-danger: #c94141;
  --wf-info: #246f96;
  color: #141414 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-topbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-taskbar {
  border-color: rgba(18, 18, 18, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 246, 239, 0.88)),
    #faf8f2;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 18px 44px rgba(18, 18, 18, 0.09);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    radial-gradient(circle at 36% 30%, rgba(151, 171, 77, 0.11), transparent 24%),
    radial-gradient(circle at 72% 64%, rgba(72, 150, 185, 0.08), transparent 30%),
    linear-gradient(rgba(18, 18, 18, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.075) 1px, transparent 1px),
    linear-gradient(rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    #f2efe7;
  background-size: auto, auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px, auto;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-panel,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-console-grid section,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-context-menu {
  border-color: rgba(18, 18, 18, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 246, 239, 0.92)),
    #fffdf8;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 44px rgba(18, 18, 18, 0.1);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar-tabs button.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-mode-grid button.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector-tabs span.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-primary-button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-button {
  color: #f7f3e8;
  border-color: rgba(18, 18, 18, 0.26);
  background: linear-gradient(180deg, #242820, #11140f);
  box-shadow: 0 14px 28px rgba(18, 18, 18, 0.16);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge {
  stroke: rgba(18, 18, 18, 0.42);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edges marker path {
  fill: #151711;
}

/* LibTV-style infinite canvas framework. */
body[data-active-view="aiCanvas"] {
  background: #070809 !important;
  color: #f6f7f7 !important;
}

body[data-active-view="aiCanvas"] .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 100vh;
  background: #070809 !important;
}

body[data-active-view="aiCanvas"] .app-shell > .sidebar {
  display: none !important;
}

body[data-active-view="aiCanvas"] .main {
  min-height: 100vh;
  padding: 0 !important;
  overflow: hidden;
  background: #070809 !important;
}

body[data-active-view="aiCanvas"] .workspace,
body[data-active-view="aiCanvas"] .workspace-view,
body[data-active-view="aiCanvas"] #aiCanvasWorkspace {
  min-height: 100vh;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #08090b;
  --wf-surface: rgba(24, 25, 28, 0.88);
  --wf-panel: rgba(31, 32, 35, 0.92);
  --wf-panel-soft: rgba(255, 255, 255, 0.06);
  --wf-ink: #f7f8f8;
  --wf-muted: rgba(247, 248, 248, 0.56);
  --wf-line: rgba(255, 255, 255, 0.075);
  --wf-line-strong: rgba(255, 255, 255, 0.16);
  --wf-accent: #f4f5f5;
  --wf-accent-2: #76e7c5;
  --wf-blue: #78c7ff;
  --wf-success: #86e6a8;
  --wf-warning: #ffd166;
  --wf-danger: #ff7979;
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "stage";
  overflow: hidden;
  color: var(--wf-ink) !important;
  background: #070809 !important;
}

body[data-active-view="aiCanvas"] .workflow-stage {
  grid-area: stage;
  min-height: 100vh;
  overflow: hidden;
}

body[data-active-view="aiCanvas"] .workflow-canvas-surface {
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.04), transparent 24%),
    radial-gradient(circle at 72% 30%, rgba(104, 158, 255, 0.055), transparent 25%),
    radial-gradient(circle at 24% 76%, rgba(112, 224, 186, 0.045), transparent 24%),
    radial-gradient(circle, rgba(255, 255, 255, 0.11) 1px, transparent 1.2px),
    linear-gradient(#08090b, #08090b);
  background-size: auto, auto, auto, 16px 16px, auto;
  cursor: grab;
}

body[data-active-view="aiCanvas"] .workflow-canvas-aura {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 8, 9, 0.96), transparent 16%, transparent 84%, rgba(7, 8, 9, 0.94)),
    linear-gradient(180deg, rgba(7, 8, 9, 0.9), transparent 20%, transparent 78%, rgba(7, 8, 9, 0.92));
}

body[data-active-view="aiCanvas"] .workflow-topbar {
  position: absolute;
  inset: 14px 14px auto 14px;
  z-index: 42;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-brand,
body[data-active-view="aiCanvas"] .workflow-actions,
body[data-active-view="aiCanvas"] .workflow-action-group,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-run-button {
  pointer-events: auto;
}

body[data-active-view="aiCanvas"] .workflow-brand {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #f7f8f8;
}

body[data-active-view="aiCanvas"] .workflow-brand-mark {
  width: 25px;
  height: 25px;
  border-color: transparent !important;
  border-radius: 8px;
  color: #101113 !important;
  background: #f6f7f7 !important;
  transform: skew(-8deg);
}

body[data-active-view="aiCanvas"] .workflow-brand span {
  color: #f7f8f8;
  font-size: 15px;
  font-weight: 500 !important;
  text-transform: none;
}

body[data-active-view="aiCanvas"] .workflow-brand strong {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(247, 248, 248, 0.78);
  font-size: 14px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-brand em {
  margin-left: 8px;
  color: rgba(247, 248, 248, 0.42);
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-run-summary {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill {
  pointer-events: auto;
  min-height: 38px;
  padding: 0 7px 0 12px;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: rgba(247, 248, 248, 0.78);
  background: rgba(31, 32, 35, 0.84);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill span,
body[data-active-view="aiCanvas"] .workflow-api-status-pill em {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill span {
  color: rgba(247, 248, 248, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill em {
  max-width: 150px;
  overflow: hidden;
  color: rgba(247, 248, 248, 0.48);
  text-overflow: ellipsis;
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill button {
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: rgba(247, 248, 248, 0.62);
  background: rgba(255, 255, 255, 0.045);
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill button:hover {
  color: #08090b;
  background: rgba(247, 248, 248, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill.is-ready {
  border-color: rgba(118, 231, 197, 0.22);
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill.is-warning {
  border-color: rgba(255, 209, 102, 0.22);
  color: rgba(255, 209, 102, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill.is-failed {
  border-color: rgba(255, 121, 121, 0.24);
  color: rgba(255, 121, 121, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill.is-mock {
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-action-group {
  padding: 0;
  display: flex;
  gap: 7px;
  border: 0;
  background: transparent;
}

body[data-active-view="aiCanvas"] .workflow-icon-button,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-primary-button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: rgba(247, 248, 248, 0.82);
  background: rgba(31, 32, 35, 0.84);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

body[data-active-view="aiCanvas"] .workflow-icon-button {
  width: 38px;
  padding: 0;
}

body[data-active-view="aiCanvas"] .workflow-icon-button:hover,
body[data-active-view="aiCanvas"] .workflow-tool-button:hover,
body[data-active-view="aiCanvas"] .workflow-primary-button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(43, 44, 48, 0.94);
  transform: translateY(-1px);
}

body[data-active-view="aiCanvas"] .workflow-tool-button {
  padding: 0 12px;
  gap: 6px;
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-run-button {
  padding: 0 16px;
  color: #08090b;
  border-color: rgba(255, 255, 255, 0.7);
  background: #f7f8f8;
}

body[data-active-view="aiCanvas"] .workflow-sidebar {
  position: absolute;
  z-index: 36;
  left: 78px;
  top: 310px;
  width: 292px;
  max-height: min(560px, calc(100vh - 160px));
  padding: 8px;
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(24, 25, 28, 0.92);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(22px);
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell.is-palette-open .workflow-sidebar {
  display: block;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-content {
  max-height: calc(100vh - 190px);
  padding: 0;
  overflow: auto;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar {
  position: absolute;
  z-index: 38;
  left: 14px;
  top: 50%;
  width: 52px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(31, 32, 35, 0.86);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  transform: translateY(-50%);
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  color: rgba(247, 248, 248, 0.72);
  background: transparent;
  box-shadow: none;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button:first-child {
  color: #121315;
  background: #f7f8f8;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button span {
  position: absolute;
  left: 48px;
  padding: 5px 8px;
  border-radius: 9px;
  color: #f7f8f8;
  background: rgba(24, 25, 28, 0.9);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button:hover span {
  opacity: 1;
  transform: translateX(0);
}

body[data-active-view="aiCanvas"] .workflow-api-status-card {
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  color: rgba(247, 248, 248, 0.78);
  background: rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-api-status-card div {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-api-status-card svg {
  width: 16px;
  height: 16px;
  color: rgba(247, 248, 248, 0.7);
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-api-status-card strong,
body[data-active-view="aiCanvas"] .workflow-api-status-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-api-status-card strong {
  color: rgba(247, 248, 248, 0.9);
  font-size: 12px;
  font-weight: 400 !important;
}

body[data-active-view="aiCanvas"] .workflow-api-status-card span {
  grid-column: 2;
  color: rgba(247, 248, 248, 0.48);
  font-size: 11px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-api-status-card button {
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  color: rgba(247, 248, 248, 0.72);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-api-status-card.is-ready {
  border-color: rgba(118, 231, 197, 0.18);
  background: rgba(118, 231, 197, 0.055);
}

body[data-active-view="aiCanvas"] .workflow-api-status-card.is-warning {
  border-color: rgba(255, 209, 102, 0.18);
  background: rgba(255, 209, 102, 0.055);
}

body[data-active-view="aiCanvas"] .workflow-api-status-card.is-failed {
  border-color: rgba(255, 121, 121, 0.2);
  background: rgba(255, 121, 121, 0.055);
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls {
  position: absolute;
  z-index: 38;
  left: 14px;
  bottom: 14px;
  padding: 7px;
  display: flex;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(31, 32, 35, 0.88);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-icon-button {
  width: 27px;
  height: 27px;
  min-height: 27px;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-icon-button.is-active {
  color: #101113;
  background: #e8e9e9;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-zoom {
  min-width: 58px;
  color: rgba(247, 248, 248, 0.78);
  font-size: 13px;
  text-align: center;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  padding: 0;
  border: 0;
  color: rgba(247, 248, 248, 0.46);
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -110px);
}

body[data-active-view="aiCanvas"] .workflow-canvas-status b,
body[data-active-view="aiCanvas"] .workflow-canvas-status em {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status span {
  gap: 8px;
  color: rgba(247, 248, 248, 0.46);
  font-size: 13px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status span:not(.is-running) {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-empty {
  z-index: 29;
  width: min(826px, calc(100vw - 220px));
  padding: 0;
  display: grid;
  gap: 28px;
  justify-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -44%);
}

body[data-active-view="aiCanvas"] .workflow-empty > svg {
  width: 28px;
  height: 28px;
  color: rgba(247, 248, 248, 0.7);
}

body[data-active-view="aiCanvas"] .workflow-empty > strong {
  color: rgba(247, 248, 248, 0.56);
  font-size: 14px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-starter-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body[data-active-view="aiCanvas"] .workflow-starter-card {
  position: relative;
  min-height: 54px;
  padding: 0 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #f7f8f8;
  background:
    linear-gradient(90deg, rgba(21, 23, 28, 0.95), rgba(21, 23, 28, 0.72)),
    linear-gradient(135deg, rgba(92, 124, 255, 0.34), transparent 48%),
    rgba(31, 32, 35, 0.86);
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.32);
  text-align: left;
}

body[data-active-view="aiCanvas"] .workflow-starter-card::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 42%;
  opacity: 0.72;
  background:
    radial-gradient(circle at 68% 44%, rgba(255, 255, 255, 0.24), transparent 28%),
    linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.08));
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-starter-card.is-character {
  background:
    linear-gradient(90deg, rgba(22, 17, 18, 0.96), rgba(22, 17, 18, 0.7)),
    linear-gradient(135deg, rgba(255, 80, 108, 0.28), transparent 48%),
    rgba(31, 32, 35, 0.86);
}

body[data-active-view="aiCanvas"] .workflow-starter-card.is-video {
  background:
    linear-gradient(90deg, rgba(24, 25, 18, 0.96), rgba(24, 25, 18, 0.72)),
    linear-gradient(135deg, rgba(220, 255, 124, 0.22), transparent 48%),
    rgba(31, 32, 35, 0.86);
}

body[data-active-view="aiCanvas"] .workflow-starter-card.is-audio {
  background:
    linear-gradient(90deg, rgba(15, 26, 24, 0.96), rgba(15, 26, 24, 0.72)),
    linear-gradient(135deg, rgba(112, 224, 186, 0.24), transparent 48%),
    rgba(31, 32, 35, 0.86);
}

body[data-active-view="aiCanvas"] .workflow-starter-card svg,
body[data-active-view="aiCanvas"] .workflow-starter-card strong,
body[data-active-view="aiCanvas"] .workflow-starter-card span {
  position: relative;
  z-index: 1;
}

body[data-active-view="aiCanvas"] .workflow-starter-card strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 400 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-starter-card span {
  color: rgba(247, 248, 248, 0.74);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-starter-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

body[data-active-view="aiCanvas"] .workflow-minimap {
  right: 16px;
  bottom: 16px;
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell.has-selection .workflow-inspector {
  display: flex;
}

body[data-active-view="aiCanvas"] .workflow-inspector {
  position: absolute;
  z-index: 37;
  top: 72px;
  right: 16px;
  width: min(340px, calc(100vw - 110px));
  max-height: calc(100vh - 108px);
  padding: 8px;
  display: none;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(24, 25, 28, 0.9);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(22px);
}

body[data-active-view="aiCanvas"] .workflow-run-panel,
body[data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-active-view="aiCanvas"] .workflow-console-grid section,
body[data-active-view="aiCanvas"] .workflow-command-card,
body[data-active-view="aiCanvas"] .workflow-context-menu,
body[data-active-view="aiCanvas"] .workflow-link-menu {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(31, 32, 35, 0.9);
  box-shadow: 0 20px 62px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell.has-activity .workflow-taskbar {
  display: block;
}

body[data-active-view="aiCanvas"] .workflow-taskbar {
  position: absolute;
  z-index: 37;
  left: 84px;
  right: 16px;
  bottom: 74px;
  max-height: 230px;
  padding: 8px;
  display: none;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(24, 25, 28, 0.9);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(22px);
}

body[data-active-view="aiCanvas"] .workflow-node {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(39, 40, 44, 0.92), rgba(24, 25, 28, 0.92)),
    rgba(24, 25, 28, 0.92);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
}

body[data-active-view="aiCanvas"] .workflow-node.is-selected {
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.13), 0 28px 84px rgba(0, 0, 0, 0.44);
}

body[data-active-view="aiCanvas"] .workflow-node-head span {
  color: #101113;
  background: #f6f7f7;
}

body[data-active-view="aiCanvas"] .workflow-edge {
  stroke: rgba(247, 248, 248, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-edge:hover,
body[data-active-view="aiCanvas"] .workflow-edge.is-selected,
body[data-active-view="aiCanvas"] .workflow-edge.is-running {
  stroke: #f7f8f8;
}

body[data-active-view="aiCanvas"] .workflow-edges marker path {
  fill: #f7f8f8;
}

@media (max-width: 900px) {
  body[data-active-view="aiCanvas"] .workflow-actions .workflow-action-group.is-secondary,
  body[data-active-view="aiCanvas"] .workflow-run-summary {
    display: none !important;
  }

  body[data-active-view="aiCanvas"] .workflow-starter-cards {
    grid-template-columns: 1fr;
  }

  body[data-active-view="aiCanvas"] .workflow-empty {
    width: min(360px, calc(100vw - 110px));
    transform: translate(-42%, -44%);
  }

  body[data-active-view="aiCanvas"] .workflow-brand strong,
  body[data-active-view="aiCanvas"] .workflow-brand em {
    display: none;
  }
}

/* Final AI Canvas theme switch and XiHei typography override. */
body[data-active-view="aiCanvas"] {
  --wf-font: "STXihei", "华文细黑", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  font-family: var(--wf-font) !important;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] *,
body[data-active-view="aiCanvas"] input,
body[data-active-view="aiCanvas"] select,
body[data-active-view="aiCanvas"] textarea,
body[data-active-view="aiCanvas"] button {
  font-family: var(--wf-font) !important;
  letter-spacing: 0 !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell,
body[data-active-view="aiCanvas"] .workflow-canvas-shell input,
body[data-active-view="aiCanvas"] .workflow-canvas-shell select,
body[data-active-view="aiCanvas"] .workflow-canvas-shell textarea,
body[data-active-view="aiCanvas"] .workflow-canvas-shell button,
body[data-active-view="aiCanvas"] .nav-item,
body[data-active-view="aiCanvas"] .side-status,
body[data-active-view="aiCanvas"] .theme-toggle-card {
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell strong,
body[data-active-view="aiCanvas"] .workflow-canvas-shell b,
body[data-active-view="aiCanvas"] .workflow-canvas-shell em,
body[data-active-view="aiCanvas"] .workflow-canvas-shell small,
body[data-active-view="aiCanvas"] .workflow-node-head span,
body[data-active-view="aiCanvas"] .workflow-node-meta small,
body[data-active-view="aiCanvas"] .workflow-node-contract span,
body[data-active-view="aiCanvas"] .workflow-primary-button,
body[data-active-view="aiCanvas"] .workflow-secondary-button,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-icon-button,
body[data-active-view="aiCanvas"] .workflow-sidebar-tabs button,
body[data-active-view="aiCanvas"] .workflow-palette-card,
body[data-active-view="aiCanvas"] .workflow-template-card,
body[data-active-view="aiCanvas"] .workflow-task-card,
body[data-active-view="aiCanvas"] .workflow-context-menu button,
body[data-active-view="aiCanvas"] .workflow-command-list button {
  font-weight: 400 !important;
}

body[data-active-view="aiCanvas"] .workflow-brand strong,
body[data-active-view="aiCanvas"] .workflow-run-button,
body[data-active-view="aiCanvas"] .workflow-section-head strong,
body[data-active-view="aiCanvas"] .workflow-panel-head strong,
body[data-active-view="aiCanvas"] .workflow-console-title strong {
  font-weight: 500 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] {
  color-scheme: light;
  --bg: #f4f2ed;
  --bg-2: #e9e5dc;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --text: #141414;
  --muted: #686a63;
  --line: rgba(18, 18, 18, 0.11);
  --line-strong: rgba(18, 18, 18, 0.28);
  color: #141414;
  background: #f4f2ed !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .app-shell {
  background: #ede9df !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .main {
  background:
    radial-gradient(circle at 54% 10%, rgba(180, 204, 99, 0.18), transparent 26%),
    radial-gradient(circle at 84% 72%, rgba(72, 150, 185, 0.12), transparent 30%),
    #f4f2ed !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .sidebar {
  border-color: rgba(18, 18, 18, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 239, 231, 0.96)),
    #f4f2ed !important;
  box-shadow: 8px 0 32px rgba(18, 18, 18, 0.08) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .nav-item,
body[data-theme="light"][data-active-view="aiCanvas"] .side-status,
body[data-theme="light"][data-active-view="aiCanvas"] .theme-toggle-card {
  color: #6b6b63 !important;
  border-color: rgba(18, 18, 18, 0.08) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .nav-item:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item.active {
  color: #f7f3e8 !important;
  border-color: rgba(18, 18, 18, 0.2) !important;
  background: linear-gradient(180deg, #262821, #12140f) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #f2efe7;
  --wf-surface: rgba(255, 255, 255, 0.92);
  --wf-panel: rgba(250, 248, 242, 0.94);
  --wf-panel-soft: rgba(18, 18, 18, 0.045);
  --wf-ink: #141414;
  --wf-muted: #6c6e66;
  --wf-line: rgba(18, 18, 18, 0.11);
  --wf-line-strong: rgba(18, 18, 18, 0.28);
  --wf-accent: #151711;
  --wf-accent-2: #277c66;
  --wf-blue: #246f96;
  --wf-success: #16805a;
  --wf-warning: #a66a00;
  --wf-danger: #c94141;
  --wf-info: #246f96;
  color: #141414 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-topbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-taskbar {
  border-color: rgba(18, 18, 18, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 246, 239, 0.88)),
    #faf8f2;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 18px 44px rgba(18, 18, 18, 0.09);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    radial-gradient(circle at 36% 30%, rgba(151, 171, 77, 0.11), transparent 24%),
    radial-gradient(circle at 72% 64%, rgba(72, 150, 185, 0.08), transparent 30%),
    linear-gradient(rgba(18, 18, 18, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.075) 1px, transparent 1px),
    linear-gradient(rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    #f2efe7;
  background-size: auto, auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px, auto;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-panel,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-console-grid section,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-context-menu {
  border-color: rgba(18, 18, 18, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 246, 239, 0.92)),
    #fffdf8;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 44px rgba(18, 18, 18, 0.1);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar-tabs button.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-mode-grid button.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector-tabs span.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-primary-button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-button {
  color: #f7f3e8;
  border-color: rgba(18, 18, 18, 0.26);
  background: linear-gradient(180deg, #242820, #11140f);
  box-shadow: 0 14px 28px rgba(18, 18, 18, 0.16);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge {
  stroke: rgba(18, 18, 18, 0.42);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edges marker path {
  fill: #151711;
}

/* Theme-aware override: light mode keeps the canvas polished instead of forcing dark. */
body[data-theme="light"][data-active-view="aiCanvas"] {
  color-scheme: light;
  --bg: #f4f2ed;
  --bg-2: #e9e5dc;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --text: #141414;
  --muted: #686a63;
  --line: rgba(18, 18, 18, 0.11);
  --line-strong: rgba(18, 18, 18, 0.28);
  color: #141414;
  background: #f4f2ed !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .app-shell {
  background: #ede9df !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .main {
  background:
    radial-gradient(circle at 54% 10%, rgba(180, 204, 99, 0.18), transparent 26%),
    radial-gradient(circle at 84% 72%, rgba(72, 150, 185, 0.12), transparent 30%),
    #f4f2ed !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .sidebar {
  border-color: rgba(18, 18, 18, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 239, 231, 0.96)),
    #f4f2ed !important;
  box-shadow: 8px 0 32px rgba(18, 18, 18, 0.08) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .nav-item,
body[data-theme="light"][data-active-view="aiCanvas"] .side-status,
body[data-theme="light"][data-active-view="aiCanvas"] .theme-toggle-card {
  color: #6b6b63 !important;
  border-color: rgba(18, 18, 18, 0.08) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .nav-item:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item.active {
  color: #f7f3e8 !important;
  border-color: rgba(18, 18, 18, 0.2) !important;
  background: linear-gradient(180deg, #262821, #12140f) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #f2efe7;
  --wf-surface: rgba(255, 255, 255, 0.92);
  --wf-panel: rgba(250, 248, 242, 0.94);
  --wf-panel-soft: rgba(18, 18, 18, 0.045);
  --wf-ink: #141414;
  --wf-muted: #6c6e66;
  --wf-line: rgba(18, 18, 18, 0.11);
  --wf-line-strong: rgba(18, 18, 18, 0.28);
  --wf-accent: #151711;
  --wf-accent-2: #277c66;
  --wf-blue: #246f96;
  --wf-success: #16805a;
  --wf-warning: #a66a00;
  --wf-danger: #c94141;
  --wf-info: #246f96;
  color: #141414 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-topbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-taskbar {
  border-color: rgba(18, 18, 18, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 246, 239, 0.88)),
    #faf8f2;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 18px 44px rgba(18, 18, 18, 0.09);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    radial-gradient(circle at 36% 30%, rgba(151, 171, 77, 0.11), transparent 24%),
    radial-gradient(circle at 72% 64%, rgba(72, 150, 185, 0.08), transparent 30%),
    linear-gradient(rgba(18, 18, 18, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.075) 1px, transparent 1px),
    linear-gradient(rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    #f2efe7;
  background-size: auto, auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px, auto;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-panel,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-console-grid section,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-context-menu {
  border-color: rgba(18, 18, 18, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 246, 239, 0.92)),
    #fffdf8;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 44px rgba(18, 18, 18, 0.1);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar-tabs button.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-mode-grid button.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector-tabs span.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-primary-button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-button {
  color: #f7f3e8;
  border-color: rgba(18, 18, 18, 0.26);
  background: linear-gradient(180deg, #242820, #11140f);
  box-shadow: 0 14px 28px rgba(18, 18, 18, 0.16);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge {
  stroke: rgba(18, 18, 18, 0.42);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edges marker path {
  fill: #151711;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
}

html[data-theme="dark"] {
  background: #070a0c;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.028) 1px, transparent 1px),
    var(--bg);
  background-size: 42px 42px, 42px 42px, auto;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  letter-spacing: 0;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0a;
  --bg-2: #151513;
  --panel: rgba(18, 18, 16, 0.86);
  --panel-strong: rgba(26, 26, 24, 0.96);
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.34);
  --text: #f2f0e8;
  --muted: #a8a49a;
  --cyan: #f2f0e8;
  --lime: #2a2a27;
  --shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
}

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

button {
  cursor: pointer;
}

svg {
  display: block;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 20px;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(24px, 4vw, 36px);
}

h3 {
  margin-bottom: 0;
  font-size: 20px;
}

h4 {
  margin: 0 0 12px;
  font-size: 16px;
}

.app-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100vh;
  animation: shellEnter 0.58s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid var(--line);
  background: var(--panel-strong);
  animation: sidebarEnter 0.64s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.brand-block {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 54px;
}

.brand-mark {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.16);
  border-radius: 14px;
  color: #f7f7f2;
  background: #111;
  box-shadow: 0 12px 26px rgba(18, 18, 18, 0.1);
  font-weight: 900;
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}

.brand-mark::after {
  content: none;
}

.brand-mark span,
.brand-mark em {
  position: relative;
  z-index: 2;
  line-height: 1;
}

.brand-mark span {
  margin-top: -1px;
  color: #f6f6f1;
  font-size: 25px;
  font-weight: 760;
}

.brand-mark em {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 7px;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #f4f4ef;
  color: transparent;
  font-size: 0;
  font-style: normal;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.nav-list,
.sidebar-bottom {
  display: grid;
  gap: 4px;
}

.sidebar-bottom {
  margin-top: auto;
  padding-top: 10px;
  grid-template-columns: 1fr;
  gap: 6px;
  border-top: 1px solid var(--line);
}

.nav-item,
.text-button,
.primary-button,
.side-status,
.batch-primary-button,
.batch-secondary-button {
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
  background: transparent;
}

.nav-item {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border-radius: 4px;
  color: var(--muted);
  text-align: left;
}

.nav-item:hover,
.nav-item.active {
  border-color: var(--line-strong);
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.nav-sub-item {
  margin-left: 20px;
  width: calc(100% - 20px);
  min-height: 34px;
  grid-template-columns: 18px minmax(0, 1fr);
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-size: 13px;
}

.nav-sub-item svg {
  width: 16px;
  height: 16px;
}

.nav-item svg,
.primary-button svg,
.search-box svg,
.text-button svg {
  width: 18px;
  height: 18px;
}

.side-status {
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  justify-items: start;
  border-radius: 4px;
  border-color: var(--line);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  text-align: left;
}

.side-account-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  justify-items: start;
}

.side-status strong,
.side-status em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-status strong {
  color: var(--text);
  font-size: 11px;
  line-height: 1.2;
}

.side-status em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.side-status > svg,
.side-status > i {
  width: 17px;
  height: 17px;
  color: currentColor;
}

.side-status.is-logged-in {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.side-upload-card {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.side-upload-card.is-locked {
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
}

.side-upload-card.active {
  color: var(--text);
}

.side-status.active {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.side-status.is-logged-in .pulse-dot {
  background: var(--cyan);
  box-shadow: 0 0 0 6px rgba(98, 241, 223, 0.1);
}

.side-generate-card,
.side-creator-card {
  border-color: var(--line);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.side-generate-card .pulse-dot,
.side-creator-card .pulse-dot {
  background: var(--cyan);
  box-shadow: 0 0 0 6px rgba(98, 241, 223, 0.1);
}

.side-generate-card:hover,
.side-generate-card.active,
.side-creator-card:hover,
.side-creator-card.active {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.theme-toggle-card {
  border-color: var(--line);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.theme-toggle-card > svg {
  width: 18px;
  height: 18px;
  color: var(--text);
}

.theme-toggle-card:hover {
  border-color: var(--line-strong);
  background: rgba(18, 184, 166, 0.1);
}

.side-status.is-error {
  border-color: rgba(255, 123, 105, 0.35);
  background: rgba(255, 123, 105, 0.08);
}

.side-status.is-error .pulse-dot {
  background: var(--coral);
  box-shadow: 0 0 0 6px rgba(255, 123, 105, 0.1);
}

.pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 6px rgba(185, 255, 106, 0.1);
}

.main {
  min-width: 0;
  padding: 22px;
  animation: contentEnter 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s both;
}

.site-filing {
  margin: 28px 0 2px;
  padding: 16px 0 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.site-filing a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}

.site-filing a:hover {
  color: var(--text);
}

/* v1.8.235 Filing links use the official public-security icon */
.site-filing-police::before {
  content: none !important;
}

.site-filing-police-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 82px;
  margin: -22px -22px 22px;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid rgba(150, 242, 229, 0.1);
  background: rgba(7, 10, 12, 0.84);
  backdrop-filter: blur(18px);
}

body[data-active-view="templateGeneration"] .topbar,
body[data-active-view="creatorStudio"] .topbar,
body[data-active-view="aiCanvas"] .topbar,
body[data-active-view="creatorCanvas"] .topbar {
  display: none;
}

body[data-active-view="creatorStudio"] #creatorStudio,
body[data-active-view="aiCanvas"] #aiCanvas,
body[data-active-view="creatorCanvas"] #creatorCanvas {
  color: var(--text);
}

.top-actions,
.template-actions,
.template-search-actions,
.template-upload-actions,
.batch-upload-actions,
.batch-submit-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.primary-button,
.text-button {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  line-height: 1;
}

.primary-button {
  border-color: rgba(98, 241, 223, 0.62);
  color: #06110f;
  background: linear-gradient(135deg, var(--cyan), var(--lime));
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(98, 241, 223, 0.14);
}

.primary-button.compact {
  min-height: 36px;
}

.top-upload-button {
  min-width: 116px;
}

.top-upload-button[hidden] {
  display: none !important;
}

.top-upload-button.is-admin-entry,
.top-upload-button.is-login-entry {
  min-width: 74px;
  min-height: 32px;
  padding: 0 10px;
  gap: 6px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  box-shadow: none;
  font-size: 12px;
  font-weight: 760;
}

.top-upload-button.is-admin-entry svg,
.top-upload-button.is-login-entry svg {
  width: 15px;
  height: 15px;
}

.template-save-button {
  min-width: 104px;
  min-height: 40px;
  padding: 0 14px;
  display: inline-grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  place-content: center;
  gap: 8px;
  border-radius: var(--radius);
  font-weight: 760;
  line-height: 1;
}

.template-save-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.template-save-button span {
  display: block;
  min-width: 0;
  text-align: center;
  line-height: 1;
}

.text-button {
  border-color: rgba(150, 242, 229, 0.18);
  color: var(--cyan);
  background: rgba(98, 241, 223, 0.06);
}

.text-button.danger {
  border-color: rgba(255, 123, 105, 0.24);
  color: #ffb8b0;
  background: rgba(255, 123, 105, 0.07);
}

.primary-button:disabled,
.text-button:disabled,
.batch-primary-button:disabled,
.batch-secondary-button:disabled,
.generation-result-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  pointer-events: none;
}

.primary-button,
.text-button,
.batch-primary-button,
.batch-secondary-button,
.generation-result-action-button,
.generation-result-actions a {
  touch-action: manipulation;
}

.primary-button:focus-visible,
.text-button:focus-visible,
.batch-primary-button:focus-visible,
.batch-secondary-button:focus-visible,
.generation-result-action-button:focus-visible,
.generation-result-actions a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cyan) 72%, #fff 28%);
  outline-offset: 2px;
}

.center-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 80;
  min-width: 180px;
  max-width: min(360px, calc(100vw - 40px));
  padding: 14px 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--bg);
  background: var(--text);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
  font-size: 14px;
  font-weight: 820;
  text-align: center;
  transform: translate(-50%, -44%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.center-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.center-toast.is-error {
  color: #fff;
  background: #1b1b1b;
}

.center-toast svg {
  width: 18px;
  height: 18px;
}

@keyframes shellEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sidebarEnter {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes contentEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.992);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes viewEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.template-upload-form.is-saving {
  pointer-events: none;
}

.is-hidden {
  display: none !important;
}

.creator-access-panel {
  min-height: calc(100vh - 44px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--muted);
  text-align: center;
}

.creator-access-panel svg {
  width: 34px;
  height: 34px;
  color: var(--text);
}

.creator-access-panel strong {
  color: var(--text);
  font-size: 24px;
}

.creator-access-panel span {
  max-width: 420px;
  line-height: 1.7;
}

.admin-locked {
  position: relative;
  overflow: hidden;
}

.admin-locked > :not(.admin-lock-overlay) {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}

.admin-locked.is-admin > :not(.admin-lock-overlay) {
  filter: none;
  pointer-events: auto;
  user-select: auto;
}

.admin-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  min-height: 220px;
  padding: 18px;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 7, 0.48);
  backdrop-filter: blur(2px);
}

.admin-lock-overlay > div {
  width: min(320px, 100%);
  padding: 18px;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  border: 1px solid rgba(150, 242, 229, 0.22);
  border-radius: 8px;
  color: var(--text);
  background: rgba(7, 10, 12, 0.92);
  box-shadow: var(--shadow);
}

.admin-lock-overlay svg {
  width: 30px;
  height: 30px;
  color: var(--cyan);
}

.admin-lock-overlay strong {
  font-size: 17px;
}

.admin-lock-overlay span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.admin-access-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
}

.admin-access-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(7px);
}

.admin-access-card {
  position: relative;
  z-index: 1;
  width: min(390px, 100%);
  padding: 22px;
  display: grid;
  gap: 13px;
  border: 1px solid rgba(150, 242, 229, 0.24);
  border-radius: 8px;
  color: var(--text);
  background: rgba(7, 10, 12, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
}

.admin-access-card > svg {
  width: 34px;
  height: 34px;
  color: var(--cyan);
}

.admin-access-card h3 {
  margin: 0;
  font-size: 21px;
}

.admin-access-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.admin-access-card label {
  display: grid;
  gap: 7px;
}

.admin-access-card label[hidden],
.admin-toggle-button[hidden] {
  display: none;
}

.auth-mode-switch {
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.auth-mode-switch button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
  cursor: pointer;
}

.auth-mode-switch button.active {
  color: var(--panel);
  background: var(--text);
}

.admin-access-card label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-access-card input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(150, 242, 229, 0.22);
  border-radius: 8px;
  color: var(--text);
  background: rgba(3, 6, 8, 0.82);
  outline: none;
}

.admin-access-card select,
.admin-access-card textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(150, 242, 229, 0.22);
  border-radius: 8px;
  color: var(--text);
  background: rgba(3, 6, 8, 0.82);
  outline: none;
}

.admin-access-card select {
  min-height: 42px;
}

.admin-access-card textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.55;
}

.admin-access-card input:focus,
.admin-access-card select:focus,
.admin-access-card textarea:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(98, 241, 223, 0.12);
}

.phone-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.phone-code-row .text-button {
  min-height: 42px;
  white-space: nowrap;
}

.auth-inline-hint {
  min-height: 16px;
  color: var(--muted);
  font-size: 12px;
}

.admin-access-error {
  min-height: 18px;
  color: #ffb8b0;
  font-size: 12px;
}

.admin-access-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.auth-access-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.permission-request-status {
  padding: 12px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.permission-request-status span,
.permission-request-status small {
  color: var(--muted);
  font-size: 12px;
}

.permission-request-status strong {
  color: var(--text);
  font-size: 18px;
}

.admin-toggle-button {
  min-height: 30px;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  font-size: 12px;
  font-weight: 760;
}

.admin-toggle-button svg {
  width: 14px;
  height: 14px;
}

.admin-toggle-button:hover,
.admin-toggle-button.active {
  border-color: var(--line-strong);
  color: var(--text);
}

.admin-access-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.view {
  display: none;
}

.view.active {
  display: block;
  animation: viewEnter 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.motion-reveal {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(24px) scale(0.985);
  transition:
    opacity 0.82s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.82s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.82s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--motion-index, 0) * 34ms);
  will-change: opacity, filter, transform;
}

.motion-reveal.is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.panel,
.template-library-panel {
  min-width: 0;
}

.template-library-hero {
  margin-bottom: 16px;
  min-height: 172px;
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 9%, transparent), transparent 58%),
    var(--panel-strong);
  box-shadow: var(--shadow);
}

.template-library-hero-copy {
  max-width: 740px;
  display: grid;
  gap: 8px;
}

.template-library-hero-copy h3 {
  max-width: 680px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: 0;
}

.template-library-hero-copy span {
  max-width: 680px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

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

.panel {
  padding: 16px;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.panel-heading,
.template-detail-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.template-detail-heading span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.template-clean-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.template-type-tabs {
  max-width: 100%;
  padding: 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.86);
}

.template-type-tabs button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  color: #f4f4f4;
  background: rgba(20, 20, 20, 0.92);
  font-weight: 800;
}

.template-type-tabs button.active,
.template-type-tabs button:hover,
.template-category-filter button.active,
.template-category-filter button:hover {
  border-color: #fff;
  color: #080808;
  background: #fff;
}

.search-box {
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(28, 28, 28, 0.92);
}

.template-search-box {
  width: min(420px, 38vw);
}

.template-sort-box {
  min-width: 180px;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.template-sort-box select {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel-strong);
  padding: 0 10px;
}

.search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #f3f3f3;
  background: transparent;
}

.search-box input::placeholder {
  color: #8f8f8f;
}

.result-count {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.template-category-shell {
  position: relative;
  margin-bottom: 18px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(15, 15, 15, 0.84);
}

.template-category-head {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  margin-bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
}

.template-category-head strong,
.template-category-head span {
  display: block;
}

.template-category-head strong {
  color: var(--text);
  font-size: 13px;
}

.template-category-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.text-button.compact {
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.tag-manager-toggle svg {
  width: 15px;
  height: 15px;
}

.template-category-filter {
  display: grid;
  align-items: start;
  gap: 9px;
}

.template-tag-group {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.template-tag-group:first-child .template-tag-buttons {
  padding-right: 108px;
}

.template-video-type-group {
  padding: 0 0 7px;
  border-bottom: 1px solid var(--line);
}

.template-video-type-group [data-video-template-type="全部"] {
  order: -1;
}

.template-tag-group-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.template-tag-buttons {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.template-category-filter button {
  min-height: 36px;
  padding: 0 13px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  color: #d8d8d8;
  background: rgba(18, 18, 18, 0.9);
  font-weight: 700;
}

.tag-manager-panel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(98, 241, 223, 0.055), transparent),
    rgba(7, 10, 12, 0.58);
}

.tag-manager-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.tag-manager-head strong,
.tag-manager-head span {
  display: block;
}

.tag-manager-head strong {
  color: var(--text);
}

.tag-manager-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

#tagManagerStatus {
  max-width: 360px;
  color: var(--cyan);
  text-align: right;
}

.tag-manager-mode {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-manager-mode button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(3, 6, 8, 0.64);
  font-weight: 800;
}

.tag-manager-mode button.active {
  color: #06100f;
  border-color: rgba(98, 241, 223, 0.8);
  background: var(--cyan);
}

.tag-manager-list {
  display: grid;
  gap: 8px;
}

.tag-manager-add {
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.tag-manager-add label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.tag-manager-add label span {
  color: var(--muted);
  font-size: 11px;
}

.tag-manager-add input {
  width: 100%;
  min-height: 36px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(3, 6, 8, 0.72);
}

.tag-manager-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  position: relative;
  transition: border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}

.tag-manager-row.is-dragging {
  opacity: 0.46;
  background: rgba(98, 241, 223, 0.06);
}

.tag-manager-row.is-drop-before::before,
.tag-manager-row.is-drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(98, 241, 223, 0.42);
}

.tag-manager-row.is-drop-before::before {
  top: -5px;
}

.tag-manager-row.is-drop-after::after {
  bottom: -5px;
}

.tag-manager-row label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.tag-manager-row label span {
  color: var(--muted);
  font-size: 11px;
}

.tag-manager-row input {
  width: 100%;
  min-height: 36px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(3, 6, 8, 0.72);
}

.tag-drag-handle {
  width: 36px;
  min-width: 36px;
  padding: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.tag-drag-handle:active {
  cursor: grabbing;
}

.tag-drag-handle svg {
  width: 15px;
  height: 15px;
}

.template-masonry {
  display: grid;
  grid-template-columns: repeat(var(--rendered-template-columns, var(--template-columns)), minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.template-masonry-column {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.template-card {
  width: 100%;
  margin: 0;
  display: block;
  break-inside: avoid;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
}

.template-masonry > .empty-state {
  grid-column: 1 / -1;
}

.template-card:focus-visible .template-video-frame,
.template-card:hover .template-video-frame {
  border-color: rgba(255, 255, 255, 0.42);
}

.template-video-frame {
  position: relative;
  aspect-ratio: var(--template-aspect-ratio, 9 / 16);
  overflow: hidden;
  transform: translateY(var(--video-slide, 0px)) scale(var(--video-scale, 1));
  transition:
    transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  will-change: transform;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    #111;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.template-video-frame::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 0;
  background:
    var(--template-cover-image, none) center / cover no-repeat,
    linear-gradient(135deg, #f3f3f3, #d9d9d9);
  filter: blur(14px) saturate(0.72);
  opacity: 0.46;
  transform: scale(1.06);
}

.template-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.viewport-video,
.viewport-video video,
.template-video-poster,
.template-preview-panel video,
.template-preview-image,
.template-image-cover {
  width: 100%;
  height: 100%;
}

.viewport-video video,
.template-video-poster,
.template-preview-panel video,
.template-preview-image,
.template-image-cover {
  display: block;
  object-fit: contain;
  background: #000;
}

.template-card .viewport-video video,
.template-card .template-video-poster,
.template-card .template-image-cover {
  background:
    var(--template-cover-image, none) center / cover no-repeat,
    linear-gradient(135deg, #efeee8, #cfd8d4);
  transform: scale(1.045);
  transform-origin: center;
}

.viewport-video {
  position: relative;
  z-index: 1;
}

.template-video-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.viewport-video.has-video-frame .template-video-poster {
  opacity: 0;
}

.template-preview-image {
  aspect-ratio: 9 / 16;
  height: auto;
  border: 1px solid rgba(98, 241, 223, 0.18);
  border-radius: var(--radius);
}

.template-empty-media {
  aspect-ratio: 9 / 16;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px solid rgba(98, 241, 223, 0.18);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(3, 6, 8, 0.72);
}

.template-video-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: rgba(22, 25, 25, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(234, 237, 232, 0.88)),
    var(--template-cover-image, none) center / cover no-repeat,
    linear-gradient(135deg, #eeece5, #cbd8d4);
  font-size: 12px;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.template-video-placeholder svg {
  width: 26px;
  height: 26px;
}

.viewport-video.is-loaded + .template-video-placeholder {
  opacity: 0;
}

.viewport-video.has-poster + .template-video-placeholder,
.viewport-video.has-poster.is-error + .template-video-placeholder {
  opacity: 0;
}

.viewport-video.is-error + .template-video-placeholder {
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(235, 232, 226, 0.9)),
    var(--template-cover-image, none) center / cover no-repeat,
    linear-gradient(135deg, #f0e9e3, #d4d8d3);
}

.template-video-placeholder.is-static {
  opacity: 1;
}

.template-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 28%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.18) 54%, transparent 76%);
}

.template-type-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 4;
  max-width: calc(100% - 20px);
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  color: #fff;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.template-card-badges,
.template-card-copy {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.template-card-badges {
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

.template-card-badges span,
.play-chip {
  min-width: 0;
  padding: 5px 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-chip svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.template-card-copy {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.template-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.template-card.is-video-template .template-card-badges,
.template-card.is-video-template .template-card-tags,
.template-card.is-video-template .template-card-parameters,
.template-card.is-video-template .template-card-meta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.template-card.is-video-template .template-card-tags,
.template-card.is-video-template .template-card-parameters,
.template-card.is-video-template .template-card-meta {
  transform: translateY(4px);
}

.template-card.is-video-template:hover .template-card-badges,
.template-card.is-video-template:focus-within .template-card-badges,
.template-card.is-video-template:hover .template-card-tags,
.template-card.is-video-template:focus-within .template-card-tags,
.template-card.is-video-template:hover .template-card-parameters,
.template-card.is-video-template:focus-within .template-card-parameters,
.template-card.is-video-template:hover .template-card-meta,
.template-card.is-video-template:focus-within .template-card-meta {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.template-card-tags span {
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  align-items: end;
}

.template-card-meta b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-card-meta b:nth-child(2) {
  grid-column: 1;
}

.template-card.is-video-template .template-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.template-card-copy span,
.template-card-copy small,
.template-card-copy b,
.template-card-copy strong {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.template-card-copy span {
  font-size: 13px;
  font-weight: 700;
}

.template-card-copy strong {
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.28;
}

.template-card-copy b,
.template-card-copy small {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
}

.template-card-copy small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 32px;
  color: rgba(255, 255, 255, 0.86);
  overflow: hidden;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.template-card-copy svg {
  width: 15px;
  height: 15px;
}

.template-mode-chip {
  border-color: rgba(124, 255, 122, 0.42) !important;
  background: rgba(20, 128, 58, 0.62) !important;
}

.template-card.is-manual-template .template-mode-chip {
  border-color: rgba(255, 214, 102, 0.46) !important;
  background: rgba(128, 76, 20, 0.66) !important;
}

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

.template-card-parameters span {
  min-width: 0;
  padding: 7px 8px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px);
  text-shadow: none;
}

.template-card-parameters em,
.template-card-parameters b {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: none !important;
}

.template-card-parameters em {
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
  line-height: 1;
}

.template-card-parameters b {
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.template-card-action-tray {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 7px;
  pointer-events: auto;
}

.template-card.is-video-template .template-card-action-tray {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.template-card.is-video-template:hover .template-card-action-tray,
.template-card.is-video-template:focus-within .template-card-action-tray {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.template-card-primary-action,
.template-card-secondary-action {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 920;
  line-height: 1;
  cursor: pointer;
}

.template-card-primary-action {
  padding: 0 12px;
  color: #111;
  background: rgba(255, 255, 255, 0.94);
}

.template-card-primary-action.is-manual-action {
  color: #fff;
  background: rgba(24, 24, 24, 0.76);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.template-card-secondary-action {
  width: 34px;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
}

.template-card-primary-action:hover,
.template-card-primary-action:focus-visible,
.template-card-secondary-action:hover,
.template-card-secondary-action:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.template-card-primary-action svg,
.template-card-secondary-action svg {
  width: 15px;
  height: 15px;
}

.template-card-primary-action span,
.template-card-secondary-action span {
  color: currentColor !important;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-shadow: none !important;
}

.template-card-cta {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  color: #111 !important;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-shadow: none !important;
  white-space: nowrap;
}

.template-card-engagement-button {
  min-width: 0;
  min-height: 28px;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  pointer-events: auto;
}

.template-card-engagement-button:hover,
.template-card-engagement-button:focus-visible {
  color: #111;
  background: #fff;
  outline: none;
}

.template-card-engagement-button.is-active {
  color: #111;
  background: #fff;
}

.template-card-engagement-button svg {
  width: 14px;
  height: 14px;
}

.template-card-engagement-button span {
  min-width: 0;
  color: currentColor !important;
  text-shadow: none !important;
  white-space: nowrap;
}

.empty-state {
  min-height: 220px;
  padding: 24px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px dashed rgba(150, 242, 229, 0.18);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(7, 10, 12, 0.45);
  text-align: center;
}

.empty-state svg {
  width: 28px;
  height: 28px;
  color: var(--cyan);
}

.empty-state.compact {
  grid-column: 1 / -1;
}

.template-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.template-preview-panel,
.template-edit-panel,
.template-upload-section,
.template-generation-panel,
.batch-panel {
  min-width: 0;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(98, 241, 223, 0.035), transparent),
    rgba(5, 9, 11, 0.58);
}

.template-preview-panel,
.template-edit-panel,
.template-upload-section {
  padding: 12px;
}

.template-preview-panel {
  overflow: hidden;
}

.template-edit-panel {
  overflow: visible;
}

.template-edit-panel {
  align-self: start;
}

.template-preview-head,
.template-source-meta,
.batch-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.template-preview-head span,
.template-source-meta span,
.muted {
  color: var(--muted);
  font-size: 12px;
}

.template-preview-panel video {
  aspect-ratio: 9 / 16;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  touch-action: manipulation;
  border: 1px solid rgba(98, 241, 223, 0.18);
  border-radius: var(--radius);
}

.template-source-meta {
  margin: 10px 0 0;
  align-items: flex-start;
}

.template-video-replace {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.template-video-replace > span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.template-edit-grid,
.template-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(120px, 0.7fr));
  gap: 10px;
}

.template-content-tags {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.template-content-tags-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.template-content-tag-values {
  min-width: 0;
  min-height: 100%;
  display: grid;
  gap: 6px;
}

.template-content-tag-picker {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.template-content-tag-picker button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(150, 242, 229, 0.2);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(3, 6, 8, 0.58);
  font-weight: 800;
}

.template-content-tag-picker button.active {
  color: #06100f;
  border-color: rgba(98, 241, 223, 0.82);
  background: var(--cyan);
}

.template-content-tag-picker > span {
  color: var(--muted);
  font-size: 12px;
}

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

.template-upload-mode-section {
  margin-bottom: 12px;
  display: grid;
  gap: 10px;
}

.template-upload-mode-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
}

.template-upload-mode-head strong {
  color: var(--text);
  font-size: 14px;
}

.template-upload-mode-head span {
  color: var(--muted);
  font-size: 12px;
}

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

.template-upload-mode-card {
  min-width: 0;
  min-height: 104px;
  padding: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 10px;
  align-content: start;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--panel-strong);
}

.template-upload-mode-card svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.template-upload-mode-card strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.template-upload-mode-card span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.template-upload-mode-card.active {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}

.template-upload-mode-dialog-card {
  width: min(720px, 100%);
  gap: 18px;
}

.template-upload-mode-dialog-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.template-upload-mode-dialog-head svg {
  width: 30px;
  height: 30px;
  color: var(--cyan);
  flex: 0 0 auto;
}

.template-upload-mode-dialog-head h3 {
  margin: 0 0 4px;
}

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

.template-upload-mode-dialog-grid .template-upload-mode-card {
  min-height: 132px;
}

.template-upload-mode-fields {
  margin-top: 12px;
  padding: 12px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(150, 242, 229, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(98, 241, 223, 0.045), transparent),
    rgba(12, 17, 20, 0.38);
}

.template-upload-mode-fields-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
}

.template-upload-mode-fields-head strong {
  color: var(--text);
  font-size: 14px;
}

.template-upload-mode-fields-head span {
  max-width: 620px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

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

.template-upload-mode-fields-grid label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.template-upload-mode-fields-grid label.wide {
  grid-column: span 2;
}

.template-upload-mode-fields-grid label.full {
  grid-column: 1 / -1;
}

.template-upload-mode-fields-grid span {
  color: var(--muted);
  font-size: 12px;
}

.template-upload-mode-fields-grid input,
.template-upload-mode-fields-grid select,
.template-upload-mode-fields-grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(3, 6, 8, 0.72);
}

.template-upload-mode-fields-grid input,
.template-upload-mode-fields-grid select {
  min-height: 40px;
  padding: 0 10px;
}

.template-upload-mode-fields-grid textarea {
  min-height: 104px;
  padding: 10px 12px;
  resize: vertical;
}

.template-upload-form[data-upload-mode="image"] [data-upload-field="video"],
.template-upload-form[data-upload-mode="image"] [data-upload-field="remote-url"],
.template-upload-form[data-upload-mode="video"] [data-upload-field="example-image"],
.template-upload-form[data-upload-mode="real_shoot"] [data-upload-field="example-image"] {
  display: none;
}

.template-upload-grid .wide {
  grid-column: span 2;
}

.template-upload-grid .full {
  grid-column: 1 / -1;
}

.template-upload-group-title {
  margin: 2px 0 -2px;
  padding-top: 6px;
  border-top: 1px solid rgba(150, 242, 229, 0.14);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.template-upload-flow-controls {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.template-upload-flow-controls label {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: start;
}

.template-upload-flow-controls label > span,
.template-upload-flow-controls small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.template-upload-flow-controls select {
  width: 100%;
  min-height: 40px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(3, 6, 8, 0.72);
}

.template-upload-switch {
  min-height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(3, 6, 8, 0.72);
}

.template-upload-switch input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--cyan);
}

.template-upload-switch strong {
  color: var(--text);
  font-size: 13px;
}

.template-upload-preview {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.template-upload-preview {
  min-height: 88px;
  padding: 8px;
  align-content: start;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(3, 6, 8, 0.42);
  font-size: 12px;
}

.template-upload-preview figure {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 5px;
  position: relative;
}

.template-upload-preview img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #000;
}

.template-upload-preview figure > span {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  max-width: calc(100% - 12px);
  padding: 3px 7px;
  border-radius: 999px;
  color: #111;
  background: rgba(255, 255, 255, 0.88);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.template-upload-preview figcaption {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-upload-module-picker {
  display: grid;
  gap: 12px;
}

.template-upload-asset-picker {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(150, 242, 229, 0.1);
}

.template-upload-module-picker > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}

.template-upload-asset-picker > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}

.template-upload-module-picker strong,
.template-upload-module-picker span,
.template-upload-asset-picker strong,
.template-upload-asset-picker span {
  display: block;
}

.template-upload-module-picker strong,
.template-upload-asset-picker strong {
  color: var(--text);
  font-size: 14px;
}

.template-upload-module-picker span,
.template-upload-asset-picker span {
  color: var(--muted);
  font-size: 12px;
}

.template-upload-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.template-upload-module-chip {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(150, 242, 229, 0.16);
  border-radius: 8px;
  color: var(--text);
  background: rgba(7, 10, 12, 0.28);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.template-upload-module-chip input {
  width: 16px;
  height: 16px;
  accent-color: var(--cyan);
}

.template-upload-minimal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.template-upload-asset-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.template-upload-asset-slot input[type="file"] {
  min-height: 40px;
  padding: 6px;
  color: var(--muted);
}

.template-upload-asset-slot input[type="file"]::file-selector-button {
  min-height: 28px;
  margin-right: 10px;
  border: 1px solid rgba(98, 241, 223, 0.28);
  border-radius: 6px;
  color: var(--text);
  background: rgba(98, 241, 223, 0.1);
}

.template-upload-asset-slot small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

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

.template-real-shoot-brief .template-slot-head,
.template-real-shoot-brief .full {
  grid-column: 1 / -1;
}

.template-edit-grid label,
.template-content-tag-values,
.template-content-tags-row label,
.template-content-tags-grid label,
.template-upload-grid label,
.template-slot-card label,
.batch-config-panel label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.template-edit-grid span,
.template-content-tag-values span,
.template-content-tags-row span,
.template-content-tags-grid span,
.template-upload-grid span,
.template-slot-card label span,
.batch-config-panel label > span {
  color: var(--muted);
  font-size: 12px;
}

.template-edit-grid input,
.template-edit-grid select,
.template-content-tag-values textarea,
.template-content-tags-row select,
.template-content-tags-row textarea,
.template-content-tags-grid textarea,
.template-upload-grid input,
.template-upload-grid select,
.template-upload-grid textarea,
.template-slot-card input,
.template-slot-card select,
.template-slot-card textarea,
.batch-config-panel input,
.batch-config-panel select,
.batch-config-panel textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(3, 6, 8, 0.72);
}

.template-edit-grid input,
.template-edit-grid select,
.template-content-tags-row select,
.template-upload-grid input,
.template-upload-grid select,
.template-slot-card input,
.template-slot-card select,
.batch-config-panel input,
.batch-config-panel select {
  min-height: 40px;
  padding: 0 10px;
}

.template-upload-grid textarea {
  min-height: 130px;
  padding: 10px 12px;
  resize: vertical;
}

.template-content-tag-values textarea,
.template-content-tags-row textarea,
.template-content-tags-grid textarea {
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

.template-upload-grid input[type="file"] {
  padding: 6px;
  color: var(--muted);
}

.template-upload-grid input[type="file"]::file-selector-button {
  min-height: 28px;
  margin-right: 10px;
  border: 1px solid rgba(98, 241, 223, 0.28);
  border-radius: 6px;
  color: var(--text);
  background: rgba(98, 241, 223, 0.1);
}

.template-slot-card textarea,
.batch-config-panel textarea {
  min-height: 128px;
  padding: 9px 10px;
  resize: vertical;
}

.template-slot-card textarea.has-scroll {
  overflow-y: auto;
}

.template-slot-card.is-locked-prompt textarea,
.batch-config-panel textarea[data-locked-outfit-prompt="true"] {
  cursor: copy;
  resize: vertical;
}

.template-slot-card.is-locked-prompt textarea:focus,
.batch-config-panel textarea[data-locked-outfit-prompt="true"]:focus {
  outline: 2px solid rgba(17, 17, 17, 0.18);
  outline-offset: 2px;
}

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

/* v1.8.263 Template detail material and ordered workflow-node blueprint split */
.template-blueprint-section {
  margin-top: 14px;
  padding: 12px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(150, 242, 229, 0.13);
  border-radius: var(--radius-lg);
  background: rgba(12, 17, 20, 0.34);
}

.template-blueprint-section-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.template-blueprint-section-head div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.template-blueprint-section-head strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.template-blueprint-section-head span,
.template-blueprint-section-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.template-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.template-material-card {
  min-width: 0;
  padding: 10px;
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid rgba(150, 242, 229, 0.13);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(98, 241, 223, 0.045), transparent),
    rgba(12, 17, 20, 0.5);
}

.template-material-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.template-material-head span,
.template-slot-head > span {
  min-width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.template-material-card label {
  display: grid;
  gap: 6px;
}

.template-material-card label > span,
.template-material-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.template-material-card input,
.template-material-card select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(3, 6, 8, 0.72);
}

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

.template-material-flags label {
  min-height: 34px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(150, 242, 229, 0.12);
  border-radius: 9px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 800;
}

.template-material-flags input {
  width: auto;
  min-height: 0;
  padding: 0;
}

.template-slot-card {
  min-width: 0;
  height: var(--template-slot-card-height, auto);
  min-height: 0;
  padding: 10px;
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid rgba(150, 242, 229, 0.13);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(98, 241, 223, 0.055), transparent),
    rgba(12, 17, 20, 0.52);
}

.template-slot-card.is-filled {
  border-color: rgba(150, 242, 229, 0.18);
}

.template-slot-card.is-empty {
  background:
    linear-gradient(180deg, rgba(98, 241, 223, 0.035), transparent),
    rgba(12, 17, 20, 0.48);
}

.template-slot-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.template-slot-head.is-node-type-head {
  align-items: stretch;
}

.template-slot-head.is-node-type-head .slot-step-type-field {
  gap: 4px;
}

.template-slot-head > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(185, 255, 106, 0.24);
  border-radius: var(--radius);
  color: var(--lime);
  background: rgba(185, 255, 106, 0.06);
  font-size: 12px;
}

.template-slot-head strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.template-generation-panel {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.generation-page-panel {
  padding: 16px;
}

.generation-template-picker {
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: var(--radius);
  background: rgba(7, 10, 12, 0.58);
}

.generation-template-picker label {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.generation-template-picker span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.generation-template-picker select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: 8px;
  color: var(--text);
  background: rgba(7, 10, 12, 0.82);
}

.generation-selected-template {
  min-width: 0;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.generation-selected-media {
  position: relative;
  width: 112px;
  aspect-ratio: 9 / 12;
  overflow: hidden;
  border: 1px solid rgba(150, 242, 229, 0.15);
  border-radius: 10px;
  background: rgba(3, 6, 8, 0.58);
}

.generation-selected-media img,
.generation-choice-media img,
.generation-template-preview-video,
.generation-template-preview-video video {
  width: 100%;
  height: 100%;
  display: block;
}

.generation-selected-media img,
.generation-choice-media img,
.generation-template-preview-video video {
  object-fit: cover;
}

.generation-template-preview-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(238, 236, 229, 0.72), rgba(203, 216, 212, 0.84));
}

.generation-template-preview-video video {
  background:
    linear-gradient(135deg, rgba(238, 236, 229, 0.72), rgba(203, 216, 212, 0.84));
}

.generation-selected-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.generation-selected-copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.generation-selected-copy strong {
  color: var(--text);
  font-size: clamp(20px, 2.1vw, 32px);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.generation-selected-copy small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.generation-selected-template .text-button span,
.generation-picker-head .text-button span {
  color: inherit;
}

.generation-template-reference-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--muted);
  background: rgba(3, 6, 8, 0.66);
  font-size: 12px;
}

.generation-template-reference-empty.is-video-preview {
  background:
    linear-gradient(135deg, rgba(238, 236, 229, 0.78), rgba(203, 216, 212, 0.9));
}

.generation-template-preview-video + .generation-template-reference-empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.generation-template-preview-video.is-loaded + .generation-template-reference-empty,
.generation-template-preview-video.has-video-frame + .generation-template-reference-empty {
  opacity: 0;
}

.generation-template-picker-dialog {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: grid;
  place-items: center;
  padding: 18px;
}

.generation-picker-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px);
}

.generation-picker-panel {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: min(820px, calc(100vh - 36px));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: 18px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 260px),
    rgba(8, 10, 11, 0.96);
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.48);
}

.generation-picker-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.generation-picker-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.generation-picker-head h3 {
  margin: 3px 0 0;
  font-size: clamp(22px, 2.5vw, 36px);
  line-height: 1.08;
}

.generation-picker-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 12px;
  align-items: center;
}

.generation-picker-tabs {
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.generation-picker-tabs button {
  min-height: 36px;
  padding: 0 13px;
  flex: 0 0 auto;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 850;
}

.generation-picker-tabs button.active {
  color: #06110f;
  border-color: var(--cyan);
  background: var(--cyan);
}

.generation-picker-search {
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: 999px;
  background: rgba(3, 6, 8, 0.52);
}

.generation-picker-search svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.generation-picker-search input {
  width: 100%;
  border: 0;
  color: var(--text);
  background: transparent;
  outline: none;
}

.generation-template-choice-grid {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: 12px;
  padding-right: 4px;
}

.generation-template-choice-card {
  min-width: 0;
  padding: 8px;
  display: grid;
  gap: 9px;
  align-content: start;
  border: 1px solid rgba(150, 242, 229, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.generation-template-choice-card.active {
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 40%, transparent);
}

.generation-choice-media {
  position: relative;
  aspect-ratio: var(--template-aspect-ratio, 9 / 16);
  overflow: hidden;
  border-radius: 10px;
  background: rgba(3, 6, 8, 0.7);
}

.generation-choice-media span {
  position: absolute;
  z-index: 2;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 5px 7px;
  border-radius: 7px;
  color: #fff;
  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-choice-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.generation-choice-copy strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.generation-choice-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.generation-api-status {
  margin-bottom: 14px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(98, 241, 223, 0.08), transparent 42%),
    rgba(7, 10, 12, 0.5);
}

.generation-api-status strong,
.generation-api-status span {
  display: block;
}

.generation-api-status strong {
  color: var(--text);
  font-size: 15px;
}

.generation-api-status span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.generation-api-status em {
  max-width: 460px;
  padding: 8px 10px;
  border: 1px solid rgba(150, 242, 229, 0.16);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(98, 241, 223, 0.06);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.batch-generation-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.74fr) minmax(0, 1.12fr) minmax(320px, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
}

.batch-panel {
  padding: 16px;
}

.batch-panel h4 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 18px;
}

.batch-dual-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.batch-current-template-panel {
  min-width: 0;
  display: flex;
}

.batch-current-template-panel .generation-selected-template {
  width: 100%;
  grid-template-columns: 92px minmax(0, 1fr);
  align-content: start;
}

.batch-current-template-panel .generation-selected-media {
  width: 92px;
}

.batch-current-template-panel .generation-selected-template .text-button {
  grid-column: 2;
  justify-self: start;
}

.batch-drop-zone {
  min-height: 226px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px dashed rgba(98, 241, 223, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(98, 241, 223, 0.08), rgba(7, 10, 12, 0.46)),
    rgba(7, 10, 12, 0.6);
  text-align: center;
}

.batch-drop-zone.folder-import {
  border-color: rgba(185, 255, 106, 0.26);
  background:
    linear-gradient(180deg, rgba(185, 255, 106, 0.075), rgba(7, 10, 12, 0.46)),
    rgba(7, 10, 12, 0.6);
}

.batch-drop-zone.is-dragging {
  border-color: rgba(17, 17, 17, 0.48);
  background:
    linear-gradient(180deg, rgba(17, 17, 17, 0.08), rgba(255, 255, 255, 0.18)),
    rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.batch-drop-zone input,
.batch-hidden-field {
  display: none !important;
}

.batch-drop-zone svg {
  width: 34px;
  height: 34px;
  color: var(--cyan);
}

.batch-drop-zone.folder-import svg {
  color: var(--lime);
}

.batch-drop-zone strong,
.batch-drop-zone span,
.batch-drop-zone em,
.batch-upload-list strong,
.batch-upload-list span,
.batch-upload-list em,
.generation-output strong,
.generation-output span {
  display: block;
}

.batch-drop-zone strong {
  color: var(--text);
  font-size: 14px;
}

.batch-drop-zone span,
.batch-upload-list span,
.batch-empty-upload,
.batch-submit-row > span,
.generation-output span {
  color: var(--muted);
  font-size: 12px;
}

.batch-drop-zone em,
.batch-primary-button,
.batch-secondary-button {
  min-height: 36px;
  padding: 0 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  font-style: normal;
  font-weight: 900;
}

.batch-drop-zone em,
.batch-primary-button {
  border-color: rgba(98, 241, 223, 0.62);
  color: #06110f;
  background: linear-gradient(135deg, var(--cyan), var(--lime));
  box-shadow: 0 10px 22px rgba(98, 241, 223, 0.14);
}

.batch-secondary-button {
  border-color: rgba(150, 242, 229, 0.18);
  color: var(--cyan);
  background: rgba(98, 241, 223, 0.06);
}

.generation-cancel-button {
  border-color: rgba(255, 96, 96, 0.32);
  color: #ffb3ad;
  background: rgba(255, 96, 96, 0.08);
}

.generation-cancel-button[hidden] {
  display: none !important;
}

.batch-upload-actions {
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

.batch-panel-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(150, 242, 229, 0.1);
}

.batch-panel-head h4 {
  margin: 0;
}

.batch-panel-head b,
.batch-panel-head button {
  color: var(--cyan);
}

.batch-panel-head button {
  border: 0;
  background: transparent;
  font-weight: 900;
}

.batch-upload-list {
  max-height: 250px;
  display: grid;
  overflow: auto;
  padding-right: 6px;
}

.batch-uploaded-panel .batch-upload-list {
  max-height: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  grid-template-columns: none;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 6px;
}

.batch-upload-list article {
  min-width: 0;
  padding: 9px 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(150, 242, 229, 0.1);
}

.batch-uploaded-panel .batch-upload-list article {
  min-width: 220px;
  padding: 10px;
  border: 1px solid rgba(150, 242, 229, 0.1);
  border-radius: 8px;
  background: rgba(7, 10, 12, 0.42);
}

.batch-upload-list strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.batch-upload-list em {
  color: var(--lime);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.batch-thumb {
  position: relative;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(98, 241, 223, 0.16) 49%, transparent 51%),
    linear-gradient(180deg, rgba(98, 241, 223, 0.09) 0 48%, rgba(185, 255, 106, 0.06) 49% 100%),
    rgba(7, 10, 12, 0.74);
}

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

.batch-thumb span {
  position: absolute;
  left: 10px;
  bottom: 7px;
  width: 10px;
  height: 24px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--cyan), rgba(98, 241, 223, 0.42));
}

.batch-thumb.has-preview span {
  display: none;
}

.batch-thumb small {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  color: var(--lime);
  background: rgba(0, 0, 0, 0.58);
  font-size: 10px;
}

.batch-empty-upload {
  padding: 24px;
  text-align: center;
}

.batch-config-panel {
  display: grid;
  gap: 12px;
}

.generation-user-config > h4,
.generation-user-config .batch-config-grid,
.generation-user-config .generation-music-preview,
.generation-user-config .batch-warning,
.generation-user-config .generation-prompt-chain,
.generation-user-config #templateGenerateSave {
  display: none !important;
}

.generation-user-simple {
  padding: 16px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(150, 242, 229, 0.12);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(98, 241, 223, 0.045)),
    rgba(255, 255, 255, 0.025);
}

.generation-user-simple strong,
.generation-user-simple span {
  display: block;
}

.generation-user-simple strong {
  color: var(--text);
  font-size: 18px;
  letter-spacing: 0;
}

.generation-user-simple span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.generation-duration-control {
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 12px;
  align-items: end;
  border: 1px solid rgba(150, 242, 229, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.generation-duration-control label {
  margin: 0;
}

.generation-fixed-duration-field {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 7px;
  text-align: left;
}

.generation-fixed-duration-field span,
.generation-fixed-duration-field strong,
.generation-fixed-duration-field em {
  display: block;
}

.generation-fixed-duration-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.generation-fixed-duration-field strong {
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: 8px;
  color: var(--text);
  background: rgba(7, 10, 12, 0.82);
  font-size: 13px;
  font-weight: 850;
}

.generation-fixed-duration-field em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.45;
}

.generation-duration-control em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.45;
}

.batch-config-grid,
.batch-node-grid,
.batch-prompt-grid,
.generation-prompt-select-grid,
.generation-prompt-text-grid {
  display: grid;
  gap: 10px;
}

.batch-config-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.generation-count-display {
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(150, 242, 229, 0.18);
  border-radius: 8px;
  color: var(--text);
  background: rgba(7, 10, 12, 0.82);
  font-size: 13px;
  font-weight: 850;
}

.generation-music-preview {
  width: 100%;
  min-height: 38px;
  filter: grayscale(1);
}

.generation-prompt-chain {
  padding: 12px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.generation-prompt-chain-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.generation-prompt-chain-head span,
.generation-prompt-chain-head strong,
.generation-prompt-chain-head em {
  display: block;
}

.generation-prompt-chain-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.generation-prompt-chain-head strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

.generation-prompt-chain-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  text-align: right;
}

.generation-prompt-select-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(130px, 0.55fr) minmax(0, 1.2fr) minmax(130px, 0.55fr);
}

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

.generation-prompt-select-grid label,
.generation-prompt-text-grid label {
  min-width: 0;
  display: grid;
  gap: 7px;
  text-align: left;
}

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

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

.batch-warning {
  padding: 11px 12px;
  border: 1px solid rgba(255, 200, 87, 0.22);
  border-radius: 8px;
  color: #ffdca0;
  background: rgba(255, 200, 87, 0.055);
  font-size: 12px;
  line-height: 1.48;
}

.batch-node-config {
  border: 1px solid rgba(150, 242, 229, 0.13);
  border-radius: 8px;
  background: rgba(7, 10, 12, 0.42);
}

.batch-node-config summary {
  padding: 11px 12px;
  color: var(--cyan);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.batch-node-config[open] {
  padding: 0 12px 12px;
}

.batch-submit-row {
  justify-content: flex-end;
}

.batch-submit-row > span {
  margin-right: auto;
}

.generation-credit-pill {
  padding: 8px 10px;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.generation-output {
  min-height: 124px;
  padding: 16px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed rgba(98, 241, 223, 0.22);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(98, 241, 223, 0.045);
  text-align: center;
}

.generation-output.is-empty {
  display: none;
}

.generation-output svg {
  width: 32px;
  height: 32px;
  color: var(--cyan);
}

.generation-output span {
  max-width: 760px;
  line-height: 1.45;
}

.generation-history-panel {
  padding: 14px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

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

.generation-history-head span,
.generation-history-head strong,
.generation-history-copy strong,
.generation-history-copy span,
.generation-history-copy small,
.generation-history-copy em {
  display: block;
}

.generation-history-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.generation-history-head strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 18px;
}

.generation-history-grid {
  display: grid;
  gap: 12px;
}

.generation-history-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(150, 242, 229, 0.12);
  border-radius: 12px;
  background: rgba(7, 10, 12, 0.24);
}

.generation-history-filter-tabs {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.generation-history-filter-tabs button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.generation-history-filter-tabs button span {
  margin-left: 4px;
  color: inherit;
  opacity: 0.72;
}

.generation-history-filter-tabs button.active {
  color: var(--bg);
  border-color: var(--text);
  background: var(--text);
}

.generation-history-group {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.generation-history-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 2px;
}

.generation-history-group-head span,
.generation-history-group-head strong {
  display: block;
}

.generation-history-group-head span {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.generation-history-group-head strong {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.generation-history-group-grid,
.generation-final-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.generation-history-empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed rgba(150, 242, 229, 0.16);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(7, 10, 12, 0.28);
  text-align: center;
  font-size: 13px;
}

.generation-history-card {
  min-width: 0;
  overflow: hidden;
  display: grid;
  border: 1px solid rgba(150, 242, 229, 0.12);
  border-radius: 12px;
  background: rgba(7, 10, 12, 0.32);
}

.generation-history-media {
  position: relative;
  min-height: 170px;
  aspect-ratio: 9 / 12;
  overflow: hidden;
  background: rgba(3, 6, 8, 0.72);
}

.generation-history-media video,
.generation-history-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #050505;
}

.generation-image-preview-open {
  overflow: hidden;
}

.generation-video-preview-open {
  overflow: hidden;
}

.generation-image-preview-dialog {
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 18px;
  display: grid;
  place-items: center;
}

.generation-image-preview-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.68);
  cursor: pointer;
}

.generation-image-preview-card {
  position: relative;
  width: min(1120px, 100%);
  max-height: calc(100vh - 36px);
  min-height: min(720px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}

.generation-image-preview-head,
.generation-image-preview-actions {
  min-width: 0;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-strong);
}

.generation-image-preview-actions {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
}

.generation-image-preview-head > div {
  min-width: 0;
}

.generation-image-preview-head span,
.generation-image-preview-head strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-image-preview-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.generation-image-preview-head strong {
  margin-top: 2px;
  color: var(--text);
  font-size: 15px;
}

.generation-image-preview-head button,
.generation-image-preview-actions button,
.generation-image-preview-actions a {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.generation-image-preview-head button:hover,
.generation-image-preview-actions button:hover,
.generation-image-preview-actions a:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.generation-image-preview-head svg {
  width: 16px;
  height: 16px;
}

.generation-image-preview-stage {
  min-height: 0;
  padding: 12px;
  display: grid;
  place-items: center;
  overflow: auto;
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--text) 4%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--text) 4%, transparent) 25%, transparent 25%),
    var(--bg);
  background-size: 22px 22px;
}

.generation-image-preview-stage img {
  max-width: 100%;
  max-height: calc(100vh - 190px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: var(--bg-2);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

.generation-video-preview-dialog {
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 18px;
  display: grid;
  place-items: center;
}

.generation-video-preview-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.76);
  cursor: pointer;
}

.generation-video-preview-card {
  position: relative;
  width: min(1280px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  min-height: min(720px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: #050505;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
}

.generation-video-preview-head,
.generation-video-preview-actions {
  min-width: 0;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #fff;
  background: rgba(12, 12, 12, 0.92);
}

.generation-video-preview-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.generation-video-preview-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  justify-content: flex-end;
}

.generation-video-preview-head > div {
  min-width: 0;
}

.generation-video-preview-head span,
.generation-video-preview-head strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-video-preview-head span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 850;
}

.generation-video-preview-head strong {
  margin-top: 2px;
  font-size: 15px;
}

.generation-video-preview-head button,
.generation-video-preview-actions button,
.generation-video-preview-actions a {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #fff;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

.generation-video-preview-head button:hover,
.generation-video-preview-actions button:hover,
.generation-video-preview-actions a:hover {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.1);
}

.generation-video-preview-head svg {
  width: 16px;
  height: 16px;
}

.generation-video-preview-stage {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

.generation-video-preview-stage video {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 150px);
  display: block;
  object-fit: contain;
  background: #000;
}

.generation-history-media > div {
  height: 100%;
  min-height: 170px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
}

.generation-history-copy {
  min-width: 0;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.generation-history-copy strong {
  color: var(--text);
  font-size: 14px;
}

.generation-history-copy span,
.generation-history-copy small,
.generation-history-copy em {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.generation-history-copy em {
  color: #ff8f7f;
  font-style: normal;
}

.generation-result-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}

.generation-result-actions a,
.generation-result-action-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 28px;
  padding: 5px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(98, 241, 223, 0.24);
  border-radius: 999px;
  color: var(--cyan);
  background: transparent;
  font-size: 10.5px;
  font-weight: 850;
  font-family: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.generation-result-actions a:hover,
.generation-result-action-button:hover {
  border-color: rgba(98, 241, 223, 0.42);
  background: rgba(98, 241, 223, 0.08);
}

.generation-result-action-button.is-icon-only {
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  aspect-ratio: 1;
}

.generation-result-action-button.is-icon-only svg {
  width: 16px;
  height: 16px;
}

.generation-final-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.generation-final-video-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  border: 1px solid rgba(150, 242, 229, 0.12);
  border-radius: 12px;
  background: rgba(7, 10, 12, 0.32);
  text-align: left;
}

.generation-final-video-card video,
.generation-final-video-card img {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: block;
  object-fit: contain;
  background: #050505;
}

.workflow-runtime-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.workflow-generation-panel .workflow-chain-view,
.workflow-generation-panel .workflow-prompt-inspector {
  margin-top: 12px;
}

.workflow-prompt-inspector textarea {
  min-height: 120px;
}

/* v1.8.119 Prompt sequence preview: left-aligned ordered prompt categories. */
.prompt-sequence-preview {
  margin-top: 8px;
  padding: 9px;
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-strong) 68%, transparent);
  text-align: left;
}

.prompt-sequence-preview[hidden] {
  display: none;
}

.prompt-sequence-head {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  text-align: left;
}

.prompt-sequence-head span,
.prompt-sequence-head em {
  color: color-mix(in srgb, var(--text) 56%, transparent);
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.35;
}

.prompt-sequence-head span {
  overflow-wrap: anywhere;
}

.prompt-sequence-head em {
  white-space: nowrap;
}

.prompt-sequence-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  list-style: none;
}

.prompt-sequence-list li {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  text-align: left;
}

.prompt-sequence-index {
  min-width: 0;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  font-size: 11px;
  font-weight: 860;
  line-height: 1;
}

.prompt-sequence-list div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.prompt-sequence-list strong {
  width: fit-content;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.prompt-sequence-list p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: normal;
}

.generation-final-video-card > div {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.generation-final-video-card strong,
.generation-final-video-card span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.generation-final-video-card strong {
  color: var(--text);
  font-size: 14px;
}

.generation-final-video-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.generation-job-list {
  width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 6px;
  text-align: left;
}

.generation-job-list.is-compact {
  opacity: 0.72;
}

.generation-job-item {
  min-width: 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(150, 242, 229, 0.12);
  border-radius: 10px;
  background: rgba(7, 10, 12, 0.34);
}

.generation-job-item > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
}

.generation-job-item b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  grid-row: span 2;
  border-radius: 10px;
  color: var(--cyan);
  background: rgba(98, 241, 223, 0.08);
  font-size: 12px;
}

.generation-job-item strong,
.generation-job-item span,
.generation-job-item small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.generation-job-item small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.generation-job-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.generation-job-item a {
  padding: 8px 10px;
  border: 1px solid rgba(98, 241, 223, 0.24);
  border-radius: 999px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.generation-job-item.is-done b {
  color: #06110f;
  background: linear-gradient(135deg, var(--cyan), var(--lime));
}

.generation-job-item.is-failed {
  border-color: rgba(255, 123, 105, 0.28);
}

.template-upload-form {
  display: grid;
  gap: 14px;
}

.template-upload-status {
  padding: 10px 12px;
  border: 1px solid rgba(98, 241, 223, 0.18);
  border-radius: var(--radius);
  color: var(--cyan);
  background: rgba(98, 241, 223, 0.07);
}

.template-upload-status:empty {
  display: none;
}

.template-upload-section h4 {
  margin: 0 0 6px;
}

.template-upload-section p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.creator-studio-shell {
  min-height: calc(100vh - 44px);
  display: grid;
  grid-template-columns: minmax(440px, 520px) minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  align-items: start;
}

.creator-control-panel,
.creator-board-panel,
.creator-result-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.creator-control-panel {
  position: sticky;
  top: 22px;
  max-height: calc(100vh - 44px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
}

.creator-model-row {
  min-height: 76px;
  padding: 14px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

.creator-console-panel {
  gap: 8px;
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 260px),
    var(--panel);
}

.creator-section {
  padding: 7px;
  display: grid;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 70%),
    color-mix(in srgb, var(--panel-strong) 92%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent),
    0 16px 34px color-mix(in srgb, var(--bg) 22%, transparent);
}

.creator-prompt-section {
  padding: 8px;
  gap: 8px;
}

.creator-integrated-settings {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel-strong) 82%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),
    0 10px 24px color-mix(in srgb, var(--bg) 18%, transparent);
}

.creator-integrated-settings summary {
  min-height: 40px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.creator-integrated-settings summary::-webkit-details-marker {
  display: none;
}

.creator-integrated-settings summary::after {
  content: "展开";
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 24px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel);
  font-size: 11px;
  font-weight: 900;
}

.creator-integrated-settings[open] summary::after {
  content: "收起";
}

.creator-integrated-settings summary span,
.creator-integrated-settings summary strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-integrated-settings summary span {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.creator-integrated-settings summary strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.creator-integrated-settings-body {
  padding: 0 7px 7px;
  display: grid;
  gap: 7px;
}

.creator-integrated-settings .creator-section {
  box-shadow: none;
}

.creator-section-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.creator-section-head b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  font-size: 12px;
  font-weight: 950;
}

.creator-section-head strong,
.creator-section-head span {
  display: block;
  min-width: 0;
}

.creator-section-head strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

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

.creator-task-group-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.creator-mode-switchbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.creator-mode-switchbar .creator-task-group-tab {
  min-height: 38px;
  place-items: center;
  text-align: center;
}

.creator-mode-switchbar .creator-task-group-tab strong {
  font-size: 14px;
}

.creator-task-group-tab {
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  align-content: center;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 14px;
  color: var(--muted);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent),
    var(--panel-strong);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.creator-task-group-tab strong,
.creator-task-group-tab span {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-task-group-tab strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
}

.creator-task-group-tab span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.creator-task-group-tab:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
}

.creator-task-group-tab.active {
  color: var(--bg);
  border-color: var(--text);
  background: var(--text);
}

.creator-task-group-tab.active strong,
.creator-task-group-tab.active span {
  color: inherit;
}

.creator-quick-controls {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.creator-quick-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 7px;
  align-items: stretch;
}

.creator-quick-model {
  min-width: 0;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2.5%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel-strong) 78%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}

.creator-quick-model.creator-model-switch {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  align-content: center;
}

.creator-quick-model > span {
  display: none;
}

.creator-quick-model .creator-model-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.creator-console-panel .creator-quick-model .creator-model-pill {
  min-height: 32px;
  padding: 6px 9px;
  gap: 5px;
  border-radius: 999px;
}

.creator-console-panel .creator-quick-model .creator-model-pill strong {
  font-size: 11px;
}

.creator-console-panel .creator-quick-model .creator-model-pill small {
  font-size: 10px;
}

.creator-quick-count,
.creator-quick-count .creator-mode-panel {
  min-width: 0;
  display: grid;
}

.creator-quick-count .creator-mode-panel[hidden] {
  display: none;
}

.creator-count-compact {
  min-width: 0;
  height: 100%;
  padding: 6px;
  display: grid;
  gap: 5px;
  align-content: center;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2.5%, transparent), transparent),
    color-mix(in srgb, var(--panel-strong) 78%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}

.creator-count-compact span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}

.creator-count-compact input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 10px;
  color: var(--text);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent),
    var(--panel-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 46%, transparent);
  font-size: 12px;
  outline: none;
}

.creator-count-compact input:focus {
  border-color: var(--line-strong);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent),
    0 0 0 4px color-mix(in srgb, var(--text) 7%, transparent);
}

.creator-quick-upload .creator-inline-upload {
  padding: 7px;
  gap: 6px;
  border-radius: 14px;
}

.creator-quick-upload .creator-upload-card.compact {
  min-height: 44px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 8px;
  padding: 8px 10px;
  border-radius: 12px;
}

.creator-quick-upload .creator-upload-card.compact svg {
  width: 20px;
  height: 20px;
}

.creator-quick-upload .creator-upload-card.compact strong {
  font-size: 13px;
}

.creator-quick-upload .creator-upload-card.compact span {
  font-size: 11px;
}

.creator-quick-upload .creator-upload-head {
  font-size: 11px;
  line-height: 1.3;
}

.creator-quick-upload .creator-upload-head button {
  padding: 2px 7px;
  font-size: 11px;
}

.creator-quick-upload .creator-upload-list {
  max-height: 86px;
  gap: 5px;
}

.creator-quick-upload .creator-upload-list article {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 7px;
  padding: 5px;
  border-radius: 10px;
}

.creator-quick-upload .creator-upload-list img {
  width: 34px;
  height: 38px;
  border-radius: 8px;
}

.creator-quick-upload .creator-upload-list strong {
  font-size: 12px;
}

.creator-quick-upload .creator-upload-list span,
.creator-quick-upload .creator-upload-empty {
  font-size: 11px;
}

.creator-quick-upload .creator-upload-list article > button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

.creator-quick-upload .creator-upload-empty {
  padding: 5px 8px;
}

.creator-quick-upload .creator-tail-upload-panel {
  margin-top: 3px;
  padding-top: 5px;
  gap: 5px;
}

.creator-task-tab {
  min-width: 0;
  min-height: 50px;
  padding: 8px 9px;
  display: grid;
  gap: 3px;
  align-content: center;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 14px;
  color: var(--muted);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent),
    var(--panel-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 42%, transparent);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.creator-task-tab strong,
.creator-task-tab span {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-task-tab strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.creator-task-tab span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.creator-task-tab:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent),
    0 12px 26px color-mix(in srgb, var(--text) 8%, transparent);
}

.creator-task-tab.active {
  color: var(--bg);
  border-color: var(--text);
  background: var(--text);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bg) 18%, transparent),
    0 14px 30px color-mix(in srgb, var(--text) 14%, transparent);
}

.creator-task-tab.active strong,
.creator-task-tab.active span {
  color: inherit;
}

.creator-inline-upload {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel-strong) 72%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}

.creator-tail-upload-panel {
  margin-top: 6px;
  padding-top: 8px;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
}

.creator-tail-upload-panel[hidden] {
  display: none;
}

.creator-model-switch {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 2px;
}

.creator-batch-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.creator-batch-summary span {
  min-width: 0;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-strong);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-model-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.52), transparent 44%),
    var(--lime);
  font-size: 22px;
  font-weight: 950;
  font-style: italic;
  letter-spacing: 0;
}

.creator-model-select-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.creator-model-select-row label {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.creator-model-select-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.creator-model-select-row select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--panel-strong);
  outline: none;
}

.creator-model-row strong,
.creator-model-row span,
.creator-path-box span,
.creator-path-box em,
.creator-upload-card strong,
.creator-upload-card span,
.creator-upload-head span,
.creator-result-head h3,
.creator-result-head span {
  display: block;
}

.creator-model-row strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.creator-model-row span,
.creator-path-box em,
.creator-upload-card span,
.creator-upload-head,
.creator-result-head span,
.creator-result-copy span,
.creator-submit-row span,
.creator-submit-row em {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.creator-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.creator-mode-tab,
.creator-model-pill {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  color: var(--muted);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent),
    var(--panel-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 46%, transparent);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.creator-mode-tab {
  min-height: 72px;
  padding: 12px 13px;
  display: grid;
  gap: 5px;
  align-content: center;
  border-radius: 14px;
  text-align: left;
}

.creator-mode-tab strong,
.creator-model-pill strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
}

.creator-mode-tab span,
.creator-model-pill small,
.creator-model-option-group > span,
.creator-setting-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.creator-mode-tab:hover,
.creator-model-pill:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent),
    0 10px 22px color-mix(in srgb, var(--text) 7%, transparent);
}

.creator-mode-tab.active,
.creator-model-pill.active {
  color: var(--text);
  border-color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, var(--panel-strong));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent),
    0 12px 26px color-mix(in srgb, var(--text) 9%, transparent);
}

.creator-model-option-group,
.creator-mode-panel {
  display: grid;
  gap: 12px;
}

.creator-model-option-group[hidden],
.creator-mode-panel[hidden] {
  display: none;
}

.creator-model-option-group > span {
  font-weight: 850;
}

.creator-model-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.creator-console-panel .creator-model-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.creator-model-pills:has(.creator-model-pill:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.creator-model-pill {
  min-height: 68px;
  padding: 12px;
  display: grid;
  gap: 5px;
  align-content: center;
  border-radius: 14px;
  text-align: left;
}

.creator-console-panel .creator-model-pill {
  min-height: 38px;
  padding: 8px 12px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border-radius: 999px;
  white-space: nowrap;
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
}

.creator-console-panel .creator-model-pill strong {
  font-size: 12px;
}

.creator-console-panel .creator-model-pill small {
  font-size: 11px;
  line-height: 1.2;
}

.creator-console-panel .creator-model-pill.active {
  color: var(--bg);
  border-color: var(--text);
  background: var(--text);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bg) 18%, transparent),
    0 10px 22px color-mix(in srgb, var(--text) 12%, transparent);
}

.creator-console-panel .creator-model-pill.active strong,
.creator-console-panel .creator-model-pill.active small {
  color: inherit;
}

.creator-setting-note {
  margin: -4px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.creator-switch-row {
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.creator-switch-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--text);
}

.creator-switch-row strong,
.creator-switch-row small {
  display: block;
}

.creator-switch-row strong {
  color: var(--text);
  font-size: 13px;
}

.creator-switch-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.creator-path-box {
  display: grid;
  gap: 9px;
}

.creator-path-box span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.creator-path-box select {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--panel-strong);
}

.creator-path-box em {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  font-style: normal;
  font-weight: 850;
}

.creator-upload-card {
  min-height: 160px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: 14px;
  background: var(--panel-strong);
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.creator-upload-card.compact {
  min-height: 62px;
  grid-template-columns: 38px minmax(0, 1fr);
  place-items: center start;
  align-content: center;
  gap: 5px 12px;
  padding: 14px;
  text-align: left;
  border-radius: 16px;
  border-style: solid;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 60%),
    var(--panel-strong);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bg) 40%, transparent),
    0 10px 20px color-mix(in srgb, var(--text) 5%, transparent);
}

.creator-upload-card input {
  display: none;
}

.creator-upload-card.is-dragging,
.creator-upload-card:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--panel-strong) 84%, var(--text) 8%);
  transform: translateY(-1px);
}

.creator-upload-card svg {
  width: 30px;
  height: 30px;
  color: var(--text);
}

.creator-upload-card.compact svg {
  width: 28px;
  height: 28px;
  grid-row: span 2;
}

.creator-upload-card strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.35;
}

.creator-upload-card.compact strong {
  min-width: 0;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creator-upload-card.compact span {
  min-width: 0;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creator-upload-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 0 2px;
}

.creator-upload-head b {
  color: var(--text);
}

.creator-upload-head button {
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

.creator-upload-head button:hover {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel-strong);
}

.creator-upload-list {
  min-height: 0;
  max-height: 172px;
  display: grid;
  gap: 6px;
  overflow: auto;
}

.creator-upload-list article {
  min-width: 0;
  padding: 7px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2.5%, transparent), transparent),
    var(--panel-strong);
}

.creator-upload-list img {
  width: 42px;
  height: 48px;
  object-fit: cover;
  border-radius: 9px;
}

.creator-upload-list strong,
.creator-upload-list span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-upload-list strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.creator-upload-list span,
.creator-upload-empty {
  color: var(--muted);
  font-size: 12px;
}

.creator-upload-list article > button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

.creator-upload-list article > button:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.creator-upload-empty {
  padding: 8px 10px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.28);
}

.creator-outfit-block {
  display: grid;
  gap: 12px;
}

.creator-outfit-block[hidden] {
  display: none;
}

.creator-prompt-box {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2.5%, transparent), transparent),
    color-mix(in srgb, var(--panel-strong) 72%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}

.creator-prompt-section .creator-prompt-box {
  min-height: 0;
  flex: 1;
}

.creator-prompt-box > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.creator-prompt-box textarea {
  min-height: 104px;
  height: auto;
  max-height: min(48vh, 520px);
  resize: vertical;
  overflow: auto;
}

.creator-prompt-box input,
.creator-prompt-box textarea,
.canvas-model-select-row select,
.creator-setting-grid select,
.creator-setting-grid input {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 12px;
  color: var(--text);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent),
    var(--panel-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 46%, transparent);
  outline: none;
}

.creator-prompt-box input {
  min-height: 40px;
  padding: 0 10px;
}

.creator-prompt-box textarea {
  padding: 10px;
  line-height: 1.5;
}

.creator-prompt-box.compact textarea {
  min-height: 64px;
  max-height: min(32vh, 300px);
}

#creatorImagePrompt,
#creatorVideoPrompt,
#generationImagePromptText,
#generationVideoPromptText,
#canvasNodePrompt {
  min-height: 136px;
  line-height: 1.62;
}

#creatorImagePrompt,
#creatorVideoPrompt {
  min-height: clamp(240px, 38vh, 430px);
}

#creatorImagePrompt:focus,
#creatorVideoPrompt:focus,
#generationImagePromptText:focus,
#generationVideoPromptText:focus,
#canvasNodePrompt:focus {
  min-height: min(260px, 42vh);
}

#creatorImagePrompt:focus,
#creatorVideoPrompt:focus {
  min-height: clamp(300px, 50vh, 540px);
}

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

.creator-setting-grid select,
.creator-setting-grid input {
  min-height: 38px;
  padding: 0 8px;
  font-size: 12px;
}

.creator-prompt-box input::placeholder,
.creator-prompt-box textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}

.creator-prompt-box input:focus,
.creator-prompt-box textarea:focus,
.creator-path-box select:focus,
.creator-model-select-row select:focus,
.canvas-model-select-row select:focus,
.creator-setting-grid select:focus,
.creator-setting-grid input:focus {
  border-color: var(--line-strong);
  background: var(--panel-strong);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent),
    0 0 0 4px color-mix(in srgb, var(--text) 7%, transparent);
}

.creator-setting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
}

.creator-setting-grid label {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2.5%, transparent), transparent),
    color-mix(in srgb, var(--panel-strong) 74%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}

.creator-setting-grid label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.creator-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px 8px;
  align-items: center;
  margin-top: 2px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 92%, transparent), var(--panel-strong)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),
    0 -12px 34px color-mix(in srgb, var(--bg) 24%, transparent);
}

.creator-submit-row > span {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.creator-submit-row em {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-weight: 850;
  font-size: 12px;
}

.creator-submit-row .text-button,
.creator-submit-row .primary-button {
  grid-row: 1;
}

.creator-submit-row .text-button {
  min-height: 38px;
  padding-inline: 10px;
  grid-column: 2;
}

.creator-submit-row .primary-button {
  min-width: 136px;
  min-height: 38px;
  color: var(--bg);
  background: var(--text);
  box-shadow: none;
  grid-column: 3;
}

.creator-board-panel {
  min-height: calc(100vh - 44px);
  padding: clamp(16px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.creator-batch-panel {
  max-height: calc(100vh - 44px);
  overflow: auto;
}

.creator-board-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.creator-board-head h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.08;
}

.creator-board-head span,
.creator-board-copy span,
.creator-board-empty {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.creator-board-path {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creator-board-path span {
  min-height: 34px;
  padding: 0 10px 0 6px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: var(--panel-strong);
  font-size: 12px;
  font-weight: 850;
}

.creator-board-path b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--bg);
  background: var(--text);
  font-size: 11px;
}

.creator-board-add {
  display: grid;
  gap: 10px;
}

.creator-board-add label {
  display: grid;
  gap: 8px;
}

.creator-board-add label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.creator-board-add select,
.creator-board-add textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--panel-strong);
}

.creator-board-add select {
  min-height: 46px;
  padding: 0 12px;
}

.creator-board-add textarea {
  min-height: 112px;
  padding: 12px;
  resize: vertical;
  line-height: 1.55;
}

.creator-board-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: auto;
}

.creator-board-empty {
  grid-column: 1 / -1;
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
  text-align: center;
}

.creator-board-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

.creator-board-media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-2);
}

.creator-board-media img,
.creator-board-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-board-media em {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--bg);
  background: color-mix(in srgb, var(--text) 88%, transparent);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.creator-board-copy {
  padding: 10px;
  display: grid;
  gap: 6px;
}

.creator-board-copy strong,
.creator-board-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-board-copy strong {
  color: var(--text);
  font-size: 13px;
}

.creator-board-copy button {
  justify-self: start;
  padding: 4px 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

.creator-board-copy button:hover {
  color: var(--text);
}

.creator-batch-notes {
  display: grid;
  gap: 10px;
}

.creator-batch-notes article {
  padding: 12px;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

.creator-batch-notes strong {
  color: var(--text);
  font-size: 13px;
}

.creator-batch-notes span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.creator-result-panel {
  padding: 0;
  overflow: hidden;
  min-height: min(560px, calc(100vh - 44px));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 36%),
    var(--panel);
}

.creator-history-panel {
  grid-column: 2;
  margin-top: -10px;
}

.creator-result-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 94%, transparent), color-mix(in srgb, var(--panel) 94%, transparent)),
    var(--panel);
  backdrop-filter: blur(16px);
}

.creator-result-head h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
  letter-spacing: 0;
}

.creator-result-head > span {
  min-height: 28px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-strong);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.creator-result-grid {
  min-height: calc(100vh - 88px);
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  grid-auto-flow: dense;
  align-content: start;
  align-items: start;
  gap: 8px;
  background:
    linear-gradient(rgba(120, 120, 120, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 120, 120, 0.035) 1px, transparent 1px),
    var(--bg-2);
  background-size: 22px 22px;
}

.creator-result-toolbar {
  grid-column: 1 / -1;
  padding: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-strong) 82%, transparent);
}

.creator-result-toolbar > div {
  min-width: 0;
}

.creator-result-toolbar > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.creator-result-toolbar strong,
.creator-result-toolbar span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.creator-result-toolbar strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.creator-result-toolbar span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.creator-result-history-section {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.creator-result-history-head {
  min-width: 0;
  padding: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
}

.creator-result-history-head > div {
  min-width: 0;
}

.creator-result-history-head > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.creator-result-history-head span,
.creator-result-history-head strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.creator-result-history-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.creator-result-history-head strong {
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
}

.creator-result-history-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
}

.creator-result-empty {
  grid-column: 1 / -1;
  min-height: calc(100vh - 140px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--text) 6%, transparent), transparent 28%),
    color-mix(in srgb, var(--panel-strong) 58%, transparent);
}

.creator-result-empty svg {
  width: 30px;
  height: 30px;
  color: var(--text);
}

.creator-result-empty strong {
  color: var(--text);
  font-size: 18px;
}

.creator-result-empty.compact {
  min-height: 150px;
}

.creator-result-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--text) 5%, transparent),
    0 8px 22px color-mix(in srgb, var(--bg) 14%, transparent);
}

.creator-result-card:nth-child(4n + 1) {
  grid-row: auto;
}

.creator-result-card:nth-child(5n + 2) {
  grid-row: auto;
}

.creator-result-media {
  position: relative;
  min-height: 0;
  aspect-ratio: 3 / 4;
  display: block;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 42%),
    var(--bg-2);
}

.creator-result-media img,
.creator-result-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background:
    linear-gradient(90deg, rgba(18, 18, 18, 0.05), transparent 22%, transparent 78%, rgba(18, 18, 18, 0.05)),
    var(--bg-2);
}

.creator-result-media em {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 4px 6px;
  border-radius: 6px;
  color: #fff;
  background: rgba(0, 0, 0, 0.48);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.creator-result-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.creator-result-copy {
  padding: 8px;
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--line);
  background: var(--panel-strong);
}

.creator-result-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-result-copy span {
  display: -webkit-box;
  font-size: 11px;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.creator-result-card.is-done .creator-result-copy {
  border-top-color: rgba(185, 255, 106, 0.2);
}

body[data-active-view="creatorCanvas"] .main {
  padding: 14px;
}

.creator-canvas-shell {
  min-height: calc(100vh - 28px);
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(520px, 1fr) minmax(300px, 360px);
  gap: 12px;
  align-items: stretch;
}

.creator-canvas-tools,
.creator-canvas-board,
.creator-canvas-results {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 92%, transparent), color-mix(in srgb, var(--panel) 92%, transparent)),
    var(--panel);
  box-shadow: var(--shadow);
}

.creator-canvas-tools,
.creator-canvas-results {
  max-height: calc(100vh - 28px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
}

.creator-canvas-board {
  padding: 14px;
  display: grid;
  grid-template-rows: auto minmax(300px, 1fr) auto minmax(130px, 0.55fr);
  gap: 12px;
  overflow: hidden;
}

.canvas-panel-title {
  display: grid;
  gap: 6px;
}

.canvas-panel-title h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 2.4vw, 42px);
  line-height: 1.05;
}

.canvas-panel-title span,
.canvas-status,
.canvas-empty,
.canvas-asset-card span,
.canvas-result-copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.canvas-node-control-card {
  padding: 12px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

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

.canvas-control-head span,
.canvas-model-select-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.canvas-control-head strong {
  color: var(--text);
  font-size: 13px;
}

.canvas-segmented-control {
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

.canvas-segmented-control button {
  min-height: 38px;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.canvas-segmented-control button:hover {
  transform: translateY(-1px);
  color: var(--text);
}

.canvas-segmented-control button.active {
  color: var(--bg);
  background: var(--text);
}

.canvas-model-select-row {
  display: grid;
  gap: 10px;
}

.canvas-model-select-row label {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.canvas-model-select-row label[hidden] {
  display: none;
}

.canvas-model-select-row select {
  min-height: 44px;
  padding: 0 12px;
}

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

.canvas-toolbar {
  min-height: 64px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

.canvas-toolbar strong,
.canvas-toolbar span {
  display: block;
}

.canvas-toolbar strong {
  color: var(--text);
  font-size: 16px;
}

.canvas-toolbar span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

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

.canvas-toolbar-actions .primary-button {
  min-width: 132px;
  color: var(--bg);
  background: var(--text);
  box-shadow: none;
}

.canvas-viewport {
  position: relative;
  min-height: 360px;
  padding: clamp(16px, 2vw, 28px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 22px);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 30% 24%, color-mix(in srgb, var(--text) 7%, transparent), transparent 36%),
    var(--bg-2);
  background-size: 40px 40px, 40px 40px, auto, auto;
}

.canvas-node {
  position: relative;
  z-index: 2;
  min-height: 176px;
  padding: 18px;
  display: grid;
  align-content: space-between;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-strong) 86%, var(--bg) 14%);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--text) 10%, transparent);
  text-align: left;
  animation: cardEnter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  cursor: pointer;
}

.canvas-node:nth-of-type(2) {
  transform: translateY(-22px);
}

.canvas-node:nth-of-type(3) {
  transform: translateY(18px);
}

.canvas-node:nth-of-type(4) {
  transform: translateY(-12px);
}

.canvas-node.is-active {
  border-color: var(--text);
  background: color-mix(in srgb, var(--panel-strong) 74%, var(--text) 9%);
  box-shadow: 0 26px 64px color-mix(in srgb, var(--text) 18%, transparent);
}

.canvas-node span,
.canvas-node strong,
.canvas-node em,
.canvas-node small {
  display: block;
}

.canvas-node span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--bg);
  background: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.canvas-node strong {
  color: var(--text);
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.12;
}

.canvas-node em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.canvas-node small {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.45;
}

.canvas-node.is-video span {
  color: var(--text);
  background: var(--lime);
}

.canvas-links {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.canvas-links path {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 32%, transparent);
  stroke-width: 2;
  stroke-dasharray: 8 10;
}

.canvas-upload-card {
  min-height: 116px;
}

.canvas-upload-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.canvas-upload-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-align: right;
}

.canvas-queue-grid,
.canvas-result-grid {
  min-height: 0;
  display: grid;
  gap: 10px;
  overflow: auto;
}

.canvas-asset-card {
  min-width: 0;
  padding: 9px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

.canvas-asset-card img,
.canvas-asset-card video {
  width: 58px;
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg-2);
}

.canvas-asset-card.is-video video {
  background: #050505;
}

.canvas-asset-card strong,
.canvas-result-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-asset-card strong {
  display: block;
  font-size: 13px;
}

.canvas-asset-card button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

.canvas-asset-card button:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.canvas-ref-toggle {
  min-height: 32px;
  padding: 0 9px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.canvas-ref-toggle input {
  width: 14px;
  height: 14px;
  accent-color: var(--text);
}

.canvas-reference-summary {
  padding: 12px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.canvas-reference-summary strong,
.canvas-reference-summary span {
  display: block;
}

.canvas-reference-summary strong {
  color: var(--text);
  font-size: 13px;
}

.canvas-reference-summary span {
  color: var(--muted);
  font-size: 12px;
}

.canvas-switch-row {
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.canvas-switch-row input {
  order: 2;
  width: 44px;
  height: 24px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.canvas-switch-row input::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform 160ms ease, background 160ms ease;
}

.canvas-switch-row input:checked {
  border-color: var(--text);
  background: var(--text);
}

.canvas-switch-row input:checked::before {
  transform: translateX(20px);
  background: var(--bg);
}

.canvas-switch-row strong,
.canvas-switch-row small {
  display: block;
}

.canvas-switch-row strong {
  color: var(--text);
  font-size: 13px;
}

.canvas-switch-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.canvas-empty {
  min-height: 96px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  text-align: center;
}

.canvas-empty.result {
  min-height: 260px;
}

.creator-canvas-results .creator-result-head {
  position: static;
  margin: -16px -16px 0;
  border-radius: 18px 18px 0 0;
}

.canvas-status {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  font-weight: 850;
}

.canvas-result-grid {
  padding-right: 2px;
}

.canvas-result-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

.canvas-result-media {
  position: relative;
  min-height: 210px;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-2);
}

.canvas-result-media img,
.canvas-result-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--bg-2);
}

.canvas-result-media span {
  color: var(--muted);
}

.canvas-result-copy {
  padding: 12px;
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--line);
}

.canvas-result-copy strong {
  font-size: 13px;
}

.canvas-result-copy a,
.canvas-result-copy .generation-result-actions a,
.canvas-result-copy .generation-result-action-button {
  justify-self: start;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

.canvas-result-card.is-done {
  border-color: var(--line-strong);
}

body[data-active-view="aiCanvas"] .app-shell {
  grid-template-columns: 54px minmax(0, 1fr);
}

body[data-active-view="aiCanvas"] .sidebar {
  padding: 6px 4px;
  align-items: center;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .brand-block {
  min-height: 36px;
  grid-template-columns: 36px;
  justify-content: center;
}

body[data-active-view="aiCanvas"] .brand-block > :not(.brand-mark),
body[data-active-view="aiCanvas"] .nav-item span,
body[data-active-view="aiCanvas"] .side-account-copy {
  display: none;
}

body[data-active-view="aiCanvas"] .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

body[data-active-view="aiCanvas"] .nav-list,
body[data-active-view="aiCanvas"] .sidebar-bottom {
  width: 100%;
}

body[data-active-view="aiCanvas"] .nav-item,
body[data-active-view="aiCanvas"] .side-status {
  min-height: 31px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

body[data-active-view="aiCanvas"] .nav-item svg,
body[data-active-view="aiCanvas"] .side-status > svg,
body[data-active-view="aiCanvas"] .side-status > i {
  width: 16px;
  height: 16px;
}

body[data-active-view="aiCanvas"] .main {
  padding: 2px;
}

.ai-canvas-shell {
  min-height: calc(100svh - 16px);
  display: grid;
  grid-template-columns: 248px minmax(420px, 1fr) 320px;
  grid-template-rows: 58px minmax(0, 1fr);
  grid-template-areas:
    "top top top"
    "left canvas right";
  gap: 8px;
  color: var(--text);
}

.ai-canvas-topbar,
.ai-canvas-left,
.ai-canvas-main,
.ai-canvas-right {
  min-width: 0;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-strong) 92%, transparent);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--text) 7%, transparent);
}

.ai-canvas-topbar {
  grid-area: top;
  min-height: 58px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-radius: 12px;
}

.ai-canvas-project {
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.ai-canvas-breadcrumb {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.ai-canvas-breadcrumb .text-button {
  min-height: 28px;
  padding: 0 8px;
}

.ai-canvas-project strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

.ai-canvas-project span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.ai-canvas-top-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
}

.ai-canvas-top-actions .icon-button,
.ai-canvas-top-actions .text-button,
.ai-canvas-top-actions .primary-button {
  min-height: 34px;
}

.ai-canvas-top-actions button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}

.ai-canvas-zoom {
  min-width: 52px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.ai-canvas-left {
  grid-area: left;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 12px;
}

.ai-canvas-tabs {
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--line);
}

.ai-canvas-tabs button {
  min-height: 32px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.ai-canvas-tabs button svg {
  width: 17px;
  height: 17px;
}

.ai-canvas-tabs button.active {
  color: var(--bg);
  border-color: var(--text);
  background: var(--text);
}

.ai-canvas-side-content {
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

.ai-panel-head {
  display: grid;
  gap: 5px;
}

.ai-panel-head strong,
.ai-inspector-head h3,
.ai-inspector-empty strong {
  color: var(--text);
}

.ai-panel-head strong {
  font-size: 15px;
}

.ai-panel-head span,
.ai-side-empty,
.ai-history-card span,
.ai-task-card span,
.ai-task-card small,
.ai-inspector-head span,
.ai-inspector-empty span,
.ai-inspector-summary span,
.ai-field span,
.ai-mini-field span,
.ai-prompt-input span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.ai-card-list {
  display: grid;
  gap: 8px;
}

.ai-product-card,
.ai-ref-card,
.ai-template-card,
.ai-asset-card,
.ai-history-card,
.ai-task-card {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel);
  text-align: left;
}

.ai-product-card,
.ai-ref-card,
.ai-template-card {
  display: grid;
  gap: 4px;
  cursor: pointer;
}

.ai-product-card:hover,
.ai-ref-card:hover,
.ai-template-card:hover,
.ai-asset-card:hover,
.ai-history-card:hover,
.ai-task-card:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--text) 5%, var(--panel));
}

.ai-product-card span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--bg);
  background: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.ai-product-card strong,
.ai-ref-card strong,
.ai-template-card strong,
.ai-asset-card strong,
.ai-history-card strong,
.ai-task-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-product-card small,
.ai-product-card em,
.ai-ref-card span,
.ai-ref-card small,
.ai-template-card span,
.ai-template-card small,
.ai-asset-card span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.ai-product-card em {
  font-style: normal;
}

.ai-full-button {
  width: 100%;
  justify-content: center;
}

.ai-side-empty {
  min-height: 82px;
  padding: 12px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
}

.ai-asset-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ai-asset-thumb {
  width: 46px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.ai-asset-thumb img,
.ai-asset-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-history-card,
.ai-task-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ai-task-card {
  border-left: 4px solid var(--line-strong);
}

.ai-task-card.is-generating {
  border-left-color: var(--cyan);
}

.ai-task-card.is-completed {
  border-left-color: var(--success, #16a34a);
}

.ai-task-card.is-failed {
  border-left-color: var(--danger, #dc2626);
}

.ai-canvas-main {
  grid-area: canvas;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
}

.ai-canvas-surface {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 640px;
  overflow: hidden;
  cursor: grab;
  background:
    linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--text) 2.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 2.5%, transparent) 1px, transparent 1px),
    var(--bg);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, auto;
  touch-action: none;
}

.ai-canvas-surface:active {
  cursor: grabbing;
}

.ai-canvas-surface.is-dragging-file {
  outline: 2px solid var(--text);
  outline-offset: -8px;
}

.ai-canvas-floatbar {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 12;
  padding: 5px;
  display: flex;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-strong) 94%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--text) 8%, transparent);
}

.ai-canvas-floatbar .text-button {
  min-height: 32px;
  padding: 0 9px;
  border-radius: 8px;
}

.ai-canvas-world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.ai-canvas-empty {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(330px, calc(100% - 40px));
  padding: 18px;
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-strong) 86%, transparent);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ai-canvas-empty[hidden] {
  display: none;
}

.ai-canvas-empty svg {
  width: 30px;
  height: 30px;
  color: var(--text);
}

.ai-canvas-empty strong {
  color: var(--text);
  font-size: 15px;
}

.ai-node {
  position: absolute;
  z-index: 2;
  min-width: 160px;
  min-height: 128px;
  padding: 9px;
  display: grid;
  gap: 7px;
  align-content: start;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-strong) 92%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--text) 10%, transparent);
  cursor: grab;
  user-select: none;
}

.ai-node:active {
  cursor: grabbing;
}

.ai-node.is-selected {
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent), 0 18px 46px color-mix(in srgb, var(--text) 15%, transparent);
}

.ai-node-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.ai-node-head span {
  padding: 3px 7px;
  border-radius: 7px;
  color: var(--bg);
  background: var(--text);
  font-size: 11px;
  font-weight: 850;
}

.ai-node-head button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  cursor: pointer;
}

.ai-node-head button:hover {
  color: var(--danger, #dc2626);
}

.ai-node strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
  line-height: 1.22;
}

.ai-node small,
.ai-node p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}

.ai-product-node-thumb {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--bg);
  background: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.ai-media-node {
  position: relative;
  min-height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.ai-media-node img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-media-node.video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.38), transparent 52%);
  pointer-events: none;
}

.ai-media-node em {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.58);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.ai-node-prompt {
  background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 8%, var(--panel)), var(--panel));
}

.ai-node-reference {
  background: linear-gradient(145deg, color-mix(in srgb, var(--lime) 8%, var(--panel)), var(--panel));
}

.ai-node-comment {
  min-height: 120px;
  background: #fff9d7;
}

body[data-theme="dark"] .ai-node-comment {
  background: #2b260f;
}

.ai-node-artboard {
  padding: 0;
  background: color-mix(in srgb, var(--panel) 42%, transparent);
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.18), 0 20px 50px color-mix(in srgb, var(--text) 10%, transparent);
}

.ai-artboard-frame {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 2px dashed color-mix(in srgb, var(--text) 38%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 5%, transparent), transparent 46%),
    rgba(255, 255, 255, 0.32);
}

.ai-canvas-right {
  grid-area: right;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  border-radius: 12px;
}

.ai-inspector-empty {
  min-height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--panel);
  text-align: center;
}

.ai-inspector-empty svg {
  width: 32px;
  height: 32px;
}

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

.ai-inspector-summary span {
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  text-align: center;
}

.ai-node-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.ai-node-metrics span {
  min-width: 0;
  padding: 8px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: var(--panel);
  font-size: 12px;
  font-weight: 780;
}

.ai-node-metrics b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.ai-inspector-head {
  display: grid;
  gap: 5px;
}

.ai-inspector-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
}

.ai-field {
  display: grid;
  gap: 6px;
}

.ai-field input,
.ai-field select,
.ai-field textarea,
.ai-mini-field input,
.ai-mini-field select,
.ai-prompt-input textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: var(--panel);
  font: inherit;
}

.ai-field input,
.ai-field select,
.ai-mini-field input,
.ai-mini-field select {
  min-height: 40px;
  padding: 0 10px;
}

.ai-field textarea,
.ai-prompt-input textarea {
  min-height: 72px;
  padding: 9px 10px;
  resize: vertical;
}

.ai-inspector-actions {
  display: grid;
  gap: 8px;
}

.ai-inspector-actions .primary-button,
.ai-inspector-actions .text-button {
  justify-content: center;
}

.ai-create-panel {
  padding: 10px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

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

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

.ai-create-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.ai-create-head strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.2;
}

.ai-generate-modes {
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.ai-generate-modes button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.ai-generate-modes button.active {
  color: var(--bg);
  background: var(--text);
}

.ai-prompt-input,
.ai-mini-field {
  display: grid;
  gap: 5px;
}

.ai-prompt-input textarea {
  min-height: 112px;
  max-height: 220px;
}

.ai-ref-chip {
  min-height: 40px;
  padding: 7px 9px;
  display: flex;
  gap: 7px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  font-size: 11px;
  line-height: 1.35;
}

.ai-ref-chip span {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ai-generate-button {
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  color: var(--bg);
  background: var(--text);
  white-space: nowrap;
}

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

.ai-canvas-task-dock {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 11;
  display: grid;
  grid-template-columns: auto repeat(4, minmax(150px, 1fr));
  gap: 6px;
  align-items: stretch;
  pointer-events: none;
}

.ai-canvas-task-dock[hidden] {
  display: none;
}

.ai-task-dock-head,
.ai-canvas-task-dock .ai-task-card {
  pointer-events: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-strong) 94%, transparent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--text) 8%, transparent);
}

.ai-task-dock-head {
  min-width: 72px;
  padding: 8px;
  display: grid;
  align-content: center;
  gap: 2px;
}

.ai-task-dock-head strong {
  color: var(--text);
  font-size: 12px;
}

.ai-task-dock-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ai-canvas-task-dock .ai-task-card {
  padding: 8px;
}

.ai-canvas-task-dock .ai-task-card strong,
.ai-canvas-task-dock .ai-task-card span,
.ai-canvas-task-dock .ai-task-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .ai-canvas-shell {
    grid-template-columns: 228px minmax(0, 1fr);
    grid-template-areas:
      "top top"
      "left canvas"
      "right right";
  }

  .ai-canvas-right {
    max-height: 360px;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
    align-items: start;
  }
}

@media (max-width: 820px) {
  body[data-active-view="aiCanvas"] .main {
    padding: 8px;
  }

  .ai-canvas-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "left"
      "canvas"
      "right";
  }

  .ai-canvas-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-canvas-top-actions {
    justify-content: flex-start;
  }

  .ai-canvas-left {
    max-height: 280px;
  }

  .ai-canvas-surface {
    min-height: 62svh;
  }

  .ai-canvas-right {
    display: grid;
    grid-template-columns: 1fr;
    max-height: none;
  }

  .ai-canvas-task-dock {
    position: static;
    margin: 10px;
    grid-template-columns: 1fr;
  }
}

body[data-active-view="creatorAiCanvas"] .main {
  padding: 0;
}

body[data-active-view="creatorAiCanvas"] .topbar {
  display: none;
}

body[data-active-view="aiCanvas"] .main {
  padding: 8px;
}

.workflow-canvas-fallback,
.workflow-canvas-shell {
  --wf-bg: #f5f5f2;
  --wf-surface: #ffffff;
  --wf-panel: #fbfbf9;
  --wf-ink: #121212;
  --wf-muted: #6f716f;
  --wf-line: #deded8;
  --wf-line-strong: #bdbdb4;
  --wf-accent: #111111;
  --wf-success: #0f8f5f;
  --wf-warning: #a66a00;
  --wf-danger: #c23b3b;
  --wf-info: #247a8a;
  color: var(--wf-ink);
}

.workflow-canvas-shell.is-console-collapsed {
  grid-template-rows: 48px minmax(0, 1fr) 60px;
}

body[data-theme="dark"] .workflow-canvas-shell,
body[data-theme="dark"] .workflow-canvas-fallback {
  --wf-bg: #121311;
  --wf-surface: #191a17;
  --wf-panel: #20211e;
  --wf-ink: #f4f3ec;
  --wf-muted: #a3a299;
  --wf-line: #343630;
  --wf-line-strong: #55574f;
  --wf-accent: #f4f3ec;
}

.workflow-canvas-fallback {
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--wf-line);
  border-radius: 12px;
  background: var(--wf-panel);
}

.workflow-canvas-shell {
  min-height: calc(100svh - 4px);
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 248px;
  grid-template-rows: 38px minmax(0, 1fr) 66px;
  grid-template-areas:
    "top top top"
    "left stage right"
    "tasks tasks tasks";
  gap: 3px;
  overflow: hidden;
}

.workflow-topbar,
.workflow-sidebar,
.workflow-stage,
.workflow-inspector,
.workflow-taskbar {
  min-width: 0;
  border: 1px solid var(--wf-line);
  border-radius: 7px;
  background: var(--wf-surface);
}

.workflow-topbar {
  grid-area: top;
  padding: 3px 5px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
}

.workflow-brand,
.workflow-actions,
.workflow-run-summary,
.workflow-canvas-toolbar,
.workflow-sidebar-tabs,
.workflow-taskbar-head,
.workflow-create-head {
  display: flex;
  align-items: center;
}

.workflow-brand {
  min-width: 0;
  gap: 5px;
}

.workflow-brand div {
  min-width: 0;
  display: grid;
  gap: 0;
}

.workflow-brand span,
.workflow-section-head span,
.workflow-panel-head span,
.workflow-taskbar-head span,
.workflow-field span {
  color: var(--wf-muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.35;
}

.workflow-brand strong {
  min-width: 0;
  overflow: hidden;
  color: var(--wf-ink);
  font-size: 12px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-brand em {
  padding: 2px 5px;
  border: 1px solid var(--wf-line);
  border-radius: 999px;
  color: var(--wf-muted);
  background: var(--wf-panel);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.workflow-run-summary {
  min-width: 0;
  justify-content: center;
  gap: 3px;
}

.workflow-run-summary span {
  min-height: 24px;
  padding: 0 5px;
  display: inline-flex;
  gap: 3px;
  align-items: center;
  border: 1px solid var(--wf-line);
  border-radius: 6px;
  color: var(--wf-muted);
  background: var(--wf-panel);
  font-size: 10px;
  font-weight: 780;
}

.workflow-run-summary b {
  color: var(--wf-ink);
}

.workflow-run-summary .is-danger b {
  color: var(--wf-danger);
}

.workflow-actions {
  justify-content: flex-end;
  gap: 3px;
}

.workflow-icon-button,
.workflow-tool-button,
.workflow-primary-button,
.workflow-secondary-button,
.workflow-sidebar-tabs button,
.workflow-canvas-toolbar button,
.workflow-palette-card,
.workflow-template-card,
.workflow-asset-card button,
.workflow-history-card button,
.workflow-mode-grid button,
.workflow-inspector-actions button,
.workflow-task-card button {
  border: 1px solid var(--wf-line);
  color: var(--wf-ink);
  background: var(--wf-panel);
  font: inherit;
  cursor: pointer;
}

.workflow-icon-button,
.workflow-tool-button,
.workflow-primary-button,
.workflow-secondary-button {
  min-height: 25px;
  padding: 0 6px;
  display: inline-flex;
  justify-content: center;
  gap: 4px;
  align-items: center;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 850;
}

.workflow-icon-button {
  width: 25px;
  padding: 0;
}

.workflow-primary-button {
  border-color: var(--wf-accent);
  color: var(--wf-bg);
  background: var(--wf-accent);
}

.workflow-secondary-button.is-danger,
.workflow-inspector-actions .is-danger,
.workflow-task-actions button[data-delete-task],
.workflow-task-actions button[data-cancel-task] {
  color: var(--wf-danger);
}

.workflow-icon-button:disabled,
.workflow-tool-button:disabled,
.workflow-primary-button:disabled,
.workflow-secondary-button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.workflow-zoom {
  min-width: 38px;
  padding: 4px 5px;
  border: 1px solid var(--wf-line);
  border-radius: 6px;
  background: var(--wf-panel);
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}

.workflow-sidebar {
  grid-area: left;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.workflow-sidebar-tabs {
  padding: 3px;
  flex-wrap: wrap;
  gap: 3px;
  border-bottom: 1px solid var(--wf-line);
}

.workflow-sidebar-tabs button {
  min-height: 24px;
  padding: 0 5px;
  display: inline-flex;
  gap: 3px;
  align-items: center;
  border-radius: 6px;
  color: var(--wf-muted);
  font-size: 10px;
  font-weight: 850;
}

.workflow-sidebar-tabs button.active,
.workflow-mode-grid button.active {
  border-color: var(--wf-accent);
  color: var(--wf-bg);
  background: var(--wf-accent);
}

.workflow-sidebar-content,
.workflow-inspector {
  min-height: 0;
  overflow: auto;
}

.workflow-sidebar-content {
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.workflow-panel-head,
.workflow-section-head {
  display: grid;
  gap: 2px;
}

.workflow-panel-head strong,
.workflow-section-head strong {
  color: var(--wf-ink);
  font-size: 12px;
  line-height: 1.2;
}

.workflow-palette-group {
  display: grid;
  gap: 4px;
}

.workflow-palette-group > span {
  color: var(--wf-muted);
  font-size: 10px;
  font-weight: 850;
}

.workflow-palette-card,
.workflow-template-card {
  width: 100%;
  padding: 5px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  border-radius: 7px;
  text-align: left;
}

.workflow-template-card {
  grid-template-columns: 1fr;
  align-items: start;
}

.workflow-palette-card:hover,
.workflow-template-card:hover,
.workflow-asset-card:hover,
.workflow-history-card:hover,
.workflow-node:hover,
.workflow-task-card:hover {
  border-color: var(--wf-line-strong);
  background: color-mix(in srgb, var(--wf-ink) 3%, var(--wf-surface));
}

.workflow-palette-card i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--wf-bg);
  background: var(--wf-accent);
}

.workflow-palette-card strong,
.workflow-template-card strong,
.workflow-asset-card strong,
.workflow-history-card strong,
.workflow-task-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--wf-ink);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-palette-card small,
.workflow-template-card span,
.workflow-template-card small,
.workflow-asset-card span,
.workflow-history-card span,
.workflow-task-card span,
.workflow-task-card small {
  color: var(--wf-muted);
  font-size: 10px;
  line-height: 1.25;
}

.workflow-template-list,
.workflow-asset-list,
.workflow-history-list {
  display: grid;
  gap: 4px;
}

.workflow-asset-card,
.workflow-history-card {
  padding: 4px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  border: 1px solid var(--wf-line);
  border-radius: 7px;
  background: var(--wf-panel);
}

.workflow-history-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.workflow-asset-thumb {
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, var(--wf-ink) 5%, transparent);
}

.workflow-asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workflow-asset-card button,
.workflow-history-card button {
  min-height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 850;
}

.workflow-stage {
  position: relative;
  grid-area: stage;
  min-height: 0;
  overflow: hidden;
}

.workflow-canvas-surface {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 732px;
  overflow: hidden;
  background:
    linear-gradient(var(--wf-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--wf-line) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--wf-line) 48%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--wf-line) 48%, transparent) 1px, transparent 1px),
    var(--wf-bg);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, auto;
  cursor: grab;
  touch-action: none;
}

.workflow-canvas-surface:active {
  cursor: grabbing;
}

.workflow-canvas-surface.is-dragging-file {
  outline: 2px solid var(--wf-accent);
  outline-offset: -10px;
}

.workflow-canvas-toolbar {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 14;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--wf-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--wf-surface) 94%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--wf-ink) 9%, transparent);
}

.workflow-canvas-toolbar button {
  min-height: 24px;
  padding: 0 6px;
  display: inline-flex;
  gap: 3px;
  align-items: center;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 850;
}

.workflow-world,
.workflow-edges {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.workflow-world {
  z-index: 3;
  will-change: transform;
}

.workflow-edges {
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.workflow-edge-route-layer {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.workflow-edge {
  fill: none;
  stroke: var(--wf-accent);
  stroke-width: 2;
  opacity: 0.72;
  cursor: pointer;
  pointer-events: stroke;
}

.workflow-edge.is-selected {
  stroke-width: 4;
  opacity: 1;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--wf-accent) 34%, transparent));
}

.workflow-edge.is-pending {
  stroke-dasharray: 7 6;
  opacity: 0.5;
  pointer-events: none;
}

.workflow-empty {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 5;
  width: min(300px, calc(100% - 32px));
  padding: 12px;
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px dashed var(--wf-line-strong);
  border-radius: 9px;
  background: color-mix(in srgb, var(--wf-surface) 92%, transparent);
  text-align: center;
  transform: translate(-50%, -50%);
}

.workflow-empty[hidden] {
  display: none;
}

.workflow-selection-box {
  position: absolute;
  z-index: 8;
  border: 1px solid var(--wf-accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--wf-accent) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--wf-accent) 18%, transparent) inset;
  pointer-events: none;
}

.workflow-selection-box[hidden] {
  display: none;
}

.workflow-empty strong {
  color: var(--wf-ink);
  font-size: 13px;
}

.workflow-empty span,
.workflow-empty-panel {
  color: var(--wf-muted);
  font-size: 11px;
  line-height: 1.35;
}

.workflow-node {
  position: absolute;
  min-width: 170px;
  min-height: 120px;
  padding: 9px;
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--wf-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--wf-surface) 95%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--wf-ink) 10%, transparent);
  cursor: grab;
  user-select: none;
}

.workflow-node.is-selected {
  border-color: var(--wf-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf-accent) 14%, transparent), 0 20px 46px color-mix(in srgb, var(--wf-ink) 15%, transparent);
}

.workflow-node.is-validating,
.workflow-node.is-submitting,
.workflow-node.is-queued,
.workflow-node.is-generating,
.workflow-node.is-compositing {
  border-color: var(--wf-info);
}

.workflow-node.is-completed {
  border-color: var(--wf-success);
}

.workflow-node.is-failed {
  border-color: var(--wf-danger);
}

.workflow-node.is-cancelled {
  border-color: var(--wf-muted);
}

.workflow-node-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
}

.workflow-node-head span,
.workflow-node-head em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-node-head span {
  padding: 3px 7px;
  border-radius: 7px;
  color: var(--wf-bg);
  background: var(--wf-accent);
  font-size: 11px;
  font-weight: 850;
}

.workflow-node-head em {
  color: var(--wf-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.workflow-node-head button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wf-line);
  border-radius: 7px;
  color: var(--wf-muted);
  background: var(--wf-panel);
}

.workflow-node strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--wf-ink);
  font-size: 14px;
  line-height: 1.24;
}

.workflow-node p,
.workflow-node small {
  margin: 0;
  color: var(--wf-muted);
  font-size: 11px;
  line-height: 1.42;
}

.workflow-node-media {
  position: relative;
  min-height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  color: var(--wf-muted);
  background: color-mix(in srgb, var(--wf-ink) 5%, transparent);
}

.workflow-node-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workflow-node-media.is-result {
  min-height: 160px;
}

.workflow-node-media b {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.58);
  font-size: 11px;
}

.workflow-port {
  position: absolute;
  z-index: 4;
  width: 14px;
  height: 14px;
  border: 2px solid var(--wf-surface);
  border-radius: 50%;
  background: var(--wf-accent);
  box-shadow: 0 0 0 1px var(--wf-line-strong);
}

.workflow-port.input {
  left: -7px;
  top: calc(50% - 7px);
}

.workflow-port.output {
  right: -7px;
  top: calc(50% - 7px);
}

.workflow-inspector {
  grid-area: right;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.workflow-run-panel,
.workflow-inspector-card {
  padding: 6px;
  display: grid;
  gap: 5px;
  border: 1px solid var(--wf-line);
  border-radius: 8px;
  background: var(--wf-panel);
}

.workflow-mode-grid {
  padding: 2px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid var(--wf-line);
  border-radius: 7px;
  background: var(--wf-surface);
}

.workflow-mode-grid button {
  min-height: 24px;
  border-radius: 6px;
  color: var(--wf-muted);
  font-size: 10px;
  font-weight: 850;
}

.workflow-field {
  display: grid;
  gap: 3px;
}

.workflow-field input,
.workflow-field select,
.workflow-field textarea {
  width: 100%;
  border: 1px solid var(--wf-line);
  border-radius: 7px;
  color: var(--wf-ink);
  background: var(--wf-surface);
  font: inherit;
}

.workflow-field input,
.workflow-field select {
  min-height: 28px;
  padding: 0 7px;
}

.workflow-field textarea {
  min-height: 54px;
  padding: 6px 7px;
  resize: vertical;
}

.workflow-form-grid,
.workflow-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.workflow-metrics span {
  min-width: 0;
  padding: 4px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--wf-line);
  border-radius: 7px;
  background: var(--wf-surface);
  color: var(--wf-muted);
  font-size: 10px;
  text-align: center;
}

.workflow-metrics b {
  color: var(--wf-ink);
  font-size: 12px;
}

.workflow-inspector-card p {
  margin: 0;
  color: var(--wf-muted);
  font-size: 10px;
  line-height: 1.35;
}

.workflow-inspector-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.workflow-inspector-actions button {
  min-height: 25px;
  display: inline-flex;
  justify-content: center;
  gap: 4px;
  align-items: center;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 850;
}

.workflow-inline-error {
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--wf-danger) 50%, var(--wf-line));
  border-radius: 9px;
  color: var(--wf-danger);
  background: color-mix(in srgb, var(--wf-danger) 7%, var(--wf-surface));
  font-size: 12px;
  line-height: 1.45;
}

.workflow-taskbar {
  grid-area: tasks;
  min-height: 0;
  padding: 4px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 4px;
}

.workflow-taskbar-head {
  justify-content: center;
  align-content: center;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--wf-line);
  border-radius: 7px;
  background: var(--wf-panel);
}

.workflow-taskbar-head strong {
  color: var(--wf-ink);
  font-size: 11px;
}

.workflow-task-list {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(146px, 1fr);
  gap: 4px;
  overflow-x: auto;
}

.workflow-task-card {
  min-width: 0;
  padding: 4px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--wf-line);
  border-left-width: 3px;
  border-radius: 7px;
  background: var(--wf-panel);
}

.workflow-task-card.is-validating,
.workflow-task-card.is-submitting,
.workflow-task-card.is-queued,
.workflow-task-card.is-generating,
.workflow-task-card.is-compositing {
  border-left-color: var(--wf-info);
}

.workflow-task-card.is-completed,
.workflow-task-card.is-succeeded {
  border-left-color: var(--wf-success);
}

.workflow-task-card.is-failed {
  border-left-color: var(--wf-danger);
}

.workflow-task-card.is-cancelled {
  border-left-color: var(--wf-muted);
}

.workflow-task-card progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wf-ink) 8%, transparent);
}

.workflow-task-card progress::-webkit-progress-bar {
  background: color-mix(in srgb, var(--wf-ink) 8%, transparent);
}

.workflow-task-card progress::-webkit-progress-value {
  background: var(--wf-accent);
}

.workflow-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.workflow-task-actions button {
  min-height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 850;
}

.workflow-task-empty {
  min-height: 46px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--wf-line);
  border-radius: 7px;
  color: var(--wf-muted);
  font-size: 11px;
  text-align: center;
}

.workflow-primary-button.is-full,
.workflow-secondary-button.is-full {
  width: 100%;
}

@media (max-width: 1180px) {
  .workflow-canvas-shell {
    grid-template-columns: 172px minmax(0, 1fr);
    grid-template-rows: auto minmax(650px, 1fr) auto auto;
    grid-template-areas:
      "top top"
      "left stage"
      "right right"
      "tasks tasks";
  }

  .workflow-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .workflow-run-summary {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .workflow-actions {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .workflow-inspector {
    max-height: 300px;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
    align-items: start;
  }
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .main {
    padding: 3px;
  }

  .workflow-canvas-shell {
    min-height: auto;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 68svh auto auto;
    grid-template-areas:
      "top"
      "left"
      "stage"
      "right"
      "tasks";
  }

  .workflow-topbar,
  .workflow-sidebar,
  .workflow-stage,
  .workflow-inspector,
  .workflow-taskbar {
    border-radius: 10px;
  }

  .workflow-brand {
    align-items: flex-start;
  }

  .workflow-run-summary,
  .workflow-actions,
  .workflow-canvas-toolbar,
  .workflow-sidebar-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .workflow-tool-button span {
    display: none;
  }

  .workflow-sidebar {
    max-height: 220px;
  }

  .workflow-canvas-surface {
    min-height: 68svh;
  }

  .workflow-canvas-toolbar {
    right: 10px;
  }

  .workflow-inspector {
    max-height: none;
    grid-template-columns: 1fr;
  }

  .workflow-taskbar {
    grid-template-columns: 1fr;
  }

  .workflow-task-list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}

/* AI workflow canvas v2: professional workstation layer */
body[data-active-view="aiCanvas"] {
  background: #080907;
}

body[data-active-view="aiCanvas"] .app-shell {
  grid-template-columns: 50px minmax(0, 1fr);
}

body[data-active-view="aiCanvas"] .main {
  padding: 2px;
  background:
    radial-gradient(circle at 54% 10%, rgba(199, 255, 128, 0.11), transparent 26%),
    radial-gradient(circle at 84% 72%, rgba(119, 210, 255, 0.08), transparent 30%),
    #080907;
}

.workflow-canvas-shell {
  --wf-bg: #0c0e0b;
  --wf-surface: rgba(20, 22, 18, 0.94);
  --wf-panel: rgba(27, 30, 25, 0.92);
  --wf-panel-soft: rgba(245, 243, 232, 0.055);
  --wf-ink: #f7f3e8;
  --wf-muted: #9fa79b;
  --wf-line: rgba(247, 243, 232, 0.12);
  --wf-line-strong: rgba(247, 243, 232, 0.26);
  --wf-accent: #d8ff72;
  --wf-accent-2: #89e6c4;
  --wf-blue: #7ac7ff;
  --wf-success: #77e0a8;
  --wf-warning: #ffd36e;
  --wf-danger: #ff7d7d;
  --wf-info: #78c7ff;
  min-height: calc(100svh - 4px);
  grid-template-columns: 196px minmax(0, 1fr) 300px;
  grid-template-rows: 48px minmax(0, 1fr) 154px;
  gap: 4px;
  color: var(--wf-ink);
}

.workflow-topbar,
.workflow-sidebar,
.workflow-stage,
.workflow-inspector,
.workflow-taskbar {
  border-color: var(--wf-line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    var(--wf-surface);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 48px rgba(0, 0, 0, 0.28);
}

.workflow-topbar {
  padding: 6px;
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(360px, 1.2fr) minmax(500px, auto);
  gap: 8px;
  backdrop-filter: blur(18px);
}

.workflow-brand {
  gap: 8px;
}

.workflow-brand strong {
  color: var(--wf-ink);
  font-size: 14px;
  letter-spacing: 0;
}

.workflow-brand span {
  color: var(--wf-accent);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workflow-brand em,
.workflow-section-head em {
  padding: 4px 8px;
  border: 1px solid rgba(216, 255, 114, 0.22);
  border-radius: 999px;
  color: var(--wf-accent);
  background: rgba(216, 255, 114, 0.07);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.workflow-run-summary {
  justify-content: center;
  gap: 5px;
  overflow: hidden;
}

.workflow-run-summary span {
  min-height: 30px;
  padding: 0 9px;
  gap: 5px;
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 10px;
}

.workflow-run-summary svg {
  width: 13px;
  height: 13px;
}

.workflow-run-summary b {
  color: var(--wf-ink);
  font-size: 12px;
}

.workflow-run-summary .is-running {
  color: var(--wf-accent);
  border-color: rgba(216, 255, 114, 0.22);
  background: rgba(216, 255, 114, 0.07);
}

.workflow-run-summary .is-danger {
  color: var(--wf-danger);
  border-color: rgba(255, 125, 125, 0.25);
  background: rgba(255, 125, 125, 0.08);
}

.workflow-actions {
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.workflow-action-group {
  min-height: 34px;
  padding: 3px;
  display: inline-flex;
  gap: 3px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.workflow-action-group.is-secondary {
  background: transparent;
}

.workflow-icon-button,
.workflow-tool-button,
.workflow-primary-button,
.workflow-secondary-button,
.workflow-sidebar-tabs button,
.workflow-canvas-toolbar button,
.workflow-palette-card,
.workflow-template-card,
.workflow-asset-card button,
.workflow-history-card button,
.workflow-mode-grid button,
.workflow-inspector-actions button,
.workflow-task-card button,
.workflow-command-list button,
.workflow-reference-strip button,
.workflow-snapshot-list button,
.workflow-result-strip button {
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--wf-ink);
  background: rgba(255, 255, 255, 0.045);
}

.workflow-icon-button,
.workflow-tool-button,
.workflow-primary-button,
.workflow-secondary-button {
  min-height: 28px;
  border-radius: 9px;
  font-size: 11px;
}

.workflow-icon-button {
  width: 28px;
}

.workflow-tool-button:hover,
.workflow-icon-button:hover,
.workflow-secondary-button:hover,
.workflow-inspector-actions button:hover {
  border-color: rgba(216, 255, 114, 0.25);
  background: rgba(216, 255, 114, 0.08);
}

.workflow-run-button,
.workflow-primary-button {
  border-color: rgba(216, 255, 114, 0.62);
  color: #11140e;
  background:
    linear-gradient(180deg, #e9ff9c, #bdf05d);
  box-shadow: 0 0 0 1px rgba(216, 255, 114, 0.24), 0 12px 28px rgba(216, 255, 114, 0.2);
}

.workflow-run-button {
  min-width: 124px;
  min-height: 36px;
  font-size: 12px;
}

.workflow-zoom {
  min-width: 44px;
  border-color: transparent;
  color: var(--wf-accent);
  background: transparent;
}

.workflow-sidebar {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.workflow-sidebar-tabs {
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
  border-right: 1px solid var(--wf-line);
  border-bottom: 0;
}

.workflow-sidebar-tabs button {
  min-height: 46px;
  padding: 5px 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  border-radius: 12px;
  color: var(--wf-muted);
  font-size: 9px;
}

.workflow-sidebar-tabs button svg {
  width: 17px;
  height: 17px;
}

.workflow-sidebar-tabs button.active,
.workflow-mode-grid button.active {
  color: #11140e;
  border-color: rgba(216, 255, 114, 0.55);
  background: linear-gradient(180deg, #e5ff93, #b9ec58);
}

.workflow-sidebar-content {
  padding: 8px;
  gap: 8px;
}

.workflow-sidebar-search {
  min-height: 34px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.04);
}

.workflow-sidebar-search svg {
  width: 14px;
  height: 14px;
}

.workflow-sidebar-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--wf-ink);
  background: transparent;
  font: inherit;
  font-size: 11px;
}

.workflow-sidebar-search input::placeholder {
  color: rgba(247, 243, 232, 0.38);
}

.workflow-panel-head.is-compact {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.workflow-panel-head strong,
.workflow-section-head strong {
  font-size: 13px;
  letter-spacing: 0;
}

.workflow-panel-head span,
.workflow-section-head span,
.workflow-field span {
  font-size: 10px;
}

.workflow-palette-group {
  gap: 6px;
}

.workflow-palette-group > span {
  color: rgba(247, 243, 232, 0.48);
  font-size: 10px;
}

.workflow-palette-card,
.workflow-template-card,
.workflow-asset-card,
.workflow-history-card {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.workflow-palette-card {
  padding: 7px;
  grid-template-columns: 30px minmax(0, 1fr);
}

.workflow-template-card {
  padding: 8px;
  display: grid;
  gap: 4px;
}

.workflow-asset-card {
  padding: 6px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.workflow-palette-card:hover,
.workflow-template-card:hover,
.workflow-asset-card:hover,
.workflow-history-card:hover {
  transform: translateY(-1px);
  border-color: rgba(216, 255, 114, 0.28);
  background:
    linear-gradient(135deg, rgba(216, 255, 114, 0.11), rgba(255, 255, 255, 0.035));
}

.workflow-side-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.workflow-side-metrics span {
  min-width: 0;
  padding: 7px 4px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  text-align: center;
}

.workflow-side-metrics b {
  color: var(--wf-ink);
  font-size: 13px;
}

.workflow-palette-card i {
  width: 30px;
  height: 30px;
  color: var(--wf-accent);
  background: rgba(216, 255, 114, 0.09);
}

.workflow-palette-card strong,
.workflow-template-card strong,
.workflow-asset-card strong,
.workflow-history-card strong,
.workflow-task-card strong {
  color: var(--wf-ink);
  font-size: 11px;
}

.workflow-palette-card small,
.workflow-template-card span,
.workflow-asset-card span,
.workflow-history-card span,
.workflow-task-card span,
.workflow-task-card small {
  color: var(--wf-muted);
  font-size: 10px;
}

.workflow-asset-thumb {
  width: 42px;
  height: 46px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.workflow-stage {
  overflow: hidden;
}

.workflow-canvas-surface {
  min-height: 720px;
  background:
    radial-gradient(circle at 36% 30%, rgba(216, 255, 114, 0.085), transparent 24%),
    radial-gradient(circle at 72% 64%, rgba(122, 199, 255, 0.06), transparent 30%),
    linear-gradient(rgba(247, 243, 232, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 243, 232, 0.075) 1px, transparent 1px),
    linear-gradient(rgba(247, 243, 232, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 243, 232, 0.035) 1px, transparent 1px),
    var(--wf-bg);
  background-size: auto, auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px, auto;
}

.workflow-canvas-surface.is-space-pan,
.workflow-canvas-surface.is-space-pan .workflow-node {
  cursor: grab;
}

.workflow-canvas-aura {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(216, 255, 114, 0.08);
  border-radius: 48px;
  background:
    linear-gradient(90deg, rgba(216, 255, 114, 0.03), transparent 30%, rgba(137, 230, 196, 0.035));
  pointer-events: none;
}

.workflow-canvas-toolbar {
  top: 10px;
  left: 10px;
  padding: 4px;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(12, 14, 11, 0.72);
  backdrop-filter: blur(18px);
}

.workflow-canvas-toolbar button {
  min-height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
}

.workflow-canvas-status {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 16;
  max-width: min(520px, calc(100% - 260px));
  min-height: 34px;
  padding: 4px 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--wf-muted);
  background: rgba(12, 14, 11, 0.74);
  backdrop-filter: blur(18px);
  font-size: 11px;
}

.workflow-canvas-status span,
.workflow-canvas-status em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-canvas-status span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--wf-accent);
  font-style: normal;
  font-weight: 850;
}

.workflow-canvas-status span.is-running svg {
  animation: workflowSpin 1s linear infinite;
}

.workflow-canvas-status b {
  color: var(--wf-ink);
}

.workflow-canvas-status em {
  color: var(--wf-muted);
  font-style: normal;
}

.workflow-pipeline-meter {
  width: 92px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.workflow-pipeline-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--wf-accent), var(--wf-blue), var(--wf-accent-2));
  box-shadow: 0 0 16px rgba(120, 199, 255, 0.38);
  transition: width 0.2s ease;
}

.workflow-empty {
  width: min(430px, calc(100% - 44px));
  padding: 22px;
  gap: 12px;
  border-color: rgba(216, 255, 114, 0.25);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035)),
    rgba(10, 12, 9, 0.78);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(20px);
}

.workflow-empty svg {
  color: var(--wf-accent);
}

.workflow-empty strong {
  font-size: 18px;
}

.workflow-empty span {
  max-width: 330px;
  font-size: 12px;
}

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

.workflow-node {
  min-width: 190px;
  padding: 10px;
  gap: 8px;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.045)),
    rgba(18, 20, 16, 0.92);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 18px 50px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
}

.workflow-node:hover {
  border-color: rgba(216, 255, 114, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.135), rgba(255, 255, 255, 0.055)),
    rgba(18, 20, 16, 0.95);
}

.workflow-node.is-selected {
  border-color: rgba(216, 255, 114, 0.72);
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.5),
    0 0 0 5px rgba(216, 255, 114, 0.12),
    0 30px 90px rgba(0, 0, 0, 0.45);
}

.workflow-node::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: rgba(255, 255, 255, 0.14);
}

.workflow-node.is-running::before {
  background: linear-gradient(90deg, var(--wf-accent), var(--wf-blue), var(--wf-accent));
  background-size: 200% 100%;
  animation: workflowFlow 1.2s linear infinite;
}

.workflow-node.is-running {
  border-color: rgba(120, 199, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(120, 199, 255, 0.22),
    0 0 0 6px rgba(120, 199, 255, 0.08),
    0 28px 86px rgba(0, 0, 0, 0.46);
}

.workflow-node.is-path-source:not(.is-running) {
  border-color: rgba(216, 255, 114, 0.28);
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.12),
    0 0 0 5px rgba(216, 255, 114, 0.045),
    0 22px 66px rgba(0, 0, 0, 0.38);
}

.workflow-node.is-path-source:not(.is-running)::before {
  background: linear-gradient(90deg, rgba(216, 255, 114, 0.78), rgba(216, 255, 114, 0.18));
}

.workflow-node.is-path-target {
  border-color: rgba(120, 199, 255, 0.5);
}

.workflow-node.is-path-output:not(.is-running) {
  border-color: rgba(118, 231, 197, 0.3);
  box-shadow:
    0 0 0 1px rgba(118, 231, 197, 0.12),
    0 0 0 5px rgba(118, 231, 197, 0.045),
    0 22px 66px rgba(0, 0, 0, 0.38);
}

.workflow-node.is-path-output:not(.is-running)::before {
  background: linear-gradient(90deg, rgba(118, 231, 197, 0.2), rgba(118, 231, 197, 0.82));
}

.workflow-node.is-running .workflow-node-progress {
  background: rgba(120, 199, 255, 0.12);
}

.workflow-node.is-running .workflow-node-progress i {
  background: linear-gradient(90deg, var(--wf-accent), var(--wf-blue), var(--wf-accent-2));
  box-shadow: 0 0 18px rgba(120, 199, 255, 0.4);
}

.workflow-node.is-completed::before {
  background: var(--wf-success);
}

.workflow-node.is-failed::before {
  background: var(--wf-danger);
}

.workflow-node-head span {
  padding: 4px 7px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border-radius: 999px;
  color: #11140e;
  background: var(--wf-accent);
  font-size: 10px;
}

.workflow-node-head span svg {
  width: 12px;
  height: 12px;
}

.workflow-node-head em {
  color: var(--wf-muted);
  font-size: 10px;
}

.workflow-node-head button {
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.04);
}

.workflow-node strong {
  color: var(--wf-ink);
  font-size: 14px;
}

.workflow-node p {
  display: -webkit-box;
  min-height: 36px;
  overflow: hidden;
  color: rgba(247, 243, 232, 0.68);
  font-size: 11px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.workflow-node-meta,
.workflow-node-contract {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.workflow-node-meta small,
.workflow-node-contract span {
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 9px;
  font-weight: 760;
}

.workflow-node-contract span:first-child {
  color: var(--wf-accent-2);
  border-color: rgba(137, 230, 196, 0.18);
}

.workflow-generator-node-card {
  min-height: 0;
  display: grid;
  gap: 8px;
}

.workflow-generator-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.workflow-generator-head span {
  min-width: 0;
  padding: 5px 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border-radius: 999px;
  color: #111315;
  background: rgba(246, 247, 247, 0.9);
  font-size: 10px;
  font-weight: 300;
}

.workflow-generator-node-card.is-image .workflow-generator-head span {
  background: rgba(216, 255, 114, 0.92);
}

.workflow-generator-node-card.is-video .workflow-generator-head span {
  background: rgba(120, 199, 255, 0.92);
}

.workflow-generator-head svg {
  width: 13px;
  height: 13px;
}

.workflow-generator-head em {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.52);
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-generator-head em.is-generating,
.workflow-generator-head em.is-queued,
.workflow-generator-head em.is-validating,
.workflow-generator-head em.is-submitting,
.workflow-generator-head em.is-compositing {
  color: rgba(216, 255, 114, 0.88);
}

.workflow-generator-head em.is-failed {
  color: rgba(255, 125, 125, 0.92);
}

.workflow-generator-node-card > strong {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.92);
  font-size: 15px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-generator-node-card > p {
  min-height: 34px;
  margin: 0;
  color: rgba(246, 247, 247, 0.58);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.38;
  -webkit-line-clamp: 2;
}

.workflow-generator-flow {
  padding: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, auto);
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.workflow-generator-flow span,
.workflow-generator-flow b {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.66);
  font-size: 10px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-generator-flow b {
  justify-self: end;
  color: rgba(246, 247, 247, 0.9);
}

.workflow-generator-flow i {
  height: 1px;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(246, 247, 247, 0.14);
}

.workflow-generator-flow i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(246, 247, 247, 0.86), transparent);
  animation: workflowLinkPulse 1.5s linear infinite;
}

.workflow-generator-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.workflow-generator-meta small {
  min-width: 0;
  padding: 5px 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.54);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  font-weight: 300;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-generator-readiness {
  min-height: 27px;
  padding: 0 8px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.72);
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
  font-weight: 300;
}

.workflow-generator-readiness svg {
  width: 13px;
  height: 13px;
}

.workflow-generator-readiness.is-ready {
  color: rgba(118, 231, 197, 0.92);
  border-color: rgba(118, 231, 197, 0.2);
  background: rgba(118, 231, 197, 0.08);
}

.workflow-generator-readiness.is-warn {
  color: rgba(255, 211, 110, 0.94);
  border-color: rgba(255, 211, 110, 0.22);
  background: rgba(255, 211, 110, 0.08);
}

.workflow-generator-readiness.is-missing {
  color: rgba(255, 125, 125, 0.94);
  border-color: rgba(255, 125, 125, 0.24);
  background: rgba(255, 125, 125, 0.08);
}

.workflow-generator-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.workflow-generator-requirements span {
  min-width: 0;
  padding: 4px 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.52);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-generator-requirements span.is-ok {
  color: rgba(118, 231, 197, 0.86);
  border-color: rgba(118, 231, 197, 0.15);
}

.workflow-generator-requirements span.is-warn {
  color: rgba(255, 211, 110, 0.86);
  border-color: rgba(255, 211, 110, 0.16);
}

.workflow-generator-requirements span.is-missing {
  color: rgba(255, 125, 125, 0.88);
  border-color: rgba(255, 125, 125, 0.2);
}

.workflow-generator-run {
  min-height: 34px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(246, 247, 247, 0.12);
  border-radius: 11px;
  color: rgba(246, 247, 247, 0.88);
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 300;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.workflow-generator-run:hover {
  border-color: rgba(216, 255, 114, 0.38);
  background: rgba(216, 255, 114, 0.1);
  transform: translateY(-1px);
}

.workflow-generator-run:disabled {
  color: rgba(246, 247, 247, 0.36);
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  cursor: not-allowed;
  transform: none;
}

.workflow-generator-run svg {
  width: 14px;
  height: 14px;
}

.workflow-node.is-running .workflow-generator-run svg {
  animation: workflowSpin 1s linear infinite;
}

.workflow-node-media {
  min-height: 124px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.045);
}

.workflow-node-media img {
  border-radius: inherit;
}

.workflow-node-media.is-result {
  min-height: 172px;
}

.workflow-result-node-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  opacity: 0.88;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.workflow-node:hover .workflow-result-node-actions,
.workflow-node.is-selected .workflow-result-node-actions {
  opacity: 1;
  transform: translateY(-1px);
}

.workflow-node-media.is-result > img {
  pointer-events: none;
}

.workflow-result-node-actions button {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.84);
  background: rgba(12, 13, 15, 0.62);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  font-family: inherit;
  font-size: 10px;
  font-weight: 300;
}

.workflow-result-node-actions button:hover {
  color: #111315;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(246, 247, 247, 0.88);
}

.workflow-result-node-actions button svg {
  width: 13px;
  height: 13px;
}

.workflow-result-node-actions button:not(.is-primary) {
  width: 28px;
  padding: 0;
}

.workflow-result-node-actions .is-primary {
  color: #101315;
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(246, 247, 247, 0.9);
}

.workflow-result-node-actions .is-primary:hover {
  background: rgba(116, 228, 165, 0.92);
}

.workflow-media-node-actions {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}

.workflow-media-node-actions button {
  min-width: 32px;
  height: 28px;
  padding: 0 9px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.84);
  background: rgba(12, 13, 15, 0.62);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  font-family: inherit;
  font-size: 10px;
  font-weight: 300;
}

.workflow-media-node-actions button:hover {
  color: #111315;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(246, 247, 247, 0.88);
}

.workflow-media-node-actions button svg {
  width: 13px;
  height: 13px;
}

.workflow-media-node-actions ~ .workflow-media-progress {
  bottom: 48px;
}

.workflow-node-progress {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.workflow-node-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--wf-accent), var(--wf-blue));
  transition: width 0.2s ease;
}

.workflow-node-runtime {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 12;
  padding: 10px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: rgba(246, 247, 247, 0.86);
  background: rgba(11, 12, 14, 0.72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
}

.workflow-node-runtime div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  font-weight: 300;
}

.workflow-node-runtime strong {
  color: rgba(246, 247, 247, 0.92);
  font-size: 11px;
  font-weight: 300 !important;
}

.workflow-node-runtime p {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.55);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-node-runtime-meter {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.workflow-node-runtime-meter b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f6f7f7, rgba(216, 255, 114, 0.95));
}

.workflow-node-runtime button {
  width: max-content;
  height: 28px;
  padding: 0 10px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.88);
  background: rgba(255, 255, 255, 0.06);
  font-family: inherit;
  font-size: 11px;
  font-weight: 300;
}

.workflow-node-runtime button:hover {
  color: #111315;
  background: rgba(246, 247, 247, 0.9);
}

.workflow-node-runtime.is-failed {
  border-color: rgba(255, 118, 118, 0.28);
  background: rgba(42, 16, 18, 0.78);
}

.workflow-node-runtime.is-failed .workflow-node-runtime-meter b {
  background: linear-gradient(90deg, #ff7676, #f6f7f7);
}

.workflow-node-runtime.is-completed,
.workflow-node-runtime.is-succeeded {
  border-color: rgba(118, 231, 197, 0.22);
  background:
    linear-gradient(145deg, rgba(118, 231, 197, 0.1), transparent 42%),
    rgba(11, 12, 14, 0.76);
}

.workflow-node-runtime.is-completed .workflow-node-runtime-meter b,
.workflow-node-runtime.is-succeeded .workflow-node-runtime-meter b {
  background: linear-gradient(90deg, rgba(118, 231, 197, 0.96), rgba(216, 255, 114, 0.9));
}

.workflow-node-runtime-steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px !important;
}

.workflow-node-runtime-steps span {
  min-width: 0;
  height: 22px;
  padding: 0 5px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.4);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-node-runtime-steps span.is-active {
  color: rgba(18, 20, 16, 0.92);
  border-color: rgba(216, 255, 114, 0.46);
  background: rgba(216, 255, 114, 0.88);
}

.workflow-node-runtime-steps span.is-completed {
  color: rgba(118, 231, 197, 0.9);
  border-color: rgba(118, 231, 197, 0.18);
  background: rgba(118, 231, 197, 0.08);
}

.workflow-node-runtime-steps span.is-failed {
  color: rgba(255, 125, 125, 0.92);
  border-color: rgba(255, 125, 125, 0.22);
  background: rgba(255, 125, 125, 0.08);
}

.workflow-node-runtime-steps svg {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

.workflow-node-runtime-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 5px !important;
}

.workflow-node-runtime-actions button {
  height: 26px;
  min-height: 26px;
  padding: 0 9px;
  font-size: 10px;
}

.workflow-node-runtime-actions button.is-primary {
  color: #111315;
  border-color: rgba(216, 255, 114, 0.74);
  background: rgba(216, 255, 114, 0.9);
}

.workflow-node-runtime-actions button svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.8;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-runtime {
  color: rgba(18, 18, 18, 0.78);
  border-color: rgba(18, 18, 18, 0.08);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 243, 236, 0.86)),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 42px rgba(18, 18, 18, 0.16);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-runtime strong {
  color: rgba(18, 18, 18, 0.82);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-runtime p {
  color: rgba(18, 18, 18, 0.54);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-runtime-steps span {
  color: rgba(18, 18, 18, 0.42);
  border-color: rgba(18, 18, 18, 0.07);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-runtime-steps span.is-active {
  color: rgba(18, 18, 18, 0.88);
  background: rgba(216, 255, 114, 0.8);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-runtime-actions button {
  color: rgba(18, 18, 18, 0.62);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.04);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-runtime-actions button.is-primary {
  color: rgba(246, 247, 247, 0.96);
  background: rgba(18, 18, 18, 0.86);
}

/* v1.8.122 Node runtime dock: running, failed, and completed nodes expose task detail, stages, and result actions on-canvas. */

.workflow-port {
  width: 16px;
  height: 16px;
  border-color: rgba(12, 14, 11, 0.95);
  background: var(--wf-accent);
  box-shadow: 0 0 0 1px rgba(216, 255, 114, 0.5), 0 0 20px rgba(216, 255, 114, 0.16);
}

.workflow-port.input {
  left: -8px;
}

.workflow-port.output {
  right: -8px;
}

.workflow-edge-shadow,
.workflow-edge {
  fill: none;
}

.workflow-edge-shadow {
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 8;
  opacity: 0.5;
  pointer-events: none;
}

.workflow-edge {
  stroke: rgba(247, 243, 232, 0.38);
  stroke-width: 2.5;
  marker-end: url(#workflowArrow);
}

.workflow-edge:hover {
  stroke: var(--wf-accent);
  filter: drop-shadow(0 0 10px rgba(216, 255, 114, 0.36));
}

.workflow-edge-label {
  fill: var(--wf-muted);
  stroke: rgba(12, 14, 11, 0.72);
  stroke-width: 4px;
  paint-order: stroke;
  font-size: 10px;
  font-weight: 850;
  pointer-events: none;
}

.workflow-edges marker path {
  fill: var(--wf-accent);
}

.workflow-edge.is-running {
  stroke: #f6f7f7;
  stroke-width: 3.8;
  stroke-dasharray: 12 8;
  animation: workflowDash 0.62s linear infinite;
  filter: drop-shadow(0 0 15px rgba(246, 247, 247, 0.4));
}

.workflow-edge.is-path-active {
  stroke-linecap: round;
}

.workflow-edge.is-running.is-path-active {
  stroke: #ffffff;
  filter:
    drop-shadow(0 0 10px rgba(246, 247, 247, 0.55))
    drop-shadow(0 0 22px rgba(120, 199, 255, 0.36));
}

.workflow-edge-flow {
  fill: none;
  stroke: rgba(216, 255, 114, 0.56);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 2 13;
  animation: workflowDash 0.82s linear infinite;
  filter: drop-shadow(0 0 18px rgba(216, 255, 114, 0.42));
  pointer-events: none;
}

.workflow-edge-particles {
  pointer-events: none;
}

.workflow-edge-particles circle {
  fill: #f6f7f7;
  filter: drop-shadow(0 0 9px rgba(120, 199, 255, 0.82));
}

.workflow-edge-label.is-running {
  fill: #111315;
  stroke: rgba(246, 247, 247, 0.92);
  stroke-width: 10px;
  font-size: 9px;
  font-weight: 300;
}

.workflow-edge-label.is-path-active {
  letter-spacing: 0;
}

.workflow-edge-label.is-failed {
  fill: #ff8b8b;
}

.workflow-edge-label.is-completed {
  fill: rgba(116, 228, 165, 0.95);
}

.workflow-edge.is-completed,
.workflow-edge.is-completed + path {
  stroke: var(--wf-success);
}

.workflow-edge.is-failed {
  stroke: var(--wf-danger);
}

.workflow-edge-shadow.is-running {
  stroke: rgba(216, 255, 114, 0.28);
  stroke-width: 14;
  opacity: 1;
  filter: blur(1px);
}

.workflow-edge-shadow.is-running.is-path-active {
  stroke: rgba(120, 199, 255, 0.25);
  stroke-width: 18;
  opacity: 1;
  filter: blur(2px);
}

.workflow-edge-shadow.is-failed {
  stroke: rgba(255, 118, 118, 0.32);
  opacity: 0.9;
}

.workflow-edge.is-selected {
  stroke-width: 4;
  stroke: var(--wf-accent);
  filter: drop-shadow(0 0 12px rgba(216, 255, 114, 0.45));
}

.workflow-edge.is-pending {
  stroke: var(--wf-blue);
  stroke-dasharray: 6 6;
}

.workflow-selection-toolbar {
  position: absolute;
  z-index: 18;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(216, 255, 114, 0.22);
  border-radius: 999px;
  background: rgba(12, 14, 11, 0.82);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  transform: translate(-50%, -100%);
}

.workflow-selection-toolbar[hidden] {
  display: none;
}

.workflow-selection-toolbar button {
  min-height: 26px;
  padding: 0 8px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--wf-ink);
  background: rgba(255, 255, 255, 0.055);
  font-size: 10px;
  font-weight: 850;
}

.workflow-selection-toolbar .is-danger {
  color: var(--wf-danger);
}

.workflow-minimap {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 15;
  width: 170px;
  padding: 8px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: var(--wf-muted);
  background: rgba(12, 14, 11, 0.72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px);
  font-size: 10px;
}

.workflow-minimap strong {
  color: var(--wf-ink);
  font-size: 10px;
}

.workflow-minimap-world {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(rgba(247, 243, 232, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 243, 232, 0.065) 1px, transparent 1px),
    rgba(255, 255, 255, 0.035);
  background-size: 16px 16px;
}

.workflow-minimap-world i,
.workflow-minimap-world b {
  position: absolute;
  border-radius: 4px;
}

.workflow-minimap-world i {
  background: rgba(247, 243, 232, 0.4);
}

.workflow-minimap-world i.is-image,
.workflow-minimap-world i.is-video,
.workflow-minimap-world i.is-selected {
  background: var(--wf-accent);
}

.workflow-minimap-world b {
  border: 1px solid var(--wf-blue);
  background: rgba(122, 199, 255, 0.12);
}

.workflow-inspector {
  padding: 8px;
  gap: 8px;
}

.workflow-run-panel,
.workflow-inspector-card {
  padding: 10px;
  gap: 8px;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035);
}

.workflow-section-head.is-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.workflow-section-head.is-row > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.workflow-mode-grid {
  padding: 3px;
  gap: 3px;
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.workflow-mode-grid button {
  min-height: 28px;
  border-radius: 10px;
  font-size: 10px;
}

.workflow-prompt-field textarea {
  min-height: 92px;
}

.workflow-field input,
.workflow-field select,
.workflow-field textarea {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  color: var(--wf-ink);
  background: rgba(255, 255, 255, 0.04);
}

.workflow-field input,
.workflow-field select {
  min-height: 32px;
}

.workflow-field textarea {
  min-height: 70px;
}

.workflow-reference-strip,
.workflow-run-hints,
.workflow-inspector-note {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.workflow-reference-strip {
  justify-content: space-between;
  align-items: center;
}

.workflow-reference-strip span,
.workflow-run-hints span,
.workflow-inspector-note span {
  min-height: 24px;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 10px;
  font-weight: 760;
}

.workflow-reference-strip button {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--wf-accent);
  font-size: 10px;
  font-weight: 850;
}

.workflow-inspector-preview {
  position: relative;
  min-height: 156px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.04);
}

.workflow-inspector-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workflow-inspector-preview b {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  font-size: 10px;
}

.workflow-inspector-tabs {
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.workflow-inspector-tabs span {
  min-height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--wf-muted);
  font-size: 10px;
  font-weight: 850;
}

.workflow-inspector-tabs span.active {
  color: #11140e;
  background: var(--wf-accent);
}

.workflow-metrics {
  gap: 5px;
}

.workflow-metrics span {
  padding: 6px;
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.workflow-metrics b {
  color: var(--wf-ink);
}

.workflow-inline-error {
  border-color: rgba(255, 125, 125, 0.32);
  color: var(--wf-danger);
  background: rgba(255, 125, 125, 0.08);
}

.workflow-taskbar {
  padding: 6px;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 6px;
}

.workflow-taskbar.is-collapsed {
  align-content: center;
}

.workflow-taskbar.is-collapsed .workflow-console-grid {
  display: none;
}

.workflow-taskbar.is-collapsed .workflow-taskbar-head {
  min-height: 42px;
}

.workflow-taskbar-head {
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.workflow-taskbar-head .workflow-icon-button {
  margin-top: 2px;
  width: 24px;
  min-height: 24px;
}

.workflow-taskbar-head strong {
  color: var(--wf-ink);
  font-size: 12px;
}

.workflow-console-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.9fr;
  gap: 6px;
}

.workflow-console-grid section {
  min-width: 0;
  padding: 6px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
}

.workflow-console-title {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
}

.workflow-console-title div {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  align-items: center;
}

.workflow-console-title strong {
  color: var(--wf-ink);
  font-size: 11px;
}

.workflow-console-title span {
  color: var(--wf-muted);
  font-size: 10px;
}

.workflow-console-title button {
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  font-weight: 760;
  white-space: nowrap;
}

.workflow-console-title button:hover {
  color: var(--wf-ink);
  border-color: rgba(216, 255, 114, 0.22);
  background: rgba(216, 255, 114, 0.08);
}

.workflow-task-list,
.workflow-log-list,
.workflow-result-strip,
.workflow-snapshot-list {
  min-height: 0;
  overflow: auto;
}

.workflow-task-list {
  grid-auto-flow: column;
  grid-auto-columns: minmax(174px, 1fr);
  gap: 5px;
}

.workflow-task-card {
  padding: 6px;
  gap: 4px;
  border-color: rgba(255, 255, 255, 0.09);
  border-left-width: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.workflow-task-card.is-path-focused {
  border-color: rgba(216, 255, 114, 0.36);
  background:
    linear-gradient(135deg, rgba(216, 255, 114, 0.1), transparent 42%),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.1) inset,
    0 12px 30px rgba(0, 0, 0, 0.22);
}

.workflow-task-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: start;
}

.workflow-task-card-head div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.workflow-task-card-head em {
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
  white-space: nowrap;
}

.workflow-task-card-head em.is-real {
  color: rgba(216, 255, 114, 0.92);
  border-color: rgba(216, 255, 114, 0.2);
  background: rgba(216, 255, 114, 0.08);
}

.workflow-task-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.workflow-task-card-meta span {
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  font-weight: 760;
}

.workflow-task-card p {
  display: -webkit-box;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(247, 243, 232, 0.58);
  font-size: 10px;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.workflow-task-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px;
  align-items: center;
}

.workflow-task-progress-row b {
  color: var(--wf-muted);
  font-size: 9px;
  font-weight: 760;
  text-align: right;
}

.workflow-task-card.is-validating,
.workflow-task-card.is-submitting,
.workflow-task-card.is-queued,
.workflow-task-card.is-generating,
.workflow-task-card.is-compositing {
  border-left-color: var(--wf-accent);
}

.workflow-task-card.is-completed,
.workflow-task-card.is-succeeded {
  border-left-color: var(--wf-success);
}

.workflow-task-card.is-failed {
  border-left-color: var(--wf-danger);
}

.workflow-task-card progress {
  height: 4px;
}

.workflow-task-actions button {
  min-height: 20px;
  border-radius: 999px;
  font-size: 9px;
}

/* v1.8.118 Task path focus: task cards can highlight and focus their canvas node chain. */

.workflow-log-list {
  display: grid;
  gap: 4px;
}

.workflow-log-list article {
  padding: 5px 6px;
  display: grid;
  gap: 2px;
  border-left: 2px solid rgba(247, 243, 232, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.workflow-log-list article.is-completed {
  border-left-color: var(--wf-success);
}

.workflow-log-list article.is-failed {
  border-left-color: var(--wf-danger);
}

.workflow-log-list strong {
  min-width: 0;
  overflow: hidden;
  color: var(--wf-ink);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-log-list span {
  color: var(--wf-muted);
  font-size: 9px;
}

.workflow-result-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 5px;
}

.workflow-result-strip button {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.workflow-result-strip img {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
}

.workflow-result-strip span {
  display: block;
  padding: 4px;
  overflow: hidden;
  color: var(--wf-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-snapshot-list {
  display: grid;
  gap: 4px;
}

.workflow-snapshot-list button {
  padding: 5px 6px;
  display: grid;
  gap: 2px;
  border-radius: 9px;
  text-align: left;
}

.workflow-snapshot-list strong,
.workflow-snapshot-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-snapshot-list strong {
  color: var(--wf-ink);
  font-size: 10px;
}

.workflow-snapshot-list span {
  color: var(--wf-muted);
  font-size: 9px;
}

.workflow-task-empty {
  min-height: 48px;
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.025);
}

.workflow-command-palette {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: start center;
  padding-top: 12vh;
  background: rgba(4, 5, 4, 0.56);
  backdrop-filter: blur(10px);
}

.workflow-command-palette[hidden] {
  display: none;
}

.workflow-command-card {
  width: min(520px, calc(100vw - 32px));
  padding: 10px;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(216, 255, 114, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045)),
    #11130f;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.52);
}

.workflow-command-card:has(.workflow-command-search-grid) {
  width: min(820px, calc(100vw - 32px));
}

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

.workflow-command-head strong {
  color: var(--wf-ink);
}

.workflow-command-search {
  height: 44px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(216, 255, 114, 0.16);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
}

.workflow-command-search svg {
  width: 15px;
  height: 15px;
  color: rgba(216, 255, 114, 0.78);
}

.workflow-command-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--wf-ink);
  background: transparent;
  font-size: 13px;
  font-weight: 400;
}

.workflow-command-search input::placeholder {
  color: var(--wf-muted);
}

.workflow-command-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 1px;
}

.workflow-command-filters button {
  min-height: 30px;
  padding: 0 7px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
}

.workflow-command-filters button:hover,
.workflow-command-filters button.is-active {
  border-color: rgba(216, 255, 114, 0.24);
  color: var(--wf-ink);
  background: rgba(216, 255, 114, 0.08);
}

.workflow-command-filters span {
  white-space: nowrap;
}

.workflow-command-filters em {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.82);
  background: rgba(255, 255, 255, 0.08);
  font-size: 9px;
  font-style: normal;
}

.workflow-command-filters button.is-active em {
  color: #11130f;
  background: rgba(216, 255, 114, 0.86);
}

.workflow-command-section-title {
  padding: 2px 2px 0;
  color: var(--wf-muted);
  font-size: 10px;
}

.workflow-command-results {
  max-height: min(44vh, 330px);
  display: grid;
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
}

.workflow-command-search-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 8px;
  align-items: stretch;
}

.workflow-command-node-result {
  min-height: 58px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(216, 255, 114, 0.07), transparent 34%),
    rgba(255, 255, 255, 0.045);
  text-align: left;
}

.workflow-command-node-result:hover {
  transform: translateY(-1px);
  border-color: rgba(216, 255, 114, 0.26);
  background:
    linear-gradient(135deg, rgba(216, 255, 114, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.07);
}

.workflow-command-node-result.is-active {
  border-color: rgba(216, 255, 114, 0.42);
  background:
    linear-gradient(135deg, rgba(216, 255, 114, 0.16), transparent 38%),
    rgba(216, 255, 114, 0.07);
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.08) inset,
    0 10px 26px rgba(0, 0, 0, 0.18);
}

.workflow-command-node-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: rgba(216, 255, 114, 0.9);
  background: rgba(216, 255, 114, 0.1);
}

.workflow-command-node-icon svg {
  width: 16px;
  height: 16px;
}

.workflow-command-node-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.workflow-command-node-copy strong,
.workflow-command-node-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-command-node-copy strong {
  color: var(--wf-ink);
  font-size: 12px;
  font-weight: 500;
}

.workflow-command-node-copy small {
  color: var(--wf-muted);
  font-size: 10px;
}

.workflow-command-node-result em {
  color: var(--wf-muted);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.workflow-command-empty {
  min-height: 70px;
  padding: 14px;
  display: grid;
  gap: 4px;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
}

.workflow-command-empty strong {
  color: var(--wf-ink);
  font-size: 12px;
  font-weight: 500;
}

.workflow-command-empty span {
  font-size: 10px;
}

.workflow-command-preview {
  min-width: 0;
  padding: 8px;
  display: grid;
  grid-template-rows: 118px auto auto auto min-content;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(216, 255, 114, 0.06), transparent 34%),
    rgba(255, 255, 255, 0.035);
}

.workflow-command-preview.is-empty {
  min-height: 220px;
  place-items: center;
  text-align: center;
  color: var(--wf-muted);
}

.workflow-command-preview.is-empty svg {
  width: 28px;
  height: 28px;
}

.workflow-command-preview.is-empty strong {
  color: var(--wf-ink);
  font-size: 12px;
  font-weight: 500;
}

.workflow-command-preview.is-empty span {
  max-width: 170px;
  font-size: 10px;
}

.workflow-command-preview-media {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(216, 255, 114, 0.86);
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    rgba(0, 0, 0, 0.2);
  background-size: 18px 18px;
}

.workflow-command-preview-media img,
.workflow-command-preview-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workflow-command-preview-media svg {
  width: 30px;
  height: 30px;
}

.workflow-command-preview-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.workflow-command-preview-copy span,
.workflow-command-preview small {
  color: var(--wf-muted);
  font-size: 10px;
}

.workflow-command-preview-copy strong {
  overflow: hidden;
  color: var(--wf-ink);
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-command-preview-copy p {
  min-height: 30px;
  margin: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.72);
  font-size: 10px;
  line-height: 1.45;
}

.workflow-command-preview-meta,
.workflow-command-preview-contract {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.workflow-command-preview-meta span,
.workflow-command-preview-contract em {
  min-height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  color: var(--wf-muted);
  background: rgba(255, 255, 255, 0.055);
  font-size: 9px;
  font-style: normal;
}

.workflow-command-preview-meta b {
  color: var(--wf-ink);
  font-weight: 500;
}

.workflow-command-preview > small {
  align-self: end;
}

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

.workflow-command-list button {
  min-height: 42px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-radius: 13px;
  text-align: left;
}

.workflow-command-list button:hover {
  border-color: rgba(216, 255, 114, 0.25);
  background: rgba(216, 255, 114, 0.08);
}

.workflow-command-list span {
  color: var(--wf-ink);
  font-size: 12px;
  font-weight: 850;
}

.workflow-command-list em {
  color: var(--wf-muted);
  font-size: 10px;
  font-style: normal;
}

/* v1.8.115 Command search filters: search can narrow nodes by media, generators, results and task state. */

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-search {
  border-color: rgba(18, 18, 18, 0.1);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-filters button {
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-filters button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-filters button.is-active {
  border-color: rgba(18, 18, 18, 0.18);
  background: rgba(18, 18, 18, 0.08);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-filters em {
  color: #141414;
  background: rgba(18, 18, 18, 0.08);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-filters button.is-active em {
  color: #f7f3e8;
  background: #151711;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-node-result {
  border-color: rgba(18, 18, 18, 0.08);
  background:
    linear-gradient(135deg, rgba(21, 23, 17, 0.055), transparent 34%),
    rgba(255, 255, 255, 0.64);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-node-result:hover {
  border-color: rgba(18, 18, 18, 0.18);
  background:
    linear-gradient(135deg, rgba(21, 23, 17, 0.08), transparent 36%),
    rgba(255, 255, 255, 0.86);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-node-result.is-active {
  border-color: rgba(18, 18, 18, 0.26);
  background:
    linear-gradient(135deg, rgba(21, 23, 17, 0.11), transparent 38%),
    rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 1px rgba(18, 18, 18, 0.04) inset,
    0 12px 28px rgba(18, 18, 18, 0.1);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-node-icon {
  color: #151711;
  background: rgba(18, 18, 18, 0.08);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-empty {
  border-color: rgba(18, 18, 18, 0.12);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-preview,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-preview-media {
  border-color: rgba(18, 18, 18, 0.09);
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0.035), transparent 34%),
    rgba(255, 255, 255, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-preview-copy p {
  color: rgba(20, 20, 20, 0.66);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-preview-meta span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-preview-contract em {
  background: rgba(18, 18, 18, 0.055);
}

@media (max-width: 720px) {
  .workflow-command-search-grid {
    grid-template-columns: 1fr;
  }

  .workflow-command-preview {
    grid-template-rows: 96px auto auto auto min-content;
  }
}

.workflow-context-menu {
  position: absolute;
  z-index: 50;
  width: 184px;
  padding: 6px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(216, 255, 114, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.045)),
    rgba(12, 14, 11, 0.92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
}

.workflow-context-menu[hidden] {
  display: none;
}

.workflow-context-menu button {
  min-height: 30px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--wf-ink);
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.workflow-context-menu button:hover {
  border-color: rgba(216, 255, 114, 0.22);
  background: rgba(216, 255, 114, 0.08);
}

.workflow-context-menu button.is-danger {
  color: var(--wf-danger);
}

.workflow-context-menu hr {
  width: 100%;
  height: 1px;
  margin: 3px 0;
  border: 0;
  background: rgba(255, 255, 255, 0.09);
}

.workflow-link-menu {
  position: absolute;
  z-index: 56;
  width: 258px;
  padding: 9px;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  color: var(--wf-ink);
  background:
    radial-gradient(circle at 20% 0, rgba(255, 255, 255, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(35, 36, 39, 0.96), rgba(16, 17, 19, 0.96));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(22px);
  transform: translateY(-8px);
}

.workflow-link-menu[hidden] {
  display: none;
}

.workflow-link-menu-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.workflow-link-menu-head div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.workflow-link-menu-head span {
  color: rgba(246, 247, 247, 0.42);
  font-size: 10px;
  font-weight: 300;
}

.workflow-link-menu-head strong {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.88);
  font-size: 13px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-link-menu > small {
  color: rgba(246, 247, 247, 0.44);
  font-size: 10px;
  font-weight: 300;
  line-height: 1.35;
}

.workflow-link-choice-list {
  display: grid;
  gap: 7px;
}

.workflow-link-choice-list button[data-link-create] {
  min-height: 56px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title meta"
    "icon hint hint";
  gap: 2px 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  color: rgba(246, 247, 247, 0.84);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.workflow-link-choice-list button[data-link-create]:hover {
  border-color: rgba(246, 247, 247, 0.22);
  background: rgba(255, 255, 255, 0.075);
  transform: translateY(-1px);
}

.workflow-link-choice-list button[data-link-create] svg {
  grid-area: icon;
  width: 17px;
  height: 17px;
  padding: 7px;
  box-sizing: content-box;
  border-radius: 10px;
  color: #111315;
  background: rgba(246, 247, 247, 0.86);
}

.workflow-link-choice-list button[data-link-create] strong {
  grid-area: title;
  color: rgba(246, 247, 247, 0.9);
  font-size: 12px;
  font-weight: 300;
}

.workflow-link-choice-list button[data-link-create] span {
  grid-area: meta;
  justify-self: end;
  color: rgba(246, 247, 247, 0.48);
  font-size: 10px;
  font-weight: 300;
}

.workflow-link-choice-list button[data-link-create] em {
  grid-area: hint;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.38);
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-link-choice-list button.is-video svg {
  background: rgba(135, 191, 255, 0.9);
}

.workflow-link-choice-list button.is-result svg {
  background: rgba(116, 228, 165, 0.88);
}

.workflow-primary-button.is-running,
.workflow-run-button.is-running {
  color: #10130d;
  background: linear-gradient(90deg, #d8ff72, #7ac7ff, #d8ff72);
  background-size: 220% 100%;
  animation: workflowFlow 1.2s linear infinite;
}

@keyframes workflowDash {
  to { stroke-dashoffset: -17; }
}

@keyframes workflowFlow {
  to { background-position: 200% 0; }
}

@keyframes workflowSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1280px) {
  .workflow-canvas-shell {
    grid-template-columns: 184px minmax(0, 1fr) 280px;
    grid-template-rows: 48px minmax(620px, 1fr) 172px;
  }

  .workflow-topbar {
    grid-template-columns: minmax(160px, 0.8fr) minmax(260px, 1fr) minmax(420px, auto);
  }

  .workflow-action-group.is-secondary {
    display: none;
  }

  .workflow-console-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }

  .workflow-console-grid section:last-child {
    display: none;
  }
}

@media (max-width: 900px) {
  body[data-active-view="aiCanvas"] .app-shell {
    grid-template-columns: 1fr;
  }

  body[data-active-view="aiCanvas"] .sidebar {
    display: none;
  }

  .workflow-canvas-shell {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 68svh auto auto;
    grid-template-areas:
      "top"
      "left"
      "stage"
      "right"
      "tasks";
    overflow: visible;
  }

  .workflow-topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .workflow-actions,
  .workflow-run-summary {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .workflow-sidebar {
    grid-template-columns: 1fr;
    max-height: 230px;
  }

  .workflow-sidebar-tabs {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--wf-line);
  }

  .workflow-sidebar-tabs button {
    min-width: 54px;
  }

  .workflow-canvas-surface {
    min-height: 68svh;
  }

  .workflow-canvas-status,
  .workflow-minimap {
    display: none;
  }

  .workflow-inspector {
    max-height: none;
    grid-template-columns: 1fr;
  }

  .workflow-taskbar {
    grid-template-columns: 1fr;
  }

  .workflow-console-grid {
    grid-template-columns: 1fr;
  }

  .workflow-task-list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}

.ai-canvas-pro-shell {
  --ai-bg-base: var(--bg);
  --ai-bg-panel: var(--panel-strong);
  --ai-bg-surface: var(--panel);
  --ai-text: var(--text);
  --ai-muted: var(--muted);
  --ai-border: var(--line);
  --ai-banana: var(--text);
  --ai-kling: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ai-text);
  background: var(--ai-bg-base);
}

.ai-canvas-navbar {
  height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--ai-border);
  background: var(--ai-bg-panel);
}

.ai-canvas-navbar span,
.ai-canvas-history-head span {
  display: block;
  color: var(--ai-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-canvas-navbar strong,
.ai-canvas-history-head strong {
  display: block;
  margin-top: 3px;
  color: var(--ai-text);
  font-size: 16px;
  line-height: 1.2;
}

.ai-canvas-api-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.ai-canvas-api-status span {
  padding: 5px 11px;
  border: 1px solid var(--ai-border);
  border-radius: 999px;
  color: var(--ai-muted);
  background: var(--ai-bg-surface);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.ai-canvas-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 320px minmax(420px, 1fr) 260px;
}

.ai-canvas-panel {
  min-width: 0;
  min-height: 0;
  padding: 24px;
  overflow: auto;
  background: var(--ai-bg-panel);
}

.ai-canvas-left {
  border-right: 1px solid var(--ai-border);
}

.ai-canvas-right {
  border-left: 1px solid var(--ai-border);
}

.ai-canvas-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--ai-bg-base);
  background-image: radial-gradient(color-mix(in srgb, var(--ai-text) 14%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}

.ai-canvas-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  border-radius: 10px;
  background: var(--ai-bg-base);
}

.ai-canvas-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  color: var(--ai-muted);
  background: transparent;
  font-weight: 850;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.ai-canvas-tabs button.active:first-child {
  color: var(--ai-banana);
  background: var(--ai-bg-surface);
}

.ai-canvas-tabs button.active:last-child {
  color: var(--ai-kling);
  background: var(--ai-bg-surface);
}

.ai-canvas-ref-box {
  height: 140px;
  margin-bottom: 10px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 2px dashed var(--ai-border);
  border-radius: 8px;
  color: var(--ai-muted);
  background: var(--ai-bg-base);
  cursor: pointer;
  overflow: hidden;
}

.ai-canvas-ref-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-canvas-ref-box svg {
  width: 28px;
  height: 28px;
}

.ai-canvas-ref-meta {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: var(--ai-muted);
  font-size: 12px;
}

.ai-canvas-ref-meta button,
.ai-canvas-tool {
  border: 1px solid var(--ai-border);
  border-radius: 999px;
  color: var(--ai-text);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

.ai-canvas-ref-meta button {
  padding: 5px 10px;
  font-size: 12px;
}

.ai-canvas-settings {
  display: none;
  gap: 16px;
}

.ai-canvas-settings.active {
  display: grid;
}

.ai-canvas-settings label {
  display: grid;
  gap: 8px;
}

.ai-canvas-settings label span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--ai-muted);
  font-size: 12px;
  font-weight: 800;
}

.ai-canvas-settings textarea,
.ai-canvas-settings select,
.ai-canvas-settings input[type="range"] {
  width: 100%;
  min-width: 0;
}

.ai-canvas-settings textarea,
.ai-canvas-settings select {
  border: 1px solid var(--ai-border);
  border-radius: 8px;
  color: var(--ai-text);
  background: var(--ai-bg-surface);
  outline: none;
}

.ai-canvas-settings textarea {
  padding: 12px;
  resize: vertical;
  line-height: 1.65;
}

.ai-canvas-settings select {
  min-height: 42px;
  padding: 0 10px;
}

.ai-canvas-settings textarea:focus,
.ai-canvas-settings select:focus {
  border-color: var(--ai-banana);
}

.ai-canvas-settings[data-ai-canvas-panel="kling"] textarea:focus,
.ai-canvas-settings[data-ai-canvas-panel="kling"] select:focus {
  border-color: var(--ai-kling);
}

.ai-canvas-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ai-canvas-settings input[type="range"] {
  accent-color: var(--ai-banana);
}

.ai-canvas-settings[data-ai-canvas-panel="kling"] input[type="range"] {
  accent-color: var(--ai-kling);
}

.ai-canvas-switch {
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--ai-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ai-text) 3%, transparent);
}

.ai-canvas-switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--ai-kling);
}

.ai-canvas-switch strong,
.ai-canvas-switch small {
  display: block;
}

.ai-canvas-switch strong {
  color: var(--ai-text);
  font-size: 13px;
}

.ai-canvas-switch small {
  margin-top: 3px;
  color: var(--ai-muted);
  font-size: 12px;
  line-height: 1.45;
}

.ai-canvas-primary {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: var(--ai-bg-base);
  font-weight: 950;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease;
}

.ai-canvas-primary:hover {
  transform: translateY(-1px);
}

.ai-canvas-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ai-canvas-primary.banana {
  background: var(--ai-banana);
}

.ai-canvas-primary.kling {
  background: var(--ai-kling);
}

.ai-canvas-main-item {
  position: relative;
  width: min(46vw, 460px);
  height: min(46vw, 460px);
  min-width: 280px;
  min-height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--ai-bg-surface);
  box-shadow: var(--shadow);
}

.ai-canvas-main-item.selected {
  border-color: var(--ai-banana);
}

.ai-canvas-main-item img,
.ai-canvas-main-item video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.ai-canvas-main-item.is-loading {
  display: grid;
  place-items: center;
  gap: 12px;
  color: var(--ai-muted);
}

.ai-canvas-loader {
  width: 42px;
  height: 42px;
  border: 4px solid var(--ai-bg-panel);
  border-top-color: var(--ai-banana);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.ai-canvas-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 24px;
  color: var(--ai-muted);
  text-align: center;
}

.ai-canvas-empty strong {
  color: var(--ai-text);
  font-size: 18px;
}

.ai-canvas-empty span {
  max-width: 260px;
  font-size: 13px;
  line-height: 1.6;
}

.ai-canvas-floating-toolbar {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  border: 1px solid var(--ai-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.ai-canvas-floating-toolbar.visible {
  opacity: 1;
  pointer-events: auto;
}

.ai-canvas-tool {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 850;
}

.ai-canvas-tool:hover {
  background: var(--ai-bg-surface);
}

.ai-canvas-status {
  margin: 16px 0;
  padding: 11px 12px;
  border: 1px solid var(--ai-border);
  border-radius: 8px;
  color: var(--ai-muted);
  background: var(--ai-bg-surface);
  font-size: 12px;
  line-height: 1.55;
}

.ai-canvas-status[data-tone="success"] {
  color: #b7ff8a;
}

.ai-canvas-status[data-tone="error"] {
  color: #ff8a8a;
}

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

.ai-canvas-history-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--ai-bg-surface);
  cursor: pointer;
}

.ai-canvas-history-item.selected {
  border-color: var(--ai-banana);
}

.ai-canvas-history-item img,
.ai-canvas-history-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-canvas-history-item em {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--ai-text);
  background: rgba(0, 0, 0, 0.55);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.ai-canvas-history-empty {
  grid-column: 1 / -1;
  min-height: 120px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--ai-border);
  border-radius: 10px;
  color: var(--ai-muted);
  font-size: 13px;
  text-align: center;
}

.template-upload-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.account-center-panel {
  max-width: 1380px;
  margin: 0 auto;
}

.account-overview-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.45fr) repeat(3, minmax(150px, 0.85fr));
  gap: 12px;
  margin-bottom: 12px;
}

.account-overview-grid article,
.account-list-card,
.account-empty-state {
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: 18px;
  background: rgba(7, 10, 12, 0.42);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.14);
}

.account-overview-grid article {
  min-width: 0;
  padding: 18px;
  display: grid;
  gap: 8px;
}

.account-overview-grid span,
.account-list-head small,
.account-record-list span,
.account-record-list small,
.account-overview-grid small {
  color: var(--muted);
}

.account-overview-grid strong {
  color: var(--text);
  font-size: clamp(24px, 3vw, 42px);
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

.account-hero-card {
  background:
    linear-gradient(135deg, rgba(98, 241, 223, 0.13), transparent 58%),
    rgba(7, 10, 12, 0.5) !important;
}

.account-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.admin-user-management-panel {
  margin: 0 0 14px;
}

.permission-upgrade-approval-panel {
  margin: 0 0 14px;
}

.permission-request-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.permission-request-toolbar select {
  width: min(220px, 100%);
  min-height: 38px;
  border: 1px solid rgba(150, 242, 229, 0.12);
  border-radius: 10px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  outline: none;
}

.permission-request-list {
  display: grid;
  gap: 10px;
}

.permission-request-row {
  min-width: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(150, 242, 229, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.permission-request-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.permission-request-main strong {
  color: var(--text);
}

.permission-request-main span,
.permission-request-main small,
.permission-request-meta span {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.permission-request-meta,
.permission-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.permission-request-meta span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  font-size: 12px;
}

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

.admin-user-stats article {
  min-width: 0;
  padding: 12px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(150, 242, 229, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.admin-user-stats span,
.admin-user-stats small,
.admin-user-main span,
.admin-user-main small,
.admin-user-metrics span {
  color: var(--muted);
}

.admin-user-stats strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.admin-user-toolbar,
.admin-user-create {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) auto;
  gap: 8px;
  align-items: center;
}

.admin-user-create {
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(112px, 0.7fr) minmax(100px, 0.7fr) auto;
}

.admin-user-toolbar input,
.admin-user-toolbar select,
.admin-user-create input,
.admin-user-create select,
.account-user-detail-form input,
.account-user-detail-form select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(150, 242, 229, 0.12);
  border-radius: 10px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  outline: none;
}

.admin-user-list {
  display: grid;
  gap: 10px;
}

.admin-user-row {
  min-width: 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(150, 242, 229, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.admin-user-row:hover,
.admin-user-row:focus-visible {
  border-color: rgba(150, 242, 229, 0.24);
  background: rgba(255, 255, 255, 0.055);
  transform: translateY(-1px);
  outline: none;
}

.admin-user-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-user-main strong,
.admin-user-main span,
.admin-user-main small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-user-main strong {
  color: var(--text);
}

.admin-user-row label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-user-row label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.admin-user-metrics,
.admin-user-actions,
.admin-user-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-user-metrics {
  justify-content: flex-end;
}

.admin-user-metrics span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  font-size: 12px;
}

.admin-user-metrics b {
  color: var(--text);
}

.admin-user-actions {
  justify-content: flex-end;
}

.admin-user-pagination {
  justify-content: flex-end;
}

.admin-user-pagination span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.account-user-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 24px;
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(14px);
}

.account-user-card {
  width: min(1080px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
  padding: 18px;
}

.account-user-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.account-user-head h3 {
  margin: 3px 0 4px;
  color: var(--text);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.account-user-head span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.account-user-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.account-user-summary span {
  min-width: 0;
  min-height: 66px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(150, 242, 229, 0.1);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
}

.account-user-summary b {
  color: var(--text);
  font-size: 18px;
}

.account-user-detail-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid rgba(150, 242, 229, 0.1);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.account-user-detail-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.account-user-detail-form label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.account-user-detail-form .wide,
.account-user-form-actions.wide {
  grid-column: 1 / -1;
}

.account-user-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-user-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.account-user-detail-grid section {
  min-width: 0;
  border: 1px solid rgba(150, 242, 229, 0.1);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.account-user-detail-grid section.wide {
  grid-column: 1 / -1;
}

.account-record-list.compact article {
  padding: 10px;
  border-radius: 12px;
}

.account-list-empty.compact {
  padding: 16px;
  border-radius: 12px;
  box-shadow: none;
}

.account-recharge-card {
  margin: 0 0 14px;
}

.account-manual-credit-note {
  padding: 16px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
}

.account-manual-credit-note svg {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.account-manual-credit-note strong,
.account-manual-credit-note span {
  display: block;
}

.account-manual-credit-note strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.account-manual-credit-note span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.account-recharge-form {
  display: grid;
  grid-template-columns: minmax(180px, 260px) auto auto 1fr;
  gap: 10px;
  align-items: end;
}

.account-recharge-form label {
  margin: 0;
}

.account-recharge-form > small {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
}

.account-recharge-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-recharge-presets button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(150, 242, 229, 0.14);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 850;
}

.account-payment-list {
  display: grid;
  gap: 8px;
}

.account-payment-list article {
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(150, 242, 229, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.account-payment-list strong,
.account-payment-list span {
  display: block;
}

.account-payment-list b {
  color: var(--text);
  white-space: nowrap;
}

.account-center-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
  gap: 14px;
  align-items: start;
}

.account-list-card {
  min-width: 0;
  padding: 16px;
  display: grid;
  gap: 12px;
}

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

.account-list-head span {
  color: var(--text);
  font-weight: 850;
}

.account-record-list {
  display: grid;
  gap: 8px;
}

.account-record-list article {
  min-width: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(150, 242, 229, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.account-record-list article > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.account-record-list strong,
.account-record-list b,
.account-record-list span,
.account-record-list small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-record-list b {
  justify-self: end;
  color: var(--text);
  font-size: 15px;
}

.account-record-list a {
  justify-self: end;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.account-task-result-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.account-task-result-links a {
  justify-self: auto;
}

.account-record-list .is-credit b {
  color: var(--lime);
}

.account-record-list .is-debit b {
  color: #ff8a78;
}

.account-credit-ledger-card {
  align-self: start;
}

.account-credit-ledger-list {
  max-height: 430px;
  overflow: auto;
  padding-right: 3px;
  gap: 6px;
}

.account-credit-ledger-list article {
  padding: 8px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  border-radius: 10px;
}

.account-credit-ledger-list strong,
.account-credit-ledger-list b {
  font-size: 13px;
}

.account-credit-ledger-list span,
.account-credit-ledger-list small {
  font-size: 11px;
  line-height: 1.35;
}

.account-generation-record-card {
  min-width: 0;
}

.account-generation-video-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.account-generation-card {
  min-width: 0;
  overflow: hidden;
  display: grid;
  align-content: start;
  border: 1px solid rgba(150, 242, 229, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.account-generation-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #050505;
}

.account-generation-media video,
.account-generation-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #050505;
}

.account-generation-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  background:
    linear-gradient(135deg, rgba(98, 241, 223, 0.08), transparent),
    rgba(7, 10, 12, 0.54);
  text-align: center;
}

.account-generation-placeholder svg {
  width: 28px;
  height: 28px;
}

.account-generation-copy {
  min-width: 0;
  padding: 10px;
  display: grid;
  gap: 6px;
}

.account-generation-copy strong,
.account-generation-copy span,
.account-generation-copy small,
.account-generation-copy em {
  min-width: 0;
  display: block;
  overflow-wrap: anywhere;
}

.account-generation-copy strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.account-generation-copy span,
.account-generation-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.account-generation-copy em {
  color: #ff8a78;
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
}

.account-generation-copy .generation-result-actions {
  margin-top: 2px;
  justify-content: flex-start;
}

.account-generation-copy .generation-result-actions a,
.account-generation-copy .generation-result-action-button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 11px;
}

.account-list-empty,
.account-empty-state {
  padding: 24px;
  display: grid;
  place-items: center;
  gap: 10px;
  color: var(--muted);
  text-align: center;
}

.account-empty-state svg {
  width: 34px;
  height: 34px;
  color: var(--cyan);
}

.account-empty-state strong {
  color: var(--text);
  font-size: 20px;
}

.account-empty-state span {
  max-width: 460px;
}

.lucide-fallback {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-theme="light"] {
  background:
    linear-gradient(115deg, rgba(18, 184, 166, 0.06), transparent 34%),
    linear-gradient(245deg, rgba(255, 200, 87, 0.05), transparent 30%),
    #f4f6f8;
}

body[data-theme="dark"] {
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    var(--bg);
  background-size: 42px 42px, 42px 42px, auto;
}

body[data-theme="light"] .app-shell {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent 240px);
}

body[data-theme="light"] .sidebar {
  border-right-color: rgba(18, 18, 18, 0.1);
  background: rgba(249, 248, 244, 0.94);
  box-shadow: 8px 0 28px rgba(18, 18, 18, 0.035);
}

body[data-theme="light"] .brand-mark {
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 12px 26px rgba(18, 18, 18, 0.08);
}

body[data-theme="light"] .eyebrow {
  color: #77736a;
}

body[data-theme="light"] .nav-item {
  color: #625f58;
}

body[data-theme="light"] .nav-item:hover,
body[data-theme="light"] .nav-item.active {
  border-color: #141414;
  color: #f6f5f1;
  background: #141414;
  box-shadow: none;
}

body[data-theme="light"] .side-status {
  border-color: rgba(18, 18, 18, 0.1);
  background: rgba(255, 255, 255, 0.54);
  box-shadow: none;
}

body[data-theme="light"] .side-status strong {
  color: #192126;
}

body[data-theme="light"] .side-generate-card,
body[data-theme="light"] .side-creator-card,
body[data-theme="light"] .theme-toggle-card,
body[data-theme="light"] .side-status.is-logged-in {
  border-color: rgba(18, 18, 18, 0.18);
  background: rgba(18, 18, 18, 0.04);
}

body[data-theme="light"] .topbar {
  border-bottom-color: rgba(18, 18, 18, 0.1);
  background: rgba(246, 245, 241, 0.86);
  backdrop-filter: blur(20px);
}

body[data-theme="light"] .main {
  padding: 18px;
}

body[data-theme="light"] .panel,
body[data-theme="light"] .template-library-panel,
body[data-theme="light"] .template-category-shell,
body[data-theme="light"] .tag-manager-panel,
body[data-theme="light"] .template-preview-panel,
body[data-theme="light"] .template-edit-panel,
body[data-theme="light"] .template-upload-section,
body[data-theme="light"] .template-generation-panel,
body[data-theme="light"] .batch-panel,
body[data-theme="light"] .creator-control-panel,
body[data-theme="light"] .creator-board-panel,
body[data-theme="light"] .creator-result-panel,
body[data-theme="light"] .creator-canvas-tools,
body[data-theme="light"] .creator-canvas-board,
body[data-theme="light"] .creator-canvas-results,
body[data-theme="light"] .canvas-toolbar,
body[data-theme="light"] .canvas-node,
body[data-theme="light"] .creator-model-row,
body[data-theme="light"] .creator-task-tab,
body[data-theme="light"] .creator-task-meta,
body[data-theme="light"] .creator-mode-tab,
body[data-theme="light"] .creator-model-pill,
body[data-theme="light"] .creator-batch-summary span,
body[data-theme="light"] .creator-batch-notes article,
body[data-theme="light"] .creator-upload-card,
body[data-theme="light"] .creator-upload-list article,
body[data-theme="light"] .creator-board-card,
body[data-theme="light"] .canvas-asset-card,
body[data-theme="light"] .canvas-result-card,
body[data-theme="light"] .generation-template-picker,
body[data-theme="light"] .generation-api-status,
body[data-theme="light"] .batch-node-config,
body[data-theme="light"] .generation-duration-control,
body[data-theme="light"] .account-overview-grid article,
body[data-theme="light"] .account-list-card,
body[data-theme="light"] .account-generation-card,
body[data-theme="light"] .account-user-card,
body[data-theme="light"] .account-user-summary span,
body[data-theme="light"] .account-user-detail-form,
body[data-theme="light"] .account-user-detail-grid section,
body[data-theme="light"] .account-empty-state {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
}

body[data-theme="light"] .account-record-list article {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(246, 246, 246, 0.78);
}

body[data-theme="light"] .account-generation-placeholder {
  color: rgba(24, 24, 24, 0.52);
  background:
    linear-gradient(135deg, rgba(24, 24, 24, 0.055), transparent),
    rgba(246, 246, 243, 0.92);
}

body[data-theme="light"] .account-payment-list article,
body[data-theme="light"] .account-recharge-presets button,
body[data-theme="light"] .admin-user-stats article,
body[data-theme="light"] .admin-user-row,
body[data-theme="light"] .permission-request-row {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(246, 246, 246, 0.82);
}

body[data-theme="light"] .admin-user-toolbar input,
body[data-theme="light"] .admin-user-toolbar select,
body[data-theme="light"] .admin-user-create input,
body[data-theme="light"] .admin-user-create select,
body[data-theme="light"] .account-user-detail-form input,
body[data-theme="light"] .account-user-detail-form select,
body[data-theme="light"] .admin-user-metrics span,
body[data-theme="light"] .permission-request-toolbar select,
body[data-theme="light"] .permission-request-meta span {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.9);
}

body[data-theme="light"] .creator-result-head,
body[data-theme="light"] .creator-result-copy {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.88);
}

body[data-theme="light"] .creator-result-grid {
  background: #f3f3f0;
}

body[data-theme="light"] .creator-result-card,
body[data-theme="light"] .creator-result-media {
  background: #e8e8e3;
}

body[data-theme="light"] .creator-section,
body[data-theme="light"] .creator-inline-upload,
body[data-theme="light"] .creator-quick-model,
body[data-theme="light"] .creator-count-compact,
body[data-theme="light"] .creator-submit-row,
body[data-theme="light"] .creator-result-toolbar,
body[data-theme="light"] .creator-result-empty {
  border-color: rgba(15, 23, 42, 0.12);
  background:
    linear-gradient(180deg, rgba(20, 20, 20, 0.025), transparent 76%),
    rgba(255, 255, 255, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 18px 42px rgba(15, 23, 42, 0.055);
}

body[data-theme="light"] .creator-task-group-tab:not(.active),
body[data-theme="light"] .creator-task-tab:not(.active),
body[data-theme="light"] .creator-console-panel .creator-model-pill:not(.active),
body[data-theme="light"] .creator-mode-tab:not(.active),
body[data-theme="light"] .creator-model-pill:not(.active),
body[data-theme="light"] .creator-upload-card.compact,
body[data-theme="light"] .creator-upload-list article,
body[data-theme="light"] .creator-prompt-box,
body[data-theme="light"] .creator-setting-grid label {
  border-color: rgba(20, 20, 20, 0.14);
  background:
    linear-gradient(180deg, rgba(20, 20, 20, 0.024), transparent 70%),
    rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 12px 26px rgba(15, 23, 42, 0.045);
}

body[data-theme="light"] .creator-prompt-box input,
body[data-theme="light"] .creator-prompt-box textarea,
body[data-theme="light"] .creator-count-compact input,
body[data-theme="light"] .creator-setting-grid select,
body[data-theme="light"] .creator-setting-grid input,
body[data-theme="light"] .creator-model-select-row select,
body[data-theme="light"] .creator-path-box select {
  border-color: rgba(20, 20, 20, 0.16);
  background:
    linear-gradient(180deg, rgba(20, 20, 20, 0.018), transparent),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    0 1px 0 rgba(15, 23, 42, 0.03);
}

body[data-theme="light"] .creator-task-group-tab.active,
body[data-theme="light"] .creator-task-tab.active,
body[data-theme="light"] .creator-console-panel .creator-model-pill.active {
  color: #f6f5f1;
  border-color: #141414;
  background: #141414;
  box-shadow: none;
}

body[data-theme="light"] .creator-task-group-tab.active strong,
body[data-theme="light"] .creator-task-group-tab.active span,
body[data-theme="light"] .creator-task-tab.active strong,
body[data-theme="light"] .creator-task-tab.active span,
body[data-theme="light"] .creator-console-panel .creator-model-pill.active strong,
body[data-theme="light"] .creator-console-panel .creator-model-pill.active small {
  color: inherit;
}

body[data-theme="light"] .account-hero-card {
  background:
    linear-gradient(135deg, rgba(20, 20, 20, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.82) !important;
}

body[data-theme="light"] .generation-picker-backdrop {
  background: rgba(15, 23, 42, 0.28);
}

body[data-theme="light"] .generation-picker-panel {
  border-color: rgba(15, 23, 42, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 260px),
    rgba(246, 246, 246, 0.96);
  box-shadow: 0 28px 86px rgba(15, 23, 42, 0.16);
}

body[data-theme="light"] .generation-template-choice-card,
body[data-theme="light"] .generation-picker-search,
body[data-theme="light"] .generation-selected-media {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.7);
}

body[data-theme="light"] .template-library-panel {
  background: transparent;
  box-shadow: none;
}

body[data-theme="light"] .template-clean-toolbar {
  margin-bottom: 12px;
}

body[data-theme="light"] .template-category-shell {
  margin-bottom: 14px;
  padding: 12px;
}

body[data-theme="light"] .search-box {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.055);
}

body[data-theme="light"] .search-box input {
  color: #192126;
}

body[data-theme="light"] .search-box input::placeholder {
  color: #9aa4ad;
}

body[data-theme="light"] .text-button {
  border-color: rgba(18, 184, 166, 0.18);
  color: #0f9f90;
  background: rgba(18, 184, 166, 0.06);
}

body[data-theme="light"] .primary-button,
body[data-theme="light"] .batch-drop-zone em,
body[data-theme="light"] .batch-primary-button {
  color: #062b26;
  background: linear-gradient(135deg, #53ead8, #a8f06a);
  box-shadow: 0 16px 34px rgba(18, 184, 166, 0.16);
}

body[data-theme="light"] .top-upload-button.is-admin-entry,
body[data-theme="light"] .top-upload-button.is-login-entry {
  border-color: rgba(18, 18, 18, 0.12);
  color: #686868;
  background: rgba(18, 18, 18, 0.045);
  box-shadow: none;
}

body[data-theme="light"] .text-button.danger {
  border-color: rgba(255, 123, 105, 0.24);
  color: #d64b3d;
  background: rgba(255, 123, 105, 0.08);
}

body[data-theme="light"] .template-category-filter button,
body[data-theme="light"] .template-type-tabs button,
body[data-theme="light"] .tag-manager-mode button,
body[data-theme="light"] .template-content-tag-picker button {
  border-color: rgba(15, 23, 42, 0.1);
  color: #48535d;
  background: rgba(255, 255, 255, 0.8);
}

body[data-theme="light"] .template-category-filter button.active,
body[data-theme="light"] .template-category-filter button:hover,
body[data-theme="light"] .template-type-tabs button.active,
body[data-theme="light"] .template-type-tabs button:hover,
body[data-theme="light"] .tag-manager-mode button.active,
body[data-theme="light"] .template-content-tag-picker button.active {
  border-color: rgba(15, 23, 42, 0.12);
  color: #fff;
  background: #192126;
}

body[data-theme="light"] .tag-manager-add input,
body[data-theme="light"] .tag-manager-row input,
body[data-theme="light"] .template-edit-grid input,
body[data-theme="light"] .template-edit-grid select,
body[data-theme="light"] .template-content-tag-values textarea,
body[data-theme="light"] .template-content-tags-row select,
body[data-theme="light"] .template-content-tags-row textarea,
body[data-theme="light"] .template-content-tags-grid textarea,
body[data-theme="light"] .template-upload-grid input,
body[data-theme="light"] .template-upload-grid select,
body[data-theme="light"] .template-upload-grid textarea,
body[data-theme="light"] .template-upload-flow-controls select,
body[data-theme="light"] .template-upload-switch,
body[data-theme="light"] .template-slot-card input,
body[data-theme="light"] .template-slot-card select,
body[data-theme="light"] .template-slot-card textarea,
body[data-theme="light"] .batch-config-panel input,
body[data-theme="light"] .batch-config-panel select,
body[data-theme="light"] .batch-config-panel textarea,
body[data-theme="light"] .generation-count-display,
body[data-theme="light"] .generation-fixed-duration-field strong,
body[data-theme="light"] .generation-template-picker select,
body[data-theme="light"] .generation-picker-search input,
body[data-theme="light"] .admin-access-card input {
  border-color: rgba(15, 23, 42, 0.1);
  color: #192126;
  background: rgba(255, 255, 255, 0.84);
}

body[data-theme="light"] .template-card:focus-visible .template-video-frame,
body[data-theme="light"] .template-card:hover .template-video-frame {
  --video-scale: 1;
  box-shadow: none;
}

body[data-theme="light"] .template-video-frame {
  background: #e8edf1;
  box-shadow: none;
}

body[data-theme="light"] .template-video-overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.42), transparent 30%);
}

body[data-theme="light"] .template-type-badge {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(20, 24, 28, 0.58);
}

body[data-theme="light"] .template-video-placeholder,
body[data-theme="light"] .empty-state,
body[data-theme="light"] .template-upload-preview,
body[data-theme="light"] .template-slot-card,
body[data-theme="light"] .template-slot-card.is-empty,
body[data-theme="light"] .batch-drop-zone,
body[data-theme="light"] .batch-drop-zone.folder-import,
body[data-theme="light"] .generation-output,
body[data-theme="light"] .generation-history-panel,
body[data-theme="light"] .generation-history-toolbar,
body[data-theme="light"] .generation-history-card,
body[data-theme="light"] .generation-final-video-card,
body[data-theme="light"] .generation-history-empty,
body[data-theme="light"] .template-upload-status {
  border-color: rgba(15, 23, 42, 0.08);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.62);
}

body[data-theme="light"] .batch-warning {
  color: #8a5b00;
  background: rgba(255, 200, 87, 0.14);
}

body[data-theme="light"] .admin-access-backdrop {
  background: rgba(15, 23, 42, 0.3);
}

body[data-theme="light"] .admin-access-card,
body[data-theme="light"] .admin-lock-overlay > div {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.96);
}

body[data-theme="light"] {
  --bg: #f4f4f4;
  --bg-2: #ececec;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-strong: rgba(255, 255, 255, 0.98);
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.22);
  --text: #151515;
  --muted: #747474;
  --cyan: #171717;
  --lime: #9a9a9a;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), transparent 260px),
    #f4f4f4;
}

body[data-theme="dark"] {
  --bg: #080808;
  --bg-2: #111;
  --panel: rgba(18, 18, 18, 0.9);
  --panel-strong: rgba(24, 24, 24, 0.98);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.28);
  --text: #f3f3f3;
  --muted: #9a9a9a;
  --cyan: #f4f4f4;
  --lime: #8f8f8f;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 260px),
    #080808;
  background-size: auto;
}

body[data-theme] .brand-mark {
  color: #f6f6f1;
  border-color: rgba(0, 0, 0, 0.14);
  background: #111;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}

body[data-theme] .brand-mark::before {
  border-color: rgba(255, 255, 255, 0.12);
}

body[data-theme="dark"] .brand-mark {
  color: #f3f3f3;
  border-color: rgba(255, 255, 255, 0.16);
  background: #f5f5f1;
}

body[data-theme="dark"] .brand-mark::before {
  border-color: rgba(0, 0, 0, 0.12);
}

body[data-theme="dark"] .brand-mark span {
  color: #111;
}

body[data-theme] .brand-mark em {
  background: #f5f5f1;
}

body[data-theme="dark"] .brand-mark em {
  background: #111;
}

body[data-theme] .main {
  padding: 14px;
}

body[data-theme] .topbar {
  min-height: 64px;
  margin: -14px -14px 14px;
  padding: 12px 14px;
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: none;
  backdrop-filter: blur(22px);
}

body[data-theme] .topbar h2 {
  font-size: 24px;
  font-weight: 760;
  letter-spacing: 0;
}

body[data-theme] .panel,
body[data-theme] .template-category-shell,
body[data-theme] .tag-manager-panel,
body[data-theme] .template-preview-panel,
body[data-theme] .template-edit-panel,
body[data-theme] .template-upload-mode-fields,
body[data-theme] .template-upload-section,
body[data-theme] .template-generation-panel,
body[data-theme] .batch-panel,
body[data-theme] .generation-template-picker,
body[data-theme] .batch-node-config {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: none;
}

body[data-theme] .template-library-panel {
  background: transparent;
  box-shadow: none;
}

body[data-theme] .template-clean-toolbar {
  margin-bottom: 5px;
}

body[data-theme] .search-box {
  min-height: 38px;
  border-radius: 3px;
  border-color: var(--line);
  background: var(--panel-strong);
  box-shadow: none;
}

body[data-theme] .search-box input {
  color: var(--text);
}

body[data-theme] .search-box input::placeholder {
  color: #b2b2b2;
}

body[data-theme] .template-category-shell {
  margin-bottom: 5px;
  padding: 7px 0;
  border-width: 1px 0;
  border-radius: 0;
  background: transparent;
}

body[data-theme] .template-category-head {
  top: 7px;
  right: 0;
}

body[data-theme] .template-category-filter {
  gap: 5px;
}

body[data-theme] .template-tag-buttons {
  gap: 5px;
}

body[data-theme] .template-category-filter button,
body[data-theme] .template-type-tabs button,
body[data-theme] .tag-manager-mode button,
body[data-theme] .template-content-tag-picker button {
  min-height: 30px;
  padding: 0 10px;
  border-color: var(--line);
  border-radius: 3px;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

body[data-theme] .template-category-filter button.active,
body[data-theme] .template-category-filter button:hover,
body[data-theme] .template-type-tabs button.active,
body[data-theme] .template-type-tabs button:hover,
body[data-theme] .tag-manager-mode button.active,
body[data-theme] .template-content-tag-picker button.active {
  border-color: var(--text);
  color: var(--bg);
  background: var(--text);
}

body[data-theme] .primary-button,
body[data-theme] .batch-drop-zone em,
body[data-theme] .batch-primary-button {
  border-color: var(--text);
  color: var(--bg);
  background: var(--text);
  box-shadow: none;
}

body[data-theme] .top-upload-button.is-admin-entry,
body[data-theme] .top-upload-button.is-login-entry {
  border-color: var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  box-shadow: none;
}

body[data-theme] .template-save-button {
  min-width: 104px;
  min-height: 40px;
  padding: 0 14px;
  display: inline-grid;
  grid-template-columns: auto auto;
  place-content: center;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius);
  border-color: rgba(20, 20, 20, 0.12);
  color: #141414;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

body[data-theme] .template-save-button:hover {
  border-color: rgba(20, 20, 20, 0.28);
  background: #f7f7f7;
}

body[data-theme] .template-save-button:active,
body[data-theme] .template-save-button.is-saving,
body[data-theme] .template-save-button.is-saved {
  border-color: var(--text);
  color: var(--bg);
  background: var(--text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

body[data-theme] .template-save-button:disabled {
  opacity: 1;
}

body[data-theme="dark"] .template-save-button {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

body[data-theme="dark"] .template-save-button:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.075);
}

body[data-theme="dark"] .template-save-button:active,
body[data-theme="dark"] .template-save-button.is-saving,
body[data-theme="dark"] .template-save-button.is-saved {
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  background: #000;
}

body[data-theme="dark"] .primary-button,
body[data-theme="dark"] .batch-primary-button {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

body[data-theme="dark"] .primary-button:hover,
body[data-theme="dark"] .batch-primary-button:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.09);
}

body[data-theme="dark"] .primary-button:active,
body[data-theme="dark"] .primary-button.is-saving,
body[data-theme="dark"] .batch-primary-button:active {
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  background: #000;
}

body[data-theme] .text-button,
body[data-theme] .batch-secondary-button {
  border-color: var(--line);
  color: var(--text);
  background: transparent;
  box-shadow: none;
}

body[data-theme] .text-button:hover,
body[data-theme] .batch-secondary-button:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

body[data-theme] .generation-cancel-button {
  border-color: rgba(20, 20, 20, 0.18);
  color: var(--text);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

body[data-theme] .text-button.danger {
  border-color: var(--line);
  color: var(--text);
  background: transparent;
}

body[data-theme] .nav-item:hover {
  border-color: var(--line-strong);
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: none;
}

body[data-theme] .nav-item.active {
  border-color: var(--text);
  color: var(--bg);
  background: var(--text);
  box-shadow: none;
}

body[data-theme] .side-status,
body[data-theme] .side-generate-card,
body[data-theme] .side-creator-card,
body[data-theme] .theme-toggle-card,
body[data-theme] .side-status.is-logged-in {
  border-color: var(--line);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  box-shadow: none;
}

body[data-theme] .side-status.active {
  border-color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

body[data-theme] .side-status strong {
  color: var(--text);
}

body[data-theme] .pulse-dot,
body[data-theme] .side-generate-card .pulse-dot,
body[data-theme] .side-creator-card .pulse-dot,
body[data-theme] .side-status.is-logged-in .pulse-dot {
  background: var(--text);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--text) 8%, transparent);
}

body[data-theme] .template-masonry {
  gap: 12px;
  background: transparent;
}

body[data-theme] .template-masonry-column {
  gap: 12px;
}

body[data-theme] .template-video-frame {
  border: 0;
  border-radius: 4px;
  background: #0d0d0d;
  box-shadow: none;
}

body[data-theme] .template-card:focus-visible .template-video-frame,
body[data-theme] .template-card:hover .template-video-frame {
  --video-scale: 1;
  box-shadow: none;
}

body[data-theme="dark"] .template-masonry {
  background: #111;
}

body[data-theme] .template-video-overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.42), transparent 32%);
}

body[data-theme] .template-type-badge {
  left: 6px;
  bottom: 6px;
  padding: 3px 6px;
  border-color: rgba(255, 255, 255, 0.38);
  border-radius: 2px;
  color: #111;
  background: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 820;
}

body[data-theme] .template-detail-panel {
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-theme] .template-detail-panel > .template-detail-heading {
  margin-bottom: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 5%, transparent), transparent 46%),
    color-mix(in srgb, var(--bg) 90%, #fff 10%);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.045);
}

body[data-theme] .template-detail-panel > .template-detail-heading .eyebrow {
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

body[data-theme] .template-detail-panel > .template-detail-heading h3 {
  font-size: 25px;
  font-weight: 760;
  line-height: 1.18;
}

body[data-theme] .template-detail-panel > .template-detail-heading span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

body[data-theme] .template-workspace {
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  gap: 14px;
}

body[data-theme] .template-preview-panel,
body[data-theme] .template-edit-panel {
  border-color: color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 220px),
    color-mix(in srgb, var(--bg) 82%, #fff 18%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

body[data-theme] .template-preview-panel {
  padding: 14px;
  background:
    radial-gradient(circle at 20% 8%, rgba(255, 255, 255, 0.86), transparent 34%),
    color-mix(in srgb, var(--bg) 74%, var(--text) 6%);
}

body[data-theme] .template-edit-panel {
  padding: 16px;
}

body[data-theme] .template-preview-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

body[data-theme] .template-preview-head strong {
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0;
}

body[data-theme] .template-preview-panel video,
body[data-theme] .template-preview-image {
  border-color: var(--line-strong);
  border-radius: 14px;
  background: #0d0d0d;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.2);
}

@media (min-width: 981px) {
  body[data-active-view="templateDetail"] .app-shell {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  body[data-active-view="templateDetail"] .sidebar {
    padding: 18px 12px;
  }

  body[data-active-view="templateDetail"] .brand-block {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  body[data-active-view="templateDetail"] .brand-block > div:not(.brand-mark),
  body[data-active-view="templateDetail"] .nav-item span,
  body[data-active-view="templateDetail"] .side-account-copy {
    display: none;
  }

  body[data-active-view="templateDetail"] .nav-item,
  body[data-active-view="templateDetail"] .side-status {
    grid-template-columns: 1fr;
    place-items: center;
  }

  body[data-active-view="templateDetail"] .template-workspace {
    grid-template-columns: minmax(280px, 330px) minmax(820px, 1fr);
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  body[data-active-view="templateDetail"] .template-edit-panel {
    min-width: 820px;
  }
}

body[data-theme] .template-source-meta {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

body[data-theme] .template-blueprint-section {
  border-color: var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), transparent 180px),
    color-mix(in srgb, var(--bg) 84%, #fff 16%);
  box-shadow: none;
}

body[data-theme] .template-material-card {
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg) 84%, #fff 16%);
  box-shadow: none;
}

body[data-theme] .template-video-placeholder,
body[data-theme] .empty-state,
body[data-theme] .template-upload-preview,
body[data-theme] .template-slot-card,
body[data-theme] .template-slot-card.is-empty,
body[data-theme] .batch-drop-zone,
body[data-theme] .batch-drop-zone.folder-import,
body[data-theme] .generation-output,
body[data-theme] .generation-history-panel,
body[data-theme] .generation-history-toolbar,
body[data-theme] .generation-history-card,
body[data-theme] .generation-final-video-card,
body[data-theme] .generation-history-empty,
body[data-theme] .template-upload-status {
  border-color: var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  box-shadow: none;
}

body[data-theme] .template-card .template-video-placeholder {
  color: rgba(22, 25, 25, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(234, 237, 232, 0.88)),
    var(--template-cover-image, none) center / cover no-repeat,
    linear-gradient(135deg, #eeece5, #cbd8d4);
}

body[data-theme] .template-card .viewport-video.is-error + .template-video-placeholder {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(235, 232, 226, 0.9)),
    var(--template-cover-image, none) center / cover no-repeat,
    linear-gradient(135deg, #f0e9e3, #d4d8d3);
}

body[data-theme] .template-edit-grid input,
body[data-theme] .template-edit-grid select,
body[data-theme] .template-content-tag-values textarea,
body[data-theme] .template-content-tags-row select,
body[data-theme] .template-content-tags-row textarea,
body[data-theme] .template-content-tags-grid textarea,
body[data-theme] .template-upload-grid input,
body[data-theme] .template-upload-grid select,
body[data-theme] .template-upload-grid textarea,
body[data-theme] .template-upload-mode-fields-grid input,
body[data-theme] .template-upload-mode-fields-grid select,
body[data-theme] .template-upload-mode-fields-grid textarea,
body[data-theme] .template-upload-flow-controls select,
body[data-theme] .template-upload-switch,
body[data-theme] .template-material-card input,
body[data-theme] .template-material-card select,
body[data-theme] .template-slot-card input,
body[data-theme] .template-slot-card select,
body[data-theme] .template-slot-card textarea,
body[data-theme] .batch-config-panel input,
body[data-theme] .batch-config-panel select,
body[data-theme] .batch-config-panel textarea,
body[data-theme] .generation-count-display,
body[data-theme] .generation-fixed-duration-field strong,
body[data-theme] .generation-template-picker select,
body[data-theme] .generation-picker-search input,
body[data-theme] .tag-manager-add input,
body[data-theme] .tag-manager-row input,
body[data-theme] .admin-access-card input {
  border-color: rgba(0, 0, 0, 0.075);
  color: var(--text);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body[data-theme] .template-edit-grid input,
body[data-theme] .template-edit-grid select,
body[data-theme] .template-content-tags-row select,
body[data-theme] .template-material-card input,
body[data-theme] .template-material-card select,
body[data-theme] .template-slot-card input,
body[data-theme] .template-slot-card select {
  min-height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 520;
}

body[data-theme] .template-slot-card textarea,
body[data-theme] .template-content-tag-values textarea,
body[data-theme] .template-content-tags-row textarea,
body[data-theme] .template-content-tags-grid textarea {
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 15px;
  line-height: 1.58;
}

body[data-theme] .template-edit-grid span,
body[data-theme] .template-content-tag-values span,
body[data-theme] .template-content-tags-row span,
body[data-theme] .template-content-tags-grid span,
body[data-theme] .template-upload-mode-fields-grid span,
body[data-theme] .template-slot-card label span {
  color: color-mix(in srgb, var(--text) 48%, transparent);
  font-size: 12px;
  font-weight: 650;
}

body[data-theme] .template-chain-grid {
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 10px;
}

body[data-theme] .template-slot-card,
body[data-theme] .template-slot-card.is-empty {
  border-color: rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

body[data-theme] .template-slot-head > span {
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text);
  background: rgba(255, 255, 255, 0.64);
}

body[data-theme] .template-slot-head strong {
  font-size: 15px;
  font-weight: 720;
}

body[data-theme="dark"] .template-detail-panel > .template-detail-heading {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 46%),
    rgba(18, 18, 18, 0.9);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.26);
}

body[data-theme="dark"] .template-preview-panel,
body[data-theme="dark"] .template-edit-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 220px),
    rgba(18, 18, 18, 0.88);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .template-preview-panel {
  background:
    radial-gradient(circle at 20% 8%, rgba(255, 255, 255, 0.08), transparent 34%),
    rgba(18, 18, 18, 0.92);
}

body[data-theme="dark"] .template-edit-grid input,
body[data-theme="dark"] .template-edit-grid select,
body[data-theme="dark"] .template-content-tag-values textarea,
body[data-theme="dark"] .template-content-tags-row select,
body[data-theme="dark"] .template-content-tags-row textarea,
body[data-theme="dark"] .template-content-tags-grid textarea,
body[data-theme="dark"] .template-upload-grid input,
body[data-theme="dark"] .template-upload-grid select,
body[data-theme="dark"] .template-upload-grid textarea,
body[data-theme="dark"] .template-upload-flow-controls select,
body[data-theme="dark"] .template-upload-switch,
body[data-theme="dark"] .template-slot-card input,
body[data-theme="dark"] .template-slot-card select,
body[data-theme="dark"] .template-slot-card textarea,
body[data-theme="dark"] .batch-config-panel input,
body[data-theme="dark"] .batch-config-panel select,
body[data-theme="dark"] .batch-config-panel textarea,
body[data-theme="dark"] .generation-template-picker select,
body[data-theme="dark"] .tag-manager-add input,
body[data-theme="dark"] .tag-manager-row input,
body[data-theme="dark"] .admin-access-card input {
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body[data-theme="dark"] .template-slot-card,
body[data-theme="dark"] .template-slot-card.is-empty {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .template-slot-head > span {
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
}

body[data-theme] .template-library-hero {
  border-color: var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 8%, transparent), transparent 62%),
    color-mix(in srgb, var(--panel-strong) 92%, transparent);
  box-shadow: none;
}

body[data-theme] .template-card:focus-visible .template-video-frame,
body[data-theme] .template-card:hover .template-video-frame {
  --video-scale: 1.012;
  border-color: color-mix(in srgb, var(--text) 34%, transparent);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
}

body[data-theme="light"] .template-card:focus-visible .template-video-frame,
body[data-theme="light"] .template-card:hover .template-video-frame {
  --video-scale: 1.012;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

body[data-theme] .template-sort-box select {
  border-color: var(--line);
  background: var(--panel-strong);
}

body[data-theme] .template-card-cta {
  color: var(--bg) !important;
  background: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .sidebar,
  .main,
  .view.active,
  .template-card,
  .motion-reveal {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .center-toast,
  .template-video-frame {
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .sidebar {
    padding: 18px 12px;
  }

  .brand-block {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .brand-block > div:not(.brand-mark),
  .nav-item span,
  .side-account-copy {
    display: none;
  }

  .nav-item,
  .side-status {
    grid-template-columns: 1fr;
    place-items: center;
  }

  .nav-sub-item {
    margin-left: 0;
    width: 100%;
  }

  .template-workspace,
  .creator-studio-shell,
  .creator-canvas-shell,
  .batch-generation-grid {
    grid-template-columns: 1fr;
  }

  .template-library-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .template-library-hero-actions {
    justify-content: flex-start;
  }

  .ai-canvas-pro-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .ai-canvas-layout {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .ai-canvas-panel {
    border: 0;
  }

  .ai-canvas-stage {
    min-height: 520px;
    order: -1;
  }

  .ai-canvas-main-item {
    width: min(82vw, 460px);
    height: min(82vw, 460px);
  }

  .creator-control-panel {
    position: static;
    height: auto;
    min-height: 640px;
  }

  .creator-result-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .creator-canvas-tools,
  .creator-canvas-results {
    max-height: none;
  }

  .creator-canvas-board {
    grid-template-rows: auto minmax(300px, 420px) auto minmax(130px, 260px);
  }

  .template-masonry {
    column-count: 3;
  }
}

@media (max-width: 980px) {
  .main {
    padding: 16px;
  }

  .topbar {
    margin: -16px -16px 16px;
    padding: 14px 16px;
    align-items: flex-start;
    flex-direction: column;
  }

  .template-clean-toolbar,
  .template-category-head,
  .tag-manager-head,
  .panel-heading,
  .template-detail-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .template-search-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .template-upload-minimal-grid,
  .template-real-shoot-brief,
  .workflow-runtime-grid {
    grid-template-columns: 1fr;
  }

  .template-sort-box {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .generation-template-picker {
    grid-template-columns: 1fr;
  }

  .generation-api-status {
    grid-template-columns: 1fr;
  }

  .generation-selected-template,
  .generation-picker-tools {
    grid-template-columns: 1fr;
  }

  .generation-selected-media {
    width: 100%;
    max-height: 260px;
    aspect-ratio: 16 / 9;
  }

  .template-search-box {
    width: 100%;
  }

  .result-count {
    width: 100%;
  }

  .template-edit-grid,
  .template-content-tags-row,
  .template-content-tags-grid,
  .template-upload-mode-grid,
  .template-upload-mode-dialog-grid,
  .template-upload-mode-fields-grid,
  .template-upload-grid,
	  .template-upload-flow-controls,
	  .template-upload-asset-fields,
	  .creator-model-select-row,
  .creator-mode-tabs,
  .creator-model-pills,
  .creator-submit-row,
  .creator-board-add,
  .template-chain-grid,
  .batch-dual-upload-grid,
  .batch-node-grid,
  .batch-prompt-grid,
  .generation-prompt-select-grid,
  .generation-prompt-text-grid {
    grid-template-columns: 1fr;
  }

  .generation-prompt-chain-head {
    display: grid;
  }

  .generation-prompt-chain-head em {
    text-align: left;
  }

  .template-upload-grid .wide {
    grid-column: auto;
  }

  .template-upload-mode-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .template-upload-mode-fields-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .template-upload-mode-fields-head span {
    text-align: left;
  }

  .template-upload-mode-fields-grid label.wide,
  .template-upload-mode-fields-grid label.full {
    grid-column: auto;
  }

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

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

  .account-overview-grid,
  .account-recharge-form,
  .account-user-summary,
  .account-user-detail-form,
  .creator-studio-shell,
  .creator-canvas-shell,
  .generation-duration-control,
  .account-center-grid {
    grid-template-columns: 1fr;
  }

  .creator-control-panel {
    position: static;
    height: auto;
  }

  .creator-submit-row > span,
  .creator-submit-row em,
  .creator-submit-row .text-button,
  .creator-submit-row .primary-button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .creator-task-group-tabs,
  .creator-task-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .generation-history-toolbar,
  .creator-result-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .generation-history-toolbar .batch-secondary-button,
  .creator-result-toolbar .batch-secondary-button {
    width: 100%;
  }

  .creator-advanced-grid {
    grid-template-columns: 1fr;
  }

  .creator-result-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }

  .creator-board-grid {
    grid-template-columns: 1fr;
  }

  .canvas-toolbar,
  .canvas-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .canvas-viewport {
    min-height: 540px;
    grid-template-columns: 1fr;
  }

  .canvas-node,
  .canvas-node:nth-of-type(2),
  .canvas-node:nth-of-type(3),
  .canvas-node:nth-of-type(4) {
    transform: none;
  }

  .canvas-links {
    display: none;
  }

  #tagManagerStatus {
    max-width: none;
    text-align: left;
  }

  .tag-manager-row {
    grid-template-columns: 1fr;
  }

  .tag-manager-add {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {
  .creator-quick-toolbar {
    grid-template-columns: 1fr;
  }

  .creator-quick-model .creator-model-pills {
    display: grid;
    grid-template-columns: 1fr;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 12px;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .brand-block {
    grid-template-columns: 44px minmax(0, 1fr);
    justify-items: start;
  }

  .brand-mark {
    width: 44px;
    height: 44px;
  }

  .brand-mark span {
    font-size: 18px;
  }

  .brand-mark em {
    display: none;
  }

  .template-category-head {
    position: static;
    margin-bottom: 8px;
  }

  .template-library-hero {
    min-height: 0;
    padding: 16px;
    border-radius: 12px;
  }

  .template-library-hero-copy h3 {
    font-size: 28px;
  }

  .template-library-hero-actions .primary-button,
  .template-library-hero-actions .text-button {
    width: 100%;
    justify-content: center;
  }

  .template-category-shell {
    overflow: hidden;
  }

  .template-category-filter,
  .template-tag-buttons {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .template-category-filter::-webkit-scrollbar,
  .template-tag-buttons::-webkit-scrollbar {
    display: none;
  }

  .template-category-filter button,
  .template-tag-buttons button {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .template-tag-group:first-child .template-tag-buttons {
    padding-right: 0;
  }

  .brand-block > div:not(.brand-mark),
  .nav-item span,
  .side-account-copy {
    display: block;
  }

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

  .nav-item {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .side-status {
    grid-template-columns: 1fr;
  }

  .side-account-copy {
    display: grid;
    justify-items: center;
  }

  .template-masonry {
    column-count: 2;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-masonry {
    gap: 10px;
  }

  body[data-active-view="templateDetail"] {
    overflow-x: hidden;
  }

  body[data-active-view="templateDetail"] .template-detail-panel > .template-detail-heading {
    margin-bottom: 10px;
    padding: 14px;
    border-radius: 14px;
  }

  body[data-active-view="templateDetail"] .template-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body[data-active-view="templateDetail"] .template-preview-panel {
    padding: 10px;
    overflow: hidden;
  }

  body[data-active-view="templateDetail"] .template-preview-panel video,
  body[data-active-view="templateDetail"] .template-preview-image {
    width: 100%;
    height: auto;
    max-height: min(68svh, 620px);
    object-fit: contain;
    transform: none !important;
  }

  body[data-active-view="templateDetail"] .template-chain-grid {
    grid-template-columns: 1fr;
  }

  .template-card-copy {
    padding: 10px;
  }

  .template-card-copy strong {
    font-size: 14px;
  }

  .template-card-copy small,
  .template-card-copy span,
  .template-card-copy b {
    font-size: 11px;
  }

  .batch-config-grid {
    grid-template-columns: 1fr;
  }

  .account-overview-grid,
  .account-center-grid,
  .account-record-list article,
  .admin-user-stats,
  .admin-user-toolbar,
  .admin-user-create,
  .admin-user-row,
  .account-user-detail-grid {
    grid-template-columns: 1fr;
  }

  .account-record-list b,
  .account-record-list a {
    justify-self: start;
  }

  .account-task-result-links {
    justify-content: flex-start;
  }

  .batch-submit-row,
  .template-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .generation-template-picker-dialog {
    padding: 8px;
  }

  .generation-picker-panel {
    max-height: calc(100svh - 16px);
    padding: 12px;
    border-radius: 14px;
  }

  .generation-picker-head {
    align-items: stretch;
    flex-direction: column;
  }

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

  .batch-submit-row > span {
    margin-right: 0;
  }
}

/* Final dark lock: AI Canvas must not inherit the global light theme. */
body[data-active-view="aiCanvas"],
body[data-theme="light"][data-active-view="aiCanvas"] {
  --bg: #080907;
  --bg-2: #0c0e0b;
  --panel: rgba(20, 22, 18, 0.94);
  --panel-strong: rgba(27, 30, 25, 0.94);
  --text: #f7f3e8;
  --muted: #9fa79b;
  --line: rgba(247, 243, 232, 0.12);
  --line-strong: rgba(247, 243, 232, 0.26);
  color: #f7f3e8;
  background: #080907 !important;
}

body[data-active-view="aiCanvas"] .app-shell,
body[data-theme="light"][data-active-view="aiCanvas"] .app-shell {
  background: #080907 !important;
}

body[data-active-view="aiCanvas"] .main,
body[data-theme="light"][data-active-view="aiCanvas"] .main {
  background:
    radial-gradient(circle at 54% 10%, rgba(199, 255, 128, 0.11), transparent 26%),
    radial-gradient(circle at 84% 72%, rgba(119, 210, 255, 0.08), transparent 30%),
    #080907 !important;
}

body[data-active-view="aiCanvas"] .sidebar,
body[data-theme="light"][data-active-view="aiCanvas"] .sidebar {
  border-color: rgba(247, 243, 232, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(20, 22, 18, 0.96), rgba(12, 14, 11, 0.96)),
    #080907 !important;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.26) !important;
}

body[data-active-view="aiCanvas"] .nav-item,
body[data-active-view="aiCanvas"] .side-status,
body[data-active-view="aiCanvas"] .theme-toggle-card,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item,
body[data-theme="light"][data-active-view="aiCanvas"] .side-status,
body[data-theme="light"][data-active-view="aiCanvas"] .theme-toggle-card {
  color: #9fa79b !important;
  border-color: rgba(247, 243, 232, 0.08) !important;
  background: rgba(247, 243, 232, 0.035) !important;
}

body[data-active-view="aiCanvas"] .nav-item:hover,
body[data-active-view="aiCanvas"] .nav-item.active,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item.active {
  color: #11140e !important;
  border-color: rgba(216, 255, 114, 0.55) !important;
  background: linear-gradient(180deg, #e5ff93, #b9ec58) !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #0c0e0b;
  --wf-surface: rgba(20, 22, 18, 0.94);
  --wf-panel: rgba(27, 30, 25, 0.92);
  --wf-panel-soft: rgba(245, 243, 232, 0.055);
  --wf-ink: #f7f3e8;
  --wf-muted: #9fa79b;
  --wf-line: rgba(247, 243, 232, 0.12);
  --wf-line-strong: rgba(247, 243, 232, 0.26);
  --wf-accent: #d8ff72;
  --wf-accent-2: #89e6c4;
  --wf-blue: #7ac7ff;
  --wf-success: #77e0a8;
  --wf-warning: #ffd36e;
  --wf-danger: #ff7d7d;
  --wf-info: #78c7ff;
  color: #f7f3e8 !important;
}

/* Absolute final AI Canvas theme switch and XiHei typography override. */
body[data-active-view="aiCanvas"] {
  --wf-font: "STXihei", "华文细黑", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  font-family: var(--wf-font) !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] *,
body[data-active-view="aiCanvas"] input,
body[data-active-view="aiCanvas"] select,
body[data-active-view="aiCanvas"] textarea,
body[data-active-view="aiCanvas"] button {
  font-family: var(--wf-font) !important;
  letter-spacing: 0 !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell,
body[data-active-view="aiCanvas"] .workflow-canvas-shell input,
body[data-active-view="aiCanvas"] .workflow-canvas-shell select,
body[data-active-view="aiCanvas"] .workflow-canvas-shell textarea,
body[data-active-view="aiCanvas"] .workflow-canvas-shell button,
body[data-active-view="aiCanvas"] .nav-item,
body[data-active-view="aiCanvas"] .side-status,
body[data-active-view="aiCanvas"] .theme-toggle-card {
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell strong,
body[data-active-view="aiCanvas"] .workflow-canvas-shell b,
body[data-active-view="aiCanvas"] .workflow-canvas-shell em,
body[data-active-view="aiCanvas"] .workflow-canvas-shell small,
body[data-active-view="aiCanvas"] .workflow-node-head span,
body[data-active-view="aiCanvas"] .workflow-node-meta small,
body[data-active-view="aiCanvas"] .workflow-node-contract span,
body[data-active-view="aiCanvas"] .workflow-primary-button,
body[data-active-view="aiCanvas"] .workflow-secondary-button,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-icon-button,
body[data-active-view="aiCanvas"] .workflow-sidebar-tabs button,
body[data-active-view="aiCanvas"] .workflow-palette-card,
body[data-active-view="aiCanvas"] .workflow-template-card,
body[data-active-view="aiCanvas"] .workflow-task-card,
body[data-active-view="aiCanvas"] .workflow-context-menu button,
body[data-active-view="aiCanvas"] .workflow-command-list button {
  font-weight: 400 !important;
}

body[data-active-view="aiCanvas"] .workflow-brand strong,
body[data-active-view="aiCanvas"] .workflow-run-button,
body[data-active-view="aiCanvas"] .workflow-section-head strong,
body[data-active-view="aiCanvas"] .workflow-panel-head strong,
body[data-active-view="aiCanvas"] .workflow-console-title strong {
  font-weight: 500 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] {
  color-scheme: light;
  --bg: #f4f2ed;
  --bg-2: #e9e5dc;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --text: #141414;
  --muted: #686a63;
  --line: rgba(18, 18, 18, 0.11);
  --line-strong: rgba(18, 18, 18, 0.28);
  color: #141414 !important;
  background: #f4f2ed !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .app-shell {
  background: #ede9df !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .main {
  background:
    radial-gradient(circle at 54% 10%, rgba(180, 204, 99, 0.18), transparent 26%),
    radial-gradient(circle at 84% 72%, rgba(72, 150, 185, 0.12), transparent 30%),
    #f4f2ed !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .sidebar {
  border-color: rgba(18, 18, 18, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 239, 231, 0.96)),
    #f4f2ed !important;
  box-shadow: 8px 0 32px rgba(18, 18, 18, 0.08) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .nav-item,
body[data-theme="light"][data-active-view="aiCanvas"] .side-status,
body[data-theme="light"][data-active-view="aiCanvas"] .theme-toggle-card {
  color: #6b6b63 !important;
  border-color: rgba(18, 18, 18, 0.08) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .nav-item:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item.active {
  color: #f7f3e8 !important;
  border-color: rgba(18, 18, 18, 0.2) !important;
  background: linear-gradient(180deg, #262821, #12140f) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #f2efe7;
  --wf-surface: rgba(255, 255, 255, 0.92);
  --wf-panel: rgba(250, 248, 242, 0.94);
  --wf-panel-soft: rgba(18, 18, 18, 0.045);
  --wf-ink: #141414;
  --wf-muted: #6c6e66;
  --wf-line: rgba(18, 18, 18, 0.11);
  --wf-line-strong: rgba(18, 18, 18, 0.28);
  --wf-accent: #151711;
  --wf-accent-2: #277c66;
  --wf-blue: #246f96;
  --wf-success: #16805a;
  --wf-warning: #a66a00;
  --wf-danger: #c94141;
  --wf-info: #246f96;
  color: #141414 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-topbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-taskbar {
  border-color: rgba(18, 18, 18, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 246, 239, 0.88)),
    #faf8f2;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 18px 44px rgba(18, 18, 18, 0.09);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    radial-gradient(circle at 36% 30%, rgba(151, 171, 77, 0.11), transparent 24%),
    radial-gradient(circle at 72% 64%, rgba(72, 150, 185, 0.08), transparent 30%),
    linear-gradient(rgba(18, 18, 18, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.075) 1px, transparent 1px),
    linear-gradient(rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    #f2efe7;
  background-size: auto, auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px, auto;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-panel,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-console-grid section,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-context-menu {
  border-color: rgba(18, 18, 18, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 246, 239, 0.92)),
    #fffdf8;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 44px rgba(18, 18, 18, 0.1);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar-tabs button.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-mode-grid button.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector-tabs span.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-primary-button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-button {
  color: #f7f3e8;
  border-color: rgba(18, 18, 18, 0.26);
  background: linear-gradient(180deg, #242820, #11140f);
  box-shadow: 0 14px 28px rgba(18, 18, 18, 0.16);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge {
  stroke: rgba(18, 18, 18, 0.42);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edges marker path {
  fill: #151711;
}
/* Final LibTV canvas shell override. */
body[data-active-view="aiCanvas"] {
  background: #070809 !important;
  color: #f6f7f7 !important;
}

body[data-active-view="aiCanvas"] .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  background: #070809 !important;
}

body[data-active-view="aiCanvas"] .app-shell > .sidebar {
  display: none !important;
}

body[data-active-view="aiCanvas"] .main {
  min-height: 100vh;
  padding: 0 !important;
  overflow: hidden;
  background: #070809 !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #08090b;
  --wf-surface: rgba(24, 25, 28, 0.88);
  --wf-panel: rgba(31, 32, 35, 0.92);
  --wf-panel-soft: rgba(255, 255, 255, 0.06);
  --wf-ink: #f7f8f8;
  --wf-muted: rgba(247, 248, 248, 0.56);
  --wf-line: rgba(255, 255, 255, 0.075);
  --wf-line-strong: rgba(255, 255, 255, 0.16);
  --wf-accent: #f4f5f5;
  --wf-accent-2: #76e7c5;
  --wf-blue: #78c7ff;
  --wf-success: #86e6a8;
  --wf-warning: #ffd166;
  --wf-danger: #ff7979;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "stage";
  overflow: hidden;
  color: var(--wf-ink) !important;
  background: #070809 !important;
}

body[data-active-view="aiCanvas"] .workflow-stage {
  grid-area: stage;
  min-height: 100vh;
}

body[data-active-view="aiCanvas"] .workflow-canvas-surface,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  height: 100vh;
  min-height: 720px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.04), transparent 24%),
    radial-gradient(circle at 72% 30%, rgba(104, 158, 255, 0.055), transparent 25%),
    radial-gradient(circle at 24% 76%, rgba(112, 224, 186, 0.045), transparent 24%),
    radial-gradient(circle, rgba(255, 255, 255, 0.11) 1px, transparent 1.2px),
    linear-gradient(#08090b, #08090b) !important;
  background-size: auto, auto, auto, 16px 16px, auto !important;
}

body[data-active-view="aiCanvas"] .workflow-topbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-topbar {
  position: absolute;
  inset: 14px 14px auto 14px;
  z-index: 42;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-brand,
body[data-active-view="aiCanvas"] .workflow-actions,
body[data-active-view="aiCanvas"] .workflow-action-group,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-run-button {
  pointer-events: auto;
}

body[data-active-view="aiCanvas"] .workflow-brand {
  display: flex;
  gap: 10px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-brand-mark {
  width: 25px;
  height: 25px;
  border-color: transparent !important;
  border-radius: 8px;
  color: #101113 !important;
  background: #f6f7f7 !important;
  transform: skew(-8deg);
}

body[data-active-view="aiCanvas"] .workflow-brand span {
  color: #f7f8f8;
  font-size: 15px;
  font-weight: 500 !important;
  text-transform: none;
}

body[data-active-view="aiCanvas"] .workflow-brand strong {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(247, 248, 248, 0.78);
  font-size: 14px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-brand em {
  margin-left: 8px;
  color: rgba(247, 248, 248, 0.42);
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-run-summary {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-action-group {
  padding: 0;
  display: flex;
  gap: 7px;
  border: 0 !important;
  background: transparent !important;
}

body[data-active-view="aiCanvas"] .workflow-icon-button,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-primary-button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px;
  color: rgba(247, 248, 248, 0.82);
  background: rgba(31, 32, 35, 0.84) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

body[data-active-view="aiCanvas"] .workflow-icon-button {
  width: 38px;
  padding: 0;
}

body[data-active-view="aiCanvas"] .workflow-tool-button {
  padding: 0 12px;
  gap: 6px;
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-run-button {
  padding: 0 16px;
  color: #08090b !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  background: #f7f8f8 !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar {
  position: absolute;
  z-index: 36;
  left: 78px;
  top: 310px;
  width: 292px;
  max-height: min(560px, calc(100vh - 160px));
  padding: 8px;
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px;
  background: rgba(24, 25, 28, 0.92) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(22px);
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell.is-palette-open .workflow-sidebar {
  display: block;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-content {
  max-height: calc(100vh - 190px);
  padding: 0;
  overflow: auto;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar {
  position: absolute;
  z-index: 38;
  left: 14px;
  top: 50%;
  width: 52px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px;
  background: rgba(31, 32, 35, 0.86) !important;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(18px);
  transform: translateY(-50%);
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 13px;
  color: rgba(247, 248, 248, 0.72);
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .brand-block,
body[data-theme="dark"][data-active-view="aiCanvas"] .brand-block,
body[data-theme="light"][data-active-view="aiCanvas"] .brand-block {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  min-height: 44px !important;
  gap: 10px !important;
  color: #151515 !important;
}

body[data-active-view="aiCanvas"] .brand-block > :not(.brand-mark),
body[data-theme="dark"][data-active-view="aiCanvas"] .brand-block > :not(.brand-mark),
body[data-theme="light"][data-active-view="aiCanvas"] .brand-block > :not(.brand-mark),
body[data-active-view="aiCanvas"] .nav-group-label,
body[data-theme="dark"][data-active-view="aiCanvas"] .nav-group-label,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-group-label,
body[data-active-view="aiCanvas"] .nav-item span,
body[data-theme="dark"][data-active-view="aiCanvas"] .nav-item span,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item span,
body[data-active-view="aiCanvas"] .side-account-copy,
body[data-theme="dark"][data-active-view="aiCanvas"] .side-account-copy,
body[data-theme="light"][data-active-view="aiCanvas"] .side-account-copy {
  display: block !important;
}

body[data-active-view="aiCanvas"] .brand-kicker,
body[data-theme="dark"][data-active-view="aiCanvas"] .brand-kicker,
body[data-theme="light"][data-active-view="aiCanvas"] .brand-kicker {
  display: block !important;
  color: rgba(24, 24, 24, 0.46) !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body[data-active-view="aiCanvas"] .brand-block h1,
body[data-theme="dark"][data-active-view="aiCanvas"] .brand-block h1,
body[data-theme="light"][data-active-view="aiCanvas"] .brand-block h1 {
  display: block !important;
  color: #151515 !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

body[data-active-view="aiCanvas"] .nav-list,
body[data-theme="dark"][data-active-view="aiCanvas"] .nav-list,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-list {
  display: grid !important;
  gap: 6px !important;
}

body[data-active-view="aiCanvas"] .nav-group-label,
body[data-theme="dark"][data-active-view="aiCanvas"] .nav-group-label,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-group-label {
  margin: 14px 4px 6px !important;
  color: rgba(24, 24, 24, 0.46) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-active-view="aiCanvas"] .nav-item,
body[data-active-view="aiCanvas"] .side-status,
body[data-theme="dark"][data-active-view="aiCanvas"] .nav-item,
body[data-theme="dark"][data-active-view="aiCanvas"] .side-status,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item,
body[data-theme="light"][data-active-view="aiCanvas"] .side-status {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  justify-content: start !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(24, 24, 24, 0.66) !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
}

body[data-active-view="aiCanvas"] .nav-item.active,
body[data-active-view="aiCanvas"] .side-status.active,
body[data-theme="dark"][data-active-view="aiCanvas"] .nav-item.active,
body[data-theme="dark"][data-active-view="aiCanvas"] .side-status.active,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item.active,
body[data-theme="light"][data-active-view="aiCanvas"] .side-status.active {
  color: #fff !important;
  background: #151515 !important;
}

body[data-active-view="aiCanvas"] .nav-item span,
body[data-theme="dark"][data-active-view="aiCanvas"] .nav-item span,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item span,
body[data-active-view="aiCanvas"] .side-account-copy strong,
body[data-active-view="aiCanvas"] .side-account-copy em,
body[data-theme="dark"][data-active-view="aiCanvas"] .side-account-copy strong,
body[data-theme="dark"][data-active-view="aiCanvas"] .side-account-copy em,
body[data-theme="light"][data-active-view="aiCanvas"] .side-account-copy strong,
body[data-theme="light"][data-active-view="aiCanvas"] .side-account-copy em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="aiCanvas"] .sidebar-bottom,
body[data-theme="dark"][data-active-view="aiCanvas"] .sidebar-bottom,
body[data-theme="light"][data-active-view="aiCanvas"] .sidebar-bottom {
  display: grid !important;
  gap: 8px !important;
  margin-top: auto !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button:first-child {
  color: #121315;
  background: #f7f8f8 !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button span {
  position: absolute;
  left: 48px;
  padding: 5px 8px;
  border-radius: 9px;
  color: #f7f8f8;
  background: rgba(24, 25, 28, 0.9);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button:hover span {
  opacity: 1;
  transform: translateX(0);
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls {
  position: absolute;
  z-index: 38;
  left: 14px;
  bottom: 14px;
  padding: 7px;
  display: flex;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(31, 32, 35, 0.88);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-icon-button {
  width: 27px;
  height: 27px;
  min-height: 27px;
  border-radius: 9px;
  background: transparent !important;
  box-shadow: none;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-icon-button.is-active {
  color: #101113;
  background: #e8e9e9 !important;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-zoom {
  min-width: 58px;
  color: rgba(247, 248, 248, 0.78);
  font-size: 13px;
  text-align: center;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  padding: 0;
  border: 0 !important;
  color: rgba(247, 248, 248, 0.46);
  background: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, -110px);
}

body[data-active-view="aiCanvas"] .workflow-canvas-status b,
body[data-active-view="aiCanvas"] .workflow-canvas-status em {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-empty {
  z-index: 29;
  width: min(826px, calc(100vw - 220px));
  padding: 0;
  display: grid;
  gap: 28px;
  justify-items: center;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, -44%);
}

body[data-active-view="aiCanvas"] .workflow-empty > svg {
  width: 28px;
  height: 28px;
  color: rgba(247, 248, 248, 0.7);
}

body[data-active-view="aiCanvas"] .workflow-empty > strong {
  color: rgba(247, 248, 248, 0.56);
  font-size: 14px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-starter-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body[data-active-view="aiCanvas"] .workflow-starter-card {
  min-height: 54px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px;
  color: #f7f8f8;
  background: linear-gradient(90deg, rgba(21, 23, 28, 0.95), rgba(21, 23, 28, 0.72)), linear-gradient(135deg, rgba(92, 124, 255, 0.34), transparent 48%) !important;
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.32);
  text-align: left;
}

body[data-active-view="aiCanvas"] .workflow-starter-card.is-character {
  background: linear-gradient(90deg, rgba(22, 17, 18, 0.96), rgba(22, 17, 18, 0.7)), linear-gradient(135deg, rgba(255, 80, 108, 0.28), transparent 48%) !important;
}

body[data-active-view="aiCanvas"] .workflow-starter-card.is-video {
  background: linear-gradient(90deg, rgba(24, 25, 18, 0.96), rgba(24, 25, 18, 0.72)), linear-gradient(135deg, rgba(220, 255, 124, 0.22), transparent 48%) !important;
}

body[data-active-view="aiCanvas"] .workflow-starter-card.is-audio {
  background: linear-gradient(90deg, rgba(15, 26, 24, 0.96), rgba(15, 26, 24, 0.72)), linear-gradient(135deg, rgba(112, 224, 186, 0.24), transparent 48%) !important;
}

body[data-active-view="aiCanvas"] .workflow-starter-card strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 400 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-starter-card span {
  color: rgba(247, 248, 248, 0.74);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-minimap {
  width: 166px !important;
  padding: 7px !important;
  display: grid !important;
  gap: 5px !important;
  opacity: 0.72;
  cursor: crosshair;
  transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

body[data-active-view="aiCanvas"] .workflow-minimap:hover,
body[data-active-view="aiCanvas"] .workflow-minimap:active {
  opacity: 1;
  border-color: rgba(216, 255, 114, 0.2);
  transform: translateY(-1px);
}

body[data-active-view="aiCanvas"] .workflow-minimap > span {
  justify-self: end;
  margin-top: -18px;
  color: rgba(247, 248, 248, 0.42);
  font-size: 9px;
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-minimap-world {
  cursor: crosshair;
  touch-action: none;
}

/* v1.8.108 Minimap node focus: small map nodes can directly select and focus canvas nodes. */
body[data-active-view="aiCanvas"] .workflow-minimap-world i[data-mini-node] {
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

body[data-active-view="aiCanvas"] .workflow-minimap-world i[data-mini-node]:hover {
  background: rgba(216, 255, 114, 0.88);
  box-shadow: 0 0 0 2px rgba(216, 255, 114, 0.14);
  transform: scale(1.35);
}

body[data-active-view="aiCanvas"] .workflow-minimap-world b {
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-inspector {
  position: absolute;
  z-index: 37;
  top: 72px;
  right: 16px;
  width: min(340px, calc(100vw - 110px));
  max-height: calc(100vh - 108px);
  padding: 8px;
  display: none;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px;
  background: rgba(24, 25, 28, 0.9) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(22px);
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell.has-selection .workflow-inspector {
  display: flex;
}

body[data-active-view="aiCanvas"] .workflow-taskbar {
  position: absolute;
  z-index: 37;
  left: 84px;
  right: 16px;
  bottom: 74px;
  max-height: 230px;
  padding: 8px;
  display: none;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px;
  background: rgba(24, 25, 28, 0.9) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(22px);
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell.has-activity .workflow-taskbar {
  display: block;
}

body[data-active-view="aiCanvas"] .workflow-node {
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(39, 40, 44, 0.92), rgba(24, 25, 28, 0.92)) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(12px);
}

body[data-active-view="aiCanvas"] .workflow-node.is-selected {
  border-color: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.13), 0 28px 84px rgba(0, 0, 0, 0.44) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-head span {
  color: #101113 !important;
  background: #f6f7f7 !important;
}

body[data-active-view="aiCanvas"] .workflow-edge {
  stroke: rgba(247, 248, 248, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-edge:hover,
body[data-active-view="aiCanvas"] .workflow-edge.is-selected,
body[data-active-view="aiCanvas"] .workflow-edge.is-running {
  stroke: #f7f8f8;
}

body[data-active-view="aiCanvas"] .workflow-edges marker path {
  fill: #f7f8f8;
}

/* Final LibTV image node override. */
body[data-active-view="aiCanvas"] .workflow-canvas-shell.has-prompt-selection .workflow-inspector,
body[data-active-view="aiCanvas"] .workflow-canvas-shell.has-prompt-selection .workflow-selection-toolbar {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-inspector .workflow-run-panel,
body[data-active-view="aiCanvas"] .workflow-inspector .workflow-inspector-card {
  color: #f6f7f7;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(31, 32, 35, 0.92) !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-inspector .workflow-field input,
body[data-active-view="aiCanvas"] .workflow-inspector .workflow-field select,
body[data-active-view="aiCanvas"] .workflow-inspector .workflow-field textarea {
  color: #f6f7f7;
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt {
  padding: 0;
  display: block;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt:hover,
body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt::before,
body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-node-progress {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 26px minmax(290px, 1fr) 176px;
  gap: 12px;
  color: #f6f7f7;
  cursor: grab;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(246, 247, 247, 0.58);
  font-size: 13px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-prompt-node-title button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title b {
  color: rgba(246, 247, 247, 0.72);
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title svg {
  width: 14px;
  height: 14px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title button {
  height: 26px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.72);
  background: rgba(34, 35, 38, 0.88);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone {
  position: relative;
  min-height: 290px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1.5px solid rgba(246, 247, 247, 0.5);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
    rgba(39, 40, 40, 0.98);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-upload-zone {
  border-color: rgba(246, 247, 247, 0.78);
  box-shadow: 0 0 0 3px rgba(246, 247, 247, 0.08), 0 24px 78px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone > svg {
  width: 58px;
  height: 58px;
  color: rgba(246, 247, 247, 0.24);
  stroke-width: 1.4;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-reference {
  border-color: rgba(246, 247, 247, 0.72);
  background: rgba(18, 19, 21, 0.96);
}

body[data-active-view="aiCanvas"] .workflow-prompt-reference-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.03);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-reference::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 36%, rgba(0, 0, 0, 0.55)),
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.12), transparent 44%);
}

body[data-active-view="aiCanvas"] .workflow-prompt-reference-chip {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  max-width: calc(100% - 112px);
  height: 28px;
  padding: 0 6px 0 10px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.84);
  background: rgba(12, 13, 15, 0.62);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-prompt-reference-chip span {
  min-width: 0;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-prompt-reference-chip svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-reference-chip button {
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.7);
  background: rgba(255, 255, 255, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-prompt-reference-chip button:hover {
  color: #101315;
  background: rgba(246, 247, 247, 0.86);
}

body[data-active-view="aiCanvas"] .workflow-prompt-reference-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: rgba(246, 247, 247, 0.45);
  font-size: 12px;
  font-weight: 300;
  text-align: center;
}

body[data-active-view="aiCanvas"] .workflow-prompt-reference-empty strong {
  color: rgba(246, 247, 247, 0.78);
  font-size: 14px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-prompt-status {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  height: 24px;
  padding: 0 9px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.68);
  background: rgba(18, 19, 21, 0.48);
  font-size: 11px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-prompt-status b {
  color: rgba(246, 247, 247, 0.46);
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-prompt-status.is-generating,
body[data-active-view="aiCanvas"] .workflow-prompt-status.is-queued,
body[data-active-view="aiCanvas"] .workflow-prompt-status.is-submitting,
body[data-active-view="aiCanvas"] .workflow-prompt-status.is-compositing {
  color: #101315;
  background: rgba(246, 247, 247, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-prompt-status.is-completed {
  color: #10251a;
  background: rgba(116, 228, 165, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-prompt-status.is-failed {
  color: #351010;
  background: rgba(255, 118, 118, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-prompt-live-progress {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-prompt-live-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f6f7f7, rgba(116, 228, 165, 0.92));
  transition: width 0.22s ease;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try {
  position: absolute;
  left: 22px;
  bottom: 58px;
  z-index: 2;
  display: grid;
  gap: 12px;
  justify-items: start;
  color: rgba(246, 247, 247, 0.42);
  font-size: 13px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-reference .workflow-prompt-try {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try button {
  height: 22px;
  padding: 0;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 0;
  color: rgba(246, 247, 247, 0.7);
  background: transparent;
  font-size: 13px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try button svg {
  width: 15px;
  height: 15px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  display: grid;
  grid-template-rows: 34px 38px minmax(52px, 1fr) 38px;
  gap: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: rgba(38, 39, 40, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row {
  padding: 8px 12px 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row button {
  height: 26px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: rgba(246, 247, 247, 0.58);
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row button.active {
  color: #111315;
  border-color: rgba(255, 255, 255, 0.74);
  background: rgba(246, 247, 247, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row {
  padding: 4px 12px 0;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select {
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.72);
  background: rgba(255, 255, 255, 0.035);
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:hover,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row button:hover,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select:hover {
  color: #f6f7f7;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button svg,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row button svg {
  width: 15px;
  height: 15px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row .is-expand {
  width: 32px;
  margin-left: auto;
  padding: 0;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea {
  width: 100%;
  min-height: 52px;
  padding: 4px 12px;
  resize: none;
  border: 0;
  color: rgba(246, 247, 247, 0.82);
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea::placeholder {
  color: rgba(246, 247, 247, 0.38);
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row {
  padding: 0 10px 8px 12px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row select {
  appearance: none;
  max-width: 98px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row > span {
  margin-left: auto;
  color: rgba(246, 247, 247, 0.42);
  font-size: 12px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row > .workflow-run-readiness-pill {
  margin-left: auto;
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill {
  max-width: 118px;
  height: 29px;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.64);
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  font-weight: 300;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill b,
body[data-active-view="aiCanvas"] .workflow-run-readiness-pill em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  font-weight: 300 !important;
  text-overflow: ellipsis;
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill b {
  color: currentColor;
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill em {
  flex: 0 0 auto;
  color: rgba(246, 247, 247, 0.38);
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill.is-ready {
  color: rgba(130, 236, 178, 0.92);
  border-color: rgba(130, 236, 178, 0.18);
  background: rgba(130, 236, 178, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill.is-blocked {
  color: rgba(255, 169, 169, 0.94);
  border-color: rgba(255, 118, 118, 0.22);
  background: rgba(255, 118, 118, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit {
  width: 32px;
  padding: 0 !important;
  border-radius: 10px !important;
  color: #121315 !important;
  background: #d9dcde !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(246, 247, 247, 0.54);
  color: rgba(246, 247, 247, 0.86);
  background: rgba(27, 28, 30, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port::before {
  content: "+";
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.input {
  left: -26px;
  top: 178px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.output {
  right: -26px;
  top: 178px;
}

@media (max-width: 900px) {
  body[data-active-view="aiCanvas"] .workflow-actions .workflow-action-group.is-secondary {
    display: none !important;
  }

  body[data-active-view="aiCanvas"] .workflow-starter-cards {
    grid-template-columns: 1fr;
  }

  body[data-active-view="aiCanvas"] .workflow-empty {
    width: min(360px, calc(100vw - 110px));
    transform: translate(-42%, -44%);
  }

  body[data-active-view="aiCanvas"] .workflow-node-prompt {
    transform-origin: top left;
  }

  body[data-active-view="aiCanvas"] .workflow-prompt-control-row {
    gap: 5px;
  }

  body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
  body[data-active-view="aiCanvas"] .workflow-prompt-control-row select {
    padding: 0 7px;
    font-size: 11px;
  }
}

body[data-active-view="aiCanvas"] .workflow-canvas-status span:not(.is-running) {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-empty[hidden],
body[data-active-view="aiCanvas"] .workflow-selection-toolbar[hidden],
body[data-active-view="aiCanvas"] .workflow-selection-box[hidden],
body[data-active-view="aiCanvas"] .workflow-context-menu[hidden],
body[data-active-view="aiCanvas"] .workflow-link-menu[hidden],
body[data-active-view="aiCanvas"] .workflow-quick-create[hidden],
body[data-active-view="aiCanvas"] .workflow-command-palette[hidden],
body[data-active-view="aiCanvas"] .workflow-real-run-confirm[hidden] {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-real-run-confirm {
  position: fixed;
  inset: 0;
  z-index: 1004;
  display: grid;
  place-items: center;
  padding: 24px;
  color: rgba(246, 247, 247, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-real-run-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(4, 5, 6, 0.62);
  backdrop-filter: blur(14px);
}

body[data-active-view="aiCanvas"] .workflow-real-run-dialog {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 48px));
  padding: 12px;
  display: grid;
  gap: 10px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background:
    radial-gradient(circle at 84% 0, rgba(216, 255, 114, 0.13), transparent 36%),
    linear-gradient(180deg, rgba(35, 36, 39, 0.97), rgba(13, 14, 16, 0.97));
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}

body[data-active-view="aiCanvas"] .workflow-real-run-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

body[data-active-view="aiCanvas"] .workflow-real-run-head div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

body[data-active-view="aiCanvas"] .workflow-real-run-head span {
  color: rgba(246, 247, 247, 0.42);
  font-size: 10px;
  font-weight: 300;
  text-transform: uppercase;
}

body[data-active-view="aiCanvas"] .workflow-real-run-head strong {
  color: rgba(246, 247, 247, 0.94);
  font-size: 17px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-real-run-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-real-run-summary span {
  min-width: 0;
  padding: 8px 6px;
  display: grid;
  gap: 3px;
  justify-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.46);
  background: rgba(255, 255, 255, 0.035);
  font-size: 10px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-real-run-summary b {
  color: rgba(246, 247, 247, 0.9);
  font-size: 15px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight {
  min-width: 0;
  padding: 9px;
  display: grid;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(216, 255, 114, 0.11);
  border-radius: 15px;
  background:
    radial-gradient(circle at 12% 0, rgba(216, 255, 114, 0.075), transparent 34%),
    rgba(255, 255, 255, 0.028);
}

body[data-active-view="aiCanvas"] .workflow-real-preflight.is-failed {
  border-color: rgba(255, 118, 118, 0.17);
  background:
    radial-gradient(circle at 12% 0, rgba(255, 118, 118, 0.09), transparent 34%),
    rgba(255, 118, 118, 0.036);
}

body[data-active-view="aiCanvas"] .workflow-real-preflight.is-mock {
  border-color: rgba(246, 247, 247, 0.075);
  background:
    radial-gradient(circle at 12% 0, rgba(246, 247, 247, 0.045), transparent 34%),
    rgba(255, 255, 255, 0.024);
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-head {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-head span,
body[data-active-view="aiCanvas"] .workflow-real-preflight-head em {
  min-width: 0;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-head span {
  color: rgba(216, 255, 114, 0.86);
  font-size: 12px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight.is-failed .workflow-real-preflight-head span {
  color: rgba(255, 146, 146, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-real-preflight.is-mock .workflow-real-preflight-head span {
  color: rgba(246, 247, 247, 0.72);
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-head em {
  color: rgba(246, 247, 247, 0.48);
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-head svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-grid article {
  min-width: 0;
  padding: 7px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.028);
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-grid article > svg {
  width: 14px;
  height: 14px;
  padding: 3px;
  border-radius: 8px;
  color: rgba(216, 255, 114, 0.9);
  background: rgba(216, 255, 114, 0.08);
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-grid article.is-failed {
  border-color: rgba(255, 118, 118, 0.16);
  background: rgba(255, 118, 118, 0.05);
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-grid article.is-failed > svg {
  color: rgba(255, 146, 146, 0.92);
  background: rgba(255, 118, 118, 0.09);
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-grid article.is-muted > svg {
  color: rgba(246, 247, 247, 0.46);
  background: rgba(255, 255, 255, 0.055);
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-grid article div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-grid strong,
body[data-active-view="aiCanvas"] .workflow-real-preflight-grid span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-grid strong {
  color: rgba(246, 247, 247, 0.8);
  font-size: 10px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight-grid span {
  color: rgba(246, 247, 247, 0.42);
  font-size: 9px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight.is-compact {
  padding: 8px;
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight.is-compact .workflow-real-preflight-grid {
  grid-template-columns: 1fr;
}

body[data-active-view="aiCanvas"] .workflow-real-preflight.is-compact .workflow-real-preflight-grid article {
  min-height: 34px;
  padding: 6px;
}

body[data-active-view="aiCanvas"] .workflow-real-run-list {
  display: grid;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-real-run-list article {
  min-height: 48px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-real-run-list article.is-failed {
  border-color: rgba(255, 118, 118, 0.16);
  background: rgba(255, 118, 118, 0.052);
}

body[data-active-view="aiCanvas"] .workflow-real-run-list article > svg {
  width: 28px;
  height: 28px;
  padding: 7px;
  border-radius: 999px;
  color: #101315;
  background: rgba(246, 247, 247, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-real-run-list div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-active-view="aiCanvas"] .workflow-real-run-list strong,
body[data-active-view="aiCanvas"] .workflow-real-run-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-real-run-list strong {
  color: rgba(246, 247, 247, 0.9);
  font-size: 12px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-real-run-list span {
  color: rgba(246, 247, 247, 0.48);
  font-size: 11px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-real-run-list em {
  padding: 5px 7px;
  border-radius: 999px;
  color: rgba(216, 255, 114, 0.9);
  background: rgba(216, 255, 114, 0.08);
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-real-run-dialog p {
  margin: 0;
  color: rgba(246, 247, 247, 0.5);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.5;
}

body[data-active-view="aiCanvas"] .workflow-real-run-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-real-run-actions button {
  min-height: 40px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.72);
  background: rgba(255, 255, 255, 0.045);
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-real-run-actions button.is-primary {
  color: #101315;
  border-color: rgba(246, 247, 247, 0.54);
  background: rgba(246, 247, 247, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-real-run-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

body[data-active-view="aiCanvas"] .workflow-real-run-actions button.is-primary:hover {
  border-color: rgba(216, 255, 114, 0.64);
  background: rgba(216, 255, 114, 0.95);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-preflight {
  border-color: rgba(18, 18, 18, 0.08);
  background:
    radial-gradient(circle at 12% 0, rgba(18, 18, 18, 0.045), transparent 34%),
    rgba(255, 255, 255, 0.5);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-preflight.is-failed {
  border-color: rgba(190, 54, 54, 0.16);
  background:
    radial-gradient(circle at 12% 0, rgba(190, 54, 54, 0.06), transparent 34%),
    rgba(190, 54, 54, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-preflight-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-preflight.is-failed .workflow-real-preflight-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-preflight.is-mock .workflow-real-preflight-head span {
  color: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-preflight-head em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-preflight-grid span {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-preflight-grid article {
  border-color: rgba(18, 18, 18, 0.06);
  background: rgba(255, 255, 255, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-preflight-grid strong {
  color: rgba(18, 18, 18, 0.74);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-preflight-grid article > svg,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-preflight-grid article.is-muted > svg {
  color: rgba(18, 18, 18, 0.58);
  background: rgba(18, 18, 18, 0.055);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-preflight-grid article.is-failed > svg {
  color: rgba(190, 54, 54, 0.82);
  background: rgba(190, 54, 54, 0.08);
}

@media (max-width: 620px) {
  body[data-active-view="aiCanvas"] .workflow-real-preflight-grid {
    grid-template-columns: 1fr;
  }
}

/* v1.8.138 Real API preflight matrix: login, credits, batch, image, video, and input checks are visible before true API submission. */

body[data-active-view="aiCanvas"] .workflow-quick-create {
  position: absolute;
  z-index: 58;
  width: min(318px, calc(100vw - 104px));
  padding: 10px;
  display: grid;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  color: rgba(246, 247, 247, 0.9);
  background:
    radial-gradient(circle at 82% 0, rgba(216, 255, 114, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(34, 35, 38, 0.96), rgba(15, 16, 18, 0.96));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.54), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(22px);
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head span {
  color: rgba(246, 247, 247, 0.42);
  font-size: 10px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head strong {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.92);
  font-size: 13px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-quick-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-quick-mode-row button,
body[data-active-view="aiCanvas"] .workflow-quick-actions button {
  min-height: 36px;
  padding: 0 10px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.74);
  background: rgba(255, 255, 255, 0.045);
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-quick-mode-row button.active,
body[data-active-view="aiCanvas"] .workflow-quick-actions button.is-primary {
  color: #101315;
  border-color: rgba(246, 247, 247, 0.64);
  background: rgba(246, 247, 247, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-quick-create textarea {
  width: 100%;
  min-height: 84px;
  padding: 11px 12px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: rgba(246, 247, 247, 0.9);
  background: rgba(255, 255, 255, 0.045);
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  outline: none;
}

body[data-active-view="aiCanvas"] .workflow-quick-create textarea:focus {
  border-color: rgba(246, 247, 247, 0.38);
  box-shadow: 0 0 0 3px rgba(246, 247, 247, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-quick-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-quick-mode-row svg,
body[data-active-view="aiCanvas"] .workflow-quick-actions svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

/* LibTV-style media node shell: large preview, light title row, circular plus ports. */
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video {
  padding: 0;
  display: block;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

body[data-active-view="aiCanvas"] .workflow-node-upload:hover,
body[data-active-view="aiCanvas"] .workflow-node-image:hover,
body[data-active-view="aiCanvas"] .workflow-node-video:hover,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-node-progress {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 26px minmax(300px, 1fr) 158px;
  gap: 10px;
  color: #f6f7f7;
  cursor: grab;
}

body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-media-node-card {
  grid-template-rows: 26px minmax(300px, 1fr) 158px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-title {
  height: 26px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: rgba(246, 247, 247, 0.58);
  font-size: 13px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title button,
body[data-active-view="aiCanvas"] .workflow-media-node-title em {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-style: normal;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-media-node-title svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-media-node-title button,
body[data-active-view="aiCanvas"] .workflow-media-node-title em {
  height: 26px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.72);
  background: rgba(34, 35, 38, 0.88);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-media-node-title em.is-intermediate {
  border-color: rgba(120, 199, 255, 0.22);
  color: rgba(210, 237, 255, 0.86);
  background: rgba(34, 53, 66, 0.82);
}

body[data-active-view="aiCanvas"] .workflow-media-node-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1.5px solid rgba(246, 247, 247, 0.38);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
    rgba(39, 40, 40, 0.98);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-node-stage {
  border-color: rgba(246, 247, 247, 0.78);
  box-shadow: 0 0 0 3px rgba(246, 247, 247, 0.08), 0 24px 78px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-node-upload.is-running .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-running .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-running .workflow-media-node-stage {
  border-color: rgba(216, 255, 114, 0.86);
  box-shadow: 0 0 0 3px rgba(216, 255, 114, 0.1), 0 0 36px rgba(216, 255, 114, 0.18), 0 24px 78px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-node-upload.is-failed .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-failed .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-failed .workflow-media-node-stage {
  border-color: rgba(255, 118, 118, 0.86);
  box-shadow: 0 0 0 3px rgba(255, 118, 118, 0.12), 0 24px 78px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-media-node-stage.has-media,
body[data-active-view="aiCanvas"] .workflow-media-node-card.has-media .workflow-media-node-stage {
  border-color: rgba(246, 247, 247, 0.62);
  background: rgba(18, 19, 21, 0.96);
}

body[data-active-view="aiCanvas"] .workflow-media-node-stage img,
body[data-active-view="aiCanvas"] .workflow-media-node-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.03);
}

body[data-active-view="aiCanvas"] .workflow-media-node-card.has-media .workflow-media-node-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 38%, rgba(0, 0, 0, 0.5)),
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.12), transparent 46%);
}

body[data-active-view="aiCanvas"] .workflow-media-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: rgba(246, 247, 247, 0.42);
  font-size: 12px;
  font-weight: 300;
  text-align: center;
}

body[data-active-view="aiCanvas"] .workflow-media-empty svg {
  width: 54px;
  height: 54px;
  color: rgba(246, 247, 247, 0.24);
  stroke-width: 1.35;
}

body[data-active-view="aiCanvas"] .workflow-media-empty strong {
  color: rgba(246, 247, 247, 0.78);
  font-size: 14px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-media-status,
body[data-active-view="aiCanvas"] .workflow-media-duration {
  position: absolute;
  z-index: 3;
  height: 24px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.68);
  background: rgba(18, 19, 21, 0.52);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-media-status {
  top: 12px;
  right: 12px;
  padding: 0 9px;
}

body[data-active-view="aiCanvas"] .workflow-media-status b {
  color: rgba(246, 247, 247, 0.46);
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-media-status.is-generating,
body[data-active-view="aiCanvas"] .workflow-media-status.is-queued,
body[data-active-view="aiCanvas"] .workflow-media-status.is-submitting,
body[data-active-view="aiCanvas"] .workflow-media-status.is-compositing {
  color: #101315;
  background: rgba(246, 247, 247, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-media-status.is-completed {
  color: #10251a;
  background: rgba(116, 228, 165, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-media-status.is-failed {
  color: #351010;
  background: rgba(255, 118, 118, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-media-duration {
  left: 12px;
  bottom: 12px;
  padding: 0 10px;
}

body[data-active-view="aiCanvas"] .workflow-media-duration svg {
  width: 13px;
  height: 13px;
}

body[data-active-view="aiCanvas"] .workflow-media-try {
  position: absolute;
  left: 20px;
  bottom: 42px;
  z-index: 3;
  display: grid;
  gap: 10px;
  justify-items: start;
  color: rgba(246, 247, 247, 0.42);
  font-size: 13px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-media-try button {
  height: 22px;
  padding: 0;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 0;
  color: rgba(246, 247, 247, 0.7);
  background: transparent;
  font-size: 13px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-media-progress {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 3;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-media-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f6f7f7, rgba(116, 228, 165, 0.92));
  transition: width 0.22s ease;
}

body[data-active-view="aiCanvas"] .workflow-media-node-footer {
  min-height: 0;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: rgba(38, 39, 40, 0.98);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.22);
}

body[data-active-view="aiCanvas"] .workflow-media-node-footer strong {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.9);
  font-size: 13px;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-media-node-footer p {
  display: -webkit-box;
  min-height: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.48);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  min-height: 0;
  display: grid;
  grid-template-rows: 36px minmax(45px, 1fr) 42px;
  gap: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: rgba(38, 39, 40, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-media-tool-row,
body[data-active-view="aiCanvas"] .workflow-media-control-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-media-tool-row {
  padding: 8px 10px 0;
}

body[data-active-view="aiCanvas"] .workflow-media-tool-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row span {
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.68);
  background: rgba(255, 255, 255, 0.035);
  font-family: inherit;
  font-size: 11px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-media-tool-row button:hover,
body[data-active-view="aiCanvas"] .workflow-media-control-row button:hover {
  color: #f6f7f7;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-media-tool-row .is-expand {
  width: 30px;
  margin-left: auto;
  padding: 0;
}

body[data-active-view="aiCanvas"] .workflow-media-tool-row svg,
body[data-active-view="aiCanvas"] .workflow-media-control-row svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row {
  min-height: 0;
  padding: 0 12px;
  display: grid;
  gap: 3px;
  align-content: start;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.9);
  font-size: 13px;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.48);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row {
  padding: 0 10px 9px;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row span {
  flex: 0 1 auto;
  max-width: 112px;
  border-color: transparent;
  background: transparent;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row span:first-child {
  flex: 1 1 auto;
  justify-content: flex-start;
  max-width: none;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row button {
  flex: 0 0 auto;
  color: rgba(246, 247, 247, 0.74);
}

body[data-active-view="aiCanvas"] .workflow-media-control-row button.is-primary {
  color: #111315;
  border-color: rgba(246, 247, 247, 0.72);
  background: rgba(246, 247, 247, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-media-control-row button.is-primary:hover {
  color: #101315;
  border-color: rgba(216, 255, 114, 0.62);
  background: rgba(216, 255, 114, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port {
  top: 186px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(246, 247, 247, 0.54);
  color: rgba(246, 247, 247, 0.86);
  background: rgba(27, 28, 30, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port::before {
  content: "+";
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
}

body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.input {
  left: -26px;
}

body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.output {
  right: -26px;
}

/* LibTV-style generator node: large preview surface plus compact generate controls. */
body[data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-active-view="aiCanvas"] .workflow-node-videoModel {
  padding: 0;
  display: block;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

body[data-active-view="aiCanvas"] .workflow-node-imageModel:hover,
body[data-active-view="aiCanvas"] .workflow-node-videoModel:hover,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-node-progress {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 26px minmax(280px, 1fr) 188px;
  gap: 10px;
  color: #f6f7f7;
  cursor: grab;
}

body[data-active-view="aiCanvas"] .workflow-generator-titlebar {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(246, 247, 247, 0.58);
  font-size: 13px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-generator-titlebar span,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar em {
  min-width: 0;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-generator-titlebar b {
  color: rgba(246, 247, 247, 0.74);
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-generator-titlebar svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-generator-titlebar em {
  flex: 0 1 auto;
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.58);
  background: rgba(34, 35, 38, 0.78);
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-generator-titlebar em.is-generating,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar em.is-queued,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar em.is-submitting,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar em.is-compositing {
  color: #111315;
  background: rgba(246, 247, 247, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-generator-titlebar em.is-failed {
  color: #351010;
  background: rgba(255, 118, 118, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-generator-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1.5px solid rgba(246, 247, 247, 0.42);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
    rgba(39, 40, 40, 0.98);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected .workflow-generator-stage,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected .workflow-generator-stage {
  border-color: rgba(246, 247, 247, 0.78);
  box-shadow: 0 0 0 3px rgba(246, 247, 247, 0.08), 0 24px 78px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-running .workflow-generator-stage,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-running .workflow-generator-stage {
  border-color: rgba(216, 255, 114, 0.86);
  box-shadow: 0 0 0 3px rgba(216, 255, 114, 0.1), 0 0 36px rgba(216, 255, 114, 0.18), 0 24px 78px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-generator-preview,
body[data-active-view="aiCanvas"] .workflow-generator-preview img,
body[data-active-view="aiCanvas"] .workflow-generator-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body[data-active-view="aiCanvas"] .workflow-generator-preview img,
body[data-active-view="aiCanvas"] .workflow-generator-preview video {
  object-fit: cover;
  filter: saturate(0.94) contrast(1.03);
}

body[data-active-view="aiCanvas"] .workflow-generator-stage.has-result::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 38%, rgba(0, 0, 0, 0.48)),
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.12), transparent 46%);
}

body[data-active-view="aiCanvas"] .workflow-generator-empty-preview {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  justify-items: center;
  color: rgba(246, 247, 247, 0.42);
  font-size: 12px;
  font-weight: 300;
  text-align: center;
}

body[data-active-view="aiCanvas"] .workflow-generator-empty-preview svg {
  width: 54px;
  height: 54px;
  color: rgba(246, 247, 247, 0.24);
  stroke-width: 1.35;
}

body[data-active-view="aiCanvas"] .workflow-generator-empty-preview strong {
  color: rgba(246, 247, 247, 0.78);
  font-size: 14px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-empty-preview span {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-generator-source {
  position: absolute;
  z-index: 4;
  left: 12px;
  top: 12px;
  max-width: calc(100% - 118px);
  height: 30px;
  padding: 3px 9px 3px 4px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.76);
  background: rgba(12, 13, 15, 0.58);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-generator-source img,
body[data-active-view="aiCanvas"] .workflow-generator-source video,
body[data-active-view="aiCanvas"] .workflow-generator-source > i {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
}

body[data-active-view="aiCanvas"] .workflow-generator-source img,
body[data-active-view="aiCanvas"] .workflow-generator-source video {
  object-fit: cover;
}

body[data-active-view="aiCanvas"] .workflow-generator-source > i {
  display: grid;
  place-items: center;
  color: rgba(246, 247, 247, 0.5);
  background: rgba(255, 255, 255, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-generator-source svg {
  width: 14px;
  height: 14px;
}

body[data-active-view="aiCanvas"] .workflow-generator-source span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-generator-status {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  height: 24px;
  padding: 0 9px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.68);
  background: rgba(18, 19, 21, 0.52);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-generator-status b {
  color: rgba(246, 247, 247, 0.46);
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-generator-status.is-generating,
body[data-active-view="aiCanvas"] .workflow-generator-status.is-queued,
body[data-active-view="aiCanvas"] .workflow-generator-status.is-submitting,
body[data-active-view="aiCanvas"] .workflow-generator-status.is-compositing {
  color: #101315;
  background: rgba(246, 247, 247, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-generator-status.is-completed {
  color: #10251a;
  background: rgba(116, 228, 165, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-generator-status.is-failed {
  color: #351010;
  background: rgba(255, 118, 118, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-generator-live-progress {
  position: absolute;
  z-index: 4;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-generator-live-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f6f7f7, rgba(216, 255, 114, 0.92));
  transition: width 0.22s ease;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  min-height: 0;
  display: grid;
  grid-template-rows: 34px minmax(32px, 1fr) 36px 62px;
  gap: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: rgba(38, 39, 40, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row {
  padding: 8px 10px 0;
  display: flex;
  gap: 7px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row button {
  min-width: 0;
  height: 28px;
  padding: 0 9px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.7);
  background: rgba(255, 255, 255, 0.035);
  font-family: inherit;
  font-size: 11px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row button:first-child {
  flex: 1 1 auto;
  justify-content: flex-start;
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row button.is-api-missing {
  color: rgba(255, 211, 110, 0.9);
  border-color: rgba(255, 211, 110, 0.18);
  background: rgba(255, 211, 110, 0.075);
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-generator-prompt {
  min-height: 0;
  margin: 0;
  padding: 1px 12px 0;
  display: -webkit-box;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.56);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body[data-active-view="aiCanvas"] .workflow-generator-flow {
  margin: 0 10px;
  padding: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, auto);
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row {
  min-height: 0;
  padding: 0 10px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 8px;
  align-items: end;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-generator-readiness {
  min-height: 24px;
  padding: 0 8px;
  justify-content: flex-start;
}

body[data-active-view="aiCanvas"] .workflow-generator-requirements {
  flex-wrap: nowrap;
  overflow: hidden;
}

body[data-active-view="aiCanvas"] .workflow-generator-requirements span {
  flex: 0 1 auto;
}

body[data-active-view="aiCanvas"] .workflow-generator-run {
  width: 82px;
  min-height: 50px;
  align-self: stretch;
  border-radius: 13px;
  color: #111315;
  border-color: rgba(246, 247, 247, 0.44);
  background: rgba(246, 247, 247, 0.9);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-generator-run:hover {
  color: #101315;
  border-color: rgba(216, 255, 114, 0.62);
  background: rgba(216, 255, 114, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-generator-run:disabled {
  color: rgba(246, 247, 247, 0.34);
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 188px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(246, 247, 247, 0.54);
  color: rgba(246, 247, 247, 0.86);
  background: rgba(27, 28, 30, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port::before {
  content: "+";
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
}

body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.input {
  left: -26px;
}

body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.output {
  right: -26px;
}

body[data-active-view="aiCanvas"] .workflow-inspector {
  width: min(304px, calc(100vw - 104px));
  right: 12px;
  top: 66px;
  max-height: calc(100vh - 92px);
}

body[data-active-view="aiCanvas"] .workflow-sidebar {
  left: 68px;
  top: 246px;
  width: 260px;
  max-height: min(520px, calc(100vh - 148px));
}

body[data-active-view="aiCanvas"] .workflow-taskbar {
  left: 70px;
  right: 12px;
  bottom: 66px;
  max-height: 184px;
}

body[data-active-view="aiCanvas"] .workflow-taskbar.is-collapsed {
  left: 84px;
  right: auto;
  bottom: 14px;
  width: min(270px, calc(100vw - 156px));
  max-height: 46px;
  padding: 6px;
  display: block;
  overflow: hidden;
}

body[data-active-view="aiCanvas"] .workflow-taskbar.is-collapsed .workflow-taskbar-head {
  min-height: 34px;
  padding: 0 6px 0 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  border-radius: 13px;
}

body[data-active-view="aiCanvas"] .workflow-taskbar.is-collapsed .workflow-taskbar-head strong,
body[data-active-view="aiCanvas"] .workflow-taskbar.is-collapsed .workflow-taskbar-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-taskbar.is-collapsed .workflow-taskbar-head .workflow-icon-button {
  width: 26px;
  height: 26px;
  min-height: 26px;
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar {
  gap: 5px;
  padding: 5px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(18, 19, 21, 0.82);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  justify-content: center;
  color: rgba(246, 247, 247, 0.86);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0;
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar button:hover {
  color: #101315;
  border-color: rgba(246, 247, 247, 0.55);
  background: rgba(246, 247, 247, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar button span {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar button svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.9;
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar .is-danger {
  color: #ff7676;
}

body[data-active-view="aiCanvas"] .workflow-link-menu {
  width: min(430px, calc(100vw - 112px));
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  transform: translate(8px, -48%);
  background:
    linear-gradient(145deg, rgba(33, 35, 38, 0.96), rgba(12, 13, 15, 0.94)),
    rgba(14, 15, 17, 0.96);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head {
  padding: 2px 2px 0 4px;
}

body[data-active-view="aiCanvas"] .workflow-link-menu > small {
  display: block;
  margin: 8px 4px 0;
  color: rgba(246, 247, 247, 0.4);
  font-size: 10px;
  font-weight: 300;
  line-height: 1.35;
}

body[data-active-view="aiCanvas"] .workflow-link-flow-preview {
  margin: 9px 2px 0;
  padding: 7px;
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-link-flow-preview span,
body[data-active-view="aiCanvas"] .workflow-link-flow-preview b {
  min-width: 0;
  padding: 5px 8px;
  overflow: hidden;
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.78);
  background: rgba(255, 255, 255, 0.065);
  font-size: 10px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-link-flow-preview b {
  color: #101214;
  background: rgba(246, 247, 247, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-link-flow-preview i {
  height: 1px;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(246, 247, 247, 0.14);
}

body[data-active-view="aiCanvas"] .workflow-link-flow-preview i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(216, 255, 114, 0.92), transparent);
  animation: workflowLinkPulse 1.35s linear infinite;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list {
  margin-top: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(24, 25, 28, 0.9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] {
  min-height: 82px;
  padding: 8px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "icon"
    "title"
    "meta"
    "hint";
  gap: 5px;
  align-content: start;
  border: 0;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  box-shadow: none;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-run {
  min-height: 31px;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(246, 247, 247, 0.11);
  border-radius: 10px;
  color: rgba(246, 247, 247, 0.82);
  background: rgba(255, 255, 255, 0.055);
  font-size: 10px;
  font-weight: 300;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-run svg {
  width: 12px;
  height: 12px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-run:hover {
  color: #101214;
  border-color: rgba(246, 247, 247, 0.36);
  background: rgba(246, 247, 247, 0.88);
  transform: translateY(-1px);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create]:hover {
  border-color: rgba(246, 247, 247, 0.24);
  background:
    linear-gradient(180deg, rgba(246, 247, 247, 0.12), rgba(246, 247, 247, 0.045)),
    rgba(31, 32, 35, 0.96);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button.is-image:hover {
  border-color: rgba(216, 255, 114, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button.is-video:hover {
  border-color: rgba(120, 199, 255, 0.38);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button.is-result:hover {
  border-color: rgba(118, 231, 197, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-image:hover {
  border-color: rgba(216, 255, 114, 0.22);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-video:hover {
  border-color: rgba(120, 199, 255, 0.28);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-result:hover {
  border-color: rgba(118, 231, 197, 0.22);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] svg {
  width: 18px;
  height: 18px;
  padding: 8px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-image button[data-link-create] svg {
  background: rgba(216, 255, 114, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-video button[data-link-create] svg {
  background: rgba(120, 199, 255, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-result button[data-link-create] svg {
  background: rgba(118, 231, 197, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] span {
  justify-self: start;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] em {
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@keyframes workflowLinkPulse {
  from { transform: translateX(-120%); }
  to { transform: translateX(260%); }
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection {
  width: min(254px, calc(100vw - 108px));
  padding: 7px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-media-inspector-card {
  gap: 9px;
  padding: 10px;
  border-radius: 15px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-inspector-preview {
  height: 154px;
  border-radius: 13px;
}

body[data-active-view="aiCanvas"] .workflow-inspector-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-active-view="aiCanvas"] .workflow-media-inspector-card > p {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.58);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.45;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

body[data-active-view="aiCanvas"] .workflow-media-inspector-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-media-inspector-meta span {
  min-width: 0;
  padding: 7px 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  color: rgba(246, 247, 247, 0.45);
  background: rgba(255, 255, 255, 0.035);
  font-size: 10px;
  font-weight: 300;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-media-inspector-meta b {
  display: block;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.9);
  font-size: 12px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-inspector-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-inspector-actions button {
  min-height: 34px;
  padding: 0 9px;
}

@media (max-width: 780px) {
  body[data-active-view="aiCanvas"] .workflow-link-menu {
    width: min(270px, calc(100vw - 96px));
    transform: translate(8px, -18px);
  }

  body[data-active-view="aiCanvas"] .workflow-link-choice-list {
    grid-template-columns: 1fr;
  }

  body[data-active-view="aiCanvas"] .workflow-link-choice-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
  }

  body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] {
    min-height: 58px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title meta"
      "icon hint hint";
    align-content: center;
  }

  body[data-active-view="aiCanvas"] .workflow-link-choice-run {
    min-width: 92px;
    min-height: 100%;
  }
}

@media (max-width: 640px) {
  .sidebar {
    padding: 10px 12px;
    gap: 8px;
  }

  .brand-block {
    min-height: 40px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .brand-mark::before {
    inset: 5px;
    border-radius: 8px;
  }

  .brand-mark span {
    font-size: 18px;
  }

  .brand-block .eyebrow {
    margin-bottom: 2px;
    font-size: 10px;
  }

  .brand-block h1 {
    font-size: 20px;
    line-height: 1.05;
  }

  .nav-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .nav-item {
    min-height: 48px;
    padding: 6px 4px;
    grid-template-columns: 1fr;
    gap: 4px;
    justify-items: center;
    text-align: center;
    font-size: 12px;
  }

  .nav-item svg {
    width: 17px;
    height: 17px;
  }

  .sidebar-bottom {
    margin-top: 0;
    padding-top: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .side-status {
    min-height: 42px;
    padding: 6px 8px;
    grid-template-columns: 18px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .side-account-copy {
    justify-items: start;
  }

  .main {
    padding: 12px;
  }

  .topbar {
    min-height: 0;
    margin: -12px -12px 12px;
    padding: 12px;
  }

  .template-library-hero {
    padding: 14px;
  }

  .template-library-hero-copy h3 {
    font-size: 26px;
    line-height: 1.08;
  }
}

/* Final guard: the infinite canvas is a full-screen workstation and should not
   inherit the light template page background. */
body[data-active-view="aiCanvas"],
body[data-theme="dark"][data-active-view="aiCanvas"] {
  background: #070809 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] {
  background: #f4f2ed !important;
}

/* LibTV reference pass: nodes become large media/input surfaces, not generic flowchart cards. */
body[data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video,
body[data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-active-view="aiCanvas"] .workflow-node-videoModel {
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card,
body[data-active-view="aiCanvas"] .workflow-media-node-card,
body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  position: relative;
  gap: 8px;
  color: #f6f7f7;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 24px minmax(318px, 1fr) 164px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card {
  grid-template-rows: 24px minmax(318px, 1fr) 148px;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  grid-template-rows: 24px minmax(318px, 1fr) 176px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar {
  height: 24px;
  padding: 0 2px;
  color: rgba(246, 247, 247, 0.58);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button {
  position: absolute;
  z-index: 8;
  top: 32px;
  left: 50%;
  height: 30px;
  padding: 0 13px;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.84);
  background: rgba(35, 36, 38, 0.86);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button:hover,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button:hover {
  color: #111315;
  border-color: rgba(246, 247, 247, 0.64);
  background: rgba(246, 247, 247, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  border: 1.5px solid rgba(246, 247, 247, 0.44);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 34%, rgba(246, 247, 247, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014)),
    #292a2a;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 76px rgba(0, 0, 0, 0.28);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected .workflow-generator-stage,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected .workflow-generator-stage {
  border-color: rgba(246, 247, 247, 0.9);
  box-shadow:
    0 0 0 3px rgba(246, 247, 247, 0.1),
    0 0 0 1px rgba(246, 247, 247, 0.1) inset,
    0 28px 90px rgba(0, 0, 0, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone > svg,
body[data-active-view="aiCanvas"] .workflow-media-empty svg,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview svg {
  width: 62px;
  height: 62px;
  color: rgba(246, 247, 247, 0.22);
  stroke-width: 1.25;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 24px;
  bottom: 58px;
  gap: 12px;
  color: rgba(246, 247, 247, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-prompt-try button,
body[data-active-view="aiCanvas"] .workflow-media-try button {
  color: rgba(246, 247, 247, 0.72);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  border-color: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.012)),
    rgba(39, 40, 40, 0.98);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.045) inset,
    0 24px 76px rgba(0, 0, 0, 0.28);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 30px 34px minmax(48px, 1fr) 34px;
  gap: 2px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 32px minmax(42px, 1fr) 36px;
  gap: 3px;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 31px minmax(30px, 1fr) 34px 56px;
  gap: 3px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row {
  padding: 6px 10px 0;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row button {
  height: 24px;
  border-radius: 8px;
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row,
body[data-active-view="aiCanvas"] .workflow-media-tool-row,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row {
  padding: 5px 10px 0;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-tool-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row span,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row button {
  height: 29px;
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.7);
  background: rgba(255, 255, 255, 0.032);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea {
  min-height: 48px;
  padding: 2px 12px;
  font-size: 13px;
  line-height: 1.45;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row {
  padding: 0 8px 7px 10px;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row select {
  max-width: 92px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit {
  width: 31px;
  height: 31px !important;
  min-height: 31px !important;
  border-radius: 10px !important;
  color: #101315 !important;
  background: #dfe2e2 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit.is-preflight-blocked,
body[data-active-view="aiCanvas"] .workflow-generator-run.is-preflight-blocked {
  color: #3b1111 !important;
  border-color: rgba(255, 118, 118, 0.42) !important;
  background: rgba(255, 162, 162, 0.92) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit:hover {
  background: #f6f7f7 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit.is-preflight-blocked:hover,
body[data-active-view="aiCanvas"] .workflow-generator-run.is-preflight-blocked:hover {
  color: #2d0b0b !important;
  border-color: rgba(255, 118, 118, 0.66) !important;
  background: rgba(255, 188, 188, 0.98) !important;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row {
  padding: 0 9px 8px;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row {
  padding: 0 9px 9px;
  grid-template-columns: minmax(0, 1fr) 74px;
}

body[data-active-view="aiCanvas"] .workflow-generator-run {
  width: 74px;
  min-height: 46px;
  border-radius: 12px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 194px;
  width: 22px;
  height: 22px;
  border-color: rgba(246, 247, 247, 0.58);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.9);
  background: rgba(28, 29, 31, 0.94);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.input {
  top: 194px;
  left: -27px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.output {
  top: 194px;
  right: -27px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port:hover {
  color: #101315;
  border-color: rgba(246, 247, 247, 0.92);
  background: #f6f7f7;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-node-card {
  color: #151711;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar {
  color: rgba(18, 18, 18, 0.58);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.34);
  background:
    radial-gradient(circle at 50% 34%, rgba(18, 18, 18, 0.06), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.36)),
    #e7e3da;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.68) inset,
    0 24px 76px rgba(18, 18, 18, 0.12);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-compose {
  border-color: rgba(18, 18, 18, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 246, 239, 0.64)),
    #f8f6ef;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 20px 56px rgba(18, 18, 18, 0.12);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title > button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar em {
  color: rgba(18, 18, 18, 0.72);
  border-color: rgba(18, 18, 18, 0.1);
  background: rgba(255, 255, 255, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-tool-row button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-tool-row button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-control-row span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-tool-row button {
  color: rgba(18, 18, 18, 0.68);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose textarea,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-prompt-row strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-prompt {
  color: rgba(18, 18, 18, 0.82);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose textarea::placeholder,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-prompt-row p,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-try,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-empty-preview,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-empty {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-try button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-try button {
  color: rgba(18, 18, 18, 0.68);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  color: rgba(18, 18, 18, 0.72);
  border-color: rgba(18, 18, 18, 0.28);
  background: rgba(255, 255, 255, 0.9);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    radial-gradient(circle at 46% 36%, rgba(18, 18, 18, 0.035), transparent 28%),
    radial-gradient(circle at 72% 30%, rgba(50, 112, 150, 0.08), transparent 25%),
    radial-gradient(circle at 24% 76%, rgba(124, 148, 78, 0.08), transparent 24%),
    radial-gradient(circle, rgba(18, 18, 18, 0.14) 1px, transparent 1.2px),
    linear-gradient(#f2efe7, #f2efe7) !important;
  background-size: auto, auto, auto, 16px 16px, auto !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-aura {
  background:
    linear-gradient(90deg, rgba(242, 239, 231, 0.92), transparent 16%, transparent 84%, rgba(242, 239, 231, 0.9)),
    linear-gradient(180deg, rgba(242, 239, 231, 0.88), transparent 20%, transparent 78%, rgba(242, 239, 231, 0.9));
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-brand,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-brand span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-brand strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-brand em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-empty > strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-empty > svg,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-zoom {
  color: rgba(18, 18, 18, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-icon-button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-tool-button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-api-status-pill,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-toolbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-bottom-controls {
  color: rgba(18, 18, 18, 0.72);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 44px rgba(18, 18, 18, 0.12);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-toolbar button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-icon-button {
  color: rgba(18, 18, 18, 0.68);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-toolbar button:first-child,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-icon-button.is-active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-button {
  color: #f7f3e8;
  border-color: rgba(18, 18, 18, 0.28);
  background: linear-gradient(180deg, #242820, #11140f);
}

body[data-active-view="aiCanvas"] .workflow-node-preflight-alert {
  position: absolute;
  z-index: 8;
  left: 16px;
  right: 16px;
  bottom: 28px;
  min-height: 48px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  border: 1px solid rgba(255, 118, 118, 0.34);
  border-radius: 12px;
  color: rgba(255, 232, 232, 0.94);
  background:
    linear-gradient(180deg, rgba(255, 118, 118, 0.14), rgba(255, 118, 118, 0.08)),
    rgba(22, 14, 14, 0.84);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-node-preflight-alert svg {
  width: 17px;
  height: 17px;
  color: rgba(255, 155, 155, 0.95);
  stroke-width: 1.9;
}

body[data-active-view="aiCanvas"] .workflow-node-preflight-alert div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-active-view="aiCanvas"] .workflow-node-preflight-alert span {
  color: rgba(255, 190, 190, 0.78);
  font-size: 11px;
  line-height: 1;
}

body[data-active-view="aiCanvas"] .workflow-node-preflight-alert strong {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 240, 240, 0.94);
  font-size: 12px;
  font-weight: 400 !important;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-preflight .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-node-stage.has-preflight .workflow-media-try {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-preflight .workflow-prompt-live-progress,
body[data-active-view="aiCanvas"] .workflow-media-node-stage.has-preflight .workflow-media-progress,
body[data-active-view="aiCanvas"] .workflow-generator-stage.has-preflight .workflow-generator-live-progress {
  background: rgba(255, 118, 118, 0.18);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-preflight .workflow-prompt-live-progress i,
body[data-active-view="aiCanvas"] .workflow-media-node-stage.has-preflight .workflow-media-progress i,
body[data-active-view="aiCanvas"] .workflow-generator-stage.has-preflight .workflow-generator-live-progress i {
  width: 100% !important;
  background: linear-gradient(90deg, rgba(255, 118, 118, 0.95), rgba(255, 192, 118, 0.9));
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-preflight-alert {
  color: #3b1111;
  border-color: rgba(184, 47, 47, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 245, 245, 0.92), rgba(255, 232, 232, 0.84)),
    #fff7f4;
  box-shadow: 0 16px 42px rgba(120, 28, 28, 0.13);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-preflight-alert svg {
  color: #b83232;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-preflight-alert span {
  color: rgba(121, 29, 29, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-preflight-alert strong {
  color: #3b1111;
}

/* v1.8.14 node reference pass: keep the LibTV-like canvas dense, with nodes as media-first creation cards. */
body[data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-node-radius: 10px;
  --wf-control-radius: 11px;
  --wf-float-bg: rgba(30, 31, 34, 0.88);
  --wf-node-bg: rgba(38, 39, 40, 0.985);
  --wf-node-line: rgba(246, 247, 247, 0.46);
}

body[data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.035), transparent 24%),
    radial-gradient(circle at 72% 30%, rgba(104, 158, 255, 0.045), transparent 25%),
    radial-gradient(circle at 24% 76%, rgba(112, 224, 186, 0.035), transparent 24%),
    radial-gradient(circle, rgba(255, 255, 255, 0.105) 1px, transparent 1.2px),
    #08090b !important;
  background-size: auto, auto, auto, 14px 14px, auto !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-aura {
  background:
    linear-gradient(90deg, rgba(8, 9, 11, 0.9), transparent 12%, transparent 88%, rgba(8, 9, 11, 0.9)),
    linear-gradient(180deg, rgba(8, 9, 11, 0.86), transparent 16%, transparent 84%, rgba(8, 9, 11, 0.86));
}

body[data-active-view="aiCanvas"] .workflow-topbar {
  inset: 12px 12px auto 12px;
}

body[data-active-view="aiCanvas"] .workflow-icon-button,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-primary-button {
  min-height: 34px;
  border-radius: 13px;
  background: var(--wf-float-bg) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
}

body[data-active-view="aiCanvas"] .workflow-icon-button {
  width: 34px;
}

body[data-active-view="aiCanvas"] .workflow-tool-button {
  padding: 0 10px;
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-run-button {
  min-width: 68px;
  padding: 0 14px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar {
  left: 12px;
  width: 48px;
  padding: 6px;
  gap: 5px;
  border-radius: 17px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 12px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button span {
  left: 44px;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls {
  left: 12px;
  bottom: 12px;
  padding: 6px;
  gap: 5px;
  border-radius: 15px;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-icon-button {
  width: 25px;
  height: 25px;
  min-height: 25px;
  border-radius: 8px;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-zoom {
  min-width: 52px;
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-sidebar {
  left: 68px;
  top: 300px;
  width: 258px;
  padding: 7px;
  border-radius: 16px;
}

body[data-active-view="aiCanvas"] .workflow-inspector {
  top: 58px;
  right: 12px;
  width: min(314px, calc(100vw - 92px));
  padding: 7px;
  border-radius: 16px;
}

body[data-active-view="aiCanvas"] .workflow-taskbar {
  left: 76px;
  right: 12px;
  bottom: 66px;
  max-height: 210px;
  padding: 7px;
  border-radius: 16px;
}

body[data-active-view="aiCanvas"] .workflow-palette-card {
  min-height: 42px;
  padding: 6px;
  grid-template-columns: 28px minmax(0, 1fr);
  border-radius: 10px;
}

body[data-active-view="aiCanvas"] .workflow-palette-card i {
  width: 28px;
  height: 28px;
}

body[data-active-view="aiCanvas"] .workflow-palette-card small {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card,
body[data-active-view="aiCanvas"] .workflow-media-node-card,
body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  gap: 9px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 24px minmax(326px, 1fr) 158px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card {
  grid-template-rows: 24px minmax(326px, 1fr) 140px;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  grid-template-rows: 24px minmax(326px, 1fr) 168px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar {
  height: 24px;
  padding: 0;
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button {
  top: 31px;
  height: 28px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(31, 32, 34, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: var(--wf-node-line);
  border-radius: var(--wf-node-radius);
  background:
    radial-gradient(circle at 50% 32%, rgba(246, 247, 247, 0.075), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
    var(--wf-node-bg) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 22px 64px rgba(0, 0, 0, 0.28);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone > svg,
body[data-active-view="aiCanvas"] .workflow-media-empty svg,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview svg {
  width: 56px;
  height: 56px;
  color: rgba(246, 247, 247, 0.2);
  stroke-width: 1.2;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 24px;
  bottom: 54px;
  gap: 10px;
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.01)),
    rgba(38, 39, 40, 0.99);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 54px rgba(0, 0, 0, 0.26);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 28px 32px minmax(46px, 1fr) 33px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row {
  padding: 6px 9px 0;
  gap: 4px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row button {
  height: 22px;
  border-radius: 7px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row,
body[data-active-view="aiCanvas"] .workflow-media-tool-row,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row {
  padding: 4px 9px 0;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-tool-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row span,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row button {
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea {
  min-height: 44px;
  padding: 1px 11px;
  font-size: 12px;
  line-height: 1.45;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row {
  padding: 0 7px 7px 9px;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row select {
  max-width: 86px;
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill {
  max-width: 104px;
  height: 28px;
  padding: 0 7px;
  border-radius: 8px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit {
  width: 30px;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 30px minmax(38px, 1fr) 34px;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row {
  padding: 0 8px 7px;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 29px minmax(28px, 1fr) 32px 52px;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row {
  padding: 0 8px 8px;
  grid-template-columns: minmax(0, 1fr) 68px;
}

body[data-active-view="aiCanvas"] .workflow-generator-run {
  width: 68px;
  min-height: 43px;
  border-radius: 11px;
}

body[data-active-view="aiCanvas"] .workflow-generator-requirements span.is-ready {
  color: rgba(130, 236, 178, 0.9);
  border-color: rgba(130, 236, 178, 0.18);
  background: rgba(130, 236, 178, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-generator-requirements span.is-mock {
  color: rgba(246, 247, 247, 0.58);
  border-color: rgba(246, 247, 247, 0.08);
  background: rgba(246, 247, 247, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-generator-requirements span.is-blocked {
  color: rgba(255, 169, 169, 0.92);
  border-color: rgba(255, 118, 118, 0.2);
  background: rgba(255, 118, 118, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 202px;
  width: 20px;
  height: 20px;
  border-color: rgba(246, 247, 247, 0.58);
  background: rgba(27, 28, 30, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port::before {
  font-size: 16px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.input {
  left: -25px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.output {
  right: -25px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-float-bg: rgba(255, 255, 255, 0.78);
  --wf-node-bg: #e5e2db;
  --wf-node-line: rgba(18, 18, 18, 0.32);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    radial-gradient(circle at 46% 36%, rgba(18, 18, 18, 0.03), transparent 28%),
    radial-gradient(circle at 72% 30%, rgba(50, 112, 150, 0.065), transparent 25%),
    radial-gradient(circle at 24% 76%, rgba(124, 148, 78, 0.065), transparent 24%),
    radial-gradient(circle, rgba(18, 18, 18, 0.14) 1px, transparent 1.2px),
    #f2efe7 !important;
  background-size: auto, auto, auto, 14px 14px, auto !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-aura {
  background:
    linear-gradient(90deg, rgba(242, 239, 231, 0.92), transparent 12%, transparent 88%, rgba(242, 239, 231, 0.92)),
    linear-gradient(180deg, rgba(242, 239, 231, 0.86), transparent 16%, transparent 84%, rgba(242, 239, 231, 0.86));
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-readiness-pill.is-ready {
  color: #276843;
  border-color: rgba(39, 104, 67, 0.18);
  background: rgba(39, 104, 67, 0.08);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-readiness-pill.is-blocked,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-requirements span.is-blocked {
  color: #8d2424;
  border-color: rgba(141, 36, 36, 0.18);
  background: rgba(141, 36, 36, 0.08);
}

/* Console compact guard: logs and preflight warnings must not reserve canvas space unless the user opens Console. */
body[data-active-view="aiCanvas"] .workflow-taskbar.is-collapsed {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell.has-activity .workflow-taskbar.is-collapsed {
  display: block;
}

/* v1.8.25 LibTV node reference pass: keep nodes as quiet media cards, with controls only where creation happens. */
body[data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video,
body[data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-active-view="aiCanvas"] .workflow-node-videoModel {
  filter: drop-shadow(0 26px 58px rgba(0, 0, 0, 0.22));
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected {
  filter: drop-shadow(0 30px 76px rgba(0, 0, 0, 0.34));
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 24px minmax(328px, 1fr) 142px;
  gap: 9px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card {
  grid-template-rows: 24px minmax(328px, 1fr) 128px;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  grid-template-rows: 24px minmax(328px, 1fr) 154px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar span {
  color: rgba(246, 247, 247, 0.62);
  letter-spacing: 0;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title b,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar b {
  color: rgba(246, 247, 247, 0.46);
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(246, 247, 247, 0.5);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 32%, rgba(246, 247, 247, 0.075), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    #262727 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 22px 62px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-prompt-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-media-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-generator-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar em.is-ready,
body[data-active-view="aiCanvas"] .workflow-media-node-title em:not(.is-intermediate) {
  opacity: 0;
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt:hover .workflow-prompt-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-upload:hover .workflow-media-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-image:hover .workflow-media-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-video:hover .workflow-media-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-imageModel:hover .workflow-generator-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-videoModel:hover .workflow-generator-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-imageModel:hover .workflow-generator-titlebar em.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-videoModel:hover .workflow-generator-titlebar em.is-ready {
  opacity: 0.72;
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 34px minmax(64px, 1fr) 34px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.008)),
    rgba(37, 38, 39, 0.99);
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row {
  padding: 7px 10px 0;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea {
  min-height: 64px;
  padding: 5px 12px 2px;
  color: rgba(246, 247, 247, 0.82);
  font-size: 12px;
  line-height: 1.52;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row {
  padding: 0 8px 7px 10px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 30px minmax(30px, 1fr) 32px;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row p {
  -webkit-line-clamp: 1;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 30px minmax(34px, 1fr) 44px;
}

body[data-active-view="aiCanvas"] .workflow-generator-flow {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row {
  grid-template-columns: minmax(0, 1fr) 70px;
}

body[data-active-view="aiCanvas"] .workflow-generator-requirements {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-generator-run {
  min-height: 38px;
  width: 70px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-tool-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row span,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row button {
  height: 27px;
  border-color: rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit {
  width: 30px;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 202px;
  width: 20px;
  height: 20px;
  border-color: rgba(246, 247, 247, 0.62);
  background: rgba(29, 30, 31, 0.96);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.36);
  background:
    radial-gradient(circle at 50% 32%, rgba(18, 18, 18, 0.055), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.36)),
    #e6e2da !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-compose {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(248, 246, 239, 0.62)),
    #f8f6ef;
}

/* Edge chrome compact pass: keep the canvas visually dominant. */
body[data-active-view="aiCanvas"] .workflow-api-status-pill {
  min-height: 34px;
  max-width: 230px;
  padding: 0 6px 0 10px;
  gap: 7px;
  border-radius: 12px;
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill span {
  max-width: 176px;
  overflow: hidden;
  color: rgba(247, 248, 248, 0.82);
  font-size: 11px;
  text-overflow: ellipsis;
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill button {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection {
  top: 72px;
  right: 10px;
  width: min(218px, calc(100vw - 94px));
  max-height: calc(100vh - 94px);
  padding: 6px;
  border-radius: 15px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-media-inspector-card {
  gap: 8px;
  padding: 8px;
  border-radius: 13px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-section-head {
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-section-head strong {
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-section-head span {
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-section-head em {
  padding: 3px 6px;
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-inspector-preview,
body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-media-inspector-card > p,
body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-inspector-note {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-media-inspector-meta {
  gap: 4px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-media-inspector-meta span {
  padding: 5px 4px;
  border-radius: 8px;
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-media-inspector-meta b {
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-inspector-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-inspector-actions button {
  min-height: 30px;
  padding: 0 7px;
  gap: 5px;
  border-radius: 9px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection .workflow-inspector-actions button svg {
  width: 14px;
  height: 14px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-api-status-pill span {
  color: rgba(18, 18, 18, 0.76);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-api-status-pill button {
  color: rgba(18, 18, 18, 0.62);
  background: rgba(18, 18, 18, 0.045);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-api-status-pill button:hover {
  color: #f7f3e8;
  background: rgba(18, 18, 18, 0.86);
}

/* Connection menu compact pass: image/video decisions should be fast and obvious. */
body[data-active-view="aiCanvas"] .workflow-link-menu {
  width: min(342px, calc(100vw - 96px));
  padding: 8px;
  border-radius: 16px;
  transform: translate(8px, -44%);
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head {
  padding: 0 0 0 2px;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head span {
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head strong {
  max-width: 240px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-link-menu > small {
  margin: 6px 3px 0;
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-link-flow-preview {
  margin: 7px 1px 0;
  padding: 6px;
  gap: 6px;
  border-radius: 11px;
}

body[data-active-view="aiCanvas"] .workflow-link-flow-preview span,
body[data-active-view="aiCanvas"] .workflow-link-flow-preview b {
  padding: 4px 7px;
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list {
  margin-top: 7px;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card {
  gap: 5px;
  padding: 4px;
  border-radius: 13px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-recommended {
  border-color: rgba(246, 247, 247, 0.28);
  background:
    linear-gradient(180deg, rgba(246, 247, 247, 0.105), rgba(246, 247, 247, 0.032)),
    rgba(27, 28, 30, 0.95);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-video.is-recommended {
  border-color: rgba(120, 199, 255, 0.42);
  box-shadow: 0 0 0 1px rgba(120, 199, 255, 0.08) inset;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-image.is-recommended {
  border-color: rgba(216, 255, 114, 0.4);
  box-shadow: 0 0 0 1px rgba(216, 255, 114, 0.08) inset;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] {
  min-height: 68px;
  padding: 7px;
  gap: 4px;
  border-radius: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] svg {
  width: 16px;
  height: 16px;
  padding: 7px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong b {
  padding: 2px 4px;
  border-radius: 999px;
  color: #101214;
  background: rgba(246, 247, 247, 0.9);
  font-size: 8px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong kbd {
  min-width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(246, 247, 247, 0.16);
  border-radius: 5px;
  color: rgba(246, 247, 247, 0.52);
  background: rgba(246, 247, 247, 0.07);
  font-family: inherit;
  font-size: 8px;
  font-weight: 300;
  line-height: 1;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] span {
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] em {
  font-size: 9px;
  -webkit-line-clamp: 1;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-run {
  min-height: 28px;
  padding: 0 7px;
  border-radius: 9px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-run em {
  min-width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  color: rgba(246, 247, 247, 0.48);
  background: rgba(255, 255, 255, 0.07);
  font-size: 8px;
  font-style: normal;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-recommended .workflow-link-choice-run {
  color: #101214;
  border-color: rgba(246, 247, 247, 0.38);
  background: rgba(246, 247, 247, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-recommended .workflow-link-choice-run em {
  color: rgba(16, 18, 20, 0.58);
  background: rgba(16, 18, 20, 0.08);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu {
  border-color: rgba(18, 18, 18, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 243, 236, 0.88)),
    #f7f4ed;
  box-shadow: 0 22px 64px rgba(18, 18, 18, 0.16);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-choice-card {
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu-head strong {
  color: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu > small {
  color: rgba(18, 18, 18, 0.5);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong kbd {
  border-color: rgba(18, 18, 18, 0.12);
  color: rgba(18, 18, 18, 0.5);
  background: rgba(18, 18, 18, 0.05);
}

/* v1.8.32 LibTV node reference pass: media-first nodes with compact floating controls. */
body[data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    radial-gradient(circle at 49% 44%, rgba(246, 247, 247, 0.035), transparent 30%),
    radial-gradient(circle at 22% 72%, rgba(120, 199, 255, 0.035), transparent 23%),
    radial-gradient(circle, rgba(246, 247, 247, 0.105) 1px, transparent 1.2px),
    #090a0a !important;
  background-size: auto, auto, 14px 14px, auto !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-aura {
  background:
    linear-gradient(90deg, rgba(9, 10, 10, 0.9), transparent 11%, transparent 89%, rgba(9, 10, 10, 0.9)),
    linear-gradient(180deg, rgba(9, 10, 10, 0.84), transparent 14%, transparent 84%, rgba(9, 10, 10, 0.88));
}

body[data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video,
body[data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-active-view="aiCanvas"] .workflow-node-videoModel {
  filter: drop-shadow(0 22px 56px rgba(0, 0, 0, 0.2));
}

body[data-active-view="aiCanvas"] .workflow-node-prompt:hover,
body[data-active-view="aiCanvas"] .workflow-node-upload:hover,
body[data-active-view="aiCanvas"] .workflow-node-image:hover,
body[data-active-view="aiCanvas"] .workflow-node-video:hover,
body[data-active-view="aiCanvas"] .workflow-node-imageModel:hover,
body[data-active-view="aiCanvas"] .workflow-node-videoModel:hover {
  filter: drop-shadow(0 26px 68px rgba(0, 0, 0, 0.28));
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected {
  filter: drop-shadow(0 30px 74px rgba(0, 0, 0, 0.36));
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card,
body[data-active-view="aiCanvas"] .workflow-media-node-card,
body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  position: relative;
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 22px minmax(326px, 1fr) 152px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card {
  grid-template-rows: 22px minmax(326px, 1fr) 132px;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  grid-template-rows: 22px minmax(326px, 1fr) 154px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar {
  height: 22px;
  padding: 0 2px;
  color: rgba(246, 247, 247, 0.52);
  font-size: 12px;
  line-height: 22px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar span {
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title button,
body[data-active-view="aiCanvas"] .workflow-media-node-title button {
  position: absolute;
  z-index: 9;
  top: 32px !important;
  left: 50%;
  height: 28px;
  padding: 0 13px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.86);
  border-color: rgba(255, 255, 255, 0.105);
  background: rgba(31, 32, 34, 0.94);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(12px);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  border: 1.5px solid rgba(246, 247, 247, 0.46);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 30%, rgba(246, 247, 247, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #272828 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.018) inset,
    0 20px 54px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected .workflow-generator-stage,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected .workflow-generator-stage {
  border-color: rgba(246, 247, 247, 0.82);
  box-shadow:
    0 0 0 3px rgba(246, 247, 247, 0.07),
    0 24px 72px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-prompt-empty-icon,
body[data-active-view="aiCanvas"] .workflow-media-empty svg,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview svg {
  color: rgba(246, 247, 247, 0.2);
  stroke-width: 1.15;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 24px;
  bottom: 54px;
  gap: 10px;
  color: rgba(246, 247, 247, 0.4);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try button,
body[data-active-view="aiCanvas"] .workflow-media-try button {
  color: rgba(246, 247, 247, 0.76);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  border-color: rgba(255, 255, 255, 0.052);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006)),
    rgba(36, 37, 38, 0.99);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 18px 48px rgba(0, 0, 0, 0.23);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 44px minmax(58px, 1fr) 34px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 42px minmax(30px, 1fr) 32px;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 36px minmax(34px, 1fr) 44px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row,
body[data-active-view="aiCanvas"] .workflow-media-tool-row,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row {
  padding: 7px 10px 0;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-media-tool-row button:not(.is-expand) {
  width: 40px;
  height: 36px;
  padding: 0;
  flex-direction: column;
  gap: 2px;
  border-radius: 9px;
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row .is-expand,
body[data-active-view="aiCanvas"] .workflow-media-tool-row .is-expand {
  width: 30px;
  height: 30px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row svg,
body[data-active-view="aiCanvas"] .workflow-media-tool-row svg {
  width: 13px;
  height: 13px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea {
  min-height: 54px;
  padding: 4px 12px 0;
  font-size: 12px;
  line-height: 1.46;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row {
  padding: 0 8px 7px 10px;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row span,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row button {
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row select {
  max-width: 88px;
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill {
  max-width: 94px;
  height: 28px;
  padding: 0 7px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit {
  width: 30px;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row {
  padding: 0 8px 7px;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row {
  padding: 0 10px;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row p {
  -webkit-line-clamp: 1;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row {
  grid-template-columns: minmax(0, 1fr) 70px;
  padding: 0 8px 8px;
}

body[data-active-view="aiCanvas"] .workflow-generator-run {
  width: 70px;
  min-height: 38px;
  border-radius: 11px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 190px;
  width: 21px;
  height: 21px;
  border-color: rgba(246, 247, 247, 0.58);
  color: rgba(246, 247, 247, 0.9);
  background: rgba(29, 30, 31, 0.96);
  box-shadow: 0 11px 28px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.input {
  left: -25px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.output {
  right: -25px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port:hover {
  color: #101214;
  border-color: rgba(216, 255, 114, 0.8);
  background: rgba(216, 255, 114, 0.94);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    radial-gradient(circle at 49% 44%, rgba(18, 18, 18, 0.026), transparent 30%),
    radial-gradient(circle at 22% 72%, rgba(50, 112, 150, 0.05), transparent 23%),
    radial-gradient(circle, rgba(18, 18, 18, 0.13) 1px, transparent 1.2px),
    #f2efe7 !important;
  background-size: auto, auto, 14px 14px, auto !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-aura {
  background:
    linear-gradient(90deg, rgba(242, 239, 231, 0.88), transparent 11%, transparent 89%, rgba(242, 239, 231, 0.88)),
    linear-gradient(180deg, rgba(242, 239, 231, 0.8), transparent 14%, transparent 84%, rgba(242, 239, 231, 0.86));
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar {
  color: rgba(18, 18, 18, 0.54);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title button {
  color: rgba(18, 18, 18, 0.82);
  border-color: rgba(18, 18, 18, 0.09);
  background: rgba(255, 255, 255, 0.88);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.32);
  background:
    radial-gradient(circle at 50% 30%, rgba(18, 18, 18, 0.05), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.3)),
    #e6e2da !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-compose {
  border-color: rgba(18, 18, 18, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(248, 246, 239, 0.58)),
    #f8f6ef;
}

/* v1.8.34 Pipeline edge state pass: make AI workflow execution visible and easier to operate. */
body[data-active-view="aiCanvas"] .workflow-edge-hitbox {
  fill: none;
  stroke: transparent;
  stroke-width: 22;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-edges marker#workflowArrow path {
  fill: rgba(246, 247, 247, 0.54);
}

body[data-active-view="aiCanvas"] .workflow-edges marker#workflowArrowRunning path {
  fill: #d8ff72;
}

body[data-active-view="aiCanvas"] .workflow-edges marker#workflowArrowCompleted path {
  fill: rgba(116, 228, 165, 0.96);
}

body[data-active-view="aiCanvas"] .workflow-edges marker#workflowArrowFailed path {
  fill: rgba(255, 118, 118, 0.96);
}

body[data-active-view="aiCanvas"] .workflow-edge {
  stroke: rgba(246, 247, 247, 0.34);
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: stroke 0.16s ease, stroke-width 0.16s ease, filter 0.16s ease;
}

body[data-active-view="aiCanvas"] .workflow-edge.is-running {
  marker-end: url(#workflowArrowRunning);
  stroke: #f6f7f7;
  stroke-width: 3.6;
  stroke-dasharray: 11 8;
  animation: workflowDash 0.58s linear infinite;
  filter:
    drop-shadow(0 0 8px rgba(246, 247, 247, 0.46))
    drop-shadow(0 0 18px rgba(216, 255, 114, 0.24));
}

body[data-active-view="aiCanvas"] .workflow-edge.is-running.is-path-active {
  stroke: #ffffff;
  stroke-width: 4.2;
  filter:
    drop-shadow(0 0 10px rgba(246, 247, 247, 0.62))
    drop-shadow(0 0 28px rgba(120, 199, 255, 0.34));
}

body[data-active-view="aiCanvas"] .workflow-edge.is-completed {
  marker-end: url(#workflowArrowCompleted);
  stroke: rgba(116, 228, 165, 0.72);
  stroke-width: 2.6;
}

body[data-active-view="aiCanvas"] .workflow-edge.is-failed {
  marker-end: url(#workflowArrowFailed);
  stroke: rgba(255, 118, 118, 0.92);
  stroke-width: 3.2;
  stroke-dasharray: 4 7;
}

body[data-active-view="aiCanvas"] .workflow-edge-flow {
  stroke: rgba(216, 255, 114, 0.5);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 2 15;
  animation: workflowDash 0.72s linear infinite;
  filter: drop-shadow(0 0 18px rgba(216, 255, 114, 0.38));
}

body[data-active-view="aiCanvas"] .workflow-edge-flow.is-stage-queued,
body[data-active-view="aiCanvas"] .workflow-edge-flow.is-stage-submitting,
body[data-active-view="aiCanvas"] .workflow-edge-flow.is-stage-validating {
  stroke: rgba(120, 199, 255, 0.42);
  animation-duration: 1s;
}

body[data-active-view="aiCanvas"] .workflow-edge-particles circle {
  fill: #f6f7f7;
  filter:
    drop-shadow(0 0 8px rgba(246, 247, 247, 0.82))
    drop-shadow(0 0 18px rgba(120, 199, 255, 0.6));
}

body[data-active-view="aiCanvas"] .workflow-edge-label {
  font-weight: 300;
  letter-spacing: 0;
}

body[data-active-view="aiCanvas"] .workflow-edge-label.is-running {
  fill: #101214;
  stroke: rgba(246, 247, 247, 0.94);
  stroke-width: 9px;
}

body[data-active-view="aiCanvas"] .workflow-edge-label.is-completed {
  fill: rgba(116, 228, 165, 0.95);
  stroke: rgba(9, 10, 10, 0.72);
  stroke-width: 5px;
}

body[data-active-view="aiCanvas"] .workflow-edge-label.is-failed {
  fill: rgba(255, 118, 118, 0.96);
  stroke: rgba(9, 10, 10, 0.78);
  stroke-width: 5px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge {
  stroke: rgba(18, 18, 18, 0.34);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-label.is-running {
  fill: #151712;
  stroke: rgba(255, 255, 255, 0.92);
}

/* v1.8.35 Result collector pass: make generated output management visible on the canvas. */
body[data-active-view="aiCanvas"] .workflow-node-result {
  padding: 0;
  display: block;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 24px 58px rgba(0, 0, 0, 0.24));
  backdrop-filter: none;
}

body[data-active-view="aiCanvas"] .workflow-node-result:hover,
body[data-active-view="aiCanvas"] .workflow-node-result.is-selected {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 30px 78px rgba(0, 0, 0, 0.34));
}

body[data-active-view="aiCanvas"] .workflow-node-result .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-result .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-result .workflow-node-progress {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-card {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 24px minmax(154px, 1fr) 54px 54px 42px;
  gap: 8px;
  color: #f6f7f7;
  cursor: grab;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-head {
  height: 24px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(246, 247, 247, 0.56);
  font-size: 12px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-head span,
body[data-active-view="aiCanvas"] .workflow-result-collector-head em {
  min-width: 0;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-head svg {
  width: 14px;
  height: 14px;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-head em {
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1.5px solid rgba(246, 247, 247, 0.42);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 30%, rgba(246, 247, 247, 0.07), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.01)),
    #252627;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.018) inset,
    0 20px 54px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-node-result.is-selected .workflow-result-collector-stage {
  border-color: rgba(246, 247, 247, 0.82);
  box-shadow:
    0 0 0 3px rgba(246, 247, 247, 0.07),
    0 24px 72px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-stage img,
body[data-active-view="aiCanvas"] .workflow-result-collector-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.04);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 44%, rgba(0, 0, 0, 0.54)),
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.12), transparent 46%);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-card.is-empty .workflow-result-collector-stage::after {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: rgba(246, 247, 247, 0.42);
  font-size: 12px;
  font-weight: 300;
  text-align: center;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-empty svg {
  width: 48px;
  height: 48px;
  color: rgba(246, 247, 247, 0.22);
  stroke-width: 1.2;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-empty strong {
  color: rgba(246, 247, 247, 0.78);
  font-size: 13px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-empty span {
  max-width: 230px;
  color: rgba(246, 247, 247, 0.42);
  line-height: 1.45;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-badge {
  position: absolute;
  z-index: 3;
  left: 12px;
  bottom: 12px;
  height: 25px;
  padding: 0 9px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.82);
  background: rgba(12, 13, 15, 0.58);
  backdrop-filter: blur(12px);
  font-size: 10px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-badge svg {
  width: 13px;
  height: 13px;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-badge b {
  color: rgba(246, 247, 247, 0.54);
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-meta,
body[data-active-view="aiCanvas"] .workflow-result-collector-strip,
body[data-active-view="aiCanvas"] .workflow-result-collector-actions {
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 10px;
  background: rgba(36, 37, 38, 0.99);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-meta {
  min-height: 0;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
  align-content: start;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-meta strong {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.9);
  font-size: 12px;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-meta p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.5);
  font-size: 11px;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-strip {
  min-height: 0;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  overflow: hidden;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-strip > span {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  color: rgba(246, 247, 247, 0.42);
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-strip button {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: rgba(246, 247, 247, 0.62);
  background: rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-strip img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-strip small,
body[data-active-view="aiCanvas"] .workflow-result-collector-strip b {
  position: absolute;
  z-index: 2;
  left: 4px;
  right: 4px;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.82);
  font-size: 8px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-strip small {
  top: 4px;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-strip b {
  bottom: 4px;
  color: rgba(246, 247, 247, 0.56);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-actions {
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-actions button {
  min-width: 0;
  height: 30px;
  padding: 0 5px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: rgba(246, 247, 247, 0.72);
  background: rgba(255, 255, 255, 0.035);
  font-size: 10px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-actions button:hover:not(:disabled) {
  color: #101214;
  border-color: rgba(216, 255, 114, 0.62);
  background: rgba(216, 255, 114, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-actions button:disabled {
  color: rgba(246, 247, 247, 0.26);
  cursor: not-allowed;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-actions svg {
  width: 13px;
  height: 13px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-stage {
  border-color: rgba(18, 18, 18, 0.3);
  background:
    radial-gradient(circle at 50% 30%, rgba(18, 18, 18, 0.05), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.3)),
    #e6e2da;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-meta,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-strip,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-actions {
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

/* v1.8.36 LibTV node panel pass: make media nodes behave like compact generation panels. */
body[data-active-view="aiCanvas"] .workflow-media-node-card {
  grid-template-rows: 24px minmax(340px, 1fr) 148px;
  gap: 9px;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  grid-template-rows: 24px minmax(340px, 1fr) 176px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 24px minmax(340px, 1fr) 166px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar {
  color: rgba(246, 247, 247, 0.62);
  font-size: 12px;
  letter-spacing: 0;
}

body[data-active-view="aiCanvas"] .workflow-media-node-title > button,
body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button {
  color: rgba(246, 247, 247, 0.82);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(31, 32, 34, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  min-height: 340px;
  border-width: 1.5px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 34%, rgba(246, 247, 247, 0.06), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)),
    #262727 !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 32px minmax(56px, 1fr) 36px;
  gap: 3px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01)),
    rgba(36, 37, 39, 0.985);
}

body[data-active-view="aiCanvas"] .workflow-media-tool-row {
  padding: 7px 10px 0;
}

body[data-active-view="aiCanvas"] .workflow-media-tool-row button {
  height: 27px;
  padding: 0 9px;
  border-radius: 8px;
  color: rgba(246, 247, 247, 0.7);
  background: rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-media-tool-row button:first-child {
  color: rgba(246, 247, 247, 0.84);
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row {
  min-height: 0;
  padding: 0 11px;
  display: grid;
  gap: 4px;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row > span {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.36);
  font-size: 11px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  width: 100%;
  min-height: 40px;
  max-height: 58px;
  padding: 0;
  resize: none;
  border: 0;
  color: rgba(246, 247, 247, 0.82);
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.45;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea::placeholder {
  color: rgba(246, 247, 247, 0.38);
}

body[data-active-view="aiCanvas"] .workflow-media-control-row {
  padding: 0 8px 8px 10px;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row span,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row select {
  height: 28px;
  min-width: 0;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  color: rgba(246, 247, 247, 0.66);
  background: rgba(255, 255, 255, 0.03);
  font-family: inherit;
  font-size: 11px;
  font-weight: 300;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row span:first-child {
  flex: 1 1 auto;
  justify-content: flex-start;
  max-width: 142px;
}

body[data-active-view="aiCanvas"] .workflow-media-control-select {
  max-width: 86px;
  appearance: none;
}

body[data-active-view="aiCanvas"] .workflow-media-control-select.is-count {
  max-width: 56px;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row .workflow-media-cost {
  flex: 0 0 auto;
  max-width: 46px;
  border-color: transparent;
  background: transparent;
  color: rgba(246, 247, 247, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-media-control-row button.is-primary {
  color: #111315;
  border-color: rgba(246, 247, 247, 0.66);
  background: rgba(246, 247, 247, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-media-control-row button:hover,
body[data-active-view="aiCanvas"] .workflow-media-control-row select:hover {
  color: #f6f7f7;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-media-node-stage .workflow-media-empty strong,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview strong {
  font-size: 13px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-stage .workflow-media-empty span,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview span {
  max-width: 240px;
  line-height: 1.35;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 206px;
  width: 20px;
  height: 20px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.28);
  background:
    radial-gradient(circle at 50% 34%, rgba(18, 18, 18, 0.04), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.24)),
    #e4e1d9 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose {
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.76);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-prompt-row > span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-prompt-textarea::placeholder {
  color: rgba(18, 18, 18, 0.38);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  color: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-control-row span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-control-row select,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-tool-row button {
  color: rgba(18, 18, 18, 0.64);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-control-row button.is-primary {
  color: #f6f7f7;
  border-color: rgba(18, 18, 18, 0.7);
  background: rgba(18, 18, 18, 0.88);
}

/* v1.8.37 Quick generate panel: double-click canvas creates and runs a compact workflow. */
body[data-active-view="aiCanvas"] .workflow-quick-create {
  width: min(520px, calc(100vw - 112px));
  padding: 11px;
  gap: 8px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 0, rgba(216, 255, 114, 0.16), transparent 34%),
    radial-gradient(circle at 12% 8%, rgba(120, 199, 255, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(36, 37, 39, 0.96), rgba(14, 15, 17, 0.965));
  box-shadow:
    0 34px 98px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head {
  min-height: 30px;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head span {
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head strong {
  font-size: 14px;
}

body[data-active-view="aiCanvas"] .workflow-quick-mode-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-quick-mode-row button {
  min-height: 32px;
  border-radius: 10px;
  border-color: transparent;
  background: transparent;
}

body[data-active-view="aiCanvas"] .workflow-quick-suggestions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-quick-suggestions button {
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.66);
  background: rgba(255, 255, 255, 0.035);
  font-family: inherit;
  font-size: 11px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-quick-suggestions button:hover {
  color: rgba(246, 247, 247, 0.9);
  border-color: rgba(216, 255, 114, 0.22);
  background: rgba(216, 255, 114, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-quick-prompt-box {
  min-height: 104px;
  padding: 9px 10px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.04);
}

body[data-active-view="aiCanvas"] .workflow-quick-prompt-box span {
  color: rgba(246, 247, 247, 0.4);
  font-size: 10px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-quick-create .workflow-quick-prompt-box textarea {
  min-height: 70px;
  padding: 0;
  resize: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
}

body[data-active-view="aiCanvas"] .workflow-quick-param-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-quick-param-row label {
  min-width: 0;
  height: 48px;
  padding: 6px 8px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-quick-param-row span {
  color: rgba(246, 247, 247, 0.38);
  font-size: 10px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-quick-param-row select {
  min-width: 0;
  border: 0;
  color: rgba(246, 247, 247, 0.86);
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  appearance: none;
}

body[data-active-view="aiCanvas"] .workflow-quick-actions {
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 0.82fr));
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-quick-actions button {
  min-height: 36px;
  border-radius: 12px;
}

body[data-active-view="aiCanvas"] .workflow-quick-actions button.is-primary {
  color: #111315;
  border-color: rgba(216, 255, 114, 0.7);
  background: linear-gradient(180deg, rgba(230, 255, 144, 0.98), rgba(185, 238, 90, 0.96));
  box-shadow: 0 16px 34px rgba(216, 255, 114, 0.17);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-create {
  color: rgba(18, 18, 18, 0.86);
  border-color: rgba(18, 18, 18, 0.08);
  background:
    radial-gradient(circle at 86% 0, rgba(106, 142, 36, 0.14), transparent 34%),
    radial-gradient(circle at 12% 8%, rgba(41, 120, 160, 0.1), transparent 32%),
    rgba(255, 255, 255, 0.88);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-suggestions button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-mode-row,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-prompt-box,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-param-row label {
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-prompt-box span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-param-row span {
  color: rgba(18, 18, 18, 0.42);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-param-row select,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-create .workflow-quick-prompt-box textarea {
  color: rgba(18, 18, 18, 0.82);
}

@media (max-width: 720px) {
  body[data-active-view="aiCanvas"] .workflow-quick-create {
    width: min(340px, calc(100vw - 96px));
  }

  body[data-active-view="aiCanvas"] .workflow-quick-suggestions,
  body[data-active-view="aiCanvas"] .workflow-quick-param-row,
  body[data-active-view="aiCanvas"] .workflow-quick-actions {
    grid-template-columns: 1fr;
  }
}

/* v1.8.38 Generator slots: explicit first-frame, last-frame, and reference inputs. */
body[data-active-view="aiCanvas"] .workflow-generator-slots {
  position: absolute;
  z-index: 5;
  left: 12px;
  right: 12px;
  bottom: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  pointer-events: auto;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card.is-image .workflow-generator-slots {
  grid-template-columns: minmax(0, 1fr);
  right: auto;
  width: min(236px, calc(100% - 24px));
}

body[data-active-view="aiCanvas"] .workflow-generator-slot {
  min-width: 0;
  min-height: 42px;
  padding: 5px 7px 5px 5px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.74);
  background: rgba(13, 14, 16, 0.62);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  font-family: inherit;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-generator-slot:hover {
  color: rgba(246, 247, 247, 0.94);
  border-color: rgba(216, 255, 114, 0.26);
  background: rgba(22, 24, 24, 0.8);
}

body[data-active-view="aiCanvas"] .workflow-generator-slot-media {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.44);
  background: rgba(255, 255, 255, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-generator-slot-media img,
body[data-active-view="aiCanvas"] .workflow-generator-slot-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-active-view="aiCanvas"] .workflow-generator-slot-media svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

body[data-active-view="aiCanvas"] .workflow-generator-slot-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}

body[data-active-view="aiCanvas"] .workflow-generator-slot-copy b,
body[data-active-view="aiCanvas"] .workflow-generator-slot-copy em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-generator-slot-copy b {
  color: rgba(246, 247, 247, 0.9);
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-generator-slot-copy em {
  color: rgba(246, 247, 247, 0.46);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-generator-slot.has-media {
  border-color: rgba(116, 228, 165, 0.22);
  background: rgba(17, 32, 25, 0.62);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-slot {
  color: rgba(18, 18, 18, 0.68);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-slot-copy b {
  color: rgba(18, 18, 18, 0.84);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-slot-copy em {
  color: rgba(18, 18, 18, 0.44);
}

/* v1.8.39 Slot picker: choose existing canvas media as first frame or reference. */
body[data-active-view="aiCanvas"] .workflow-slot-picker {
  position: absolute;
  z-index: 64;
  width: min(300px, calc(100vw - 104px));
  max-height: min(410px, calc(100vh - 116px));
  padding: 10px;
  display: grid;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  color: rgba(246, 247, 247, 0.88);
  background:
    radial-gradient(circle at 88% 0, rgba(216, 255, 114, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(34, 35, 38, 0.96), rgba(14, 15, 17, 0.96));
  box-shadow: 0 28px 82px rgba(0, 0, 0, 0.54), 0 0 0 1px rgba(255, 255, 255, 0.035) inset;
  backdrop-filter: blur(22px);
}

body[data-active-view="aiCanvas"] .workflow-slot-picker[hidden] {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-slot-picker-head {
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-slot-picker-head div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-active-view="aiCanvas"] .workflow-slot-picker-head span {
  color: rgba(246, 247, 247, 0.42);
  font-size: 10px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-slot-picker-head strong {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.9);
  font-size: 13px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-slot-upload {
  min-height: 42px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon meta";
  gap: 2px 8px;
  align-items: center;
  border: 1px solid rgba(216, 255, 114, 0.2);
  border-radius: 13px;
  color: rgba(246, 247, 247, 0.86);
  background: rgba(216, 255, 114, 0.07);
  font-family: inherit;
  text-align: left;
}

body[data-active-view="aiCanvas"] .workflow-slot-upload svg {
  grid-area: icon;
  width: 17px;
  height: 17px;
}

body[data-active-view="aiCanvas"] .workflow-slot-upload span,
body[data-active-view="aiCanvas"] .workflow-slot-upload em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-slot-upload span {
  grid-area: title;
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-slot-upload em {
  grid-area: meta;
  color: rgba(246, 247, 247, 0.46);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-slot-candidate-list {
  min-height: 0;
  display: grid;
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
}

body[data-active-view="aiCanvas"] .workflow-slot-candidate {
  min-width: 0;
  min-height: 54px;
  padding: 6px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "media title"
    "media meta";
  gap: 2px 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  color: rgba(246, 247, 247, 0.78);
  background: rgba(255, 255, 255, 0.035);
  font-family: inherit;
  text-align: left;
}

body[data-active-view="aiCanvas"] .workflow-slot-candidate:hover {
  color: rgba(246, 247, 247, 0.95);
  border-color: rgba(216, 255, 114, 0.24);
  background: rgba(216, 255, 114, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-slot-candidate span {
  grid-area: media;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-slot-candidate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-active-view="aiCanvas"] .workflow-slot-candidate b,
body[data-active-view="aiCanvas"] .workflow-slot-candidate em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-slot-candidate b {
  grid-area: title;
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-slot-candidate em {
  grid-area: meta;
  color: rgba(246, 247, 247, 0.44);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-slot-empty {
  min-height: 88px;
  display: grid;
  gap: 8px;
  place-items: center;
  color: rgba(246, 247, 247, 0.42);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 12px;
  font-weight: 300;
  text-align: center;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-slot-picker {
  color: rgba(18, 18, 18, 0.84);
  border-color: rgba(18, 18, 18, 0.08);
  background:
    radial-gradient(circle at 88% 0, rgba(106, 142, 36, 0.13), transparent 34%),
    rgba(255, 255, 255, 0.9);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-slot-picker-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-slot-upload em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-slot-candidate em {
  color: rgba(18, 18, 18, 0.44);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-slot-picker-head strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-slot-candidate b {
  color: rgba(18, 18, 18, 0.84);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-slot-candidate,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-slot-empty {
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

/* v1.8.40 Node reference polish: LibTV-like generation node surfaces. */
body[data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video,
body[data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-active-view="aiCanvas"] .workflow-node-videoModel {
  filter: drop-shadow(0 24px 58px rgba(0, 0, 0, 0.22));
}

body[data-active-view="aiCanvas"] .workflow-node-prompt:hover,
body[data-active-view="aiCanvas"] .workflow-node-upload:hover,
body[data-active-view="aiCanvas"] .workflow-node-image:hover,
body[data-active-view="aiCanvas"] .workflow-node-video:hover,
body[data-active-view="aiCanvas"] .workflow-node-imageModel:hover,
body[data-active-view="aiCanvas"] .workflow-node-videoModel:hover {
  filter: drop-shadow(0 30px 72px rgba(0, 0, 0, 0.34));
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 22px minmax(344px, 1fr) 136px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card {
  grid-template-rows: 22px minmax(344px, 1fr) 126px;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  grid-template-rows: 22px minmax(344px, 1fr) 142px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar {
  height: 22px;
  padding: 0 1px;
  color: rgba(246, 247, 247, 0.6);
  font-size: 12px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title b,
body[data-active-view="aiCanvas"] .workflow-media-node-title b,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar b {
  margin-left: 2px;
  color: rgba(246, 247, 247, 0.78);
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button {
  top: 32px !important;
  height: 29px;
  padding: 0 13px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.11);
  color: rgba(246, 247, 247, 0.86);
  background: rgba(31, 32, 34, 0.96);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  min-height: 344px;
  border: 1.5px solid rgba(246, 247, 247, 0.48);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 30%, rgba(246, 247, 247, 0.075), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #272828 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 22px 64px rgba(0, 0, 0, 0.26);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected .workflow-generator-stage,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected .workflow-generator-stage {
  border-color: rgba(246, 247, 247, 0.86);
  box-shadow:
    0 0 0 3px rgba(246, 247, 247, 0.075),
    0 28px 84px rgba(0, 0, 0, 0.38);
}

body[data-active-view="aiCanvas"] .workflow-prompt-empty-icon,
body[data-active-view="aiCanvas"] .workflow-media-empty svg,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview svg {
  width: 56px;
  height: 56px;
  color: rgba(246, 247, 247, 0.2);
  stroke-width: 1.15;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 24px;
  bottom: 52px;
  gap: 10px;
  color: rgba(246, 247, 247, 0.42);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row,
body[data-active-view="aiCanvas"] .workflow-generator-flow,
body[data-active-view="aiCanvas"] .workflow-generator-requirements {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006)),
    rgba(36, 37, 38, 0.99);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 18px 50px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 38px minmax(58px, 1fr) 32px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 34px minmax(28px, 1fr) 32px;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 32px minmax(34px, 1fr) 40px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row,
body[data-active-view="aiCanvas"] .workflow-media-tool-row,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row {
  padding: 6px 10px 0;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-media-tool-row button:not(.is-expand) {
  width: 40px;
  height: 32px;
  padding: 0;
  flex-direction: column;
  gap: 2px;
  border-radius: 9px;
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row .is-expand,
body[data-active-view="aiCanvas"] .workflow-media-tool-row .is-expand {
  width: 30px;
  height: 30px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  color: rgba(246, 247, 247, 0.84);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea {
  min-height: 58px;
  padding: 3px 12px 0;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row {
  padding: 0 10px;
  align-content: center;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row > span {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  min-height: 34px;
  max-height: 38px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row,
body[data-active-view="aiCanvas"] .workflow-media-control-row {
  padding: 0 8px 7px 10px;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row span,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row button {
  height: 27px;
  padding: 0 8px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.065);
  color: rgba(246, 247, 247, 0.68);
  background: rgba(255, 255, 255, 0.028);
  font-size: 11px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit {
  width: 30px;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row {
  grid-template-columns: minmax(0, 1fr) 70px;
  padding: 0 8px 8px;
}

body[data-active-view="aiCanvas"] .workflow-generator-run {
  width: 70px;
  min-height: 38px;
  border-radius: 11px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 204px;
  width: 20px;
  height: 20px;
  border-color: rgba(246, 247, 247, 0.62);
  color: rgba(246, 247, 247, 0.9);
  background: rgba(29, 30, 31, 0.96);
  box-shadow: 0 11px 28px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.input {
  left: -25px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.output {
  right: -25px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar {
  color: rgba(18, 18, 18, 0.56);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar b {
  color: rgba(18, 18, 18, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.34);
  background:
    radial-gradient(circle at 50% 30%, rgba(18, 18, 18, 0.055), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.34)),
    #e6e2da !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-compose {
  border-color: rgba(18, 18, 18, 0.075);
  background: rgba(255, 255, 255, 0.78);
}

/* v1.8.41 Compact inspector: keep Prompt/model editing inside the node sheet. */
body[data-active-view="aiCanvas"] .workflow-inspector.is-node-sheet {
  top: 72px;
  right: 10px;
  width: min(218px, calc(100vw - 94px));
  max-height: calc(100vh - 94px);
  padding: 6px;
  display: flex !important;
  border-radius: 15px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell.has-prompt-selection .workflow-inspector.is-node-sheet {
  display: flex !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-inspector-card {
  gap: 8px;
  padding: 8px;
  border-radius: 13px;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-inspector-card .workflow-section-head {
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-inspector-card .workflow-section-head strong {
  max-width: 126px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-inspector-card .workflow-section-head span {
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-inspector-card .workflow-section-head em {
  padding: 3px 6px;
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-meta span {
  min-width: 0;
  padding: 6px 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.42);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  font-weight: 300;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-meta b {
  display: block;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.88);
  font-size: 11px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-readiness {
  min-height: 30px;
  padding: 0 8px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  color: rgba(246, 247, 247, 0.62);
  background: rgba(255, 255, 255, 0.035);
  font-size: 10px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-readiness svg {
  width: 13px;
  height: 13px;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-readiness.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-quick-readiness.is-mock {
  color: rgba(130, 236, 178, 0.9);
  border-color: rgba(130, 236, 178, 0.16);
  background: rgba(130, 236, 178, 0.065);
}

body[data-active-view="aiCanvas"] .workflow-node-quick-readiness.is-blocked {
  color: rgba(255, 162, 162, 0.92);
  border-color: rgba(255, 118, 118, 0.2);
  background: rgba(255, 118, 118, 0.075);
}

body[data-active-view="aiCanvas"] .workflow-node-quick-inspector-card .workflow-inspector-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-inspector-card .workflow-inspector-actions button {
  min-height: 30px;
  padding: 0 7px;
  gap: 5px;
  border-radius: 9px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-inspector-card .workflow-inspector-actions button svg {
  width: 14px;
  height: 14px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-meta span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-readiness {
  color: rgba(18, 18, 18, 0.5);
  border-color: rgba(18, 18, 18, 0.07);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-meta b {
  color: rgba(18, 18, 18, 0.82);
}

/* v1.8.42 Floating chrome: keep top-center canvas space clear like first-line AI canvases. */
body[data-active-view="aiCanvas"] .workflow-topbar {
  inset: 13px 13px auto 13px;
  gap: 8px;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-start !important;
}

body[data-active-view="aiCanvas"] .workflow-brand {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 1px 0 0;
}

body[data-active-view="aiCanvas"] .workflow-brand div {
  display: flex;
  gap: 8px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-brand span {
  font-size: 14px;
  font-weight: 400 !important;
}

body[data-active-view="aiCanvas"] .workflow-brand strong {
  max-width: 92px;
  padding-left: 8px;
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-brand em {
  width: 7px;
  height: 7px;
  min-width: 7px;
  margin-left: 2px;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: transparent;
  background: rgba(130, 236, 178, 0.92);
  box-shadow: 0 0 18px rgba(130, 236, 178, 0.26);
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill {
  flex: 0 1 auto;
  margin-left: auto;
  min-height: 32px;
  max-width: 172px;
  padding: 0 5px 0 9px;
  border-radius: 12px;
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill span {
  max-width: 130px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border-radius: 8px;
}

body[data-active-view="aiCanvas"] .workflow-actions {
  flex: 0 0 auto;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-action-group {
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-action-group.is-secondary {
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-icon-button,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-primary-button {
  min-height: 34px;
  border-radius: 12px;
}

body[data-active-view="aiCanvas"] .workflow-icon-button {
  width: 34px;
}

body[data-active-view="aiCanvas"] .workflow-tool-button {
  width: 34px;
  padding: 0;
  justify-content: center;
}

body[data-active-view="aiCanvas"] .workflow-tool-button span {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-run-button {
  min-width: 78px;
  padding: 0 13px;
  border-radius: 13px;
}

body[data-active-view="aiCanvas"] .workflow-run-button span {
  font-size: 12px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-run-button svg {
  width: 15px;
  height: 15px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar {
  left: 13px;
  width: 48px;
  padding: 6px;
  gap: 6px;
  border-radius: 17px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 12px;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls {
  left: 13px;
  bottom: 13px;
  padding: 6px;
  gap: 5px;
  border-radius: 15px;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-icon-button {
  width: 26px;
  height: 26px;
  min-height: 26px;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-zoom {
  min-width: 50px;
  font-size: 12px;
}

@media (max-width: 860px) {
  body[data-active-view="aiCanvas"] .workflow-api-status-pill {
    display: none !important;
  }

  body[data-active-view="aiCanvas"] .workflow-brand strong,
  body[data-active-view="aiCanvas"] .workflow-brand em {
    display: none;
  }

  body[data-active-view="aiCanvas"] .workflow-run-button {
    min-width: 42px;
    width: 42px;
    padding: 0;
  }

  body[data-active-view="aiCanvas"] .workflow-run-button span {
    display: none;
  }
}

/* v1.8.43 LibTV node card reference: large media stage, floating upload, compact console. */
body[data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video,
body[data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-active-view="aiCanvas"] .workflow-node-videoModel {
  filter:
    drop-shadow(0 28px 68px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 0 rgba(255, 255, 255, 0));
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected {
  filter:
    drop-shadow(0 34px 88px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 28px rgba(246, 247, 247, 0.055));
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card,
body[data-active-view="aiCanvas"] .workflow-media-node-card,
body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 22px minmax(350px, 1fr) 148px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card {
  grid-template-rows: 22px minmax(350px, 1fr) 132px;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  grid-template-rows: 22px minmax(350px, 1fr) 150px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar {
  height: 22px;
  padding: 0 1px;
  color: rgba(246, 247, 247, 0.58);
  font-size: 12px;
  font-weight: 300 !important;
  letter-spacing: 0;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar span {
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title svg,
body[data-active-view="aiCanvas"] .workflow-media-node-title svg,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar svg {
  width: 13px;
  height: 13px;
  color: rgba(246, 247, 247, 0.46);
  stroke-width: 1.65;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title b,
body[data-active-view="aiCanvas"] .workflow-media-node-title b,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar b {
  color: rgba(246, 247, 247, 0.82);
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button {
  top: 31px !important;
  height: 29px;
  padding: 0 14px;
  border-radius: 11px;
  color: rgba(246, 247, 247, 0.86);
  border-color: rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.026)),
    rgba(29, 30, 31, 0.96);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  min-height: 350px;
  border: 1.5px solid rgba(246, 247, 247, 0.42);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 34%, rgba(246, 247, 247, 0.075), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.01)),
    #252626 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.018) inset,
    0 22px 62px rgba(0, 0, 0, 0.26);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected .workflow-generator-stage,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected .workflow-generator-stage {
  border-color: rgba(246, 247, 247, 0.82);
  box-shadow:
    0 0 0 3px rgba(246, 247, 247, 0.065),
    0 28px 82px rgba(0, 0, 0, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-prompt-empty-icon,
body[data-active-view="aiCanvas"] .workflow-media-empty svg,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview svg {
  width: 58px;
  height: 58px;
  color: rgba(246, 247, 247, 0.19);
  stroke-width: 1.12;
}

body[data-active-view="aiCanvas"] .workflow-media-empty strong,
body[data-active-view="aiCanvas"] .workflow-media-empty span,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview strong,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview span {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-prompt-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-media-status.is-ready {
  opacity: 0;
  transform: translateY(-2px);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt:hover .workflow-prompt-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-upload:hover .workflow-media-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-image:hover .workflow-media-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-video:hover .workflow-media-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-status.is-ready {
  opacity: 1;
  transform: translateY(0);
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 26px;
  bottom: 56px;
  gap: 10px;
  color: rgba(246, 247, 247, 0.4);
}

body[data-active-view="aiCanvas"] .workflow-prompt-try button,
body[data-active-view="aiCanvas"] .workflow-media-try button {
  min-height: 26px;
  padding: 0 2px;
  border: 0;
  color: rgba(246, 247, 247, 0.82);
  background: transparent;
  box-shadow: none;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try button:hover,
body[data-active-view="aiCanvas"] .workflow-media-try button:hover {
  color: rgba(216, 255, 114, 0.95);
  background: transparent;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  border-color: rgba(255, 255, 255, 0.052);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.006)),
    rgba(35, 36, 37, 0.99);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.038) inset,
    0 18px 48px rgba(0, 0, 0, 0.25);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 40px minmax(56px, 1fr) 34px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 38px minmax(32px, 1fr) 32px;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 34px minmax(34px, 1fr) 42px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row,
body[data-active-view="aiCanvas"] .workflow-media-tool-row,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row {
  padding: 7px 10px 0;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-media-tool-row button:not(.is-expand) {
  width: 42px;
  height: 32px;
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.66);
  background: rgba(255, 255, 255, 0.032);
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:not(.is-expand):hover,
body[data-active-view="aiCanvas"] .workflow-media-tool-row button:not(.is-expand):hover {
  color: rgba(246, 247, 247, 0.9);
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.06);
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row .is-expand,
body[data-active-view="aiCanvas"] .workflow-media-tool-row .is-expand {
  margin-left: auto;
  width: 30px;
  height: 30px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  color: rgba(246, 247, 247, 0.82);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.46;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea {
  min-height: 54px;
  padding: 3px 12px 0;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row {
  padding: 0 11px;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  min-height: 32px;
  max-height: 40px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row,
body[data-active-view="aiCanvas"] .workflow-media-control-row {
  padding: 0 8px 7px 10px;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row span {
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  color: rgba(246, 247, 247, 0.66);
  border-color: rgba(255, 255, 255, 0.064);
  background: rgba(255, 255, 255, 0.028);
  font-size: 11px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit {
  width: 30px;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 9px !important;
  color: #151716 !important;
  background: rgba(246, 247, 247, 0.9) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 204px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(246, 247, 247, 0.56);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.86);
  background: rgba(28, 29, 30, 0.96);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port::before {
  content: "+";
  margin-top: -1px;
  color: currentColor;
  font-size: 17px;
  font-weight: 300;
  line-height: 1;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.input {
  left: -25px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.output {
  right: -25px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port:hover {
  color: #111315;
  border-color: rgba(216, 255, 114, 0.74);
  background: rgba(216, 255, 114, 0.94);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.38),
    0 0 20px rgba(216, 255, 114, 0.22);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar {
  color: rgba(18, 18, 18, 0.55);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title svg,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title svg,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar svg {
  color: rgba(18, 18, 18, 0.42);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar b {
  color: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.29);
  background:
    radial-gradient(circle at 50% 34%, rgba(18, 18, 18, 0.045), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.27)),
    #e5e1d8 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-compose {
  border-color: rgba(18, 18, 18, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(248, 246, 239, 0.58)),
    #f8f6ef;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  color: rgba(18, 18, 18, 0.72);
  border-color: rgba(18, 18, 18, 0.28);
  background: rgba(255, 255, 255, 0.88);
}

/* v1.8.44 Pipeline energy feedback: make running AI workflow paths visibly alive. */
body[data-active-view="aiCanvas"] .workflow-edge-energy {
  fill: none;
  stroke: rgba(216, 255, 114, 0.18);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 1 18;
  animation: workflowEdgeEnergyPulse 1.05s ease-in-out infinite, workflowDash 0.74s linear infinite;
  filter:
    drop-shadow(0 0 16px rgba(216, 255, 114, 0.26))
    drop-shadow(0 0 30px rgba(246, 247, 247, 0.08));
  opacity: 0.95;
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-edge-energy.is-stage-validating,
body[data-active-view="aiCanvas"] .workflow-edge-energy.is-stage-submitting,
body[data-active-view="aiCanvas"] .workflow-edge-energy.is-stage-queued {
  stroke: rgba(120, 199, 255, 0.2);
  filter:
    drop-shadow(0 0 16px rgba(120, 199, 255, 0.24))
    drop-shadow(0 0 34px rgba(120, 199, 255, 0.1));
  animation-duration: 1.28s, 0.96s;
}

body[data-active-view="aiCanvas"] .workflow-edge-energy.is-stage-generating {
  stroke: rgba(216, 255, 114, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-edge-energy.is-stage-compositing {
  stroke: rgba(108, 255, 214, 0.22);
  filter:
    drop-shadow(0 0 16px rgba(108, 255, 214, 0.26))
    drop-shadow(0 0 34px rgba(120, 199, 255, 0.12));
}

body[data-active-view="aiCanvas"] .workflow-edge-flow {
  stroke-width: 13;
  stroke-dasharray: 2 12;
}

body[data-active-view="aiCanvas"] .workflow-edge-flow.is-stage-compositing {
  stroke: rgba(108, 255, 214, 0.54);
  filter: drop-shadow(0 0 20px rgba(108, 255, 214, 0.34));
}

body[data-active-view="aiCanvas"] .workflow-edge-particles.is-stage-generating circle {
  fill: rgba(216, 255, 114, 0.96);
  filter:
    drop-shadow(0 0 8px rgba(216, 255, 114, 0.88))
    drop-shadow(0 0 18px rgba(246, 247, 247, 0.44));
}

body[data-active-view="aiCanvas"] .workflow-edge-particles.is-stage-compositing circle {
  fill: rgba(108, 255, 214, 0.96);
  filter:
    drop-shadow(0 0 8px rgba(108, 255, 214, 0.86))
    drop-shadow(0 0 20px rgba(120, 199, 255, 0.48));
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge {
  pointer-events: none;
  filter:
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 16px rgba(216, 255, 114, 0.08));
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge rect {
  fill: rgba(18, 19, 20, 0.9);
  stroke: rgba(246, 247, 247, 0.18);
  stroke-width: 1;
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge text {
  fill: rgba(246, 247, 247, 0.88);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0;
  text-anchor: middle;
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-running rect,
body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-stage-generating rect {
  fill: rgba(216, 255, 114, 0.9);
  stroke: rgba(246, 247, 247, 0.36);
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-running text,
body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-stage-generating text {
  fill: #111315;
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-stage-validating rect,
body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-stage-submitting rect,
body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-stage-queued rect {
  fill: rgba(120, 199, 255, 0.88);
  stroke: rgba(246, 247, 247, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-stage-validating text,
body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-stage-submitting text,
body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-stage-queued text {
  fill: #101418;
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-stage-compositing rect {
  fill: rgba(108, 255, 214, 0.86);
  stroke: rgba(246, 247, 247, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-stage-compositing text {
  fill: #101418;
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-completed rect {
  fill: rgba(116, 228, 165, 0.88);
  stroke: rgba(246, 247, 247, 0.3);
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-completed text {
  fill: #101515;
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-failed rect {
  fill: rgba(255, 118, 118, 0.9);
  stroke: rgba(246, 247, 247, 0.26);
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-failed text {
  fill: #1f1010;
}

body[data-active-view="aiCanvas"] .workflow-edge-stage-badge + .workflow-edge-label {
  opacity: 0;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-energy {
  opacity: 0.78;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-stage-badge rect {
  fill: rgba(255, 255, 255, 0.94);
  stroke: rgba(18, 18, 18, 0.12);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-stage-badge text {
  fill: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-stage-generating rect,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-running rect {
  fill: rgba(18, 18, 18, 0.88);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-stage-generating text,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-running text {
  fill: #f8f6ef;
}

@keyframes workflowEdgeEnergyPulse {
  0% {
    opacity: 0.34;
    stroke-width: 13;
  }

  50% {
    opacity: 0.96;
    stroke-width: 20;
  }

  100% {
    opacity: 0.4;
    stroke-width: 14;
  }
}

/* v1.8.45 Link quick action popover: choose image or video at the line end. */
body[data-active-view="aiCanvas"] .workflow-link-menu {
  width: min(398px, calc(100vw - 76px));
  padding: 10px;
  border-radius: 18px;
  transform: translate(8px, -44%);
  background:
    radial-gradient(circle at 18% 0, rgba(216, 255, 114, 0.13), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(120, 199, 255, 0.12), transparent 34%),
    linear-gradient(155deg, rgba(31, 32, 34, 0.96), rgba(12, 13, 15, 0.94));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.055) inset;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head {
  min-height: 30px;
  padding: 0 0 0 2px;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head span {
  color: rgba(246, 247, 247, 0.42);
  font-size: 9px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head strong {
  max-width: 286px;
  color: rgba(246, 247, 247, 0.9);
  font-size: 13px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-flow-preview {
  margin: 6px 0 0;
  padding: 6px;
  border-color: rgba(255, 255, 255, 0.06);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-link-flow-preview span,
body[data-active-view="aiCanvas"] .workflow-link-flow-preview b {
  height: 24px;
  padding: 0 8px;
  border-color: rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(246, 247, 247, 0.72);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-flow-preview i {
  height: 1px;
  min-width: 72px;
  background:
    linear-gradient(90deg, rgba(216, 255, 114, 0.1), rgba(216, 255, 114, 0.72), rgba(120, 199, 255, 0.56));
}

body[data-active-view="aiCanvas"] .workflow-link-menu > small {
  margin: 7px 2px 0;
  color: rgba(246, 247, 247, 0.46);
  font-size: 10px;
  line-height: 1.36;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-quick-generate {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card {
  min-width: 0;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-primary {
  padding: 5px;
  display: grid;
  grid-template-rows: minmax(92px, 1fr) 30px;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.056), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.028);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-primary.is-recommended {
  border-color: rgba(216, 255, 114, 0.38);
  background:
    radial-gradient(circle at 20% 0, rgba(216, 255, 114, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.022)),
    rgba(33, 34, 36, 0.95);
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.08) inset,
    0 18px 46px rgba(0, 0, 0, 0.26);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-video.is-recommended {
  border-color: rgba(120, 199, 255, 0.42);
  background:
    radial-gradient(circle at 20% 0, rgba(120, 199, 255, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.022)),
    rgba(33, 34, 36, 0.95);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-secondary {
  grid-column: 1 / -1;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.026);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] {
  min-height: 92px;
  padding: 9px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 8px;
  row-gap: 3px;
  align-items: start;
  text-align: left;
  border-radius: 11px;
  background: transparent;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-secondary button[data-link-create] {
  min-height: 42px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] > i,
body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] > svg {
  grid-row: 1 / 4;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] svg {
  width: 16px;
  height: 16px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(246, 247, 247, 0.075);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-image button[data-link-create] svg {
  color: rgba(216, 255, 114, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-video button[data-link-create] svg {
  color: rgba(120, 199, 255, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong {
  min-width: 0;
  display: flex;
  gap: 5px;
  align-items: center;
  color: rgba(246, 247, 247, 0.9);
  font-size: 12px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong b {
  padding: 2px 5px;
  border-radius: 999px;
  color: #101214;
  background: rgba(246, 247, 247, 0.9);
  font-size: 8px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong kbd,
body[data-active-view="aiCanvas"] .workflow-link-menu-foot kbd {
  min-width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(246, 247, 247, 0.14);
  border-radius: 5px;
  color: rgba(246, 247, 247, 0.5);
  background: rgba(246, 247, 247, 0.065);
  font-family: inherit;
  font-size: 8px;
  font-weight: 300;
  line-height: 1;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] > span {
  color: rgba(246, 247, 247, 0.48);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] em {
  color: rgba(246, 247, 247, 0.42);
  font-size: 10px;
  line-height: 1.34;
  -webkit-line-clamp: 2;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-secondary button[data-link-create] em {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-run {
  min-height: 30px;
  padding: 0 9px;
  justify-content: center;
  border-radius: 10px;
  color: rgba(246, 247, 247, 0.84);
  background: rgba(246, 247, 247, 0.075);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-recommended .workflow-link-choice-run {
  color: #101214;
  border-color: rgba(246, 247, 247, 0.44);
  background: rgba(246, 247, 247, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-link-menu-foot {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  color: rgba(246, 247, 247, 0.42);
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-foot span {
  min-width: 0;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu {
  background:
    radial-gradient(circle at 18% 0, rgba(18, 18, 18, 0.04), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(245, 243, 236, 0.9)),
    #f7f4ed;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-flow-preview,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-choice-card.is-primary,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-choice-card.is-secondary {
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu-head strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong {
  color: rgba(18, 18, 18, 0.82);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu > small,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] > span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu-foot {
  color: rgba(18, 18, 18, 0.48);
}

@media (max-width: 640px) {
  body[data-active-view="aiCanvas"] .workflow-link-menu {
    width: min(330px, calc(100vw - 28px));
    transform: translate(-8px, -32%);
  }

  body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-quick-generate {
    grid-template-columns: 1fr;
  }

  body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-secondary {
    grid-column: auto;
  }
}

/* v1.8.45 Reference node shell: LibTV-style media stage plus compact prompt footer. */
body[data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video,
body[data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-active-view="aiCanvas"] .workflow-node-videoModel {
  padding: 0 !important;
  display: block;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card,
body[data-active-view="aiCanvas"] .workflow-media-node-card,
body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  gap: 7px;
  color: rgba(246, 247, 247, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 22px minmax(352px, 1fr) 142px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card {
  grid-template-rows: 22px minmax(352px, 1fr) 126px;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  grid-template-rows: 22px minmax(352px, 1fr) 142px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar {
  height: 22px;
  padding: 0 4px;
  color: rgba(246, 247, 247, 0.58);
  font-size: 12px;
  font-weight: 300 !important;
  line-height: 22px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar span {
  max-width: 64%;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title b,
body[data-active-view="aiCanvas"] .workflow-media-node-title b,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar b {
  margin-left: 0;
  color: rgba(246, 247, 247, 0.88);
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button {
  top: 32px !important;
  left: 50%;
  min-width: 58px;
  height: 28px;
  padding: 0 12px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.86);
  border-color: rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.024)),
    rgba(29, 30, 31, 0.96) !important;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: blur(14px);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  min-height: 352px;
  border: 1.5px solid rgba(246, 247, 247, 0.46);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 31%, rgba(246, 247, 247, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012)),
    #252626 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 22px 62px rgba(0, 0, 0, 0.28);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-reference,
body[data-active-view="aiCanvas"] .workflow-media-node-card.has-media .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage.has-result {
  border-color: rgba(246, 247, 247, 0.36);
  background: #171819 !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected .workflow-generator-stage,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected .workflow-generator-stage {
  border-color: rgba(246, 247, 247, 0.9);
  box-shadow:
    0 0 0 3px rgba(246, 247, 247, 0.08),
    0 30px 86px rgba(0, 0, 0, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-prompt-empty-icon,
body[data-active-view="aiCanvas"] .workflow-media-empty svg,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview svg {
  width: 56px;
  height: 56px;
  color: rgba(246, 247, 247, 0.19);
  stroke-width: 1.12;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 24px;
  bottom: 52px;
  gap: 10px;
  color: rgba(246, 247, 247, 0.4);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  border: 1px solid rgba(255, 255, 255, 0.052);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.006)),
    rgba(35, 36, 37, 0.99);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 48px rgba(0, 0, 0, 0.25);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 38px minmax(52px, 1fr) 32px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 36px minmax(30px, 1fr) 30px;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 32px minmax(30px, 1fr) 38px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row,
body[data-active-view="aiCanvas"] .workflow-media-control-row {
  padding: 0 8px 7px 10px;
  gap: 5px;
  overflow: hidden;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row span {
  height: 27px;
  min-height: 27px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit {
  width: 29px;
  height: 29px !important;
  min-height: 29px !important;
  border-radius: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 206px;
  width: 21px;
  height: 21px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.29);
  background:
    radial-gradient(circle at 50% 31%, rgba(18, 18, 18, 0.045), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.27)),
    #e5e1d8 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-compose {
  border-color: rgba(18, 18, 18, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(248, 246, 239, 0.58)),
    #f8f6ef;
}

/* v1.8.46 Link cursor feedback: line dragging should feel like an AI creation cursor. */
body[data-active-view="aiCanvas"] .workflow-pending-edge {
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-pending-edge-aura {
  fill: none;
  stroke: rgba(216, 255, 114, 0.22);
  stroke-width: 3.5;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 10px rgba(216, 255, 114, 0.28))
    drop-shadow(0 0 24px rgba(120, 199, 255, 0.08));
}

body[data-active-view="aiCanvas"] .workflow-edge.is-pending {
  marker-end: none !important;
  stroke: rgba(216, 255, 114, 0.9) !important;
  stroke-width: 0.9 !important;
  stroke-linecap: round;
  stroke-dasharray: 1 9;
  opacity: 1 !important;
  animation: workflowDash 0.74s linear infinite;
  filter: none;
}

body[data-active-view="aiCanvas"] .workflow-pending-edge-dot {
  fill: rgba(216, 255, 114, 0.96);
  stroke: rgba(246, 247, 247, 0.9);
  stroke-width: 1.5;
  filter:
    drop-shadow(0 0 10px rgba(216, 255, 114, 0.76))
    drop-shadow(0 0 20px rgba(120, 199, 255, 0.18));
}

body[data-active-view="aiCanvas"] .workflow-pending-edge-label {
  fill: rgba(246, 247, 247, 0.66);
  stroke: rgba(9, 10, 11, 0.86);
  stroke-width: 5px;
  paint-order: stroke;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-primary {
  grid-template-rows: minmax(78px, 1fr) 30px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] {
  min-height: 78px;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: 18px 16px minmax(24px, 1fr);
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] > i,
body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] > svg {
  grid-row: 1 / 4;
  align-self: start;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong {
  min-height: 18px;
  flex-wrap: nowrap;
  line-height: 18px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong b {
  flex: 0 0 auto;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] em {
  display: -webkit-box;
  overflow: hidden;
  min-height: 24px;
  -webkit-box-orient: vertical;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-secondary {
  margin-top: 1px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-secondary button[data-link-create] {
  min-height: 40px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-pending-edge-aura {
  stroke: rgba(18, 18, 18, 0.08);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge.is-pending {
  stroke: rgba(18, 18, 18, 0.78) !important;
  filter: drop-shadow(0 0 7px rgba(18, 18, 18, 0.18));
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-pending-edge-dot {
  fill: rgba(18, 18, 18, 0.88);
  stroke: rgba(255, 255, 255, 0.95);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-pending-edge-label {
  fill: rgba(18, 18, 18, 0.66);
  stroke: rgba(248, 246, 239, 0.88);
}

/* v1.8.47 LibTV node reference: keep canvas chrome thin and let creation nodes behave like media input cards. */
body[data-active-view="aiCanvas"] .workflow-canvas-shell.has-inline-node-selection .workflow-inspector,
body[data-active-view="aiCanvas"] .workflow-canvas-shell:has(.workflow-node-prompt.is-selected) .workflow-inspector,
body[data-active-view="aiCanvas"] .workflow-canvas-shell:has(.workflow-node-upload.is-selected) .workflow-inspector,
body[data-active-view="aiCanvas"] .workflow-canvas-shell:has(.workflow-node-image.is-selected) .workflow-inspector,
body[data-active-view="aiCanvas"] .workflow-canvas-shell:has(.workflow-node-video.is-selected) .workflow-inspector,
body[data-active-view="aiCanvas"] .workflow-canvas-shell:has(.workflow-node-imageModel.is-selected) .workflow-inspector,
body[data-active-view="aiCanvas"] .workflow-canvas-shell:has(.workflow-node-videoModel.is-selected) .workflow-inspector {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video,
body[data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-active-view="aiCanvas"] .workflow-node-videoModel {
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 26px 64px rgba(0, 0, 0, 0.3));
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected {
  filter: drop-shadow(0 34px 86px rgba(0, 0, 0, 0.44));
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-node-progress {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card,
body[data-active-view="aiCanvas"] .workflow-media-node-card,
body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  gap: 8px;
  color: rgba(246, 247, 247, 0.9);
  cursor: grab;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 24px minmax(330px, 1fr) 150px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card {
  grid-template-rows: 24px minmax(330px, 1fr) 126px;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  grid-template-rows: 24px minmax(330px, 1fr) 146px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar {
  height: 24px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(246, 247, 247, 0.54);
  font-size: 12px;
  font-weight: 300 !important;
  line-height: 24px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar span {
  min-width: 0;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title svg,
body[data-active-view="aiCanvas"] .workflow-media-node-title svg,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.65;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title b,
body[data-active-view="aiCanvas"] .workflow-media-node-title b,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar b {
  color: rgba(246, 247, 247, 0.82);
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button {
  position: absolute;
  z-index: 7;
  top: 39px !important;
  left: 50%;
  height: 28px;
  min-height: 28px;
  padding: 0 12px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.024)),
    rgba(31, 32, 34, 0.96) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: blur(16px);
  font-size: 11px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  position: relative;
  min-height: 0 !important;
  overflow: hidden;
  border: 1.5px solid rgba(246, 247, 247, 0.48) !important;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 32%, rgba(246, 247, 247, 0.075), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
    #252626 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.026) inset,
    0 22px 62px rgba(0, 0, 0, 0.26);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-reference,
body[data-active-view="aiCanvas"] .workflow-media-node-card.has-media .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage.has-result {
  border-color: rgba(246, 247, 247, 0.38) !important;
  background: #171819 !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected .workflow-generator-stage,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected .workflow-generator-stage {
  border-color: rgba(246, 247, 247, 0.86) !important;
  box-shadow:
    0 0 0 3px rgba(246, 247, 247, 0.08),
    0 30px 86px rgba(0, 0, 0, 0.38);
}

body[data-active-view="aiCanvas"] .workflow-prompt-empty-icon,
body[data-active-view="aiCanvas"] .workflow-media-empty svg,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview svg {
  width: 56px;
  height: 56px;
  color: rgba(246, 247, 247, 0.2);
  stroke-width: 1.16;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 26px;
  bottom: 52px;
  gap: 10px;
  color: rgba(246, 247, 247, 0.4);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try button,
body[data-active-view="aiCanvas"] .workflow-media-try button {
  color: rgba(246, 247, 247, 0.76);
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.052) !important;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.006)),
    rgba(35, 36, 37, 0.99) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 48px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 32px minmax(58px, 1fr) 33px;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 30px minmax(28px, 1fr) 31px;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 30px minmax(30px, 1fr) 38px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row,
body[data-active-view="aiCanvas"] .workflow-media-tool-row,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row {
  padding: 7px 10px 0;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-media-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-generator-tool-row button {
  height: 25px;
  min-height: 25px;
  padding: 0 9px;
  border-color: rgba(255, 255, 255, 0.065) !important;
  border-radius: 8px;
  color: rgba(246, 247, 247, 0.6);
  background: rgba(255, 255, 255, 0.028) !important;
  box-shadow: none !important;
  font-size: 10px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row .is-expand,
body[data-active-view="aiCanvas"] .workflow-media-tool-row .is-expand {
  margin-left: auto;
  width: 25px;
  height: 25px;
  min-height: 25px;
  padding: 0;
  border-radius: 8px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  min-height: 50px;
  padding: 5px 12px 0;
  color: rgba(246, 247, 247, 0.82);
  font-size: 12px;
  font-weight: 300 !important;
  line-height: 1.5;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea::placeholder,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea::placeholder {
  color: rgba(246, 247, 247, 0.36);
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row,
body[data-active-view="aiCanvas"] .workflow-media-control-row {
  padding: 0 8px 7px 10px;
  gap: 5px;
  overflow: hidden;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row span {
  height: 27px;
  min-height: 27px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.064) !important;
  color: rgba(246, 247, 247, 0.66);
  background: rgba(255, 255, 255, 0.028) !important;
  box-shadow: none !important;
  font-size: 10.5px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit {
  flex: 0 0 auto;
  width: 29px;
  height: 29px !important;
  min-height: 29px !important;
  border-radius: 9px !important;
  color: #151719 !important;
  background: rgba(246, 247, 247, 0.88) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit:hover {
  background: rgba(216, 255, 114, 0.94) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 194px;
  width: 20px;
  height: 20px;
  border-color: rgba(246, 247, 247, 0.62) !important;
  background: rgba(29, 30, 31, 0.96) !important;
  box-shadow:
    0 0 0 1px rgba(246, 247, 247, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.32);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.input {
  left: -25px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.output {
  right: -25px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.32) !important;
  background:
    radial-gradient(circle at 50% 32%, rgba(18, 18, 18, 0.05), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.34)),
    #e5e1d8 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-compose {
  border-color: rgba(18, 18, 18, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 246, 239, 0.6)),
    #f8f6ef !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose textarea,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  color: rgba(18, 18, 18, 0.72);
}

/* v1.8.48 Quick create dock: double-click canvas should feel like creating a LibTV/Kling node in place. */
body[data-active-view="aiCanvas"] .workflow-quick-create {
  width: min(468px, calc(100vw - 104px));
  padding: 9px;
  gap: 7px;
  border-radius: 17px;
  background:
    radial-gradient(circle at 78% -6%, rgba(216, 255, 114, 0.14), transparent 34%),
    radial-gradient(circle at 10% 0, rgba(120, 199, 255, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(31, 32, 35, 0.96), rgba(13, 14, 16, 0.965));
  box-shadow:
    0 30px 88px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head {
  min-height: 27px;
  padding: 0 1px 0 2px;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head span {
  color: rgba(246, 247, 247, 0.4);
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head strong {
  color: rgba(246, 247, 247, 0.9);
  font-size: 13px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card {
  min-height: 64px;
  padding: 8px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: 20px 18px;
  column-gap: 8px;
  align-items: center;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  color: rgba(246, 247, 247, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.016)),
    rgba(255, 255, 255, 0.03);
  box-shadow: none;
  font-family: inherit;
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card svg {
  grid-row: 1 / 3;
  width: 14px;
  height: 14px;
  padding: 7px;
  border-radius: 10px;
  background: rgba(246, 247, 247, 0.07);
  stroke-width: 1.75;
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card strong {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.9);
  font-size: 12px;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card span {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.44);
  font-size: 10px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card.active {
  border-color: rgba(246, 247, 247, 0.28);
  background:
    linear-gradient(180deg, rgba(246, 247, 247, 0.115), rgba(246, 247, 247, 0.026)),
    rgba(38, 39, 41, 0.95);
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card.is-image.active svg {
  color: rgba(216, 255, 114, 0.95);
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card.is-video.active svg {
  color: rgba(120, 199, 255, 0.95);
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card.is-run {
  border-color: rgba(216, 255, 114, 0.28);
  background:
    radial-gradient(circle at 18% 0, rgba(216, 255, 114, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card.is-run:hover,
body[data-active-view="aiCanvas"] .workflow-quick-actions button.is-primary:hover {
  border-color: rgba(216, 255, 114, 0.58);
  background:
    radial-gradient(circle at 18% 0, rgba(216, 255, 114, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-quick-suggestions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-quick-suggestions button {
  height: 27px;
  border-radius: 999px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-quick-prompt-box {
  min-height: 80px;
  padding: 8px 10px;
  gap: 4px;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.034);
}

body[data-active-view="aiCanvas"] .workflow-quick-create .workflow-quick-prompt-box textarea {
  min-height: 48px;
  font-size: 12px;
  line-height: 1.42;
}

body[data-active-view="aiCanvas"] .workflow-quick-param-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-quick-param-row label {
  height: 40px;
  padding: 5px 8px;
  border-radius: 11px;
}

body[data-active-view="aiCanvas"] .workflow-quick-param-row span {
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-quick-param-row select {
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-quick-actions {
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 0.74fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-quick-actions button {
  min-height: 32px;
  border-radius: 11px;
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-quick-actions button.is-primary {
  color: #101315;
  border-color: rgba(246, 247, 247, 0.44);
  background: rgba(246, 247, 247, 0.9);
  box-shadow: none;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-launch-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-launch-card.is-run {
  color: rgba(18, 18, 18, 0.72);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-launch-card strong {
  color: rgba(18, 18, 18, 0.82);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-launch-card span {
  color: rgba(18, 18, 18, 0.46);
}

@media (max-width: 720px) {
  body[data-active-view="aiCanvas"] .workflow-quick-launch-row {
    grid-template-columns: 1fr;
  }
}

/* v1.8.49 Node file drop: files dropped on nodes become references, uploads, or generator slots. */
body[data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-generator-stage {
  border-color: rgba(216, 255, 114, 0.88) !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(216, 255, 114, 0.15), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
    #252626 !important;
  box-shadow:
    0 0 0 3px rgba(216, 255, 114, 0.12),
    0 0 48px rgba(216, 255, 114, 0.18),
    0 30px 86px rgba(0, 0, 0, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-prompt-upload-zone::before,
body[data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-media-node-stage::before,
body[data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-generator-stage::before {
  content: "松手上传到此节点";
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  padding: 8px 12px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(216, 255, 114, 0.28);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.9);
  background: rgba(14, 15, 17, 0.72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(16px);
  font-size: 11px;
  font-weight: 300;
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-port {
  border-color: rgba(216, 255, 114, 0.86) !important;
  box-shadow:
    0 0 0 2px rgba(216, 255, 114, 0.18),
    0 0 22px rgba(216, 255, 114, 0.45);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.72) !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(18, 18, 18, 0.08), transparent 36%),
    #e5e1d8 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-prompt-upload-zone::before,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-media-node-stage::before,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-file-drop-target .workflow-generator-stage::before {
  color: rgba(18, 18, 18, 0.82);
  border-color: rgba(18, 18, 18, 0.12);
  background: rgba(255, 255, 255, 0.72);
}

/* v1.8.50 LibTV reference node UI: one node should read as upload/preview stage plus inline generation console. */
body[data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video {
  filter: drop-shadow(0 22px 56px rgba(0, 0, 0, 0.34));
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected {
  filter: drop-shadow(0 28px 70px rgba(0, 0, 0, 0.48));
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 24px minmax(350px, 1fr) 150px;
  gap: 7px;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card {
  grid-template-rows: 24px minmax(360px, 1fr) 126px;
  gap: 7px;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title {
  padding: 0 7px 0 8px;
  color: rgba(246, 247, 247, 0.52);
  font-size: 12px;
  letter-spacing: 0;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span {
  color: rgba(246, 247, 247, 0.58);
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title b,
body[data-active-view="aiCanvas"] .workflow-media-node-title b {
  margin-left: 2px;
  color: rgba(246, 247, 247, 0.74);
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button {
  top: 40px !important;
  height: 28px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.11) !important;
  color: rgba(246, 247, 247, 0.82);
  background: rgba(31, 32, 33, 0.94) !important;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.36),
    0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage {
  border: 1.5px solid rgba(246, 247, 247, 0.42) !important;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 30%, rgba(246, 247, 247, 0.06), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.008)),
    #242525 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.024) inset,
    0 20px 54px rgba(0, 0, 0, 0.25);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-reference,
body[data-active-view="aiCanvas"] .workflow-media-node-card.has-media .workflow-media-node-stage {
  border-color: rgba(246, 247, 247, 0.34) !important;
  background: #171818 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-reference-media,
body[data-active-view="aiCanvas"] .workflow-media-node-stage > img,
body[data-active-view="aiCanvas"] .workflow-media-node-stage > video {
  opacity: 0.96;
  filter: saturate(0.98) contrast(1.02);
}

body[data-active-view="aiCanvas"] .workflow-prompt-empty-icon {
  width: 54px;
  height: 54px;
  color: rgba(246, 247, 247, 0.18);
  stroke-width: 1.1;
}

body[data-active-view="aiCanvas"] .workflow-prompt-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-media-status.is-ready {
  opacity: 0;
  transform: translateY(-4px);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt:hover .workflow-prompt-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-upload:hover .workflow-media-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-status.is-ready {
  opacity: 0.54;
  transform: translateY(0);
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 24px;
  bottom: 48px;
  color: rgba(246, 247, 247, 0.36);
}

body[data-active-view="aiCanvas"] .workflow-prompt-try button,
body[data-active-view="aiCanvas"] .workflow-media-try button {
  min-height: 24px;
  padding: 0 4px;
  color: rgba(246, 247, 247, 0.72);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  border-radius: 11px;
  border-color: rgba(255, 255, 255, 0.055) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.008)),
    #242526 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row,
body[data-active-view="aiCanvas"] .workflow-media-tool-row {
  padding: 8px 10px 0;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-media-tool-row button:not(.is-expand) {
  height: 26px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  color: rgba(246, 247, 247, 0.58);
  background: rgba(255, 255, 255, 0.032) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  padding: 4px 12px 0;
  color: rgba(246, 247, 247, 0.82);
  font-size: 12px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea:focus,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea:focus {
  color: rgba(246, 247, 247, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row,
body[data-active-view="aiCanvas"] .workflow-media-control-row {
  min-height: 33px;
  padding: 0 8px 7px 10px;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row span {
  height: 27px;
  min-height: 27px;
  border-radius: 8px;
  font-size: 10.5px;
  letter-spacing: 0;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit {
  width: 30px;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
  color: #111315 !important;
  background: rgba(246, 247, 247, 0.9) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit:hover {
  color: #101315 !important;
  background: rgba(216, 255, 114, 0.96) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port {
  top: 202px;
  width: 20px;
  height: 20px;
  color: rgba(246, 247, 247, 0.86);
  border-color: rgba(246, 247, 247, 0.58) !important;
  background: rgba(31, 32, 33, 0.94) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port::before {
  content: "+";
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title span {
  color: rgba(18, 18, 18, 0.56);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage {
  border-color: rgba(18, 18, 18, 0.28) !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(18, 18, 18, 0.045), transparent 30%),
    #e6e2da !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose {
  border-color: rgba(18, 18, 18, 0.075) !important;
  background: #f5f2ea !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose textarea,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  color: rgba(18, 18, 18, 0.8);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-submit {
  color: rgba(246, 247, 247, 0.96) !important;
  background: rgba(18, 18, 18, 0.86) !important;
}

/* v1.8.51 Link generate popover: pulling a wire should feel like choosing image/video output. */
body[data-active-view="aiCanvas"] .workflow-link-menu {
  width: 392px;
  padding: 10px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 0, rgba(216, 255, 114, 0.12), transparent 34%),
    radial-gradient(circle at 86% 0, rgba(120, 199, 255, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(31, 32, 35, 0.97), rgba(12, 13, 15, 0.965));
  box-shadow:
    0 34px 96px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.055) inset;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head {
  min-height: 27px;
  padding: 0 1px 0 2px;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head span {
  color: rgba(246, 247, 247, 0.38);
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head strong {
  color: rgba(246, 247, 247, 0.9);
  font-size: 13px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-head {
  min-height: 48px;
  margin-top: 7px;
  padding: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 0.78fr);
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)),
    rgba(255, 255, 255, 0.03);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-head > svg {
  width: 14px;
  height: 14px;
  color: rgba(216, 255, 114, 0.7);
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-link-source-pill,
body[data-active-view="aiCanvas"] .workflow-link-output-pill {
  min-width: 0;
  display: grid;
  align-items: center;
  text-align: left;
}

body[data-active-view="aiCanvas"] .workflow-link-source-pill {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  column-gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-link-output-pill {
  gap: 1px;
}

body[data-active-view="aiCanvas"] .workflow-link-source-pill svg {
  grid-row: 1 / 3;
  width: 14px;
  height: 14px;
  padding: 7px;
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.76);
  background: rgba(246, 247, 247, 0.075);
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-link-source-pill span,
body[data-active-view="aiCanvas"] .workflow-link-output-pill span {
  color: rgba(246, 247, 247, 0.36);
  font-size: 9px;
  line-height: 1.1;
}

body[data-active-view="aiCanvas"] .workflow-link-source-pill strong,
body[data-active-view="aiCanvas"] .workflow-link-output-pill strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.86);
  font-size: 11px;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-link-source-pill em {
  padding: 2px 5px;
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.5);
  background: rgba(246, 247, 247, 0.05);
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-link-menu > small {
  margin: 7px 2px 0;
  color: rgba(246, 247, 247, 0.42);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-quick-generate {
  margin-top: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-primary {
  grid-template-rows: minmax(88px, 1fr) 31px;
  padding: 5px;
  border-radius: 15px;
  border-color: rgba(255, 255, 255, 0.072);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
    rgba(255, 255, 255, 0.028);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-primary.is-recommended {
  border-color: rgba(216, 255, 114, 0.35);
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.08) inset,
    0 20px 54px rgba(0, 0, 0, 0.3);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-video.is-recommended {
  border-color: rgba(120, 199, 255, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] {
  min-height: 88px;
  padding: 8px;
  grid-template-columns: 1fr;
  grid-template-rows: 34px 18px 15px minmax(23px, 1fr);
  gap: 4px;
  align-items: stretch;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-preview {
  min-width: 0;
  min-height: 34px;
  padding: 0 7px;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
  border-radius: 11px;
  background:
    radial-gradient(circle at 16% 0, rgba(246, 247, 247, 0.12), transparent 38%),
    rgba(246, 247, 247, 0.052);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-preview svg {
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-preview b {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.66);
  font-size: 10px;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-image .workflow-link-choice-preview svg {
  color: rgba(216, 255, 114, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-video .workflow-link-choice-preview svg {
  color: rgba(120, 199, 255, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-secondary {
  margin-top: 0;
  padding: 4px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-secondary button[data-link-create] {
  min-height: 40px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-secondary .workflow-link-choice-preview {
  grid-row: 1 / 3;
  width: 32px;
  min-height: 32px;
  padding: 0;
  justify-content: center;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-secondary .workflow-link-choice-preview b {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] > i,
body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] > svg {
  grid-row: auto;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong {
  min-height: 18px;
  line-height: 18px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-run {
  min-height: 31px;
  border-radius: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-foot {
  margin-top: 7px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu {
  background:
    radial-gradient(circle at 14% 0, rgba(18, 18, 18, 0.045), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(245, 243, 236, 0.9)),
    #f7f4ed;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-head,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-choice-preview {
  border-color: rgba(18, 18, 18, 0.07);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-source-pill strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-output-pill strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-choice-preview b {
  color: rgba(18, 18, 18, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-source-pill span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-output-pill span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-source-pill em {
  color: rgba(18, 18, 18, 0.46);
}

/* v1.8.52 Node action toolbar: selected canvas nodes expose direct media/workflow operations in place. */
body[data-active-view="aiCanvas"] .workflow-node-action-toolbar {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: -46px;
  max-width: calc(100% + 80px);
  min-height: 36px;
  padding: 4px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, 8px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
    rgba(16, 17, 19, 0.88);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.46),
    0 1px 0 rgba(255, 255, 255, 0.065) inset;
  backdrop-filter: blur(16px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

body[data-active-view="aiCanvas"] .workflow-node:hover .workflow-node-action-toolbar,
body[data-active-view="aiCanvas"] .workflow-node.is-selected .workflow-node-action-toolbar {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button {
  min-width: 31px;
  height: 29px;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 11px;
  color: rgba(246, 247, 247, 0.72);
  background: rgba(255, 255, 255, 0.036);
  box-shadow: none;
  font-family: inherit;
  font-size: 10px;
  font-weight: 300 !important;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button:hover {
  color: rgba(246, 247, 247, 0.94);
  border-color: rgba(246, 247, 247, 0.18);
  background: rgba(246, 247, 247, 0.075);
}

body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  stroke-width: 1.75;
}

body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button.is-primary {
  color: #101315;
  border-color: rgba(246, 247, 247, 0.45);
  background: rgba(246, 247, 247, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button.is-primary:hover {
  background: rgba(216, 255, 114, 0.95);
}

body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button.is-danger {
  color: rgba(255, 129, 129, 0.86);
}

body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button.is-danger:hover {
  color: #161111;
  border-color: rgba(255, 129, 129, 0.45);
  background: rgba(255, 129, 129, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button.is-danger span,
body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button:not(.is-primary):not(.is-danger):nth-child(n + 5) span {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button.is-danger,
body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button:not(.is-primary):not(.is-danger):nth-child(n + 5) {
  width: 31px;
  padding: 0;
}

body[data-active-view="aiCanvas"] .workflow-node.is-running .workflow-node-action-toolbar button.is-primary svg {
  animation: workflowSpin 1s linear infinite;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-action-toolbar {
  border-color: rgba(18, 18, 18, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 243, 236, 0.86)),
    rgba(255, 255, 255, 0.86);
  box-shadow:
    0 22px 58px rgba(18, 18, 18, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-action-toolbar button {
  color: rgba(18, 18, 18, 0.62);
  border-color: rgba(18, 18, 18, 0.07);
  background: rgba(18, 18, 18, 0.04);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-action-toolbar button:hover {
  color: rgba(18, 18, 18, 0.86);
  background: rgba(18, 18, 18, 0.075);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-action-toolbar button.is-primary {
  color: rgba(246, 247, 247, 0.96);
  background: rgba(18, 18, 18, 0.86);
}

/* v1.8.53 Media viewer: canvas results open in a focused image/video inspection layer. */
body[data-active-view="aiCanvas"] .workflow-media-preview[hidden] {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-media-preview {
  position: fixed;
  z-index: 260;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(216, 255, 114, 0.06), transparent 34%),
    rgba(3, 4, 5, 0.72);
  backdrop-filter: blur(12px);
}

body[data-active-view="aiCanvas"] .workflow-media-preview-card {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100vw - 56px));
  height: min(720px, calc(100vh - 56px));
  min-height: 420px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0, rgba(216, 255, 114, 0.08), transparent 36%),
    radial-gradient(circle at 92% 6%, rgba(120, 199, 255, 0.08), transparent 34%),
    linear-gradient(145deg, rgba(31, 32, 35, 0.97), rgba(10, 11, 13, 0.975));
  box-shadow:
    0 46px 140px rgba(0, 0, 0, 0.64),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.008)),
    #121315;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-stage img,
body[data-active-view="aiCanvas"] .workflow-media-preview-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-side {
  min-width: 0;
  padding: 4px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-head {
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-head div {
  min-width: 0;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-head span {
  display: block;
  color: rgba(246, 247, 247, 0.38);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-head strong {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: rgba(246, 247, 247, 0.92);
  font-size: 15px;
  font-weight: 300 !important;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-meta span {
  min-height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.58);
  background: rgba(255, 255, 255, 0.035);
  font-size: 10px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-side p {
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.052);
  border-radius: 14px;
  color: rgba(246, 247, 247, 0.64);
  background: rgba(255, 255, 255, 0.026);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-actions button {
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.72);
  background: rgba(255, 255, 255, 0.038);
  box-shadow: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 300 !important;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-media-preview-actions button:hover {
  color: rgba(246, 247, 247, 0.95);
  border-color: rgba(246, 247, 247, 0.18);
  background: rgba(246, 247, 247, 0.075);
}

body[data-active-view="aiCanvas"] .workflow-media-preview-actions button.is-primary {
  grid-column: 1 / -1;
  color: #101315;
  border-color: rgba(246, 247, 247, 0.44);
  background: rgba(246, 247, 247, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-media-preview-actions button.is-primary:hover {
  background: rgba(216, 255, 114, 0.96);
}

body[data-active-view="aiCanvas"] .workflow-media-preview-actions svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.75;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-preview-backdrop {
  background: rgba(246, 244, 238, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-preview-card {
  border-color: rgba(18, 18, 18, 0.08);
  background:
    radial-gradient(circle at 18% 0, rgba(18, 18, 18, 0.04), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 243, 236, 0.93));
  box-shadow: 0 36px 100px rgba(18, 18, 18, 0.22);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-preview-stage {
  border-color: rgba(18, 18, 18, 0.08);
  background: #ebe8df;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-preview-head strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-preview-side p {
  color: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-preview-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-preview-meta span {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-preview-actions button {
  color: rgba(18, 18, 18, 0.62);
  border-color: rgba(18, 18, 18, 0.075);
  background: rgba(18, 18, 18, 0.04);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-preview-actions button.is-primary {
  color: rgba(246, 247, 247, 0.96);
  background: rgba(18, 18, 18, 0.86);
}

@media (max-width: 820px) {
  body[data-active-view="aiCanvas"] .workflow-media-preview {
    padding: 14px;
  }

  body[data-active-view="aiCanvas"] .workflow-media-preview-card {
    width: calc(100vw - 28px);
    height: calc(100vh - 28px);
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  body[data-active-view="aiCanvas"] .workflow-media-preview-side {
    max-height: 260px;
  }

  body[data-active-view="aiCanvas"] .workflow-media-preview-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body[data-active-view="aiCanvas"] .workflow-task-detail[hidden] {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-task-detail {
  position: fixed;
  inset: 0;
  z-index: 1005;
  display: grid;
  place-items: center;
  padding: 24px;
  color: rgba(246, 247, 247, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 54% 40%, rgba(216, 255, 114, 0.05), transparent 34%),
    rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(12px);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-card {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  padding: 12px;
  display: grid;
  gap: 10px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 0, rgba(216, 255, 114, 0.08), transparent 32%),
    radial-gradient(circle at 96% 10%, rgba(120, 199, 255, 0.08), transparent 32%),
    linear-gradient(145deg, rgba(31, 32, 35, 0.98), rgba(10, 11, 13, 0.98));
  box-shadow:
    0 42px 130px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-head,
body[data-active-view="aiCanvas"] .workflow-task-detail-status div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-head span,
body[data-active-view="aiCanvas"] .workflow-task-detail-head em,
body[data-active-view="aiCanvas"] .workflow-task-detail-status span,
body[data-active-view="aiCanvas"] .workflow-task-detail-grid span,
body[data-active-view="aiCanvas"] .workflow-task-detail-prompt span,
body[data-active-view="aiCanvas"] .workflow-task-detail-timeline span,
body[data-active-view="aiCanvas"] .workflow-task-detail-media-slot span {
  color: rgba(246, 247, 247, 0.48);
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-head strong {
  color: rgba(246, 247, 247, 0.9);
  font-size: 17px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-status {
  padding: 10px;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.036);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-status b {
  color: rgba(216, 255, 114, 0.9);
  font-size: 12px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-status progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-status progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-status progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(216, 255, 114, 0.92), rgba(120, 199, 255, 0.82));
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase {
  min-width: 0;
  padding: 9px;
  display: grid;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(216, 255, 114, 0.1);
  border-radius: 15px;
  background:
    radial-gradient(circle at 8% 0, rgba(216, 255, 114, 0.075), transparent 34%),
    rgba(255, 255, 255, 0.026);
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-head span,
body[data-active-view="aiCanvas"] .workflow-task-api-phase-head strong,
body[data-active-view="aiCanvas"] .workflow-task-api-phase-head em {
  min-width: 0;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  overflow: hidden;
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-head span {
  color: rgba(246, 247, 247, 0.5);
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-head strong {
  color: rgba(216, 255, 114, 0.84);
  font-size: 11px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-head em {
  color: rgba(246, 247, 247, 0.48);
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-head svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.75;
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track article {
  min-width: 0;
  padding: 7px;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.028);
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track article b {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(246, 247, 247, 0.48);
  background: rgba(255, 255, 255, 0.065);
  font-size: 9px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track article div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track strong,
body[data-active-view="aiCanvas"] .workflow-task-api-phase-track span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track strong {
  color: rgba(246, 247, 247, 0.72);
  font-size: 10px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track span {
  color: rgba(246, 247, 247, 0.38);
  font-size: 9px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-completed {
  border-color: rgba(118, 231, 197, 0.16);
  background: rgba(118, 231, 197, 0.045);
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-completed b {
  color: rgba(12, 20, 16, 0.9);
  background: rgba(118, 231, 197, 0.82);
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-running {
  border-color: rgba(216, 255, 114, 0.26);
  background:
    linear-gradient(90deg, rgba(216, 255, 114, 0.09), rgba(255, 255, 255, 0.025));
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-running b {
  color: #11130f;
  background: rgba(216, 255, 114, 0.9);
  box-shadow: 0 0 0 4px rgba(216, 255, 114, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-failed {
  border-color: rgba(255, 118, 118, 0.22);
  background: rgba(255, 118, 118, 0.065);
}

body[data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-failed b {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 118, 118, 0.86);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-media-slot {
  min-width: 0;
  min-height: 132px;
  padding: 8px;
  display: grid;
  grid-template-rows: 15px minmax(82px, 1fr) 18px;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  color: rgba(246, 247, 247, 0.74);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  text-align: left;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-media-slot:not(:disabled) {
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-media-slot:not(:disabled):hover {
  border-color: rgba(246, 247, 247, 0.2);
  background: rgba(255, 255, 255, 0.055);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-media-slot img,
body[data-active-view="aiCanvas"] .workflow-task-detail-media-slot video {
  width: 100%;
  height: 100%;
  min-height: 82px;
  object-fit: cover;
  border-radius: 11px;
  background: #151616;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-media-slot > i,
body[data-active-view="aiCanvas"] .workflow-task-detail-media-slot > svg {
  width: 26px;
  height: 26px;
  margin: auto;
  color: rgba(246, 247, 247, 0.22);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-media-slot strong {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.74);
  font-size: 11px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-grid span {
  min-width: 0;
  padding: 8px;
  display: grid;
  gap: 2px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-grid b {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.86);
  font-size: 11px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-prompt {
  padding: 9px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.026);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-prompt p {
  max-height: 78px;
  overflow: auto;
  margin: 0;
  color: rgba(246, 247, 247, 0.68);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.5;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-debug {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.024);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-debug summary {
  min-height: 36px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-debug summary::-webkit-details-marker {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-debug summary span,
body[data-active-view="aiCanvas"] .workflow-task-detail-debug summary em {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.46);
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-debug summary strong {
  color: rgba(246, 247, 247, 0.78);
  font-size: 11px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-debug[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-debug-grid {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-debug-grid span {
  min-width: 0;
  padding: 7px;
  display: grid;
  gap: 2px;
  border-radius: 11px;
  color: rgba(246, 247, 247, 0.42);
  background: rgba(255, 255, 255, 0.034);
  font-size: 9px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-debug-grid b {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.72);
  font-size: 10px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-debug code {
  max-height: 116px;
  margin: 0 8px 8px;
  padding: 8px;
  display: block;
  overflow: auto;
  border-radius: 11px;
  color: rgba(216, 255, 114, 0.76);
  background: rgba(0, 0, 0, 0.24);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(216, 255, 114, 0.09);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(216, 255, 114, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.024);
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange summary {
  min-height: 38px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange summary::-webkit-details-marker {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange summary span,
body[data-active-view="aiCanvas"] .workflow-task-api-exchange summary em {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.48);
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange summary strong {
  overflow: hidden;
  color: rgba(216, 255, 114, 0.84);
  font-size: 11px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange[open] summary {
  border-bottom: 1px solid rgba(216, 255, 114, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange-body {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange-body article {
  min-width: 0;
  padding: 8px;
  display: grid;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange-body article > div {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange-body span,
body[data-active-view="aiCanvas"] .workflow-task-api-exchange-body strong {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange-body span {
  color: rgba(246, 247, 247, 0.48);
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange-body strong {
  color: rgba(246, 247, 247, 0.78);
}

body[data-active-view="aiCanvas"] .workflow-task-api-exchange-body code {
  max-height: 180px;
  padding: 9px;
  display: block;
  overflow: auto;
  border-radius: 10px;
  color: rgba(216, 255, 114, 0.78);
  background: rgba(0, 0, 0, 0.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
}

body[data-active-view="aiCanvas"] .workflow-task-run-log {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(120, 199, 255, 0.1);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(120, 199, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.023);
}

body[data-active-view="aiCanvas"] .workflow-task-run-log summary {
  min-height: 38px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

body[data-active-view="aiCanvas"] .workflow-task-run-log summary::-webkit-details-marker {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-task-run-log summary span,
body[data-active-view="aiCanvas"] .workflow-task-run-log summary em {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.48);
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-run-log summary strong {
  overflow: hidden;
  color: rgba(120, 199, 255, 0.84);
  font-size: 11px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-run-log[open] summary {
  border-bottom: 1px solid rgba(120, 199, 255, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-task-run-log-list {
  max-height: 236px;
  padding: 8px;
  display: grid;
  gap: 7px;
  overflow: auto;
}

body[data-active-view="aiCanvas"] .workflow-task-run-log-list article {
  min-width: 0;
  padding: 8px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.052);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

body[data-active-view="aiCanvas"] .workflow-task-run-log-list time {
  color: rgba(246, 247, 247, 0.36);
  font-size: 9px;
  font-weight: 300;
  line-height: 1.35;
}

body[data-active-view="aiCanvas"] .workflow-task-run-log-list article > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

body[data-active-view="aiCanvas"] .workflow-task-run-log-list strong,
body[data-active-view="aiCanvas"] .workflow-task-run-log-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-run-log-list strong {
  color: rgba(246, 247, 247, 0.76);
  font-size: 10px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-task-run-log-list span {
  color: rgba(246, 247, 247, 0.44);
  font-size: 10px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-task-run-log-list code {
  max-height: 94px;
  padding: 7px;
  display: block;
  overflow: auto;
  border-radius: 9px;
  color: rgba(120, 199, 255, 0.78);
  background: rgba(0, 0, 0, 0.24);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  line-height: 1.42;
  white-space: pre-wrap;
}

body[data-active-view="aiCanvas"] .workflow-task-run-log-list article.is-completed {
  border-color: rgba(118, 231, 197, 0.15);
}

body[data-active-view="aiCanvas"] .workflow-task-run-log-list article.is-running {
  border-color: rgba(120, 199, 255, 0.18);
  background: rgba(120, 199, 255, 0.042);
}

body[data-active-view="aiCanvas"] .workflow-task-run-log-list article.is-failed {
  border-color: rgba(255, 118, 118, 0.22);
  background: rgba(255, 118, 118, 0.06);
}

body[data-active-view="aiCanvas"] .workflow-task-run-log-list article.is-failed strong {
  color: rgba(255, 146, 146, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile {
  min-width: 0;
  padding: 10px;
  display: grid;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 118, 118, 0.18);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 118, 118, 0.09), rgba(255, 255, 255, 0.018)),
    rgba(255, 118, 118, 0.04);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile-head span,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile-head em {
  min-width: 0;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile-head span {
  color: rgba(255, 166, 166, 0.94);
  font-size: 12px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile-head em {
  color: rgba(246, 247, 247, 0.46);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile-head svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile p {
  margin: 0;
  color: rgba(246, 247, 247, 0.66);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.5;
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  list-style: none;
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile li {
  min-width: 0;
  padding-left: 12px;
  position: relative;
  color: rgba(246, 247, 247, 0.48);
  font-size: 10px;
  font-weight: 300;
  line-height: 1.45;
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 166, 166, 0.72);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile-actions button {
  min-height: 28px;
  padding: 0 9px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile-actions button svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile-actions button.is-primary {
  color: #15100f;
  border-color: rgba(255, 166, 166, 0.92);
  background: rgba(255, 166, 166, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-credits,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-auth,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-api-config {
  border-color: rgba(255, 196, 92, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 196, 92, 0.09), rgba(255, 255, 255, 0.018)),
    rgba(255, 196, 92, 0.038);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-credits .workflow-task-failure-profile-head span,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-auth .workflow-task-failure-profile-head span,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-api-config .workflow-task-failure-profile-head span {
  color: rgba(255, 213, 129, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-media,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-first-frame,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-params {
  border-color: rgba(120, 199, 255, 0.17);
  background:
    linear-gradient(135deg, rgba(120, 199, 255, 0.08), rgba(255, 255, 255, 0.018)),
    rgba(120, 199, 255, 0.036);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-media .workflow-task-failure-profile-head span,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-first-frame .workflow-task-failure-profile-head span,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-params .workflow-task-failure-profile-head span {
  color: rgba(159, 216, 255, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-timeout,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-empty-result {
  border-color: rgba(178, 132, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(178, 132, 255, 0.08), rgba(255, 255, 255, 0.018)),
    rgba(178, 132, 255, 0.036);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-timeout .workflow-task-failure-profile-head span,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-empty-result .workflow-task-failure-profile-head span {
  color: rgba(205, 179, 255, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-video,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-image {
  border-color: rgba(118, 231, 197, 0.16);
  background:
    linear-gradient(135deg, rgba(118, 231, 197, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(118, 231, 197, 0.032);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-video .workflow-task-failure-profile-head span,
body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-image .workflow-task-failure-profile-head span {
  color: rgba(149, 238, 211, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-unknown {
  border-color: rgba(246, 247, 247, 0.12);
  background:
    linear-gradient(135deg, rgba(246, 247, 247, 0.048), rgba(255, 255, 255, 0.016)),
    rgba(246, 247, 247, 0.024);
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-compact ul {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-task-failure-profile.is-compact .workflow-task-failure-profile-actions button:nth-child(n + 4) {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace {
  min-width: 0;
  padding: 8px;
  display: grid;
  gap: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  background:
    radial-gradient(circle at 12% 0, rgba(216, 255, 114, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace-head {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace-head span,
body[data-active-view="aiCanvas"] .workflow-node-api-trace-head em {
  min-width: 0;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.5);
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace-head em {
  color: rgba(216, 255, 114, 0.78);
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace-head svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace-meter {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace-meter b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(246, 247, 247, 0.82), rgba(216, 255, 114, 0.92));
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip {
  min-width: 0;
  padding: 6px;
  display: grid;
  gap: 6px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip > span {
  min-width: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip > span b,
body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip > span em {
  min-width: 0;
  overflow: hidden;
  font-size: 9px;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip > span b {
  color: rgba(246, 247, 247, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip > span em {
  color: rgba(216, 255, 114, 0.82);
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip > div {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 4px;
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip i {
  min-width: 0;
  display: grid;
  gap: 3px;
  font-style: normal;
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip i b {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.095);
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip i span {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.36);
  font-size: 8px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip i.is-completed b {
  background: rgba(118, 231, 197, 0.76);
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip i.is-running b {
  background: rgba(216, 255, 114, 0.9);
  box-shadow: 0 0 10px rgba(216, 255, 114, 0.18);
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip i.is-failed b {
  background: rgba(255, 118, 118, 0.88);
}

body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip i.is-running span,
body[data-active-view="aiCanvas"] .workflow-node-api-phase-strip i.is-failed span {
  color: rgba(246, 247, 247, 0.7);
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace-grid span {
  min-width: 0;
  padding: 6px 5px;
  display: grid;
  gap: 2px;
  overflow: hidden;
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.36);
  background: rgba(255, 255, 255, 0.034);
  font-size: 9px;
  font-weight: 300;
  text-align: center;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace-grid b {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.72);
  font-size: 10px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace p {
  max-height: 38px;
  margin: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.48);
  font-size: 10px;
  font-weight: 300;
  line-height: 1.35;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace-actions button {
  min-height: 27px;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace-actions button svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace.is-compact {
  padding: 7px;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace.is-compact .workflow-node-api-trace-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace.is-compact .workflow-node-api-trace-grid span:nth-child(n + 5) {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace.is-compact .workflow-node-api-phase-strip {
  padding: 5px;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace.is-compact .workflow-node-api-phase-strip > div {
  grid-template-columns: repeat(auto-fit, minmax(26px, 1fr));
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace.is-compact .workflow-node-api-phase-strip i span {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace.is-compact .workflow-node-api-trace-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace.is-failed {
  border-color: rgba(255, 118, 118, 0.2);
  background:
    radial-gradient(circle at 12% 0, rgba(255, 118, 118, 0.11), transparent 34%),
    rgba(255, 118, 118, 0.055);
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace.is-failed .workflow-node-api-trace-head em {
  color: rgba(255, 145, 145, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-node-api-trace.is-failed .workflow-node-api-trace-meter b {
  background: linear-gradient(90deg, rgba(255, 118, 118, 0.92), rgba(246, 247, 247, 0.78));
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-trace {
  border-color: rgba(18, 18, 18, 0.07);
  background:
    radial-gradient(circle at 12% 0, rgba(18, 18, 18, 0.045), transparent 34%),
    rgba(18, 18, 18, 0.034);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-trace-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-trace-grid span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-trace p {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-trace-head em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-trace-grid b {
  color: rgba(18, 18, 18, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-trace-grid span {
  background: rgba(255, 255, 255, 0.46);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-phase-strip {
  background: rgba(255, 255, 255, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-phase-strip > span b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-phase-strip i span {
  color: rgba(18, 18, 18, 0.44);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-phase-strip > span em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-phase-strip i.is-running span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-phase-strip i.is-failed span {
  color: rgba(18, 18, 18, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-phase-strip i b {
  background: rgba(18, 18, 18, 0.095);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-phase-strip i.is-completed b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-phase-strip i.is-running b {
  background: rgba(18, 18, 18, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-trace-actions button {
  color: rgba(18, 18, 18, 0.62);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.52);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-api-trace.is-failed {
  border-color: rgba(190, 54, 54, 0.16);
  background: rgba(190, 54, 54, 0.055);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-timeline article {
  min-width: 0;
  padding: 8px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.032);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-timeline article.is-completed {
  border-color: rgba(118, 231, 197, 0.18);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-timeline article.is-running {
  border-color: rgba(216, 255, 114, 0.25);
  background: rgba(216, 255, 114, 0.055);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-timeline article.is-failed {
  border-color: rgba(255, 125, 125, 0.22);
  background: rgba(255, 125, 125, 0.06);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-timeline svg {
  width: 15px;
  height: 15px;
  margin: 3px;
  color: rgba(216, 255, 114, 0.82);
  stroke-width: 1.75;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-timeline article.is-failed svg {
  color: rgba(255, 125, 125, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-task-detail-timeline strong {
  color: rgba(246, 247, 247, 0.86);
  font-size: 11px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-actions button {
  min-height: 34px;
  padding: 0 11px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border-radius: 999px;
}

body[data-active-view="aiCanvas"] .workflow-task-detail-actions button.is-primary {
  color: #11130f;
  border-color: rgba(216, 255, 114, 0.9);
  background: rgba(216, 255, 114, 0.9);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-backdrop {
  background: rgba(18, 18, 18, 0.26);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-card {
  color: #141414;
  border-color: rgba(18, 18, 18, 0.08);
  background:
    radial-gradient(circle at 14% 0, rgba(18, 18, 18, 0.04), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 243, 236, 0.94));
  box-shadow: 0 30px 90px rgba(18, 18, 18, 0.2);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-head strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-grid b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-timeline strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-media-slot strong {
  color: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-head em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-status span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-grid span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-prompt span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-timeline span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-media-slot span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-prompt p {
  color: rgba(18, 18, 18, 0.52);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-status,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-media-slot,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-grid span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-prompt,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-debug,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-timeline article {
  border-color: rgba(18, 18, 18, 0.07);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase-head em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase-track span {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase-head strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase-track strong {
  color: rgba(18, 18, 18, 0.74);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase-track article {
  border-color: rgba(18, 18, 18, 0.06);
  background: rgba(255, 255, 255, 0.42);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase-track article b {
  color: rgba(18, 18, 18, 0.56);
  background: rgba(18, 18, 18, 0.065);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-running {
  border-color: rgba(18, 18, 18, 0.13);
  background: rgba(18, 18, 18, 0.055);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-running b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-completed b {
  color: #fff;
  background: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-failed {
  border-color: rgba(190, 54, 54, 0.18);
  background: rgba(190, 54, 54, 0.055);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-debug summary {
  border-color: rgba(18, 18, 18, 0.065);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-debug summary span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-debug summary em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-debug-grid span {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-debug summary strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-debug-grid b {
  color: rgba(18, 18, 18, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-debug-grid span {
  background: rgba(255, 255, 255, 0.44);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-detail-debug code {
  color: rgba(18, 18, 18, 0.68);
  background: rgba(18, 18, 18, 0.045);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-exchange {
  border-color: rgba(18, 18, 18, 0.08);
  background:
    linear-gradient(135deg, rgba(18, 18, 18, 0.035), rgba(255, 255, 255, 0.44)),
    rgba(18, 18, 18, 0.025);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-exchange summary {
  border-color: rgba(18, 18, 18, 0.065);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-exchange summary span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-exchange summary em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-exchange-body span {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-exchange summary strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-exchange-body strong {
  color: rgba(18, 18, 18, 0.74);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-exchange-body article {
  border-color: rgba(18, 18, 18, 0.065);
  background: rgba(255, 255, 255, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-exchange-body code {
  color: rgba(18, 18, 18, 0.68);
  background: rgba(18, 18, 18, 0.045);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-run-log {
  border-color: rgba(18, 18, 18, 0.08);
  background:
    linear-gradient(135deg, rgba(18, 18, 18, 0.03), rgba(255, 255, 255, 0.44)),
    rgba(18, 18, 18, 0.024);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-run-log summary {
  border-color: rgba(18, 18, 18, 0.065);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-run-log summary span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-run-log summary em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-run-log-list time,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-run-log-list span {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-run-log summary strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-run-log-list strong {
  color: rgba(18, 18, 18, 0.74);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-run-log-list article {
  border-color: rgba(18, 18, 18, 0.06);
  background: rgba(255, 255, 255, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-run-log-list code {
  color: rgba(18, 18, 18, 0.66);
  background: rgba(18, 18, 18, 0.045);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile {
  border-color: rgba(190, 54, 54, 0.14);
  background:
    linear-gradient(135deg, rgba(190, 54, 54, 0.052), rgba(255, 255, 255, 0.48)),
    rgba(190, 54, 54, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile.is-credits .workflow-task-failure-profile-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile.is-auth .workflow-task-failure-profile-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile.is-api-config .workflow-task-failure-profile-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile.is-media .workflow-task-failure-profile-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile.is-first-frame .workflow-task-failure-profile-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile.is-params .workflow-task-failure-profile-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile.is-timeout .workflow-task-failure-profile-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile.is-empty-result .workflow-task-failure-profile-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile.is-video .workflow-task-failure-profile-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile.is-image .workflow-task-failure-profile-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile.is-unknown .workflow-task-failure-profile-head span {
  color: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile-head em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile p,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile li {
  color: rgba(18, 18, 18, 0.52);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-failure-profile-actions button {
  color: rgba(18, 18, 18, 0.62);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.52);
}

@media (max-width: 700px) {
  body[data-active-view="aiCanvas"] .workflow-task-detail {
    padding: 12px;
  }

  body[data-active-view="aiCanvas"] .workflow-task-detail-media,
  body[data-active-view="aiCanvas"] .workflow-task-detail-timeline,
  body[data-active-view="aiCanvas"] .workflow-task-api-phase-track {
    grid-template-columns: 1fr;
  }

  body[data-active-view="aiCanvas"] .workflow-task-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-active-view="aiCanvas"] .workflow-task-detail-debug-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-active-view="aiCanvas"] .workflow-task-api-exchange-body {
    grid-template-columns: 1fr;
  }

  body[data-active-view="aiCanvas"] .workflow-task-run-log-list article {
    grid-template-columns: 1fr;
  }

  body[data-active-view="aiCanvas"] .workflow-task-failure-profile-actions button {
    flex: 1 1 calc(50% - 8px);
  }

  body[data-active-view="aiCanvas"] .workflow-task-detail-actions button {
    flex: 1 1 calc(50% - 8px);
  }
}

/* v1.8.138 Failure reason groups: failed tasks classify credits, auth, media, params, timeout, empty result, image, and video errors with next actions. */

/* v1.8.131 Run log drawer: task detail exposes sanitized status, API hook, poll, error, and result timeline. */

/* v1.8.128 API phase rail: task detail separates batch, image, video polling, and result-write stages. */

/* v1.8.127 API exchange trace: task detail exposes sanitized TemplateCloud request and response snapshots. */

/* v1.8.124 Node API trace: selected nodes expose their linked task, server ids, batch, cost, and copyable debug entry in Inspector. */

/* v1.8.123 Task API debug: task detail exposes a compact copyable real-API diagnostic snapshot without storing large media payloads. */

/* v1.8.121 Task detail console: every generation task can open a media-aware status and timeline detail layer. */

body[data-active-view="aiCanvas"] .workflow-task-diagnostic[hidden] {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic {
  position: fixed;
  inset: 0;
  z-index: 1006;
  display: grid;
  place-items: center;
  padding: 24px;
  color: rgba(246, 247, 247, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-card {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 32px));
  padding: 12px;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 125, 125, 0.24);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 125, 125, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05)),
    #11130f;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.54);
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-head div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-head span,
body[data-active-view="aiCanvas"] .workflow-task-diagnostic-grid span,
body[data-active-view="aiCanvas"] .workflow-task-diagnostic-checks span {
  color: var(--wf-muted);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-head strong {
  color: var(--wf-ink);
  font-size: 16px;
  font-weight: 600;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-reason {
  padding: 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(255, 125, 125, 0.18);
  border-radius: 15px;
  background: rgba(255, 125, 125, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-reason > svg {
  width: 18px;
  height: 18px;
  margin: 7px;
  color: rgba(255, 125, 125, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-reason strong,
body[data-active-view="aiCanvas"] .workflow-task-diagnostic-checks strong {
  color: var(--wf-ink);
  font-size: 12px;
  font-weight: 500;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-reason p {
  margin: 3px 0 0;
  color: rgba(247, 243, 232, 0.7);
  font-size: 11px;
  line-height: 1.5;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-grid span {
  min-width: 0;
  padding: 8px;
  display: grid;
  gap: 2px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-grid b {
  overflow: hidden;
  color: var(--wf-ink);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-checks {
  display: grid;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-checks article {
  padding: 8px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-checks article.is-failed {
  border-color: rgba(255, 125, 125, 0.2);
  background: rgba(255, 125, 125, 0.06);
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-checks article.is-completed {
  border-color: rgba(118, 231, 197, 0.18);
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-checks svg {
  width: 16px;
  height: 16px;
  margin: 4px;
  color: rgba(216, 255, 114, 0.82);
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-checks article.is-failed svg {
  color: rgba(255, 125, 125, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-checks div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-actions button {
  min-height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
}

body[data-active-view="aiCanvas"] .workflow-task-diagnostic-actions button.is-primary {
  color: #11130f;
  border-color: rgba(216, 255, 114, 0.9);
  background: rgba(216, 255, 114, 0.9);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-diagnostic-backdrop {
  background: rgba(18, 18, 18, 0.28);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-diagnostic-card {
  color: #141414;
  border-color: rgba(201, 65, 65, 0.22);
  background:
    linear-gradient(145deg, rgba(201, 65, 65, 0.08), transparent 36%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 86px rgba(18, 18, 18, 0.18);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-diagnostic-reason p {
  color: rgba(20, 20, 20, 0.68);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-diagnostic-grid span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-diagnostic-checks article {
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

@media (max-width: 620px) {
  body[data-active-view="aiCanvas"] .workflow-task-diagnostic {
    padding: 12px;
  }

  body[data-active-view="aiCanvas"] .workflow-task-diagnostic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-active-view="aiCanvas"] .workflow-task-diagnostic-actions button {
    flex: 1 1 calc(50% - 8px);
  }
}

/* v1.8.120 Failed task diagnostic: failed jobs expose cause, checks, path focus, and retry actions. */

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-node-action-toolbar {
    top: -40px;
    min-height: 32px;
    border-radius: 13px;
  }

  body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button {
    width: 29px;
    min-width: 29px;
    height: 27px;
    padding: 0;
  }

  body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button span {
    display: none;
  }
}

/* v1.8.54 LibTV node reference: nodes prioritize one large media stage and one compact prompt console. */
body[data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video {
  filter:
    drop-shadow(0 28px 68px rgba(0, 0, 0, 0.38))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.025));
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected {
  filter:
    drop-shadow(0 34px 86px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 24px rgba(246, 247, 247, 0.08));
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card,
body[data-active-view="aiCanvas"] .workflow-media-node-card {
  gap: 6px;
  cursor: grab;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 22px minmax(374px, 1fr) 112px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-media-node-card {
  grid-template-rows: 22px minmax(382px, 1fr) 104px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title {
  height: 22px;
  padding: 0 4px 0 6px;
  color: rgba(246, 247, 247, 0.5);
  font-size: 11.5px;
  font-weight: 300 !important;
  line-height: 22px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span {
  gap: 5px;
  max-width: 62%;
  color: rgba(246, 247, 247, 0.62);
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title svg,
body[data-active-view="aiCanvas"] .workflow-media-node-title svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.65;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button {
  top: 41px !important;
  height: 27px;
  min-height: 27px;
  padding: 0 11px;
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.84);
  border-color: rgba(255, 255, 255, 0.095) !important;
  background: rgba(31, 32, 33, 0.9) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.055) inset !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage {
  border: 1.6px solid rgba(246, 247, 247, 0.36) !important;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 34%, rgba(246, 247, 247, 0.075), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.006)),
    #242525 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.018) inset,
    0 22px 54px rgba(0, 0, 0, 0.28);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-reference,
body[data-active-view="aiCanvas"] .workflow-media-node-card.has-media .workflow-media-node-stage {
  border-color: rgba(246, 247, 247, 0.3) !important;
  background: #151616 !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-node-stage {
  border-color: rgba(246, 247, 247, 0.68) !important;
  box-shadow:
    0 0 0 2px rgba(246, 247, 247, 0.055),
    0 24px 68px rgba(0, 0, 0, 0.38);
}

body[data-active-view="aiCanvas"] .workflow-prompt-reference-media,
body[data-active-view="aiCanvas"] .workflow-media-node-stage > img,
body[data-active-view="aiCanvas"] .workflow-media-node-stage > video {
  opacity: 0.97;
  filter: saturate(0.96) contrast(1.04);
}

body[data-active-view="aiCanvas"] .workflow-prompt-empty-icon,
body[data-active-view="aiCanvas"] .workflow-media-empty svg {
  width: 56px;
  height: 56px;
  color: rgba(246, 247, 247, 0.18);
  stroke-width: 1.15;
}

body[data-active-view="aiCanvas"] .workflow-media-empty strong,
body[data-active-view="aiCanvas"] .workflow-media-empty span {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 22px;
  bottom: 42px;
  gap: 8px;
  color: rgba(246, 247, 247, 0.36);
  font-size: 11.5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try button,
body[data-active-view="aiCanvas"] .workflow-media-try button {
  height: 22px;
  min-height: 22px;
  gap: 7px;
  color: rgba(246, 247, 247, 0.72);
  font-size: 11.5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-live-progress,
body[data-active-view="aiCanvas"] .workflow-media-progress {
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 2px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-media-status.is-ready {
  opacity: 0;
  transform: translateY(-5px);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.05) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.006)),
    #242526 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.032) inset,
    0 18px 42px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 27px minmax(47px, 1fr) 30px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 27px minmax(36px, 1fr) 29px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row,
body[data-active-view="aiCanvas"] .workflow-media-tool-row {
  padding: 6px 9px 0;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-media-tool-row button:not(.is-expand) {
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row .is-expand,
body[data-active-view="aiCanvas"] .workflow-media-tool-row .is-expand {
  width: 24px;
  height: 24px;
  min-height: 24px;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row > span {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row {
  padding: 0 11px;
  align-content: center;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  min-height: 34px;
  padding: 2px 11px 0;
  color: rgba(246, 247, 247, 0.78);
  font-size: 11.5px;
  line-height: 1.42;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row,
body[data-active-view="aiCanvas"] .workflow-media-control-row {
  min-height: 29px;
  padding: 0 7px 6px 9px;
  gap: 4px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row span {
  height: 25px;
  min-height: 25px;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill {
  max-width: 72px;
  height: 25px;
  padding: 0 6px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill em {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit {
  width: 29px;
  height: 29px !important;
  min-height: 29px !important;
  border-radius: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port {
  top: 202px;
  width: 20px;
  height: 20px;
  border-color: rgba(246, 247, 247, 0.5) !important;
  background: rgba(30, 31, 32, 0.94) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.055) inset;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.input {
  left: -24px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.output {
  right: -24px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage {
  border-color: rgba(18, 18, 18, 0.24) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(18, 18, 18, 0.06), transparent 28%),
    #e5e1d8 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose {
  border-color: rgba(18, 18, 18, 0.072) !important;
  background: #f4f1ea !important;
}

/* v1.8.55 Link source preview: pulling from media nodes shows the actual source asset before choosing image/video output. */
body[data-active-view="aiCanvas"] .workflow-link-source-pill {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 42px;
  column-gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-link-source-media {
  position: relative;
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.74);
  background:
    radial-gradient(circle at 50% 22%, rgba(246, 247, 247, 0.14), transparent 42%),
    rgba(246, 247, 247, 0.055);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

body[data-active-view="aiCanvas"] .workflow-link-source-media img,
body[data-active-view="aiCanvas"] .workflow-link-source-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.98) contrast(1.03);
}

body[data-active-view="aiCanvas"] .workflow-link-source-media svg {
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  stroke-width: 1.75;
}

body[data-active-view="aiCanvas"] .workflow-link-source-pill.has-media strong {
  color: rgba(246, 247, 247, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-link-output-pill {
  grid-template-rows: auto auto auto;
}

body[data-active-view="aiCanvas"] .workflow-link-output-pill em {
  overflow: hidden;
  color: rgba(216, 255, 114, 0.72);
  font-size: 9px;
  font-style: normal;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-source-media {
  border-color: rgba(18, 18, 18, 0.08);
  color: rgba(18, 18, 18, 0.62);
  background:
    radial-gradient(circle at 50% 22%, rgba(18, 18, 18, 0.08), transparent 42%),
    rgba(18, 18, 18, 0.045);
  box-shadow:
    0 12px 28px rgba(18, 18, 18, 0.11),
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-source-pill.has-media strong {
  color: rgba(18, 18, 18, 0.82);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-output-pill em {
  color: rgba(55, 92, 20, 0.66);
}

/* v1.8.56 Link primary run: the recommended output can be submitted directly from the wire menu. */
body[data-active-view="aiCanvas"] .workflow-link-primary-actions {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-link-primary-actions button {
  min-width: 0;
  min-height: 38px;
  padding: 0 11px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  box-shadow: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 300 !important;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-link-primary-actions svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-link-primary-run {
  justify-content: flex-start !important;
  color: #111315;
  border-color: rgba(246, 247, 247, 0.56) !important;
  background:
    linear-gradient(90deg, rgba(216, 255, 114, 0.96), rgba(246, 247, 247, 0.92)) !important;
  box-shadow:
    0 18px 48px rgba(216, 255, 114, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.44) inset !important;
}

body[data-active-view="aiCanvas"] .workflow-link-primary-run span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-active-view="aiCanvas"] .workflow-link-primary-run em {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: rgba(17, 19, 21, 0.66);
  background: rgba(17, 19, 21, 0.08);
  font-size: 9px;
  font-style: normal;
}

body[data-active-view="aiCanvas"] .workflow-link-primary-run:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(90deg, rgba(236, 255, 156, 1), rgba(255, 255, 255, 0.96)) !important;
}

body[data-active-view="aiCanvas"] .workflow-link-primary-create {
  color: rgba(246, 247, 247, 0.66);
  background: rgba(255, 255, 255, 0.038);
}

body[data-active-view="aiCanvas"] .workflow-link-primary-create:hover {
  color: rgba(246, 247, 247, 0.9);
  border-color: rgba(246, 247, 247, 0.16);
  background: rgba(246, 247, 247, 0.07);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-primary-run {
  color: rgba(246, 247, 247, 0.96);
  border-color: rgba(18, 18, 18, 0.28) !important;
  background:
    linear-gradient(90deg, rgba(18, 18, 18, 0.92), rgba(51, 54, 48, 0.88)) !important;
  box-shadow: 0 18px 42px rgba(18, 18, 18, 0.13) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-primary-run em {
  color: rgba(246, 247, 247, 0.76);
  background: rgba(246, 247, 247, 0.12);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-primary-create {
  color: rgba(18, 18, 18, 0.62);
  border-color: rgba(18, 18, 18, 0.075);
  background: rgba(18, 18, 18, 0.04);
}

@media (max-width: 520px) {
  body[data-active-view="aiCanvas"] .workflow-link-primary-actions {
    grid-template-columns: 1fr;
  }

  body[data-active-view="aiCanvas"] .workflow-link-primary-create {
    min-height: 34px;
  }
}

/* v1.8.57 LibTV node reference: compact dark media node with a floating prompt console and visible runtime strip. */
body[data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video,
body[data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-active-view="aiCanvas"] .workflow-node-videoModel {
  overflow: visible;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 30px 76px rgba(0, 0, 0, 0.46))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.025));
}

body[data-active-view="aiCanvas"] .workflow-node-prompt:hover,
body[data-active-view="aiCanvas"] .workflow-node-upload:hover,
body[data-active-view="aiCanvas"] .workflow-node-image:hover,
body[data-active-view="aiCanvas"] .workflow-node-video:hover,
body[data-active-view="aiCanvas"] .workflow-node-imageModel:hover,
body[data-active-view="aiCanvas"] .workflow-node-videoModel:hover,
body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected {
  filter:
    drop-shadow(0 34px 86px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 26px rgba(246, 247, 247, 0.08));
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card,
body[data-active-view="aiCanvas"] .workflow-media-node-card,
body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  gap: 8px;
  background: transparent !important;
  cursor: grab;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 22px minmax(344px, 1fr) 116px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-media-node-card {
  grid-template-rows: 22px minmax(348px, 1fr) 112px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-node-title {
  height: 22px;
  min-height: 22px;
  padding: 0 5px 0 7px;
  color: rgba(246, 247, 247, 0.48);
  font-size: 11px;
  font-weight: 300 !important;
  line-height: 22px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-active-view="aiCanvas"] .workflow-generator-node-title span {
  gap: 5px;
  color: rgba(246, 247, 247, 0.58);
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title b,
body[data-active-view="aiCanvas"] .workflow-media-node-title b,
body[data-active-view="aiCanvas"] .workflow-generator-node-title b {
  color: rgba(246, 247, 247, 0.78);
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title svg,
body[data-active-view="aiCanvas"] .workflow-media-node-title svg,
body[data-active-view="aiCanvas"] .workflow-generator-node-title svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.55;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button {
  top: 34px !important;
  left: 50%;
  right: auto;
  height: 29px;
  min-height: 29px;
  padding: 0 12px;
  border-radius: 12px;
  transform: translateX(-50%);
  color: rgba(246, 247, 247, 0.86);
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: rgba(31, 32, 33, 0.92) !important;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  border: 1.7px solid rgba(246, 247, 247, 0.42) !important;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 34%, rgba(246, 247, 247, 0.08), transparent 27%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.006)),
    #242525 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 22px 54px rgba(0, 0, 0, 0.32);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-reference,
body[data-active-view="aiCanvas"] .workflow-media-node-card.has-media .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage.has-result {
  border-color: rgba(246, 247, 247, 0.34) !important;
  background: #151616 !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected .workflow-generator-stage,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected .workflow-generator-stage {
  border-color: rgba(246, 247, 247, 0.76) !important;
  box-shadow:
    0 0 0 2px rgba(246, 247, 247, 0.065),
    0 28px 74px rgba(0, 0, 0, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-prompt-empty-icon,
body[data-active-view="aiCanvas"] .workflow-media-empty svg,
body[data-active-view="aiCanvas"] .workflow-generator-empty svg {
  width: 58px;
  height: 58px;
  color: rgba(246, 247, 247, 0.18);
  stroke-width: 1.1;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 22px;
  bottom: 42px;
  gap: 8px;
  color: rgba(246, 247, 247, 0.36);
  font-size: 11px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try button,
body[data-active-view="aiCanvas"] .workflow-media-try button {
  height: 22px;
  min-height: 22px;
  gap: 6px;
  padding: 0 5px;
  color: rgba(246, 247, 247, 0.74);
  font-size: 11px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-status.is-ready,
body[data-active-view="aiCanvas"] .workflow-media-status.is-ready {
  opacity: 0;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  border: 1px solid rgba(255, 255, 255, 0.052) !important;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.007)),
    #242526 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.034) inset,
    0 18px 42px rgba(0, 0, 0, 0.28);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 26px minmax(42px, 1fr) 29px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 26px minmax(34px, 1fr) 28px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row,
body[data-active-view="aiCanvas"] .workflow-media-tool-row {
  padding: 6px 9px 0;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-media-tool-row button:not(.is-expand) {
  height: 24px;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 8px;
  color: rgba(246, 247, 247, 0.58);
  background: rgba(255, 255, 255, 0.032) !important;
  font-size: 10px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row .is-expand,
body[data-active-view="aiCanvas"] .workflow-media-tool-row .is-expand {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  min-height: 34px;
  padding: 1px 11px 0;
  color: rgba(246, 247, 247, 0.8);
  font-size: 11px;
  font-weight: 300 !important;
  line-height: 1.42;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea::placeholder,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea::placeholder {
  color: rgba(246, 247, 247, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row,
body[data-active-view="aiCanvas"] .workflow-media-control-row {
  min-height: 28px;
  padding: 0 7px 6px 9px;
  gap: 4px;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row span {
  height: 24px;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row button:nth-last-child(n + 5),
body[data-active-view="aiCanvas"] .workflow-media-control-row button:nth-last-child(n + 5) {
  max-width: 98px;
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill {
  max-width: 64px;
  height: 24px;
  padding: 0 6px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-run-readiness-pill em {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit {
  width: 29px;
  min-width: 29px;
  height: 29px !important;
  min-height: 29px !important;
  border-radius: 10px !important;
  color: #111315 !important;
  background: rgba(246, 247, 247, 0.92) !important;
  transform: translateY(-1px);
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit:hover {
  background: rgba(216, 255, 114, 0.98) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 196px;
  width: 20px;
  height: 20px;
  border-color: rgba(246, 247, 247, 0.58) !important;
  background: rgba(31, 32, 33, 0.95) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port::before {
  content: "+";
  color: rgba(246, 247, 247, 0.92);
  font-size: 17px;
  font-weight: 300;
  line-height: 1;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.input {
  left: -24px;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.output {
  right: -24px;
}

body[data-active-view="aiCanvas"] .workflow-taskbar:not(.is-collapsed) {
  max-height: 226px;
}

body[data-active-view="aiCanvas"] .workflow-live-run-strip {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 7px;
  overflow-x: auto;
  padding: 0 1px 2px;
}

body[data-active-view="aiCanvas"] .workflow-live-run-card {
  min-width: 0;
  min-height: 58px;
  padding: 7px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.043), rgba(255, 255, 255, 0.018)),
    rgba(24, 25, 26, 0.92);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-live-run-card.is-generating,
body[data-active-view="aiCanvas"] .workflow-live-run-card.is-compositing {
  border-color: rgba(216, 255, 114, 0.18);
}

body[data-active-view="aiCanvas"] .workflow-live-run-card.is-queued,
body[data-active-view="aiCanvas"] .workflow-live-run-card.is-submitting,
body[data-active-view="aiCanvas"] .workflow-live-run-card.is-validating {
  border-color: rgba(118, 179, 255, 0.18);
}

body[data-active-view="aiCanvas"] .workflow-live-run-source {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.78);
  background:
    radial-gradient(circle at 50% 30%, rgba(216, 255, 114, 0.16), transparent 44%),
    rgba(255, 255, 255, 0.045);
}

body[data-active-view="aiCanvas"] .workflow-live-run-source img,
body[data-active-view="aiCanvas"] .workflow-live-run-source video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-active-view="aiCanvas"] .workflow-live-run-source svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-live-run-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

body[data-active-view="aiCanvas"] .workflow-live-run-copy div {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-live-run-copy strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.9);
  font-size: 11px;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-live-run-copy em {
  flex: 0 0 auto;
  color: rgba(216, 255, 114, 0.75);
  font-size: 10px;
  font-style: normal;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-live-run-copy p {
  margin: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.48);
  font-size: 10px;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-live-run-copy > span {
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-live-run-copy > span i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(216, 255, 114, 0.96), rgba(246, 247, 247, 0.9));
}

body[data-active-view="aiCanvas"] .workflow-live-run-actions {
  display: flex;
  gap: 5px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-live-run-actions button {
  min-width: 0;
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 10px;
  color: rgba(246, 247, 247, 0.68);
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-live-run-actions button:hover:not(:disabled) {
  color: rgba(246, 247, 247, 0.92);
  background: rgba(255, 255, 255, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-live-run-actions svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-taskbar.is-collapsed .workflow-live-run-strip {
  display: none;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-upload,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-image,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-video,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-videoModel {
  filter:
    drop-shadow(0 22px 54px rgba(18, 18, 18, 0.16))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.66));
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-node-title span {
  color: rgba(18, 18, 18, 0.58);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.24) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(18, 18, 18, 0.055), transparent 27%),
    #e6e2da !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-live-run-card {
  border-color: rgba(18, 18, 18, 0.075) !important;
  background: rgba(246, 243, 236, 0.94) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose textarea,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-prompt-textarea,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-live-run-copy strong {
  color: rgba(18, 18, 18, 0.84);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-live-run-copy p {
  color: rgba(18, 18, 18, 0.48);
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-live-run-strip {
    grid-auto-columns: minmax(210px, 86vw);
  }

  body[data-active-view="aiCanvas"] .workflow-live-run-actions button span {
    display: none;
  }

  body[data-active-view="aiCanvas"] .workflow-live-run-actions button {
    width: 28px;
    padding: 0;
    justify-content: center;
  }
}

/* v1.8.58 Canvas cache sync: edge chrome is smaller, palette keeps only functional labels, canvas gets more room. */
body[data-active-view="aiCanvas"] .workflow-topbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-topbar {
  inset: 10px 10px auto 10px;
}

body[data-active-view="aiCanvas"] .workflow-brand {
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}

body[data-active-view="aiCanvas"] .workflow-brand span {
  font-size: 13px;
}

body[data-active-view="aiCanvas"] .workflow-brand strong {
  padding-left: 8px;
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-brand em {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-actions {
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-action-group {
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-icon-button,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-primary-button {
  min-height: 34px;
  border-radius: 12px;
}

body[data-active-view="aiCanvas"] .workflow-icon-button {
  width: 34px;
}

body[data-active-view="aiCanvas"] .workflow-tool-button {
  padding: 0 9px;
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-run-button {
  min-width: 72px;
  padding: 0 12px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar {
  left: 10px;
  width: 44px;
  padding: 5px;
  gap: 5px;
  border-radius: 15px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 11px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button svg,
body[data-active-view="aiCanvas"] .workflow-icon-button svg,
body[data-active-view="aiCanvas"] .workflow-tool-button svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.75;
}

body[data-active-view="aiCanvas"] .workflow-sidebar {
  left: 60px;
  top: 246px;
  width: 244px;
  max-height: min(500px, calc(100vh - 118px));
  padding: 6px;
  border-radius: 15px;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-content {
  max-height: calc(100vh - 148px);
}

body[data-active-view="aiCanvas"] .workflow-sidebar-search {
  height: 30px;
  margin-bottom: 6px;
  border-radius: 11px;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-search input {
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-tabs {
  gap: 4px;
  margin-bottom: 6px;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-tabs button {
  min-height: 29px;
  padding: 0 7px;
  gap: 4px;
  border-radius: 10px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-palette-group > span,
body[data-active-view="aiCanvas"] .workflow-palette-card small,
body[data-active-view="aiCanvas"] .workflow-template-card small,
body[data-active-view="aiCanvas"] .workflow-asset-card small {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-group {
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-palette-card {
  min-height: 40px;
  padding: 6px 8px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  border-radius: 11px;
}

body[data-active-view="aiCanvas"] .workflow-palette-card i {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

body[data-active-view="aiCanvas"] .workflow-palette-card strong {
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-inspector {
  top: 58px;
  right: 10px;
  width: min(292px, calc(100vw - 94px));
  max-height: calc(100vh - 90px);
  padding: 6px;
  border-radius: 15px;
}

body[data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-active-view="aiCanvas"] .workflow-run-panel {
  padding: 8px;
  border-radius: 13px;
}

body[data-active-view="aiCanvas"] .workflow-inspector-actions {
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-inspector-actions button {
  min-height: 30px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-taskbar {
  left: 60px;
  right: 10px;
  bottom: 58px;
  max-height: 188px;
  padding: 6px;
  border-radius: 15px;
}

body[data-active-view="aiCanvas"] .workflow-taskbar:not(.is-collapsed) {
  max-height: 188px;
}

body[data-active-view="aiCanvas"] .workflow-taskbar-head {
  min-height: 30px;
}

body[data-active-view="aiCanvas"] .workflow-taskbar-head strong {
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-console-grid {
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-live-run-strip {
  grid-auto-columns: minmax(202px, 1fr);
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-live-run-card {
  min-height: 50px;
  padding: 5px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  border-radius: 12px;
}

body[data-active-view="aiCanvas"] .workflow-live-run-source {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

body[data-active-view="aiCanvas"] .workflow-live-run-actions button {
  height: 25px;
  min-height: 25px;
  padding: 0 7px;
  border-radius: 9px;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls {
  left: 10px;
  bottom: 10px;
  padding: 5px;
  gap: 4px;
  border-radius: 14px;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-icon-button {
  width: 25px;
  height: 25px;
  min-height: 25px;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-zoom {
  min-width: 50px;
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-empty {
  width: min(760px, calc(100vw - 168px));
}

body[data-active-view="aiCanvas"] .workflow-starter-cards {
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-starter-card {
  min-height: 48px;
  padding: 0 10px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-starter-card strong {
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-starter-card span {
  font-size: 11px;
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-topbar,
  body[data-theme="light"][data-active-view="aiCanvas"] .workflow-topbar {
    inset: 8px 8px auto 8px;
  }

  body[data-active-view="aiCanvas"] .workflow-sidebar {
    left: 8px;
    right: 8px;
    top: 54px;
    width: auto;
  }

  body[data-active-view="aiCanvas"] .workflow-inspector {
    right: 8px;
    left: 56px;
    width: auto;
  }

  body[data-active-view="aiCanvas"] .workflow-taskbar {
    left: 8px;
    right: 8px;
    bottom: 54px;
  }
}

/* v1.8.59 Link dock panel: pulling a wire opens a compact image/video generation chooser. */
body[data-active-view="aiCanvas"] .workflow-link-menu {
  width: 364px;
  padding: 8px;
  border-radius: 16px;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head {
  min-height: 24px;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-panel {
  margin-top: 7px;
  padding: 7px;
  display: grid;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 0, rgba(216, 255, 114, 0.12), transparent 34%),
    radial-gradient(circle at 82% 0, rgba(120, 199, 255, 0.105), transparent 34%),
    rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-link-dock-route {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 0.92fr);
  gap: 6px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-route > svg {
  width: 14px;
  height: 14px;
  color: rgba(216, 255, 114, 0.72);
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-panel .workflow-link-source-pill,
body[data-active-view="aiCanvas"] .workflow-link-dock-panel .workflow-link-output-pill {
  min-height: 42px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.13);
}

body[data-active-view="aiCanvas"] .workflow-link-dock-panel .workflow-link-source-pill {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-panel .workflow-link-output-pill {
  align-content: center;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-panel .workflow-link-source-media {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card {
  min-width: 0;
  min-height: 76px;
  padding: 8px;
  display: grid;
  grid-template-rows: 20px 18px 15px 14px;
  gap: 3px;
  align-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  color: rgba(246, 247, 247, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.026);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card:hover {
  border-color: rgba(246, 247, 247, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.038);
  transform: translateY(-1px);
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card.is-recommended {
  border-color: rgba(216, 255, 114, 0.34);
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.07) inset,
    0 18px 42px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card.is-video.is-recommended {
  border-color: rgba(120, 199, 255, 0.38);
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card > span {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 7px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card.is-image svg {
  color: rgba(216, 255, 114, 0.95);
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card.is-video svg {
  color: rgba(120, 199, 255, 0.95);
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card b,
body[data-active-view="aiCanvas"] .workflow-link-dock-card strong,
body[data-active-view="aiCanvas"] .workflow-link-dock-card em,
body[data-active-view="aiCanvas"] .workflow-link-dock-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card b,
body[data-active-view="aiCanvas"] .workflow-link-dock-card small {
  color: rgba(246, 247, 247, 0.48);
  font-size: 9px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card strong {
  color: rgba(246, 247, 247, 0.92);
  font-size: 12px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card em {
  color: rgba(246, 247, 247, 0.54);
  font-size: 10px;
  font-style: normal;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-primary-actions {
  margin-top: 7px;
  grid-template-columns: minmax(0, 1fr) 104px;
}

body[data-active-view="aiCanvas"] .workflow-link-primary-actions button {
  min-height: 34px;
  border-radius: 11px;
}

body[data-active-view="aiCanvas"] .workflow-link-menu > small {
  display: block;
  margin: 6px 2px 0;
  line-height: 1.38;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-quick-generate {
  margin-top: 7px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-primary,
body[data-active-view="aiCanvas"] .workflow-link-choice-card.is-secondary {
  grid-template-rows: auto;
  padding: 4px;
  border-radius: 12px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] {
  min-height: 46px;
  padding: 6px;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 6px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-preview {
  grid-row: 1 / 3;
  width: 26px;
  min-height: 26px;
  padding: 0;
  justify-content: center;
  border-radius: 9px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-preview b,
body[data-active-view="aiCanvas"] .workflow-link-choice-run,
body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] > span {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong {
  min-height: 14px;
  line-height: 14px;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong b,
body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] strong kbd {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list button[data-link-create] em {
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-foot {
  margin-top: 6px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-panel,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-panel .workflow-link-source-pill,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-panel .workflow-link-output-pill,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-card {
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-card strong {
  color: rgba(18, 18, 18, 0.82);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-card b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-card em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-card small {
  color: rgba(18, 18, 18, 0.52);
}

@media (max-width: 520px) {
  body[data-active-view="aiCanvas"] .workflow-link-menu {
    width: min(342px, calc(100vw - 18px));
  }

  body[data-active-view="aiCanvas"] .workflow-link-dock-route {
    grid-template-columns: 1fr;
  }

  body[data-active-view="aiCanvas"] .workflow-link-dock-route > svg {
    display: none;
  }

  body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-quick-generate {
    grid-template-columns: 1fr;
  }
}

/* v1.8.60 Generator node reference: media-first AI node with upload dock, contract chips, and compact run console. */
body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  grid-template-rows: 22px minmax(370px, 1fr) 118px !important;
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title {
  position: relative;
  height: 22px;
  min-height: 22px;
  padding: 0 7px;
  line-height: 22px;
}

body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > span {
  max-width: 42%;
  color: rgba(246, 247, 247, 0.6);
  font-size: 11px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > em {
  margin-left: auto;
  margin-right: 74px;
  color: rgba(246, 247, 247, 0.36);
  font-size: 10px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-title-upload {
  position: absolute;
  z-index: 8;
  top: 42px;
  left: 50%;
  height: 28px;
  min-height: 28px;
  padding: 0 12px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.024)),
    rgba(31, 32, 34, 0.96) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: blur(16px);
  font-size: 11px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-title-upload:hover {
  color: rgba(246, 247, 247, 0.98);
  border-color: rgba(216, 255, 114, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.034)),
    rgba(37, 39, 39, 0.98) !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-title-upload svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-generator-stage {
  border-width: 1.7px !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(246, 247, 247, 0.082), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.01)),
    #242525 !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-source {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  width: 82px;
  height: 62px;
  min-width: 82px;
  min-height: 62px;
  border-radius: 12px;
  opacity: 0.94;
}

body[data-active-view="aiCanvas"] .workflow-generator-source.is-empty {
  opacity: 0;
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-generator-source span {
  max-width: 72px;
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-generator-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body[data-active-view="aiCanvas"] .workflow-generator-status {
  top: 12px;
  right: 12px;
  height: 24px;
  padding: 0 8px;
  border-radius: 10px;
  background: rgba(12, 13, 14, 0.54);
  backdrop-filter: blur(14px);
}

body[data-active-view="aiCanvas"] .workflow-generator-contract-strip {
  position: absolute;
  z-index: 5;
  left: 16px;
  right: 16px;
  bottom: 66px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-generator-contract-chip {
  min-width: 0;
  height: 26px;
  padding: 0 7px;
  display: grid;
  grid-template-columns: 14px minmax(0, auto) minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.72);
  background: rgba(12, 13, 14, 0.48);
  backdrop-filter: blur(14px);
}

body[data-active-view="aiCanvas"] .workflow-generator-contract-chip svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-generator-contract-chip b,
body[data-active-view="aiCanvas"] .workflow-generator-contract-chip em {
  min-width: 0;
  overflow: hidden;
  font-size: 9px;
  font-style: normal;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-generator-contract-chip b {
  color: rgba(246, 247, 247, 0.48);
}

body[data-active-view="aiCanvas"] .workflow-generator-contract-chip em {
  color: rgba(246, 247, 247, 0.82);
}

body[data-active-view="aiCanvas"] .workflow-generator-contract-chip.is-ok,
body[data-active-view="aiCanvas"] .workflow-generator-contract-chip.is-ready {
  border-color: rgba(116, 228, 165, 0.2);
}

body[data-active-view="aiCanvas"] .workflow-generator-contract-chip.is-ok svg,
body[data-active-view="aiCanvas"] .workflow-generator-contract-chip.is-ready svg {
  color: rgba(116, 228, 165, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-generator-contract-chip.is-warn,
body[data-active-view="aiCanvas"] .workflow-generator-contract-chip.is-mock {
  border-color: rgba(216, 255, 114, 0.18);
}

body[data-active-view="aiCanvas"] .workflow-generator-contract-chip.is-warn svg,
body[data-active-view="aiCanvas"] .workflow-generator-contract-chip.is-mock svg {
  color: rgba(216, 255, 114, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-generator-contract-chip.is-missing,
body[data-active-view="aiCanvas"] .workflow-generator-contract-chip.is-blocked {
  border-color: rgba(255, 118, 118, 0.22);
}

body[data-active-view="aiCanvas"] .workflow-generator-contract-chip.is-missing svg,
body[data-active-view="aiCanvas"] .workflow-generator-contract-chip.is-blocked svg {
  color: rgba(255, 118, 118, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-generator-slots {
  left: 16px;
  right: 16px;
  bottom: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card.is-image .workflow-generator-slots {
  width: min(238px, calc(100% - 32px));
}

body[data-active-view="aiCanvas"] .workflow-generator-slot {
  min-height: 42px;
  padding: 5px 7px 5px 5px;
  grid-template-columns: 32px minmax(0, 1fr);
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(13, 14, 15, 0.58) !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-slot.is-required.is-empty {
  border-color: rgba(255, 118, 118, 0.28) !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-slot.has-media {
  border-color: rgba(116, 228, 165, 0.22) !important;
  background: rgba(16, 30, 24, 0.66) !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-slot-copy b {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

body[data-active-view="aiCanvas"] .workflow-generator-slot-copy small {
  flex: 0 0 auto;
  color: rgba(246, 247, 247, 0.38);
  font-size: 9px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-slot.is-required.is-empty .workflow-generator-slot-copy small {
  color: rgba(255, 118, 118, 0.78);
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  display: grid;
  grid-template-rows: 28px minmax(34px, 1fr) 31px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row {
  padding: 6px 9px 0;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row button {
  max-width: 128px;
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-generator-prompt {
  min-height: 32px;
  margin: 0;
  padding: 3px 11px 0;
  color: rgba(246, 247, 247, 0.78);
  font-size: 11px;
  font-weight: 300 !important;
  line-height: 1.45;
}

body[data-active-view="aiCanvas"] .workflow-generator-flow,
body[data-active-view="aiCanvas"] .workflow-generator-requirements {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row {
  min-height: 31px;
  padding: 0 8px 6px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: end;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row > div {
  min-width: 0;
}

body[data-active-view="aiCanvas"] .workflow-generator-readiness {
  width: fit-content;
  max-width: 168px;
  height: 24px;
  padding: 0 7px;
  gap: 5px;
  border-radius: 8px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-generator-run {
  width: 30px;
  min-width: 30px;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  justify-content: center;
  border-radius: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-run span {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 198px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > em {
  color: rgba(18, 18, 18, 0.58);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-title-upload {
  color: rgba(18, 18, 18, 0.78);
  border-color: rgba(18, 18, 18, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.54)),
    rgba(247, 244, 237, 0.96) !important;
  box-shadow:
    0 14px 34px rgba(18, 18, 18, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-contract-chip,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-slot {
  color: rgba(18, 18, 18, 0.72);
  border-color: rgba(18, 18, 18, 0.075) !important;
  background: rgba(255, 255, 255, 0.68) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-contract-chip b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-slot-copy small {
  color: rgba(18, 18, 18, 0.42);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-contract-chip em {
  color: rgba(18, 18, 18, 0.78);
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-generator-contract-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    bottom: 64px;
  }

  body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > em {
    display: none;
  }
}

/* v1.8.61 Link mode strip: line-created generator nodes expose image/video direction in the node console. */
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 26px 25px minmax(24px, 1fr) 31px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-mode-strip {
  min-width: 0;
  height: 25px;
  margin: 0 9px;
  padding: 0 7px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.062);
  border-radius: 8px;
  color: rgba(246, 247, 247, 0.68);
  background: rgba(255, 255, 255, 0.026);
}

body[data-active-view="aiCanvas"] .workflow-generator-mode-strip span,
body[data-active-view="aiCanvas"] .workflow-generator-mode-strip strong,
body[data-active-view="aiCanvas"] .workflow-generator-mode-strip em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-mode-strip span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: rgba(246, 247, 247, 0.86);
}

body[data-active-view="aiCanvas"] .workflow-generator-mode-strip svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-generator-mode-strip strong {
  color: rgba(216, 255, 114, 0.76);
}

body[data-active-view="aiCanvas"] .workflow-generator-mode-strip em {
  color: rgba(246, 247, 247, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-generator-mode-strip.is-missing {
  border-color: rgba(255, 118, 118, 0.2);
}

body[data-active-view="aiCanvas"] .workflow-generator-mode-strip.is-missing strong,
body[data-active-view="aiCanvas"] .workflow-generator-mode-strip.is-missing svg {
  color: rgba(255, 118, 118, 0.8);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-mode-strip {
  color: rgba(18, 18, 18, 0.68);
  border-color: rgba(18, 18, 18, 0.07);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-mode-strip span {
  color: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-mode-strip strong {
  color: rgba(38, 72, 18, 0.8);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-mode-strip em {
  color: rgba(18, 18, 18, 0.44);
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-generator-mode-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body[data-active-view="aiCanvas"] .workflow-generator-mode-strip em {
    display: none;
  }
}

/* v1.8.62 Result wall: generated output node becomes a time-sorted preview wall with stable actions. */
body[data-active-view="aiCanvas"] .workflow-result-collector-card {
  grid-template-rows: 22px minmax(242px, 1fr) 82px 104px 38px !important;
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-head {
  height: 22px;
  min-height: 22px;
  padding: 0 7px;
  line-height: 22px;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-stage {
  min-height: 0;
  border-width: 1.7px;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-quick-actions {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 5px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-quick-actions button {
  height: 26px;
  min-height: 26px;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.78);
  background: rgba(12, 13, 15, 0.58);
  backdrop-filter: blur(12px);
  font-size: 10px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-quick-actions button:hover {
  color: #101214;
  border-color: rgba(216, 255, 114, 0.58);
  background: rgba(216, 255, 114, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-quick-actions svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-meta {
  min-height: 0;
  padding: 7px 9px;
  grid-template-rows: 16px minmax(22px, 1fr) 18px;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-meta-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-meta-head strong,
body[data-active-view="aiCanvas"] .workflow-result-collector-meta-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-meta-head span {
  color: rgba(246, 247, 247, 0.42);
  font-size: 9px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-stats {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-stats span {
  min-width: 0;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  color: rgba(246, 247, 247, 0.44);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-stats b {
  color: rgba(246, 247, 247, 0.86);
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-wall {
  min-height: 0;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 43px);
  gap: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 10px;
  background: rgba(36, 37, 38, 0.99);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-wall > span {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  color: rgba(246, 247, 247, 0.42);
  font-size: 11px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: rgba(246, 247, 247, 0.62);
  background: rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb:hover,
body[data-active-view="aiCanvas"] .workflow-result-collector-thumb.is-latest {
  border-color: rgba(216, 255, 114, 0.28);
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-media,
body[data-active-view="aiCanvas"] .workflow-result-thumb-media img,
body[data-active-view="aiCanvas"] .workflow-result-thumb-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 34%, rgba(0, 0, 0, 0.58));
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb small,
body[data-active-view="aiCanvas"] .workflow-result-collector-thumb b {
  position: absolute;
  z-index: 2;
  left: 4px;
  right: 4px;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.82);
  font-size: 8px;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb small {
  top: 4px;
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb small svg {
  width: 9px;
  height: 9px;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb b {
  bottom: 4px;
  color: rgba(246, 247, 247, 0.56);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-actions {
  min-height: 0;
  padding: 5px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-wall {
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-meta-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-stats span {
  color: rgba(18, 18, 18, 0.44);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-stats b {
  color: rgba(18, 18, 18, 0.82);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-quick-actions button {
  color: rgba(18, 18, 18, 0.74);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.68);
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-result-collector-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-active-view="aiCanvas"] .workflow-result-collector-quick-actions button span {
    display: none;
  }
}

/* v1.8.63 LibTV node reference polish: floating media stage, compact prompt console, and plus ports. */
body[data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video,
body[data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-active-view="aiCanvas"] .workflow-node-videoModel {
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 34px 88px rgba(0, 0, 0, 0.48))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.03));
}

body[data-active-view="aiCanvas"] .workflow-node-prompt:hover,
body[data-active-view="aiCanvas"] .workflow-node-upload:hover,
body[data-active-view="aiCanvas"] .workflow-node-image:hover,
body[data-active-view="aiCanvas"] .workflow-node-video:hover,
body[data-active-view="aiCanvas"] .workflow-node-imageModel:hover,
body[data-active-view="aiCanvas"] .workflow-node-videoModel:hover,
body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected {
  filter:
    drop-shadow(0 40px 104px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 28px rgba(246, 247, 247, 0.08));
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card,
body[data-active-view="aiCanvas"] .workflow-media-node-card,
body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  width: 100%;
  height: 100%;
  gap: 8px !important;
  background: transparent !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card {
  grid-template-rows: 22px minmax(356px, 1fr) 142px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-media-node-card {
  grid-template-rows: 22px minmax(364px, 1fr) 132px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card {
  grid-template-rows: 22px minmax(360px, 1fr) 142px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 6px !important;
  color: rgba(246, 247, 247, 0.5) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  line-height: 22px !important;
  letter-spacing: 0 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > span {
  max-width: 48%;
  gap: 5px;
  color: rgba(246, 247, 247, 0.62) !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title b,
body[data-active-view="aiCanvas"] .workflow-media-node-title b,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title b {
  color: rgba(246, 247, 247, 0.78);
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title svg,
body[data-active-view="aiCanvas"] .workflow-media-node-title svg,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.55;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button,
body[data-active-view="aiCanvas"] .workflow-generator-title-upload {
  position: absolute;
  z-index: 10;
  top: 37px !important;
  left: 50% !important;
  right: auto !important;
  height: 29px !important;
  min-height: 29px !important;
  padding: 0 13px !important;
  transform: translate(-50%, -50%) !important;
  border: 1px solid rgba(255, 255, 255, 0.105) !important;
  border-radius: 12px !important;
  color: rgba(246, 247, 247, 0.86) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(31, 32, 34, 0.96) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: blur(16px);
  font-size: 11px !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button:hover,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button:hover,
body[data-active-view="aiCanvas"] .workflow-generator-title-upload:hover {
  color: #101214 !important;
  border-color: rgba(246, 247, 247, 0.66) !important;
  background: rgba(246, 247, 247, 0.94) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  min-height: 0 !important;
  border: 1.45px solid rgba(246, 247, 247, 0.46) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 32%, rgba(246, 247, 247, 0.085), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.01)),
    #252626 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.026) inset,
    0 24px 70px rgba(0, 0, 0, 0.3);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-reference,
body[data-active-view="aiCanvas"] .workflow-media-node-card.has-media .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage.has-result {
  border-color: rgba(246, 247, 247, 0.34) !important;
  background: #171819 !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected .workflow-generator-stage,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected .workflow-generator-stage {
  border-color: rgba(246, 247, 247, 0.86) !important;
  box-shadow:
    0 0 0 3px rgba(246, 247, 247, 0.08),
    0 0 0 1px rgba(246, 247, 247, 0.08) inset,
    0 30px 86px rgba(0, 0, 0, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-prompt-empty-icon,
body[data-active-view="aiCanvas"] .workflow-media-empty svg,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview svg {
  width: 58px !important;
  height: 58px !important;
  color: rgba(246, 247, 247, 0.2) !important;
  stroke-width: 1.12 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 24px !important;
  bottom: 48px !important;
  gap: 10px !important;
  color: rgba(246, 247, 247, 0.38) !important;
  font-size: 11.5px !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try button,
body[data-active-view="aiCanvas"] .workflow-media-try button {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 4px !important;
  color: rgba(246, 247, 247, 0.76) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.052) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.027), rgba(255, 255, 255, 0.007)),
    rgba(35, 36, 37, 0.99) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 48px rgba(0, 0, 0, 0.27);
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 28px minmax(48px, 1fr) 32px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 28px minmax(38px, 1fr) 31px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 26px 25px minmax(28px, 1fr) 31px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row,
body[data-active-view="aiCanvas"] .workflow-media-tool-row,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row {
  padding: 6px 9px 0 !important;
  gap: 5px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-media-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-generator-tool-row button {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.058) !important;
  border-radius: 8px !important;
  color: rgba(246, 247, 247, 0.6) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:not(.is-expand):hover,
body[data-active-view="aiCanvas"] .workflow-media-tool-row button:not(.is-expand):hover,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row button:hover {
  color: rgba(246, 247, 247, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row .is-expand,
body[data-active-view="aiCanvas"] .workflow-media-tool-row .is-expand {
  margin-left: auto;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea,
body[data-active-view="aiCanvas"] .workflow-generator-prompt {
  min-height: 38px !important;
  padding: 2px 11px 0 !important;
  color: rgba(246, 247, 247, 0.82) !important;
  font-size: 11.5px !important;
  font-weight: 300 !important;
  line-height: 1.46 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose textarea:focus,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea:focus {
  color: rgba(246, 247, 247, 0.94) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row,
body[data-active-view="aiCanvas"] .workflow-media-control-row {
  min-height: 31px !important;
  padding: 0 8px 7px 9px !important;
  gap: 5px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row::-webkit-scrollbar,
body[data-active-view="aiCanvas"] .workflow-media-control-row::-webkit-scrollbar {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row span {
  flex: 0 0 auto;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  color: rgba(246, 247, 247, 0.64) !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  white-space: nowrap !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit,
body[data-active-view="aiCanvas"] .workflow-generator-run {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  color: #111315 !important;
  border-color: rgba(246, 247, 247, 0.62) !important;
  background: rgba(246, 247, 247, 0.92) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit:hover,
body[data-active-view="aiCanvas"] .workflow-generator-run:hover:not(:disabled) {
  border-color: rgba(216, 255, 114, 0.7) !important;
  background: rgba(216, 255, 114, 0.98) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 204px !important;
  width: 22px !important;
  height: 22px !important;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(246, 247, 247, 0.58) !important;
  color: rgba(246, 247, 247, 0.92) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(30, 31, 32, 0.96) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.input,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.input {
  left: -26px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port.output,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port.output {
  right: -26px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port::before {
  content: "+";
  margin-top: -1px;
  color: currentColor;
  font-size: 17px;
  font-weight: 300;
  line-height: 1;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port:hover {
  color: #101214 !important;
  border-color: rgba(216, 255, 114, 0.78) !important;
  background: rgba(216, 255, 114, 0.96) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-upload,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-image,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-video,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-videoModel {
  filter:
    drop-shadow(0 24px 64px rgba(18, 18, 18, 0.17))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72));
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > span {
  color: rgba(18, 18, 18, 0.58) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.24) !important;
  background:
    radial-gradient(circle at 50% 32%, rgba(18, 18, 18, 0.055), transparent 34%),
    #e6e2da !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-compose {
  border-color: rgba(18, 18, 18, 0.075) !important;
  background: rgba(246, 243, 236, 0.95) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose textarea,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-prompt-textarea,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-prompt {
  color: rgba(18, 18, 18, 0.82) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title > button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-title-upload {
  color: rgba(18, 18, 18, 0.78) !important;
  border-color: rgba(18, 18, 18, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.54)),
    rgba(247, 244, 237, 0.96) !important;
  box-shadow:
    0 14px 34px rgba(18, 18, 18, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  color: rgba(18, 18, 18, 0.78) !important;
  border-color: rgba(18, 18, 18, 0.28) !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

/* v1.8.64 Link branch dock: wire release opens a focused image/video generation chooser. */
body[data-active-view="aiCanvas"] .workflow-link-menu {
  width: 388px !important;
  padding: 9px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 0, rgba(216, 255, 114, 0.15), transparent 34%),
    radial-gradient(circle at 82% 0, rgba(120, 199, 255, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(35, 36, 38, 0.98), rgba(14, 15, 16, 0.985)) !important;
  box-shadow:
    0 34px 92px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(255, 255, 255, 0.045) inset !important;
  backdrop-filter: blur(22px);
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head {
  min-height: 28px !important;
  padding: 0 2px;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head span {
  color: rgba(246, 247, 247, 0.42) !important;
  font-size: 10px !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head strong {
  color: rgba(246, 247, 247, 0.9) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-head {
  min-height: 64px;
  margin-top: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.032);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-preview {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  color: rgba(246, 247, 247, 0.72);
  background:
    radial-gradient(circle at 50% 26%, rgba(246, 247, 247, 0.14), transparent 42%),
    rgba(246, 247, 247, 0.048);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-preview img,
body[data-active-view="aiCanvas"] .workflow-link-branch-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.98) contrast(1.04);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-preview svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-head div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-head span,
body[data-active-view="aiCanvas"] .workflow-link-branch-head strong,
body[data-active-view="aiCanvas"] .workflow-link-branch-head em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-head div > span {
  color: rgba(246, 247, 247, 0.42);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-head strong {
  color: rgba(246, 247, 247, 0.92);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-head em {
  color: rgba(246, 247, 247, 0.5);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-panel {
  margin-top: 8px !important;
  padding: 8px !important;
  gap: 8px !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.026) !important;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-modes {
  gap: 8px !important;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card {
  min-height: 94px !important;
  padding: 9px !important;
  grid-template-rows: 20px 18px 15px 28px 13px !important;
  gap: 3px !important;
  border-radius: 14px !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.028) !important;
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card.is-image.is-recommended {
  border-color: rgba(216, 255, 114, 0.38) !important;
  box-shadow: 0 0 0 1px rgba(216, 255, 114, 0.08) inset, 0 18px 42px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card.is-video.is-recommended {
  border-color: rgba(120, 199, 255, 0.42) !important;
  box-shadow: 0 0 0 1px rgba(120, 199, 255, 0.08) inset, 0 18px 42px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-link-dock-card small:first-of-type {
  white-space: normal !important;
  line-height: 1.35;
}

body[data-active-view="aiCanvas"] .workflow-link-primary-actions {
  margin-top: 8px !important;
  grid-template-columns: minmax(0, 1fr) 106px !important;
  gap: 7px !important;
}

body[data-active-view="aiCanvas"] .workflow-link-primary-actions button {
  min-height: 36px !important;
  border-radius: 12px !important;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-branch-dock {
  margin-top: 8px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 88px !important;
  gap: 6px !important;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-branch-dock .workflow-link-choice-card {
  padding: 4px !important;
  border-radius: 13px !important;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-branch-dock .workflow-link-choice-card.is-result {
  opacity: 0.78;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-branch-dock button[data-link-create] {
  min-height: 52px !important;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-branch-dock .workflow-link-choice-card.is-result button[data-link-create] {
  min-height: 52px !important;
  grid-template-columns: 1fr !important;
  justify-items: center;
  text-align: center;
}

body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-branch-dock .workflow-link-choice-card.is-result .workflow-link-choice-preview,
body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-branch-dock .workflow-link-choice-card.is-result button[data-link-create] > span,
body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-branch-dock .workflow-link-choice-card.is-result button[data-link-create] em {
  display: none !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu {
  background:
    radial-gradient(circle at 18% 0, rgba(106, 142, 36, 0.13), transparent 34%),
    radial-gradient(circle at 82% 0, rgba(41, 120, 160, 0.11), transparent 34%),
    rgba(255, 255, 255, 0.96) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-head,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-panel,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-card {
  border-color: rgba(18, 18, 18, 0.08) !important;
  background: rgba(18, 18, 18, 0.035) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu-head strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-head strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-card strong {
  color: rgba(18, 18, 18, 0.82) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-head div > span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-head em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-card b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-card em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-dock-card small {
  color: rgba(18, 18, 18, 0.52) !important;
}

@media (max-width: 520px) {
  body[data-active-view="aiCanvas"] .workflow-link-menu {
    width: min(350px, calc(100vw - 18px)) !important;
  }

  body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-branch-dock {
    grid-template-columns: 1fr !important;
  }
}

/* v1.8.65 Result batch selection: result wall supports selecting, downloading, and copying result batches. */
body[data-active-view="aiCanvas"] .workflow-result-collector-card {
  grid-template-rows: 22px minmax(214px, 1fr) 76px 28px 96px 38px !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-card.has-selection .workflow-result-collector-stage {
  border-color: rgba(216, 255, 114, 0.4);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar {
  min-height: 0;
  padding: 4px 5px 4px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, auto);
  gap: 5px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 10px;
  color: rgba(246, 247, 247, 0.5);
  background: rgba(36, 37, 38, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar.has-selection {
  border-color: rgba(216, 255, 114, 0.16);
  background:
    linear-gradient(90deg, rgba(216, 255, 114, 0.07), transparent 46%),
    rgba(36, 37, 38, 0.96);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar > span {
  min-width: 0;
  overflow: hidden;
  font-size: 9.5px;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar.has-selection > span {
  color: rgba(216, 255, 114, 0.76);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar button {
  height: 21px;
  min-height: 21px;
  padding: 0 6px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 7px;
  color: rgba(246, 247, 247, 0.68);
  background: rgba(255, 255, 255, 0.032);
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar button:hover:not(:disabled) {
  color: #101214;
  border-color: rgba(216, 255, 114, 0.58);
  background: rgba(216, 255, 114, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar button:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar button svg {
  width: 11px;
  height: 11px;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar button b {
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb {
  display: block;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb.is-selected {
  border-color: rgba(216, 255, 114, 0.72) !important;
  box-shadow:
    0 0 0 2px rgba(216, 255, 114, 0.12) inset,
    0 0 24px rgba(216, 255, 114, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  color: inherit;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-select {
  position: absolute;
  z-index: 4;
  top: 4px;
  right: 4px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.8);
  background: rgba(12, 13, 14, 0.62);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-select:hover,
body[data-active-view="aiCanvas"] .workflow-result-thumb-select[aria-pressed="true"] {
  color: #101214;
  border-color: rgba(216, 255, 114, 0.62);
  background: rgba(216, 255, 114, 0.96);
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-select svg {
  width: 11px;
  height: 11px;
  stroke-width: 2;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-batchbar {
  color: rgba(18, 18, 18, 0.5);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-batchbar.has-selection {
  border-color: rgba(88, 126, 20, 0.22);
  background:
    linear-gradient(90deg, rgba(106, 142, 36, 0.09), transparent 46%),
    rgba(255, 255, 255, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-batchbar.has-selection > span {
  color: rgba(58, 94, 12, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-batchbar button {
  color: rgba(18, 18, 18, 0.64);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-thumb-select {
  color: rgba(18, 18, 18, 0.7);
  border-color: rgba(18, 18, 18, 0.12);
  background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar > span {
    grid-column: 1 / -1;
  }

  body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar button b {
    display: none;
  }
}

/* v1.8.66 LibTV node design reference: large media input node, floating upload, compact composer, centered plus ports. */
body[data-active-view="aiCanvas"] .workflow-libtv-reference-node {
  position: relative;
  isolation: isolate;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card.workflow-libtv-reference-node {
  grid-template-rows: 22px minmax(368px, 1fr) 132px !important;
  gap: 7px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card.workflow-libtv-reference-node,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-media-node-card.workflow-libtv-reference-node {
  grid-template-rows: 22px minmax(376px, 1fr) 118px !important;
  gap: 7px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card.workflow-libtv-reference-node {
  grid-template-rows: 22px minmax(372px, 1fr) 124px !important;
  gap: 7px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title {
  padding: 0 2px !important;
  color: rgba(246, 247, 247, 0.52) !important;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > span {
  max-width: calc(100% - 92px) !important;
  color: rgba(246, 247, 247, 0.66) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button,
body[data-active-view="aiCanvas"] .workflow-generator-title-upload {
  top: 31px !important;
  height: 27px !important;
  min-height: 27px !important;
  padding: 0 12px !important;
  border-radius: 11px !important;
  color: rgba(246, 247, 247, 0.84) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.025)),
    rgba(27, 28, 30, 0.96) !important;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.44),
    0 1px 0 rgba(255, 255, 255, 0.075) inset !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  border: 1.6px solid rgba(246, 247, 247, 0.55) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(246, 247, 247, 0.085), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.006)),
    #252525 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 28px 72px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-reference,
body[data-active-view="aiCanvas"] .workflow-media-node-card.has-media .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage.has-result {
  border-color: rgba(246, 247, 247, 0.38) !important;
  background: #171819 !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected .workflow-generator-stage,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected .workflow-generator-stage {
  border-color: rgba(246, 247, 247, 0.92) !important;
  box-shadow:
    0 0 0 3px rgba(246, 247, 247, 0.08),
    0 0 0 1px rgba(246, 247, 247, 0.1) inset,
    0 30px 88px rgba(0, 0, 0, 0.46) !important;
}

body[data-active-view="aiCanvas"] .workflow-media-empty strong,
body[data-active-view="aiCanvas"] .workflow-media-empty span,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview span {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-empty-icon,
body[data-active-view="aiCanvas"] .workflow-media-empty svg,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview svg {
  width: 64px !important;
  height: 64px !important;
  color: rgba(246, 247, 247, 0.19) !important;
  stroke-width: 1.08 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 22px !important;
  bottom: 58px !important;
  gap: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.006)),
    rgba(34, 35, 36, 0.995) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 22px 58px rgba(0, 0, 0, 0.3) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 29px minmax(48px, 1fr) 34px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 28px minmax(45px, 1fr) 33px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 28px minmax(48px, 1fr) 34px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-mode-strip,
body[data-active-view="aiCanvas"] .workflow-generator-flow,
body[data-active-view="aiCanvas"] .workflow-generator-run-row > div {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row {
  padding: 0 8px 7px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-run span {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-media-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-generator-tool-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row span {
  height: 25px !important;
  min-height: 25px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit,
body[data-active-view="aiCanvas"] .workflow-generator-run {
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  border-radius: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 218px !important;
  width: 22px !important;
  height: 22px !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > span {
  color: rgba(18, 18, 18, 0.58) !important;
  text-shadow: none;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.28) !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(18, 18, 18, 0.055), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.18)),
    #ebe8e1 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-compose {
  background: rgba(248, 246, 241, 0.96) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 18px 46px rgba(18, 18, 18, 0.12) !important;
}

@media (max-width: 780px) {
  body[data-active-view="aiCanvas"] .workflow-prompt-node-card.workflow-libtv-reference-node,
  body[data-active-view="aiCanvas"] .workflow-media-node-card.workflow-libtv-reference-node,
  body[data-active-view="aiCanvas"] .workflow-generator-node-card.workflow-libtv-reference-node {
    grid-template-rows: 22px minmax(286px, 1fr) 126px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
    top: 176px !important;
  }
}

/* v1.8.67 Result focus toast: latest completed output stays visible with preview, download, and video handoff actions. */
body[data-active-view="aiCanvas"] .workflow-canvas-result-toast {
  position: absolute;
  z-index: 42;
  top: 34px;
  left: 50%;
  width: min(376px, calc(100vw - 132px));
  min-height: 56px;
  padding: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 18px;
  color: rgba(246, 247, 247, 0.78);
  background:
    linear-gradient(90deg, rgba(216, 255, 114, 0.075), transparent 42%),
    rgba(18, 19, 21, 0.86);
  box-shadow: 0 22px 72px rgba(0, 0, 0, 0.38), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(18px);
}

body[data-active-view="aiCanvas"] .workflow-canvas-result-preview {
  min-width: 0;
  min-height: 44px;
  padding: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: 20px 18px;
  grid-template-areas:
    "thumb title"
    "thumb meta";
  gap: 1px 9px;
  align-items: center;
  overflow: hidden;
  border: 0;
  color: inherit;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-canvas-result-preview > span {
  grid-area: thumb;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

body[data-active-view="aiCanvas"] .workflow-canvas-result-preview img,
body[data-active-view="aiCanvas"] .workflow-canvas-result-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-canvas-result-toast strong,
body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-canvas-result-toast em,
body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-canvas-result-toast b {
  min-width: 0;
  display: block !important;
  overflow: hidden;
  font-style: normal;
  font-weight: 300 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-canvas-result-toast strong {
  grid-area: title;
  color: rgba(246, 247, 247, 0.92);
  font-size: 12px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-canvas-result-toast em {
  grid-area: meta;
  color: rgba(246, 247, 247, 0.46);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-result-toast > div {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-canvas-result-toast > div button {
  height: 30px;
  min-height: 30px;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 10px;
  color: rgba(246, 247, 247, 0.72);
  background: rgba(255, 255, 255, 0.04);
  font-family: inherit;
  font-size: 10px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-result-toast > div button:hover {
  color: #101214;
  border-color: rgba(216, 255, 114, 0.62);
  background: rgba(216, 255, 114, 0.95);
}

body[data-active-view="aiCanvas"] .workflow-canvas-result-toast svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.75;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-result-toast {
  color: rgba(18, 18, 18, 0.72);
  border-color: rgba(18, 18, 18, 0.08);
  background:
    linear-gradient(90deg, rgba(106, 142, 36, 0.09), transparent 42%),
    rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 54px rgba(18, 18, 18, 0.14), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-status .workflow-canvas-result-toast strong {
  color: rgba(18, 18, 18, 0.86);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-status .workflow-canvas-result-toast em {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-result-toast > div button {
  color: rgba(18, 18, 18, 0.68);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-canvas-result-toast {
    width: min(322px, calc(100vw - 86px));
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body[data-active-view="aiCanvas"] .workflow-canvas-result-toast > div button b {
    display: none !important;
  }
}

/* v1.8.68 Edge progress rail: running, completed, and failed links show directional progress and terminal feedback. */
body[data-active-view="aiCanvas"] .workflow-edge-progress-cap {
  fill: none;
  pointer-events: none;
  stroke: rgba(216, 255, 114, 0.78);
  stroke-width: 3.4;
  stroke-linecap: round;
  opacity: 0.86;
  filter:
    drop-shadow(0 0 8px rgba(216, 255, 114, 0.2))
    drop-shadow(0 0 18px rgba(216, 255, 114, 0.12));
  transition: stroke-dasharray 0.22s ease, opacity 0.18s ease;
}

body[data-active-view="aiCanvas"] .workflow-edge-progress-cap.is-stage-validating,
body[data-active-view="aiCanvas"] .workflow-edge-progress-cap.is-stage-submitting,
body[data-active-view="aiCanvas"] .workflow-edge-progress-cap.is-stage-queued {
  stroke: rgba(246, 247, 247, 0.64);
  filter: drop-shadow(0 0 12px rgba(246, 247, 247, 0.12));
}

body[data-active-view="aiCanvas"] .workflow-edge-progress-cap.is-stage-generating {
  stroke: rgba(216, 255, 114, 0.88);
  animation: workflowEdgeProgressPulse 1.15s ease-in-out infinite;
}

body[data-active-view="aiCanvas"] .workflow-edge-progress-cap.is-stage-compositing {
  stroke: rgba(118, 231, 197, 0.88);
  filter:
    drop-shadow(0 0 8px rgba(118, 231, 197, 0.2))
    drop-shadow(0 0 18px rgba(118, 231, 197, 0.12));
}

body[data-active-view="aiCanvas"] .workflow-edge-progress-cap.is-completed {
  stroke: rgba(116, 228, 165, 0.74);
  opacity: 0.62;
}

body[data-active-view="aiCanvas"] .workflow-edge-progress-cap.is-failed {
  stroke: rgba(255, 118, 118, 0.78);
  opacity: 0.72;
  filter: drop-shadow(0 0 12px rgba(255, 118, 118, 0.16));
}

body[data-active-view="aiCanvas"] .workflow-edge-terminals {
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-edge-terminals circle {
  fill: rgba(216, 255, 114, 0.92);
  stroke: rgba(10, 11, 12, 0.92);
  stroke-width: 1.4;
  filter:
    drop-shadow(0 0 8px rgba(216, 255, 114, 0.26))
    drop-shadow(0 0 16px rgba(216, 255, 114, 0.14));
}

body[data-active-view="aiCanvas"] .workflow-edge-terminals.is-stage-validating circle,
body[data-active-view="aiCanvas"] .workflow-edge-terminals.is-stage-submitting circle,
body[data-active-view="aiCanvas"] .workflow-edge-terminals.is-stage-queued circle {
  fill: rgba(246, 247, 247, 0.82);
  filter: drop-shadow(0 0 10px rgba(246, 247, 247, 0.13));
}

body[data-active-view="aiCanvas"] .workflow-edge-terminals.is-stage-compositing circle {
  fill: rgba(118, 231, 197, 0.9);
  filter: drop-shadow(0 0 12px rgba(118, 231, 197, 0.18));
}

body[data-active-view="aiCanvas"] .workflow-edge-terminals.is-completed circle {
  fill: rgba(116, 228, 165, 0.86);
  opacity: 0.72;
}

body[data-active-view="aiCanvas"] .workflow-edge-terminals.is-failed circle {
  fill: rgba(255, 118, 118, 0.9);
  filter: drop-shadow(0 0 12px rgba(255, 118, 118, 0.18));
}

body[data-active-view="aiCanvas"] .workflow-edge-terminals.is-running .is-to {
  animation: workflowEdgeTerminalPulse 1.05s ease-in-out infinite;
}

@keyframes workflowEdgeProgressPulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

@keyframes workflowEdgeTerminalPulse {
  0%, 100% {
    opacity: 0.72;
    transform: scale(1);
    transform-box: fill-box;
    transform-origin: center;
  }
  50% {
    opacity: 1;
    transform: scale(1.34);
  }
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-progress-cap {
  stroke: rgba(80, 118, 18, 0.72);
  filter: drop-shadow(0 0 10px rgba(80, 118, 18, 0.12));
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-progress-cap.is-stage-validating,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-progress-cap.is-stage-submitting,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-progress-cap.is-stage-queued {
  stroke: rgba(18, 18, 18, 0.46);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-progress-cap.is-stage-compositing {
  stroke: rgba(28, 132, 104, 0.74);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-progress-cap.is-failed {
  stroke: rgba(190, 58, 58, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-terminals circle {
  fill: rgba(80, 118, 18, 0.88);
  stroke: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 0 9px rgba(80, 118, 18, 0.13));
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-terminals.is-failed circle {
  fill: rgba(190, 58, 58, 0.84);
}

/* v1.8.70 Edge route chips: every canvas link shows whether it creates image, video, or collected output. */
body[data-active-view="aiCanvas"] .workflow-edge-route-chip {
  pointer-events: none;
  opacity: 1;
  filter:
    drop-shadow(0 12px 26px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 14px rgba(216, 255, 114, 0.08));
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip rect {
  fill: rgba(16, 17, 19, 0.96);
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip text {
  dominant-baseline: auto;
  fill: rgba(246, 247, 247, 0.78);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip .workflow-edge-route-main {
  fill: rgba(246, 247, 247, 0.96);
  font-size: 10.5px;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip .workflow-edge-route-meta {
  fill: rgba(246, 247, 247, 0.5);
  font-size: 8.5px;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip.is-image rect {
  fill:
    color-mix(in srgb, rgba(118, 231, 197, 0.24), rgba(16, 17, 19, 0.96) 68%);
  stroke: rgba(118, 231, 197, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip.is-video rect {
  fill:
    color-mix(in srgb, rgba(120, 199, 255, 0.28), rgba(16, 17, 19, 0.96) 66%);
  stroke: rgba(120, 199, 255, 0.27);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip.is-result rect {
  fill:
    color-mix(in srgb, rgba(216, 255, 114, 0.22), rgba(16, 17, 19, 0.96) 68%);
  stroke: rgba(216, 255, 114, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip.is-running {
  opacity: 1;
  filter:
    drop-shadow(0 12px 28px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 15px rgba(216, 255, 114, 0.13));
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip.is-running rect {
  stroke: rgba(216, 255, 114, 0.36);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip.is-running .workflow-edge-route-main {
  fill: rgba(246, 247, 247, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip.is-completed rect {
  stroke: rgba(116, 228, 165, 0.28);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip.is-completed .workflow-edge-route-main {
  fill: rgba(116, 228, 165, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip.is-failed rect {
  stroke: rgba(255, 118, 118, 0.32);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip.is-failed .workflow-edge-route-main {
  fill: rgba(255, 147, 147, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip + .workflow-edge-stage-badge {
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.3));
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html {
  position: absolute;
  min-width: 78px;
  height: 23px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.076), rgba(255, 255, 255, 0.022)),
    rgba(16, 17, 19, 0.94);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.075) inset;
  backdrop-filter: blur(14px);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html span {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.96);
  text-overflow: ellipsis;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html em {
  flex: 0 0 auto;
  color: rgba(246, 247, 247, 0.48);
  font-size: 8.5px;
  font-style: normal;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html.is-image {
  border-color: rgba(118, 231, 197, 0.24);
  background:
    linear-gradient(90deg, rgba(118, 231, 197, 0.13), transparent 56%),
    rgba(16, 17, 19, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html.is-video {
  border-color: rgba(120, 199, 255, 0.28);
  background:
    linear-gradient(90deg, rgba(120, 199, 255, 0.16), transparent 56%),
    rgba(16, 17, 19, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html.is-result {
  border-color: rgba(216, 255, 114, 0.26);
  background:
    linear-gradient(90deg, rgba(216, 255, 114, 0.14), transparent 58%),
    rgba(16, 17, 19, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html.is-running {
  border-color: rgba(216, 255, 114, 0.42);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.44),
    0 0 18px rgba(216, 255, 114, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-chip rect {
  fill: rgba(255, 255, 255, 0.88);
  stroke: rgba(18, 18, 18, 0.085);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-chip .workflow-edge-route-main {
  fill: rgba(18, 18, 18, 0.7);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-chip .workflow-edge-route-meta {
  fill: rgba(18, 18, 18, 0.42);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-chip.is-image rect {
  fill: rgba(229, 248, 241, 0.92);
  stroke: rgba(28, 132, 104, 0.16);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-chip.is-video rect {
  fill: rgba(229, 241, 252, 0.94);
  stroke: rgba(44, 105, 180, 0.16);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-chip.is-result rect {
  fill: rgba(245, 248, 224, 0.94);
  stroke: rgba(126, 151, 30, 0.16);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-html {
  color: rgba(18, 18, 18, 0.76);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 14px 34px rgba(18, 18, 18, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-html span {
  color: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-html em {
  color: rgba(18, 18, 18, 0.44);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-html.is-image {
  border-color: rgba(28, 132, 104, 0.18);
  background: rgba(229, 248, 241, 0.92);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-html.is-video {
  border-color: rgba(44, 105, 180, 0.18);
  background: rgba(229, 241, 252, 0.94);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-html.is-result {
  border-color: rgba(126, 151, 30, 0.18);
  background: rgba(245, 248, 224, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-chip.is-contract-warning rect {
  stroke: rgba(255, 186, 92, 0.4);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html.is-contract-warning {
  border-color: rgba(255, 186, 92, 0.34);
  background:
    linear-gradient(90deg, rgba(255, 186, 92, 0.15), transparent 58%),
    rgba(16, 17, 19, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html.is-contract-warning em {
  color: rgba(255, 213, 138, 0.78);
}

body[data-active-view="aiCanvas"] .workflow-edge.is-contract-warning {
  stroke: rgba(255, 186, 92, 0.74);
}

body[data-active-view="aiCanvas"] .workflow-edge-inspector-card {
  gap: 10px;
}

body[data-active-view="aiCanvas"] .workflow-edge-inspector-card > p {
  margin: 0;
  color: rgba(246, 247, 247, 0.54);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.45;
}

body[data-active-view="aiCanvas"] .workflow-edge-inspector-card.is-warning .workflow-section-head em {
  color: rgba(255, 213, 138, 0.86);
  border-color: rgba(255, 186, 92, 0.2);
  background: rgba(255, 186, 92, 0.075);
}

body[data-active-view="aiCanvas"] .workflow-edge-contract {
  min-width: 0;
  padding: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 0, rgba(216, 255, 114, 0.07), transparent 42%),
    rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-edge-contract span {
  min-width: 0;
  padding: 7px 6px;
  display: grid;
  gap: 2px;
  overflow: hidden;
  border-radius: 10px;
  color: rgba(246, 247, 247, 0.38);
  background: rgba(255, 255, 255, 0.036);
  font-size: 9px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-edge-contract b {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.76);
  font-size: 11px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-edge-contract svg {
  width: 15px;
  height: 15px;
  justify-self: center;
  color: rgba(216, 255, 114, 0.78);
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-edge-inspector-card.is-warning .workflow-edge-contract {
  border-color: rgba(255, 186, 92, 0.14);
  background: rgba(255, 186, 92, 0.045);
}

body[data-active-view="aiCanvas"] .workflow-edge-inspector-card.is-warning .workflow-edge-contract svg {
  color: rgba(255, 213, 138, 0.86);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-html.is-contract-warning {
  border-color: rgba(164, 104, 18, 0.2);
  background: rgba(250, 237, 205, 0.94);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-html.is-contract-warning em {
  color: rgba(126, 78, 12, 0.62);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-inspector-card > p,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-contract span {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-contract {
  border-color: rgba(18, 18, 18, 0.07);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-contract span {
  background: rgba(255, 255, 255, 0.54);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-contract b {
  color: rgba(18, 18, 18, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-contract svg {
  color: rgba(126, 151, 30, 0.74);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-inspector-card.is-warning .workflow-section-head em {
  color: rgba(126, 78, 12, 0.68);
  border-color: rgba(164, 104, 18, 0.14);
  background: rgba(164, 104, 18, 0.06);
}

/* v1.8.125 Edge contract trace: selected links expose source output, target input, compatibility, and runnable target feedback. */

/* v1.8.69 Node quick menu: LibTV-style node cards keep generation controls inside the node and collapse secondary actions into a compact hover dock. */
body[data-active-view="aiCanvas"] .workflow-node-quick-menu {
  top: -42px;
  min-height: 31px;
  padding: 0;
  gap: 6px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu-handle {
  height: 31px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.74);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(22, 23, 25, 0.9);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.07) inset;
  backdrop-filter: blur(16px);
  font-size: 10px;
  font-weight: 300;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu-handle svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.65;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu-handle b {
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu-actions {
  max-width: 34px;
  height: 31px;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  opacity: 0.92;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.018)),
    rgba(19, 20, 22, 0.9);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.065) inset;
  backdrop-filter: blur(16px);
  transition: max-width 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body[data-active-view="aiCanvas"] .workflow-node:hover .workflow-node-quick-menu-actions,
body[data-active-view="aiCanvas"] .workflow-node.is-selected .workflow-node-quick-menu-actions {
  max-width: 430px;
  opacity: 1;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button {
  min-width: 25px;
  width: 25px;
  height: 25px;
  padding: 0;
  gap: 0;
  border-radius: 10px;
  color: rgba(246, 247, 247, 0.72);
  background: rgba(255, 255, 255, 0.038);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button span {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button.is-primary {
  color: #111315;
  background: rgba(246, 247, 247, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button.is-primary:hover {
  color: #111315;
  background: rgba(216, 255, 114, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button.is-danger {
  color: rgba(255, 127, 127, 0.86);
  background: rgba(255, 127, 127, 0.075);
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button.is-danger:hover {
  color: #171111;
  background: rgba(255, 127, 127, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-node-head,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-node-progress {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-libtv-reference-node {
  --node-panel: rgba(31, 32, 34, 0.985);
  --node-panel-soft: rgba(255, 255, 255, 0.032);
  --node-line: rgba(246, 247, 247, 0.5);
  --node-copy: rgba(246, 247, 247, 0.68);
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card.workflow-libtv-reference-node,
body[data-active-view="aiCanvas"] .workflow-media-node-card.workflow-libtv-reference-node,
body[data-active-view="aiCanvas"] .workflow-generator-node-card.workflow-libtv-reference-node {
  width: 100%;
  height: 100%;
  gap: 7px !important;
  cursor: grab;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card.workflow-libtv-reference-node {
  grid-template-rows: 21px minmax(384px, 1fr) 122px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card.workflow-libtv-reference-node,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-media-node-card.workflow-libtv-reference-node {
  grid-template-rows: 21px minmax(390px, 1fr) 116px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card.workflow-libtv-reference-node {
  grid-template-rows: 21px minmax(386px, 1fr) 118px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title {
  height: 21px !important;
  min-height: 21px !important;
  padding: 0 2px !important;
  line-height: 21px !important;
  font-size: 11px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > span {
  max-width: calc(100% - 90px) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button,
body[data-active-view="aiCanvas"] .workflow-generator-title-upload {
  top: 40px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  border: 1.55px solid var(--node-line) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(246, 247, 247, 0.09), transparent 31%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    #242525 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone::after,
body[data-active-view="aiCanvas"] .workflow-media-node-stage::after,
body[data-active-view="aiCanvas"] .workflow-generator-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.32), transparent 46%);
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone.has-reference,
body[data-active-view="aiCanvas"] .workflow-media-node-card.has-media .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage.has-result {
  border-color: rgba(246, 247, 247, 0.36) !important;
  background: #151617 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-mode-row {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  padding: 9px 9px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.035) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.006)),
    var(--node-panel) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 28px minmax(46px, 1fr) 32px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 28px minmax(42px, 1fr) 31px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 27px minmax(44px, 1fr) 32px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row,
body[data-active-view="aiCanvas"] .workflow-media-tool-row,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row {
  gap: 5px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button,
body[data-active-view="aiCanvas"] .workflow-media-tool-row button,
body[data-active-view="aiCanvas"] .workflow-generator-tool-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row span {
  height: 25px !important;
  min-height: 25px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  color: rgba(246, 247, 247, 0.64) !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  font-size: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row,
body[data-active-view="aiCanvas"] .workflow-media-control-row {
  gap: 5px !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row::-webkit-scrollbar,
body[data-active-view="aiCanvas"] .workflow-media-control-row::-webkit-scrollbar {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card textarea,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea,
body[data-active-view="aiCanvas"] .workflow-generator-prompt {
  color: rgba(246, 247, 247, 0.56) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 1.45 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit,
body[data-active-view="aiCanvas"] .workflow-generator-run {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin-left: 2px !important;
  border-radius: 10px !important;
  color: #111315 !important;
  background: rgba(246, 247, 247, 0.94) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit:hover,
body[data-active-view="aiCanvas"] .workflow-generator-run:hover {
  background: rgba(216, 255, 114, 0.96) !important;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row button[data-node-direct-run],
body[data-active-view="aiCanvas"] .workflow-media-control-row button.is-primary {
  color: #111315 !important;
  background: rgba(246, 247, 247, 0.92) !important;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row button[data-node-direct-run]:hover,
body[data-active-view="aiCanvas"] .workflow-media-control-row button.is-primary:hover {
  background: rgba(216, 255, 114, 0.96) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 226px !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid rgba(246, 247, 247, 0.42) !important;
  background: rgba(23, 24, 26, 0.92) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port:hover,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port:hover {
  color: #111315 !important;
  border-color: rgba(216, 255, 114, 0.78) !important;
  background: rgba(216, 255, 114, 0.94) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-menu-handle,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-menu-actions {
  color: rgba(18, 18, 18, 0.64);
  border-color: rgba(18, 18, 18, 0.075);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 243, 236, 0.86)),
    rgba(255, 255, 255, 0.9);
  box-shadow:
    0 18px 46px rgba(18, 18, 18, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-menu button {
  color: rgba(18, 18, 18, 0.62);
  border-color: rgba(18, 18, 18, 0.07);
  background: rgba(18, 18, 18, 0.04);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-menu button.is-primary {
  color: rgba(246, 247, 247, 0.95);
  background: rgba(18, 18, 18, 0.88);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-libtv-reference-node {
  --node-panel: rgba(248, 246, 241, 0.965);
  --node-panel-soft: rgba(18, 18, 18, 0.04);
  --node-line: rgba(18, 18, 18, 0.25);
  --node-copy: rgba(18, 18, 18, 0.62);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  background:
    radial-gradient(circle at 50% 35%, rgba(18, 18, 18, 0.055), transparent 31%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16)),
    #ebe8e1 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-card textarea,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-prompt-textarea,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-prompt {
  color: rgba(18, 18, 18, 0.58) !important;
}

@media (max-width: 780px) {
  body[data-active-view="aiCanvas"] .workflow-node-quick-menu {
    top: -36px;
  }

  body[data-active-view="aiCanvas"] .workflow-node-quick-menu-handle {
    display: none;
  }

  body[data-active-view="aiCanvas"] .workflow-node-quick-menu-actions {
    max-width: 250px;
  }

  body[data-active-view="aiCanvas"] .workflow-prompt-node-card.workflow-libtv-reference-node,
  body[data-active-view="aiCanvas"] .workflow-media-node-card.workflow-libtv-reference-node,
  body[data-active-view="aiCanvas"] .workflow-generator-node-card.workflow-libtv-reference-node {
    grid-template-rows: 21px minmax(292px, 1fr) 124px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
    top: 184px !important;
  }
}

/* v1.8.71 Link compact mode picker: wire release becomes a small Kling/LibTV-style image/video selector. */
body[data-active-view="aiCanvas"] .workflow-link-menu {
  width: 318px !important;
  padding: 7px !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 12% 0, rgba(216, 255, 114, 0.14), transparent 34%),
    radial-gradient(circle at 86% 0, rgba(120, 199, 255, 0.13), transparent 36%),
    linear-gradient(180deg, rgba(32, 33, 35, 0.98), rgba(13, 14, 15, 0.985)) !important;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head {
  min-height: 25px !important;
}

body[data-active-view="aiCanvas"] .workflow-link-menu-head strong {
  font-size: 12px !important;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-panel {
  margin-top: 5px;
  display: grid;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-source {
  min-width: 0;
  min-height: 40px;
  padding: 5px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px auto;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  color: rgba(246, 247, 247, 0.7);
  background: rgba(255, 255, 255, 0.032);
}

body[data-active-view="aiCanvas"] .workflow-link-compact-source .workflow-link-source-media {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-source div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-source span,
body[data-active-view="aiCanvas"] .workflow-link-compact-source strong,
body[data-active-view="aiCanvas"] .workflow-link-compact-source em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-source span {
  color: rgba(246, 247, 247, 0.42);
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-source strong {
  color: rgba(246, 247, 247, 0.82);
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-source > svg {
  width: 13px;
  height: 13px;
  color: rgba(216, 255, 114, 0.66);
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-source > em {
  padding: 3px 6px;
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.52);
  background: rgba(255, 255, 255, 0.045);
  font-size: 9px;
  font-style: normal;
}

body[data-active-view="aiCanvas"] .workflow-link-mode-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 54px;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button {
  min-width: 0;
  min-height: 64px;
  padding: 8px 7px;
  display: grid;
  grid-template-rows: 18px 16px 13px;
  gap: 3px;
  align-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  color: rgba(246, 247, 247, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
    rgba(255, 255, 255, 0.028);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button:hover {
  transform: translateY(-1px);
  border-color: rgba(246, 247, 247, 0.19);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.042);
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button.is-recommended {
  border-color: rgba(216, 255, 114, 0.36);
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.08) inset,
    0 16px 34px rgba(0, 0, 0, 0.22);
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button.is-video.is-recommended {
  border-color: rgba(120, 199, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(120, 199, 255, 0.08) inset,
    0 16px 34px rgba(0, 0, 0, 0.22);
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button span,
body[data-active-view="aiCanvas"] .workflow-link-mode-button strong,
body[data-active-view="aiCanvas"] .workflow-link-mode-button em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: rgba(246, 247, 247, 0.9);
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button.is-image svg {
  color: rgba(216, 255, 114, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button.is-video svg {
  color: rgba(120, 199, 255, 0.96);
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button strong {
  color: rgba(246, 247, 247, 0.58);
  font-size: 9.5px;
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button em {
  color: rgba(246, 247, 247, 0.42);
  font-size: 9px;
  font-style: normal;
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button.is-result {
  padding: 7px 5px;
  grid-template-rows: 18px 14px;
  justify-items: center;
  text-align: center;
  opacity: 0.78;
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button.is-result strong {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-link-mode-button.is-result span {
  gap: 3px;
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-actions {
  min-height: 27px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-actions button {
  height: 27px;
  min-height: 27px;
  padding: 0 9px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.66);
  background: rgba(255, 255, 255, 0.036);
  font-family: inherit;
  font-size: 10px;
  font-weight: 300;
  white-space: nowrap;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-actions button:hover {
  color: rgba(246, 247, 247, 0.9);
  background: rgba(246, 247, 247, 0.072);
}

body[data-active-view="aiCanvas"] .workflow-link-compact-actions svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-actions > span {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.38);
  font-size: 9px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-actions kbd {
  padding: 1px 4px;
  border-radius: 5px;
  color: rgba(246, 247, 247, 0.62);
  background: rgba(246, 247, 247, 0.07);
  font-family: inherit;
  font-size: 8px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-head,
body[data-active-view="aiCanvas"] .workflow-link-dock-panel,
body[data-active-view="aiCanvas"] .workflow-link-primary-actions,
body[data-active-view="aiCanvas"] .workflow-link-menu > small,
body[data-active-view="aiCanvas"] .workflow-link-choice-list.is-branch-dock,
body[data-active-view="aiCanvas"] .workflow-link-menu-foot {
  display: none !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-compact-source,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-mode-button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-compact-actions button {
  color: rgba(18, 18, 18, 0.66);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-compact-source strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-mode-button span {
  color: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-compact-source span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-compact-source em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-mode-button strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-mode-button em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-compact-actions > span {
  color: rgba(18, 18, 18, 0.46);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-mode-button.is-recommended {
  border-color: rgba(126, 151, 30, 0.22);
  box-shadow: 0 0 0 1px rgba(126, 151, 30, 0.06) inset, 0 16px 34px rgba(18, 18, 18, 0.08);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-mode-button.is-video.is-recommended {
  border-color: rgba(44, 105, 180, 0.22);
}

@media (max-width: 520px) {
  body[data-active-view="aiCanvas"] .workflow-link-menu {
    width: min(314px, calc(100vw - 18px)) !important;
  }

  body[data-active-view="aiCanvas"] .workflow-link-mode-picker {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body[data-active-view="aiCanvas"] .workflow-link-mode-button.is-result {
    grid-column: 1 / -1;
    min-height: 38px;
  }
}

/* v1.8.86 Link branch picker: wire release opens a focused image/video/result choice, matching the compact LibTV canvas pattern. */
body[data-active-view="aiCanvas"] .workflow-link-menu {
  width: 306px !important;
  padding: 6px !important;
  border-radius: 16px !important;
}

body[data-active-view="aiCanvas"] .workflow-link-compact-panel {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-picker {
  margin-top: 5px;
  display: grid;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-source {
  min-width: 0;
  min-height: 38px;
  padding: 4px 5px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.032);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-source .workflow-link-source-media {
  width: 28px;
  height: 28px;
  border-radius: 10px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-source div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-source span,
body[data-active-view="aiCanvas"] .workflow-link-branch-source strong,
body[data-active-view="aiCanvas"] .workflow-link-branch-source em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-source span {
  color: rgba(246, 247, 247, 0.42);
  font-size: 9px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-source strong {
  color: rgba(246, 247, 247, 0.84);
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-source em {
  padding: 3px 6px;
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.5);
  background: rgba(255, 255, 255, 0.048);
  font-size: 9px;
  font-style: normal;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 50px;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-action {
  min-width: 0;
  min-height: 58px;
  padding: 7px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  color: rgba(246, 247, 247, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
    rgba(255, 255, 255, 0.034);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-action:hover {
  transform: translateY(-1px);
  border-color: rgba(246, 247, 247, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.052);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-action.is-recommended {
  border-color: rgba(216, 255, 114, 0.36);
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.07) inset,
    0 14px 30px rgba(0, 0, 0, 0.22);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-action.is-video.is-recommended {
  border-color: rgba(120, 199, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(120, 199, 255, 0.08) inset,
    0 14px 30px rgba(0, 0, 0, 0.22);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.75;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-action.is-image .workflow-link-branch-icon svg {
  color: rgba(216, 255, 114, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-action.is-video .workflow-link-branch-icon svg {
  color: rgba(120, 199, 255, 0.96);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-action.is-result .workflow-link-branch-icon svg {
  color: rgba(246, 247, 247, 0.72);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-copy strong,
body[data-active-view="aiCanvas"] .workflow-link-branch-copy small,
body[data-active-view="aiCanvas"] .workflow-link-branch-action em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-copy strong {
  color: rgba(246, 247, 247, 0.9);
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-copy small {
  color: rgba(246, 247, 247, 0.42);
  font-size: 8.5px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-action em {
  padding: 2px 5px;
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.52);
  background: rgba(255, 255, 255, 0.055);
  font-size: 8px;
  font-style: normal;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-action.is-result {
  padding: 6px 5px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  opacity: 0.82;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-action.is-result .workflow-link-branch-icon {
  width: 22px;
  height: 22px;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-action.is-result .workflow-link-branch-copy {
  justify-items: center;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-action.is-result .workflow-link-branch-copy small {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-create {
  min-height: 26px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-create button {
  height: 26px;
  min-height: 26px;
  padding: 0 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.66);
  background: rgba(255, 255, 255, 0.036);
  font-family: inherit;
  font-size: 10px;
  font-weight: 300;
  white-space: nowrap;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-create button:hover {
  color: rgba(246, 247, 247, 0.9);
  background: rgba(246, 247, 247, 0.072);
}

body[data-active-view="aiCanvas"] .workflow-link-branch-create svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-create > span {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.36);
  font-size: 8.5px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-link-branch-create kbd {
  padding: 1px 4px;
  border-radius: 5px;
  color: rgba(246, 247, 247, 0.62);
  background: rgba(246, 247, 247, 0.07);
  font-family: inherit;
  font-size: 8px;
  font-weight: 300;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-source,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-action,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-create button {
  color: rgba(18, 18, 18, 0.66);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-source strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-copy strong {
  color: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-source span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-source em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-copy small,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-action em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-create > span {
  color: rgba(18, 18, 18, 0.46);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-action.is-recommended {
  border-color: rgba(126, 151, 30, 0.22);
  box-shadow: 0 0 0 1px rgba(126, 151, 30, 0.06) inset, 0 14px 30px rgba(18, 18, 18, 0.08);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-branch-action.is-video.is-recommended {
  border-color: rgba(44, 105, 180, 0.22);
}

@media (max-width: 520px) {
  body[data-active-view="aiCanvas"] .workflow-link-menu {
    width: min(306px, calc(100vw - 18px)) !important;
  }

  body[data-active-view="aiCanvas"] .workflow-link-branch-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body[data-active-view="aiCanvas"] .workflow-link-branch-action.is-result {
    grid-column: 1 / -1;
    min-height: 38px;
  }
}

/* v1.8.72 LibTV node reference v2: nodes read as a media stage plus inline prompt console, with compact canvas chrome. */
body[data-active-view="aiCanvas"] .workflow-canvas-toolbar {
  top: 50% !important;
  bottom: auto !important;
  left: 11px !important;
  width: 40px !important;
  padding: 5px !important;
  gap: 5px !important;
  transform: translateY(-50%) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.018)),
    rgba(20, 21, 23, 0.88) !important;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.065) inset !important;
  backdrop-filter: blur(18px) !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button span {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button:first-child {
  color: #111315 !important;
  background: rgba(246, 247, 247, 0.94) !important;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls {
  left: 12px !important;
  bottom: 12px !important;
  min-height: 38px !important;
  padding: 5px !important;
  gap: 4px !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.018)),
    rgba(20, 21, 23, 0.9) !important;
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.064) inset !important;
  backdrop-filter: blur(18px) !important;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-icon-button {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-zoom {
  min-width: 43px !important;
  padding: 0 5px !important;
  color: rgba(246, 247, 247, 0.58) !important;
  font-size: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar {
  width: 224px !important;
  border-radius: 18px !important;
}

body[data-active-view="aiCanvas"] .workflow-inspector {
  width: min(276px, calc(100vw - 92px)) !important;
  border-radius: 18px !important;
}

body[data-active-view="aiCanvas"] .workflow-taskbar {
  max-height: 152px !important;
  border-radius: 18px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt,
body[data-active-view="aiCanvas"] .workflow-node-upload,
body[data-active-view="aiCanvas"] .workflow-node-image,
body[data-active-view="aiCanvas"] .workflow-node-video,
body[data-active-view="aiCanvas"] .workflow-node-imageModel,
body[data-active-view="aiCanvas"] .workflow-node-videoModel {
  padding: 0 !important;
  overflow: visible !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected {
  border-color: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card.workflow-libtv-reference-node,
body[data-active-view="aiCanvas"] .workflow-media-node-card.workflow-libtv-reference-node,
body[data-active-view="aiCanvas"] .workflow-generator-node-card.workflow-libtv-reference-node {
  gap: 6px !important;
  filter: drop-shadow(0 28px 72px rgba(0, 0, 0, 0.36));
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card.workflow-libtv-reference-node {
  grid-template-rows: 20px minmax(364px, 1fr) 128px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card.workflow-libtv-reference-node,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-media-node-card.workflow-libtv-reference-node {
  grid-template-rows: 20px minmax(376px, 1fr) 112px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card.workflow-libtv-reference-node {
  grid-template-rows: 20px minmax(372px, 1fr) 118px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title {
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 1px !important;
  line-height: 20px !important;
  color: rgba(246, 247, 247, 0.52) !important;
  font-size: 11px !important;
  text-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > span {
  gap: 5px !important;
  color: rgba(246, 247, 247, 0.62) !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title svg,
body[data-active-view="aiCanvas"] .workflow-media-node-title svg,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title svg {
  width: 12px !important;
  height: 12px !important;
  stroke-width: 1.7 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title > button,
body[data-active-view="aiCanvas"] .workflow-media-node-title > button,
body[data-active-view="aiCanvas"] .workflow-generator-title-upload {
  top: 34px !important;
  left: 50% !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  color: rgba(246, 247, 247, 0.78) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(24, 25, 27, 0.92) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.44),
    0 1px 0 rgba(255, 255, 255, 0.075) inset !important;
  transform: translateX(-50%) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  border: 1.45px solid rgba(246, 247, 247, 0.54) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(246, 247, 247, 0.086), transparent 31%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.006)),
    #242424 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.018) inset,
    0 26px 68px rgba(0, 0, 0, 0.34) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt.is-selected .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-node-upload.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-image.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-video.is-selected .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-node-imageModel.is-selected .workflow-generator-stage,
body[data-active-view="aiCanvas"] .workflow-node-videoModel.is-selected .workflow-generator-stage {
  border-color: rgba(246, 247, 247, 0.86) !important;
  box-shadow:
    0 0 0 2px rgba(246, 247, 247, 0.06),
    0 0 0 1px rgba(246, 247, 247, 0.06) inset,
    0 28px 76px rgba(0, 0, 0, 0.44) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-empty-icon,
body[data-active-view="aiCanvas"] .workflow-media-empty svg,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview svg {
  width: 58px !important;
  height: 58px !important;
  color: rgba(246, 247, 247, 0.18) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try,
body[data-active-view="aiCanvas"] .workflow-media-try {
  left: 22px !important;
  bottom: 50px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try span,
body[data-active-view="aiCanvas"] .workflow-media-try span {
  color: rgba(246, 247, 247, 0.34) !important;
  font-size: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-try button,
body[data-active-view="aiCanvas"] .workflow-media-try button {
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  color: rgba(246, 247, 247, 0.68) !important;
  background: rgba(255, 255, 255, 0.026) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.034) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006)),
    rgba(31, 32, 34, 0.99) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.042) inset,
    0 20px 54px rgba(0, 0, 0, 0.3) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose {
  grid-template-rows: 27px minmax(49px, 1fr) 32px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 27px minmax(40px, 1fr) 31px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 27px minmax(44px, 1fr) 32px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-media-tool-row button:not(.is-expand),
body[data-active-view="aiCanvas"] .workflow-generator-tool-row button {
  min-width: 44px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card textarea,
body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea,
body[data-active-view="aiCanvas"] .workflow-generator-prompt {
  padding: 2px 4px !important;
  color: rgba(246, 247, 247, 0.5) !important;
  background: transparent !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row,
body[data-active-view="aiCanvas"] .workflow-media-control-row {
  gap: 4px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-prompt-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row select,
body[data-active-view="aiCanvas"] .workflow-media-control-row span,
body[data-active-view="aiCanvas"] .workflow-run-readiness-pill {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 7px !important;
  border-radius: 8px !important;
  font-size: 9.5px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit,
body[data-active-view="aiCanvas"] .workflow-generator-run {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 214px !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid rgba(246, 247, 247, 0.48) !important;
  border-radius: 999px !important;
  color: rgba(246, 247, 247, 0.76) !important;
  background: rgba(22, 23, 25, 0.9) !important;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port::before {
  content: "+" !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu {
  top: -35px !important;
  left: 50% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  transition: opacity 0.16s ease, transform 0.16s ease !important;
}

body[data-active-view="aiCanvas"] .workflow-node:hover .workflow-node-quick-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(-2px) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu-handle {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu-actions {
  max-width: 34px !important;
  height: 29px !important;
  border-radius: 14px !important;
}

body[data-active-view="aiCanvas"] .workflow-node:hover .workflow-node-quick-menu-actions {
  max-width: 330px !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-toolbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-bottom-controls {
  color: rgba(18, 18, 18, 0.68) !important;
  border-color: rgba(18, 18, 18, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 244, 238, 0.82)),
    rgba(255, 255, 255, 0.88) !important;
  box-shadow:
    0 18px 50px rgba(18, 18, 18, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.74) inset !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.27) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(18, 18, 18, 0.052), transparent 31%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.16)),
    #ebe8e1 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.46) inset,
    0 24px 62px rgba(18, 18, 18, 0.12) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-compose {
  border-color: rgba(18, 18, 18, 0.06) !important;
  background: rgba(248, 246, 241, 0.97) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 18px 46px rgba(18, 18, 18, 0.11) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > span {
  color: rgba(18, 18, 18, 0.58) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  color: rgba(18, 18, 18, 0.62) !important;
  border-color: rgba(18, 18, 18, 0.2) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 12px 32px rgba(18, 18, 18, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.78) inset !important;
}

@media (max-width: 860px) {
  body[data-active-view="aiCanvas"] .workflow-canvas-toolbar {
    left: 8px !important;
    width: 38px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-sidebar {
    width: min(212px, calc(100vw - 76px)) !important;
  }

  body[data-active-view="aiCanvas"] .workflow-inspector {
    width: min(248px, calc(100vw - 76px)) !important;
  }

  body[data-active-view="aiCanvas"] .workflow-bottom-controls {
    left: 8px !important;
    bottom: 8px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-prompt-node-card.workflow-libtv-reference-node,
  body[data-active-view="aiCanvas"] .workflow-media-node-card.workflow-libtv-reference-node,
  body[data-active-view="aiCanvas"] .workflow-generator-node-card.workflow-libtv-reference-node {
    grid-template-rows: 20px minmax(292px, 1fr) 118px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
  body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
    top: 176px !important;
  }
}

/* v1.8.73 Quick compose: double-click opens a node-like image/video generator instead of a form-heavy popover. */
body[data-active-view="aiCanvas"] .workflow-quick-create {
  width: min(520px, calc(100vw - 104px)) !important;
  padding: 8px !important;
  gap: 7px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 88% -8%, rgba(216, 255, 114, 0.12), transparent 32%),
    radial-gradient(circle at 12% 0, rgba(120, 199, 255, 0.11), transparent 31%),
    linear-gradient(180deg, rgba(30, 31, 34, 0.972), rgba(13, 14, 16, 0.978)) !important;
  box-shadow:
    0 32px 94px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.042) inset !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head {
  min-height: 26px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  gap: 8px !important;
  align-items: center !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head div {
  min-width: 0 !important;
  gap: 1px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head span,
body[data-active-view="aiCanvas"] .workflow-quick-create-head em {
  color: rgba(246, 247, 247, 0.42) !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 300 !important;
  white-space: nowrap !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head strong {
  display: inline-flex !important;
  gap: 5px !important;
  align-items: center !important;
  color: rgba(246, 247, 247, 0.9) !important;
  font-size: 13px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head strong b {
  min-width: 16px !important;
  height: 16px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #111315 !important;
  background: rgba(246, 247, 247, 0.86) !important;
  font-size: 9px !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-create-head svg {
  width: 13px !important;
  height: 13px !important;
  stroke-width: 1.75 !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card {
  min-height: 50px !important;
  padding: 7px !important;
  grid-template-columns: 25px minmax(0, 1fr) !important;
  grid-template-rows: 18px 15px !important;
  column-gap: 7px !important;
  border-radius: 12px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card svg {
  width: 13px !important;
  height: 13px !important;
  padding: 6px !important;
  border-radius: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card strong {
  font-size: 11px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-launch-card span {
  font-size: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-compose-shell {
  min-height: 184px;
  padding: 8px;
  display: grid;
  grid-template-rows: 42px 27px minmax(62px, 1fr) 36px;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.042);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008)),
    rgba(28, 29, 31, 0.98);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.045) inset,
    0 18px 52px rgba(0, 0, 0, 0.28);
}

body[data-active-view="aiCanvas"] .workflow-quick-reference-stage {
  min-width: 0;
  padding: 0 6px 0 10px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(246, 247, 247, 0.12);
  border-radius: 12px;
  color: rgba(246, 247, 247, 0.58);
  background:
    radial-gradient(circle at 15% 50%, rgba(246, 247, 247, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.026);
}

body[data-active-view="aiCanvas"] .workflow-quick-reference-stage > svg {
  width: 15px;
  height: 15px;
  color: rgba(246, 247, 247, 0.58);
  stroke-width: 1.75;
}

body[data-active-view="aiCanvas"] .workflow-quick-reference-stage span {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-quick-reference-stage button {
  height: 27px;
  min-height: 27px;
  padding: 0 10px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 10px;
  color: rgba(246, 247, 247, 0.72);
  background: rgba(255, 255, 255, 0.04);
  font-family: inherit;
  font-size: 10px;
  font-weight: 300;
}

body[data-active-view="aiCanvas"] .workflow-quick-suggestions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-suggestions button {
  height: 27px !important;
  min-height: 27px !important;
  padding: 0 9px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-prompt-box {
  min-height: 62px !important;
  padding: 7px 9px !important;
  gap: 3px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-prompt-box > span {
  overflow: hidden;
  color: rgba(246, 247, 247, 0.34);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-quick-create .workflow-quick-prompt-box textarea {
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(246, 247, 247, 0.68) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-console-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-quick-param-row {
  min-width: 0;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-param-row label {
  height: 34px !important;
  min-height: 34px !important;
  padding: 4px 7px !important;
  border-radius: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-param-row label > span {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-param-row select {
  height: 24px !important;
  color: rgba(246, 247, 247, 0.7) !important;
  font-size: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-main-run {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(246, 247, 247, 0.48);
  border-radius: 11px;
  color: #111315;
  background: rgba(246, 247, 247, 0.94);
  font-family: inherit;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-quick-main-run:hover {
  border-color: rgba(216, 255, 114, 0.7);
  background: rgba(216, 255, 114, 0.96);
}

body[data-active-view="aiCanvas"] .workflow-quick-main-run span {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-main-run svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}

body[data-active-view="aiCanvas"] .workflow-quick-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body[data-active-view="aiCanvas"] .workflow-quick-actions button {
  min-height: 29px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-compose-shell {
  border-color: rgba(18, 18, 18, 0.055);
  background: rgba(248, 246, 241, 0.97);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.74) inset,
    0 18px 46px rgba(18, 18, 18, 0.12);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-reference-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-prompt-box {
  color: rgba(18, 18, 18, 0.58);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.035) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-create .workflow-quick-prompt-box textarea {
  color: rgba(18, 18, 18, 0.68) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-param-row select {
  color: rgba(18, 18, 18, 0.68) !important;
}

@media (max-width: 620px) {
  body[data-active-view="aiCanvas"] .workflow-quick-create {
    width: min(356px, calc(100vw - 42px)) !important;
  }

  body[data-active-view="aiCanvas"] .workflow-quick-launch-row {
    grid-template-columns: 1fr !important;
  }

  body[data-active-view="aiCanvas"] .workflow-quick-launch-card {
    min-height: 42px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-quick-compose-shell {
    grid-template-rows: 42px auto minmax(64px, 1fr) auto;
  }

  body[data-active-view="aiCanvas"] .workflow-quick-suggestions,
  body[data-active-view="aiCanvas"] .workflow-quick-actions {
    grid-template-columns: 1fr !important;
  }
}

/* v1.8.74 Result studio: generated results behave like a compact asset pool with direct preview, download, and image-to-video actions. */
body[data-active-view="aiCanvas"] .workflow-result-collector-card {
  grid-template-rows: 20px minmax(266px, 1fr) 62px 33px 118px 32px !important;
  gap: 6px !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-head {
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 2px !important;
  color: rgba(246, 247, 247, 0.54) !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-head span {
  font-size: 11px !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-head em {
  color: rgba(246, 247, 247, 0.38) !important;
  font-size: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-stage {
  border: 1.45px solid rgba(246, 247, 247, 0.46) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(246, 247, 247, 0.072), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.008)),
    #1d1f20 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.024) inset,
    0 24px 70px rgba(0, 0, 0, 0.32) !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-stage::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent 42%, rgba(0, 0, 0, 0.5)),
    radial-gradient(circle at 50% 104%, rgba(0, 0, 0, 0.5), transparent 46%) !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-quick-actions {
  right: 10px !important;
  bottom: 10px !important;
  gap: 4px !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-quick-actions button,
body[data-active-view="aiCanvas"] .workflow-result-collector-actions button,
body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar button {
  height: 25px !important;
  min-height: 25px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-quick-actions button:last-child {
  color: #101315 !important;
  border-color: rgba(216, 255, 114, 0.42) !important;
  background: rgba(216, 255, 114, 0.88) !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-meta {
  padding: 6px 8px !important;
  grid-template-rows: 16px minmax(18px, 1fr) 17px !important;
  border-radius: 10px !important;
  background: rgba(31, 32, 34, 0.99) !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-meta p {
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  color: rgba(246, 247, 247, 0.48) !important;
  font-size: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-stats span {
  height: 17px !important;
  border-radius: 6px !important;
  font-size: 8.5px !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar {
  min-height: 33px !important;
  padding: 4px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) repeat(4, auto) !important;
  gap: 4px !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.045) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.008)),
    rgba(31, 32, 34, 0.98) !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar > span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(246, 247, 247, 0.42) !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar.has-selection {
  border-color: rgba(216, 255, 114, 0.22) !important;
  background:
    linear-gradient(90deg, rgba(216, 255, 114, 0.09), transparent 46%),
    rgba(31, 32, 34, 0.98) !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar button:disabled {
  opacity: 0.38 !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-wall {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 49px) !important;
  gap: 5px !important;
  padding: 5px !important;
  border-radius: 11px !important;
  background:
    radial-gradient(circle at 16% 0, rgba(216, 255, 114, 0.06), transparent 30%),
    rgba(28, 29, 31, 0.99) !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb {
  border-radius: 9px !important;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(246, 247, 247, 0.28) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb.is-selected {
  border-color: rgba(216, 255, 114, 0.6) !important;
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.18) inset,
    0 12px 30px rgba(0, 0, 0, 0.3) !important;
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-actions {
  position: absolute;
  z-index: 5;
  left: 4px;
  right: 4px;
  bottom: 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb:hover .workflow-result-thumb-actions,
body[data-active-view="aiCanvas"] .workflow-result-collector-thumb.is-selected .workflow-result-thumb-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-actions button {
  width: 100%;
  height: 20px;
  min-height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  color: rgba(246, 247, 247, 0.84);
  background: rgba(12, 13, 15, 0.66);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-actions button:hover {
  color: #101315;
  border-color: rgba(246, 247, 247, 0.52);
  background: rgba(246, 247, 247, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-actions button.is-video {
  color: #101315;
  border-color: rgba(216, 255, 114, 0.34);
  background: rgba(216, 255, 114, 0.86);
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-actions svg {
  width: 11px;
  height: 11px;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-select {
  z-index: 6 !important;
  top: 4px !important;
  right: 4px !important;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  border-radius: 7px !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-actions {
  padding: 3px !important;
  gap: 4px !important;
  border-radius: 10px !important;
  background: rgba(31, 32, 34, 0.99) !important;
}

body[data-active-view="aiCanvas"] .workflow-taskbar:not(.is-collapsed) {
  max-height: 152px !important;
}

body[data-active-view="aiCanvas"] .workflow-console-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.82fr) minmax(0, 1.15fr) minmax(0, 0.74fr) !important;
  gap: 5px !important;
}

body[data-active-view="aiCanvas"] .workflow-console-grid section {
  padding: 6px !important;
  border-radius: 12px !important;
}

body[data-active-view="aiCanvas"] .workflow-console-title {
  min-height: 22px !important;
}

body[data-active-view="aiCanvas"] .workflow-console-title strong {
  font-size: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-console-title button {
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 6px !important;
  border-radius: 7px !important;
  font-size: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-task-card {
  padding: 6px !important;
  gap: 5px !important;
  border-radius: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-task-card-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body[data-active-view="aiCanvas"] .workflow-task-card-head strong {
  font-size: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-task-card p,
body[data-active-view="aiCanvas"] .workflow-task-card small {
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  font-size: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-task-actions {
  gap: 3px !important;
}

body[data-active-view="aiCanvas"] .workflow-task-actions button {
  height: 21px !important;
  min-height: 21px !important;
  padding: 0 6px !important;
  border-radius: 7px !important;
  font-size: 9px !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-meta,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-batchbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-wall,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-collector-actions {
  border-color: rgba(18, 18, 18, 0.08) !important;
  background: rgba(248, 246, 241, 0.96) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-thumb-actions button {
  color: rgba(18, 18, 18, 0.72);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-thumb-actions button.is-video {
  color: rgba(18, 18, 18, 0.86);
  border-color: rgba(126, 151, 30, 0.18);
  background: rgba(231, 245, 186, 0.9);
}

/* v1.8.75 Node reference polish: keep the LibTV-style image node clean, but enlarge real hit targets for result actions, plus ports, and inline generation controls. */
body[data-active-view="aiCanvas"] .workflow-result-collector-thumb small {
  left: 6px !important;
  right: 39px !important;
  top: 5px !important;
}

body[data-active-view="aiCanvas"] .workflow-result-collector-thumb b {
  left: 6px !important;
  right: 39px !important;
  bottom: 5px !important;
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-actions {
  left: 5px !important;
  right: 5px !important;
  bottom: 5px !important;
  gap: 4px !important;
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-actions button {
  height: 26px !important;
  min-height: 26px !important;
  border-radius: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-actions svg {
  width: 13px !important;
  height: 13px !important;
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-select {
  top: 3px !important;
  right: 3px !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(12, 13, 14, 0.82) !important;
}

body[data-active-view="aiCanvas"] .workflow-result-thumb-select svg {
  width: 14px !important;
  height: 14px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card.workflow-libtv-reference-node,
body[data-active-view="aiCanvas"] .workflow-media-node-card.workflow-libtv-reference-node,
body[data-active-view="aiCanvas"] .workflow-generator-node-card.workflow-libtv-reference-node {
  filter:
    drop-shadow(0 30px 76px rgba(0, 0, 0, 0.4))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.045)) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title,
body[data-active-view="aiCanvas"] .workflow-media-node-title,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title {
  height: 21px !important;
  min-height: 21px !important;
  line-height: 21px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-title span,
body[data-active-view="aiCanvas"] .workflow-media-node-title span,
body[data-active-view="aiCanvas"] .workflow-generator-titlebar.workflow-generator-node-title > span {
  letter-spacing: 0 !important;
  font-size: 11.5px !important;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  border-width: 1.5px !important;
  border-color: rgba(246, 247, 247, 0.6) !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(246, 247, 247, 0.09), transparent 29%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006)),
    #232323 !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-empty-icon,
body[data-active-view="aiCanvas"] .workflow-media-empty svg,
body[data-active-view="aiCanvas"] .workflow-generator-empty-preview svg {
  width: 70px !important;
  height: 70px !important;
  color: rgba(246, 247, 247, 0.16) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-compose,
body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  border-color: rgba(255, 255, 255, 0.04) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
    rgba(30, 31, 32, 0.995) !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-submit,
body[data-active-view="aiCanvas"] .workflow-generator-run {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 11px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port {
  top: 218px !important;
  width: 30px !important;
  height: 30px !important;
  border-color: rgba(246, 247, 247, 0.5) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
    rgba(19, 20, 22, 0.94) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-prompt .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-image .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-video .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-imageModel .workflow-port::before,
body[data-active-view="aiCanvas"] .workflow-node-videoModel .workflow-port::before {
  font-size: 18px !important;
  line-height: 1 !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-result-thumb-select {
  color: rgba(18, 18, 18, 0.78) !important;
  border-color: rgba(18, 18, 18, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.62)),
    rgba(255, 255, 255, 0.84) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-prompt-upload-zone,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-stage {
  border-color: rgba(18, 18, 18, 0.3) !important;
}

/* v1.8.76 Edge chrome clearance: result nodes keep controls on-canvas, while side panels stay narrow and out of the creative area. */
body[data-active-view="aiCanvas"] .workflow-canvas-shell:not(.has-multi-selection):has(.workflow-node-result.is-selected) .workflow-inspector,
body[data-active-view="aiCanvas"] .workflow-canvas-shell:not(.has-multi-selection):has(.workflow-node-result.is-selected) .workflow-selection-toolbar {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar {
  width: 196px !important;
  padding: 6px !important;
  border-radius: 16px !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-content {
  gap: 6px !important;
  padding: 0 !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-search {
  min-height: 34px !important;
  padding: 0 9px !important;
  border-radius: 12px !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-search input {
  font-size: 11px !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-group {
  gap: 6px !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-group > span {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-card {
  min-height: 42px !important;
  padding: 6px !important;
  grid-template-columns: 31px minmax(0, 1fr) !important;
  gap: 7px !important;
  border-radius: 12px !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-card i {
  width: 29px !important;
  height: 29px !important;
  border-radius: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-card strong {
  font-size: 12px !important;
  line-height: 1.1 !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-card small {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-inspector {
  width: min(232px, calc(100vw - 92px)) !important;
  right: 10px !important;
  padding: 6px !important;
  border-radius: 15px !important;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-node-sheet,
body[data-active-view="aiCanvas"] .workflow-inspector.is-compact-selection {
  width: min(206px, calc(100vw - 92px)) !important;
}

body[data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-active-view="aiCanvas"] .workflow-run-panel {
  border-radius: 13px !important;
}

body[data-active-view="aiCanvas"] .workflow-inspector-actions {
  gap: 5px !important;
}

body[data-active-view="aiCanvas"] .workflow-inspector-actions button {
  min-height: 30px !important;
  padding: 0 7px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar-search,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-palette-card {
  border-color: rgba(18, 18, 18, 0.08) !important;
  background: rgba(255, 255, 255, 0.68) !important;
}

/* v1.8.87 Link target feedback: dragging a wire highlights compatible existing nodes and snaps to their input side. */
body[data-active-view="aiCanvas"] .workflow-node.is-connect-candidate {
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

body[data-active-view="aiCanvas"] .workflow-node.is-connect-candidate .workflow-port.input {
  border-color: rgba(216, 255, 114, 0.42) !important;
  color: rgba(216, 255, 114, 0.88) !important;
  background:
    radial-gradient(circle, rgba(216, 255, 114, 0.18), transparent 62%),
    rgba(22, 23, 25, 0.94) !important;
}

body[data-active-view="aiCanvas"] .workflow-node.is-connect-hover {
  border-color: rgba(216, 255, 114, 0.56) !important;
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.24) inset,
    0 0 0 6px rgba(216, 255, 114, 0.055),
    0 24px 74px rgba(0, 0, 0, 0.42) !important;
  transform: translateY(-1px);
}

body[data-active-view="aiCanvas"] .workflow-node.is-connect-hover .workflow-port.input {
  width: 26px !important;
  height: 26px !important;
  border-color: rgba(216, 255, 114, 0.92) !important;
  color: #111315 !important;
  background: rgba(216, 255, 114, 0.96) !important;
  box-shadow:
    0 0 0 5px rgba(216, 255, 114, 0.12),
    0 0 22px rgba(216, 255, 114, 0.42) !important;
}

body[data-active-view="aiCanvas"] .workflow-pending-edge.is-targeting .workflow-edge.is-pending {
  stroke: rgba(216, 255, 114, 1) !important;
  stroke-width: 1.25 !important;
  stroke-dasharray: 0 !important;
}

body[data-active-view="aiCanvas"] .workflow-pending-edge.is-targeting .workflow-pending-edge-dot {
  r: 5.2;
  fill: rgba(216, 255, 114, 1);
}

body[data-active-view="aiCanvas"] .workflow-pending-edge.is-targeting .workflow-pending-edge-label {
  fill: rgba(246, 247, 247, 0.78);
}

body[data-active-view="aiCanvas"] .workflow-node.is-connect-warning .workflow-port.input {
  border-color: rgba(255, 186, 92, 0.5) !important;
  color: rgba(255, 213, 138, 0.92) !important;
  background:
    radial-gradient(circle, rgba(255, 186, 92, 0.17), transparent 62%),
    rgba(22, 23, 25, 0.94) !important;
}

body[data-active-view="aiCanvas"] .workflow-node.is-connect-hover.is-connect-warning {
  border-color: rgba(255, 186, 92, 0.56) !important;
  box-shadow:
    0 0 0 1px rgba(255, 186, 92, 0.22) inset,
    0 0 0 6px rgba(255, 186, 92, 0.055),
    0 24px 74px rgba(0, 0, 0, 0.42) !important;
}

body[data-active-view="aiCanvas"] .workflow-node.is-connect-hover.is-connect-warning .workflow-port.input {
  color: #1d1509 !important;
  border-color: rgba(255, 186, 92, 0.92) !important;
  background: rgba(255, 186, 92, 0.96) !important;
  box-shadow:
    0 0 0 5px rgba(255, 186, 92, 0.12),
    0 0 22px rgba(255, 186, 92, 0.36) !important;
}

body[data-active-view="aiCanvas"] .workflow-pending-edge.is-contract-warning .workflow-edge.is-pending {
  stroke: rgba(255, 186, 92, 0.96) !important;
}

body[data-active-view="aiCanvas"] .workflow-pending-edge.is-targeting.is-contract-warning .workflow-edge.is-pending {
  stroke: rgba(255, 186, 92, 1) !important;
  stroke-dasharray: 5 5 !important;
}

body[data-active-view="aiCanvas"] .workflow-pending-edge.is-contract-warning .workflow-pending-edge-dot {
  fill: rgba(255, 186, 92, 1);
  filter:
    drop-shadow(0 0 10px rgba(255, 186, 92, 0.7))
    drop-shadow(0 0 20px rgba(255, 186, 92, 0.18));
}

body[data-active-view="aiCanvas"] .workflow-pending-edge.is-contract-warning .workflow-pending-edge-label {
  fill: rgba(255, 222, 158, 0.86);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-connect-candidate .workflow-port.input {
  border-color: rgba(126, 151, 30, 0.32) !important;
  color: rgba(18, 18, 18, 0.64) !important;
  background:
    radial-gradient(circle, rgba(126, 151, 30, 0.12), transparent 62%),
    rgba(255, 255, 255, 0.94) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-connect-hover {
  border-color: rgba(126, 151, 30, 0.36) !important;
  box-shadow:
    0 0 0 1px rgba(126, 151, 30, 0.16) inset,
    0 0 0 6px rgba(126, 151, 30, 0.055),
    0 24px 74px rgba(18, 18, 18, 0.16) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-connect-hover .workflow-port.input {
  color: #111315 !important;
  border-color: rgba(126, 151, 30, 0.54) !important;
  background: rgba(216, 255, 114, 0.92) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-pending-edge.is-targeting .workflow-edge.is-pending {
  stroke: rgba(18, 18, 18, 0.9) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-connect-warning .workflow-port.input {
  border-color: rgba(164, 104, 18, 0.28) !important;
  color: rgba(126, 78, 12, 0.68) !important;
  background:
    radial-gradient(circle, rgba(164, 104, 18, 0.1), transparent 62%),
    rgba(255, 255, 255, 0.94) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-connect-hover.is-connect-warning {
  border-color: rgba(164, 104, 18, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(164, 104, 18, 0.11) inset,
    0 0 0 6px rgba(164, 104, 18, 0.045),
    0 24px 74px rgba(18, 18, 18, 0.16) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-pending-edge.is-contract-warning .workflow-edge.is-pending {
  stroke: rgba(164, 104, 18, 0.88) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-pending-edge.is-contract-warning .workflow-pending-edge-dot {
  fill: rgba(164, 104, 18, 0.88);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-pending-edge.is-contract-warning .workflow-pending-edge-label {
  fill: rgba(126, 78, 12, 0.74);
}

/* v1.8.126 Pending link contract: wire dragging previews target compatibility before the edge is created. */

/* v1.8.88 Edge inline tools: selected or hovered route chips expose focus and delete actions on the canvas. */
body[data-active-view="aiCanvas"] .workflow-edge-route-layer {
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html {
  pointer-events: auto;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html.is-selected {
  border-color: rgba(216, 255, 114, 0.48);
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.14) inset,
    0 16px 40px rgba(0, 0, 0, 0.46),
    0 0 18px rgba(216, 255, 114, 0.12);
}

body[data-active-view="aiCanvas"] .workflow-edge-tools {
  position: absolute;
  left: 50%;
  top: 26px;
  min-height: 26px;
  padding: 3px;
  display: inline-flex;
  gap: 3px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px) scale(0.96);
  transition: opacity 140ms ease, transform 140ms ease;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(15, 16, 18, 0.94);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(14px);
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html:hover .workflow-edge-tools,
body[data-active-view="aiCanvas"] .workflow-edge-route-html.is-selected .workflow-edge-tools {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.68);
  background: rgba(255, 255, 255, 0.045);
  font-family: inherit;
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button:hover {
  color: #111315;
  background: rgba(216, 255, 114, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button.is-danger:hover {
  color: #1b0f0f;
  background: rgba(255, 118, 118, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-edge-tools svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.8;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-html.is-selected {
  border-color: rgba(126, 151, 30, 0.3);
  box-shadow:
    0 0 0 1px rgba(126, 151, 30, 0.08) inset,
    0 16px 40px rgba(18, 18, 18, 0.14);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-tools {
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 18px 48px rgba(18, 18, 18, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.74) inset;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-tools button {
  color: rgba(18, 18, 18, 0.56);
  background: rgba(18, 18, 18, 0.045);
}

/* v1.8.142 Edge action dock: connection chips can run their runnable step and copy source-to-target replication params directly on-canvas. */
body[data-active-view="aiCanvas"] .workflow-edge-tools button.is-primary,
body[data-active-view="aiCanvas"] .workflow-edge-tools button[data-copy-edge-params] {
  color: #111315;
  background: rgba(216, 255, 114, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button[data-copy-edge-params] {
  color: rgba(246, 247, 247, 0.8);
  background: rgba(255, 255, 255, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button.is-primary:hover {
  background: linear-gradient(135deg, rgba(216, 255, 114, 0.98), rgba(129, 204, 255, 0.9));
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button[data-copy-edge-params]:hover {
  color: #111315;
  background: rgba(246, 247, 247, 0.92);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-tools button.is-primary {
  color: rgba(18, 18, 18, 0.9);
  background: rgba(126, 151, 30, 0.2);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-tools button[data-copy-edge-params] {
  color: rgba(18, 18, 18, 0.68);
  background: rgba(18, 18, 18, 0.06);
}

/* v1.8.89 Active run HUD: the canvas status chip shows the current AI pipeline without opening Console. */
body[data-active-view="aiCanvas"] .workflow-canvas-status:has(.workflow-active-run-hud) {
  display: flex !important;
}

body[data-active-view="aiCanvas"] .workflow-active-run-hud {
  position: absolute;
  left: 50%;
  top: 24px;
  width: min(360px, calc(100vw - 360px));
  min-width: 274px;
  min-height: 64px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(216, 255, 114, 0.16);
  border-radius: 16px;
  color: rgba(246, 247, 247, 0.88);
  background:
    radial-gradient(circle at 18% 20%, rgba(216, 255, 114, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(13, 14, 16, 0.9);
  box-shadow:
    0 22px 64px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.07) inset;
  backdrop-filter: blur(18px);
  pointer-events: auto;
  transform: translateX(-50%);
}

body[data-active-view="aiCanvas"] .workflow-active-run-hud::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(216, 255, 114, 0), rgba(216, 255, 114, 0.22), rgba(120, 199, 255, 0), rgba(216, 255, 114, 0));
  background-size: 220% 100%;
  opacity: 0.72;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
  animation: workflowActiveRunSweep 2.8s linear infinite;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-media {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(216, 255, 114, 0.82);
  background:
    radial-gradient(circle at 50% 34%, rgba(216, 255, 114, 0.18), transparent 46%),
    rgba(255, 255, 255, 0.045);
}

body[data-active-view="aiCanvas"] .workflow-active-run-media img,
body[data-active-view="aiCanvas"] .workflow-active-run-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-active-view="aiCanvas"] .workflow-active-run-media svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.7;
}

body[data-active-view="aiCanvas"] .workflow-active-run-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-active-view="aiCanvas"] .workflow-active-run-copy div {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-copy strong,
body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-copy em,
body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-copy small,
body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-copy p {
  min-width: 0;
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-active-run-copy strong {
  color: rgba(246, 247, 247, 0.92);
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-copy em {
  flex: 0 0 auto;
  color: rgba(216, 255, 114, 0.78);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-active-run-copy p,
body[data-active-view="aiCanvas"] .workflow-active-run-copy small {
  color: rgba(246, 247, 247, 0.46);
  font-size: 10px;
}

/* v1.8.92 Active run step HUD: show current workflow step and the next model target. */
body[data-active-view="aiCanvas"] .workflow-active-run-step {
  min-width: 0;
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-step span {
  display: inline-flex !important;
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.5);
  font-size: 9px;
  font-weight: 300 !important;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-step-label {
  color: rgba(216, 255, 114, 0.74);
  letter-spacing: 0;
}

body[data-active-view="aiCanvas"] .workflow-active-run-step-dots {
  gap: 3px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-active-run-step-dots i {
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

body[data-active-view="aiCanvas"] .workflow-active-run-step-dots i.is-done {
  background: rgba(118, 231, 197, 0.66);
}

body[data-active-view="aiCanvas"] .workflow-active-run-step-dots i.is-active {
  width: 14px;
  background: linear-gradient(90deg, rgba(216, 255, 114, 0.96), rgba(120, 199, 255, 0.72));
  box-shadow: 0 0 12px rgba(216, 255, 114, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-next {
  color: rgba(246, 247, 247, 0.4);
}

body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-copy > span {
  height: 2px;
  min-width: 0;
  display: block !important;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
}

body[data-active-view="aiCanvas"] .workflow-active-run-copy > span i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(216, 255, 114, 0.96), rgba(120, 199, 255, 0.92), rgba(246, 247, 247, 0.82));
  box-shadow: 0 0 14px rgba(120, 199, 255, 0.34);
  transition: width 0.2s ease;
}

body[data-active-view="aiCanvas"] .workflow-active-run-actions {
  display: grid;
  gap: 4px;
}

body[data-active-view="aiCanvas"] .workflow-active-run-actions button {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 10px;
  color: rgba(246, 247, 247, 0.62);
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
}

body[data-active-view="aiCanvas"] .workflow-active-run-actions button:hover:not(:disabled) {
  color: #111315;
  background: rgba(216, 255, 114, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-active-run-actions svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-active-run-hud {
  border-color: rgba(126, 151, 30, 0.14);
  color: rgba(18, 18, 18, 0.82);
  background:
    radial-gradient(circle at 18% 20%, rgba(126, 151, 30, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.9);
  box-shadow:
    0 22px 64px rgba(18, 18, 18, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-active-run-copy strong {
  color: rgba(18, 18, 18, 0.86);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-copy em {
  color: rgba(91, 111, 25, 0.82);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-active-run-copy p,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-active-run-copy small {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-step span {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-step-label {
  color: rgba(91, 111, 25, 0.82);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-active-run-step-dots i {
  background: rgba(18, 18, 18, 0.12);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-active-run-step-dots i.is-done {
  background: rgba(38, 132, 99, 0.52);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-active-run-step-dots i.is-active {
  background: linear-gradient(90deg, rgba(126, 151, 30, 0.82), rgba(50, 112, 150, 0.58));
  box-shadow: 0 0 12px rgba(126, 151, 30, 0.18);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-next {
  color: rgba(18, 18, 18, 0.42);
}

/* v1.8.93 Port contract labels: input/output ports explain whether they carry Prompt, image, video, or results. */
body[data-active-view="aiCanvas"] .workflow-port {
  overflow: visible !important;
}

body[data-active-view="aiCanvas"] .workflow-port::after {
  content: attr(data-port-label);
  position: absolute;
  top: 50%;
  z-index: 8;
  min-width: 28px;
  max-width: 78px;
  height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  color: rgba(246, 247, 247, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(14, 15, 17, 0.94);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(12px);
  font-size: 9px;
  font-weight: 300;
  line-height: 20px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-50%) scale(0.94);
  transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

body[data-active-view="aiCanvas"] .workflow-port.input::after {
  left: 27px;
}

body[data-active-view="aiCanvas"] .workflow-port.output::after {
  right: 27px;
}

body[data-active-view="aiCanvas"] .workflow-node:hover .workflow-port::after,
body[data-active-view="aiCanvas"] .workflow-node.is-selected .workflow-port::after,
body[data-active-view="aiCanvas"] .workflow-node.is-connect-candidate .workflow-port.input::after,
body[data-active-view="aiCanvas"] .workflow-node.is-connect-hover .workflow-port.input::after,
body[data-active-view="aiCanvas"] .workflow-port:hover::after,
body[data-active-view="aiCanvas"] .workflow-port:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

body[data-active-view="aiCanvas"] .workflow-node.is-connect-candidate .workflow-port.output::after {
  opacity: 0;
}

body[data-active-view="aiCanvas"] .workflow-port[data-port-kind="prompt"]::after,
body[data-active-view="aiCanvas"] .workflow-port[data-port-kind="params"]::after,
body[data-active-view="aiCanvas"] .workflow-port[data-port-kind="template"]::after {
  color: rgba(246, 247, 247, 0.78);
  border-color: rgba(246, 247, 247, 0.11);
}

body[data-active-view="aiCanvas"] .workflow-port[data-port-kind="image"]::after,
body[data-active-view="aiCanvas"] .workflow-port[data-port-kind="reference"]::after,
body[data-active-view="aiCanvas"] .workflow-port[data-port-kind="media"]::after {
  color: rgba(220, 255, 133, 0.82);
  border-color: rgba(216, 255, 114, 0.18);
  background:
    linear-gradient(180deg, rgba(216, 255, 114, 0.11), rgba(216, 255, 114, 0.028)),
    rgba(14, 15, 17, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-port[data-port-kind="video"]::after {
  color: rgba(186, 224, 255, 0.86);
  border-color: rgba(120, 199, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(120, 199, 255, 0.12), rgba(120, 199, 255, 0.028)),
    rgba(14, 15, 17, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-port[data-port-kind="result"]::after {
  color: rgba(154, 244, 214, 0.84);
  border-color: rgba(118, 231, 197, 0.19);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-port::after {
  color: rgba(18, 18, 18, 0.62);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 14px 34px rgba(18, 18, 18, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.74) inset;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-port[data-port-kind="image"]::after,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-port[data-port-kind="reference"]::after,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-port[data-port-kind="media"]::after {
  color: rgba(84, 105, 24, 0.84);
  border-color: rgba(126, 151, 30, 0.14);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-port[data-port-kind="video"]::after {
  color: rgba(24, 83, 126, 0.8);
  border-color: rgba(50, 112, 150, 0.14);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-port[data-port-kind="result"]::after {
  color: rgba(31, 111, 82, 0.8);
  border-color: rgba(38, 132, 99, 0.14);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-media,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-active-run-actions button {
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.045);
}

@keyframes workflowActiveRunSweep {
  from { background-position: 0% 50%; }
  to { background-position: 220% 50%; }
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-active-run-hud {
    width: min(318px, calc(100vw - 96px));
    min-width: 0;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    transform: translate(-50%, 6px);
  }

  body[data-active-view="aiCanvas"] .workflow-canvas-status .workflow-active-run-media {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .generation-image-preview-dialog {
    padding: 8px;
  }

  .generation-image-preview-card {
    max-height: calc(100vh - 16px);
    min-height: calc(100vh - 16px);
    border-radius: 12px;
  }

  .generation-image-preview-head,
  .generation-image-preview-actions {
    padding: 9px;
  }

  .generation-image-preview-actions {
    justify-content: stretch;
  }

  .generation-image-preview-actions a,
  .generation-image-preview-actions button {
    flex: 1;
  }

  .generation-image-preview-stage {
    padding: 8px;
  }

  .generation-image-preview-stage img {
    max-height: calc(100vh - 154px);
  }

  body[data-active-view="aiCanvas"] .workflow-result-collector-card {
    grid-template-rows: 20px minmax(230px, 1fr) 62px 63px 112px 32px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-result-collector-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body[data-active-view="aiCanvas"] .workflow-result-collector-batchbar > span {
    grid-column: 1 / -1;
  }

  body[data-active-view="aiCanvas"] .workflow-console-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v1.8.95 Selection batch toolbar: compact multi-select actions without stealing canvas space. */
body[data-active-view="aiCanvas"] .workflow-selection-toolbar {
  z-index: 1208 !important;
  max-width: min(620px, calc(100vw - 112px)) !important;
  min-height: 40px;
  gap: 4px !important;
  align-items: center;
  padding: 5px 6px !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(34, 35, 37, 0.92), rgba(12, 13, 15, 0.9)),
    rgba(12, 13, 15, 0.92) !important;
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  pointer-events: auto;
}

body[data-active-view="aiCanvas"] .workflow-selection-meta {
  min-width: 0;
  max-width: 178px;
  display: grid;
  gap: 1px;
  padding: 0 10px 0 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

body[data-active-view="aiCanvas"] .workflow-selection-meta strong,
body[data-active-view="aiCanvas"] .workflow-selection-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-selection-meta strong {
  color: rgba(250, 250, 249, 0.94);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

body[data-active-view="aiCanvas"] .workflow-selection-meta span {
  color: rgba(250, 250, 249, 0.48);
  font-size: 9px;
  font-weight: 500;
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar button {
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar button:hover {
  color: rgba(16, 18, 19, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
  background: rgba(247, 248, 245, 0.9) !important;
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar .is-danger:hover {
  color: #fff !important;
  border-color: rgba(255, 118, 118, 0.55) !important;
  background: rgba(255, 96, 96, 0.78) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-toolbar {
  border-color: rgba(18, 18, 18, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 246, 243, 0.9)),
    rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 18px 46px rgba(18, 18, 18, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.74) inset !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-meta {
  border-right-color: rgba(18, 18, 18, 0.1);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-meta strong {
  color: rgba(18, 18, 18, 0.86);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-meta span {
  color: rgba(18, 18, 18, 0.46);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-toolbar button {
  color: rgba(18, 18, 18, 0.66);
  border-color: rgba(18, 18, 18, 0.08) !important;
  background: rgba(18, 18, 18, 0.045) !important;
}

/* v1.8.143 Selection production actions: multi-select can run selected generation nodes, copy replication params, and download selected media. */
body[data-active-view="aiCanvas"] .workflow-selection-toolbar button.is-primary {
  color: #111315 !important;
  border-color: rgba(216, 255, 114, 0.42) !important;
  background: linear-gradient(135deg, rgba(216, 255, 114, 0.96), rgba(129, 204, 255, 0.86)) !important;
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.45);
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar button:disabled:hover {
  color: rgba(246, 247, 247, 0.52) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-toolbar button.is-primary {
  color: rgba(18, 18, 18, 0.9) !important;
  border-color: rgba(126, 151, 30, 0.2) !important;
  background: linear-gradient(135deg, rgba(218, 238, 132, 0.88), rgba(164, 210, 236, 0.72)) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-toolbar button:disabled:hover {
  color: rgba(18, 18, 18, 0.46) !important;
  border-color: rgba(18, 18, 18, 0.08) !important;
  background: rgba(18, 18, 18, 0.045) !important;
}

/* v1.8.144 Selection production preview: selected nodes show task count, estimated cost, mode mix, and engine before submission. */
body[data-active-view="aiCanvas"] .workflow-selection-production-preview {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 0;
  width: min(382px, calc(100vw - 112px));
  padding: 8px;
  display: grid;
  gap: 7px;
  border: 1px solid rgba(216, 255, 114, 0.13);
  border-radius: 16px;
  color: rgba(246, 247, 247, 0.82);
  background:
    linear-gradient(180deg, rgba(28, 30, 28, 0.92), rgba(12, 13, 15, 0.88)),
    rgba(12, 13, 15, 0.92);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.36),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(18px);
  pointer-events: none;
  transform: translateX(-50%);
}

body[data-active-view="aiCanvas"] .workflow-selection-production-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-selection-production-stats span {
  min-width: 0;
  height: 28px;
  padding: 0 7px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(246, 247, 247, 0.58);
  font-size: 9px;
  font-weight: 400;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-selection-production-stats strong {
  color: rgba(216, 255, 114, 0.92);
  font-size: 11px;
  font-weight: 600;
}

body[data-active-view="aiCanvas"] .workflow-selection-production-stats svg {
  width: 11px;
  height: 11px;
  stroke-width: 1.9;
}

body[data-active-view="aiCanvas"] .workflow-selection-production-modes {
  min-width: 0;
  display: flex;
  gap: 5px;
  align-items: center;
  overflow: hidden;
}

body[data-active-view="aiCanvas"] .workflow-selection-production-modes b,
body[data-active-view="aiCanvas"] .workflow-selection-production-modes em {
  min-width: 0;
  max-width: 118px;
  padding: 4px 7px;
  overflow: hidden;
  border-radius: 999px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-selection-production-modes b {
  color: rgba(246, 247, 247, 0.72);
  background: rgba(255, 255, 255, 0.055);
}

body[data-active-view="aiCanvas"] .workflow-selection-production-modes em {
  margin-left: auto;
  color: rgba(129, 204, 255, 0.82);
  background: rgba(129, 204, 255, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-selection-production-preview small {
  color: rgba(246, 247, 247, 0.4);
  font-size: 9px;
  font-weight: 400;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-preview {
  border-color: rgba(126, 151, 30, 0.12);
  color: rgba(18, 18, 18, 0.7);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 22px 54px rgba(18, 18, 18, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.74) inset;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-stats span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-modes b {
  border-color: rgba(18, 18, 18, 0.06);
  color: rgba(18, 18, 18, 0.5);
  background: rgba(18, 18, 18, 0.045);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-stats strong {
  color: rgba(84, 105, 24, 0.92);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-modes em {
  color: rgba(24, 83, 126, 0.78);
  background: rgba(50, 112, 150, 0.08);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-preview small {
  color: rgba(18, 18, 18, 0.38);
}

/* v1.8.156 Imported run plan affordance: restored API plans are visibly runnable as a batch. */
body[data-active-view="aiCanvas"] .workflow-node-head em.is-imported-plan {
  padding: 3px 7px;
  border: 1px solid rgba(129, 204, 255, 0.22);
  border-radius: 999px;
  color: rgba(129, 204, 255, 0.88);
  background: rgba(129, 204, 255, 0.075);
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar button.is-imported-plan {
  border-color: rgba(129, 204, 255, 0.42) !important;
  background: linear-gradient(135deg, rgba(129, 204, 255, 0.94), rgba(216, 255, 114, 0.84)) !important;
}

body[data-active-view="aiCanvas"] .workflow-selection-production-preview.is-imported-plan {
  border-color: rgba(129, 204, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(23, 31, 34, 0.94), rgba(12, 13, 15, 0.89)),
    rgba(12, 13, 15, 0.94);
}

body[data-active-view="aiCanvas"] .workflow-selection-production-preview.is-imported-plan small {
  color: rgba(129, 204, 255, 0.62);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-head em.is-imported-plan {
  border-color: rgba(50, 112, 150, 0.16);
  color: rgba(24, 83, 126, 0.78);
  background: rgba(50, 112, 150, 0.07);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-toolbar button.is-imported-plan {
  border-color: rgba(50, 112, 150, 0.18) !important;
  background: linear-gradient(135deg, rgba(164, 210, 236, 0.86), rgba(218, 238, 132, 0.74)) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-preview.is-imported-plan {
  border-color: rgba(50, 112, 150, 0.14);
  background: rgba(255, 255, 255, 0.96);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-preview.is-imported-plan small {
  color: rgba(24, 83, 126, 0.56);
}

/* v1.8.157 Canvas obstruction and node layout fixes: keep edge/node production actions compact and prevent compose overlap. */
body[data-active-view="aiCanvas"] .workflow-edge-route-html {
  z-index: 6;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html.is-selected {
  z-index: 36;
}

body[data-active-view="aiCanvas"] .workflow-edge-tools {
  top: 24px !important;
  min-height: 22px !important;
  max-width: 132px;
  padding: 2px !important;
  gap: 2px !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: translate(-50%, -2px) scale(0.98) !important;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html:hover .workflow-edge-tools,
body[data-active-view="aiCanvas"] .workflow-edge-route-html.is-selected .workflow-edge-tools {
  transform: translate(-50%, 2px) scale(1) !important;
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(18, 19, 20, 0.82) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button span {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button.is-primary,
body[data-active-view="aiCanvas"] .workflow-edge-tools button[data-copy-edge-params] {
  width: auto !important;
  min-width: 38px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  gap: 3px;
  align-items: center;
  justify-content: center;
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button.is-primary span,
body[data-active-view="aiCanvas"] .workflow-edge-tools button[data-copy-edge-params] span {
  display: inline;
  font-size: 9px;
  font-weight: 300;
  line-height: 1;
}

body[data-active-view="aiCanvas"] .workflow-edge-tools svg {
  width: 10px !important;
  height: 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-node-card.workflow-libtv-reference-node,
body[data-active-view="aiCanvas"] .workflow-media-node-card.workflow-libtv-reference-node,
body[data-active-view="aiCanvas"] .workflow-generator-node-card.workflow-libtv-reference-node {
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-card.workflow-libtv-reference-node,
body[data-active-view="aiCanvas"] .workflow-node-upload .workflow-media-node-card.workflow-libtv-reference-node {
  grid-template-rows: 22px minmax(0, 1fr) 128px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card.workflow-libtv-reference-node {
  grid-template-rows: 22px minmax(0, 1fr) 150px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-stage,
body[data-active-view="aiCanvas"] .workflow-generator-stage {
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose,
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-active-view="aiCanvas"] .workflow-media-node-compose {
  grid-template-rows: 28px 58px 32px !important;
  gap: 5px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 26px 24px 44px 36px !important;
  gap: 5px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row,
body[data-active-view="aiCanvas"] .workflow-generator-prompt {
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row {
  display: grid !important;
  grid-template-rows: 13px minmax(0, 1fr) !important;
  gap: 2px !important;
  padding: 0 10px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-row > span {
  min-height: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-media-prompt-textarea {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 2px 0 0 !important;
  resize: none !important;
  overflow: auto !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-prompt {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 0 10px !important;
  line-height: 1.45 !important;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row {
  min-height: 32px !important;
  max-height: 32px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 9px 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row::-webkit-scrollbar {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row > * {
  flex: 0 0 auto !important;
  height: 24px !important;
  max-height: 24px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row span,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-control-row select {
  max-width: 104px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row select.workflow-media-control-select {
  width: auto !important;
  min-width: 76px !important;
  max-width: 92px !important;
}

body[data-active-view="aiCanvas"] .workflow-media-control-row .workflow-media-cost {
  max-width: 46px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row,
body[data-active-view="aiCanvas"] .workflow-generator-mode-strip,
body[data-active-view="aiCanvas"] .workflow-generator-run-row {
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row {
  display: flex !important;
  gap: 5px !important;
  padding: 5px 8px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row::-webkit-scrollbar {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row button {
  flex: 0 0 auto !important;
  max-width: 116px !important;
  overflow: hidden !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-mode-strip {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 5px !important;
  align-items: center !important;
  margin: 0 8px !important;
  padding: 0 7px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-mode-strip em {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row {
  min-height: 36px !important;
  padding: 0 8px 7px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row > div {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar button[data-action="copy-selected-node-params"] {
  color: rgba(216, 255, 114, 0.82) !important;
  border-color: rgba(216, 255, 114, 0.18) !important;
  background: rgba(216, 255, 114, 0.075) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-tools button {
  border-color: rgba(18, 18, 18, 0.08) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 8px 22px rgba(18, 18, 18, 0.1);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-toolbar button[data-action="copy-selected-node-params"] {
  color: rgba(84, 105, 24, 0.82) !important;
  border-color: rgba(126, 151, 30, 0.16) !important;
  background: rgba(126, 151, 30, 0.075) !important;
}

/* v1.8.171 Canvas overlap guard: collapse link HUD chrome and lock generator node rows. */
body[data-active-view="aiCanvas"] .workflow-edge-route-html {
  width: auto !important;
  min-width: 0 !important;
  max-width: 86px !important;
  height: 18px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  opacity: 0.82;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html.is-selected {
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 1;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html > span {
  max-width: 66px !important;
  height: 18px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.74) !important;
  background: rgba(15, 16, 18, 0.58);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px !important;
  line-height: 1;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html > em {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html.is-selected > span,
body[data-active-view="aiCanvas"] .workflow-edge-route-html:hover > span {
  color: rgba(216, 255, 114, 0.86) !important;
  border-color: rgba(216, 255, 114, 0.16);
  background: rgba(15, 16, 18, 0.74);
}

body[data-active-view="aiCanvas"] .workflow-edge-tools {
  top: 19px !important;
  max-width: 126px !important;
  min-height: 20px !important;
  padding: 0 !important;
  gap: 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  background: rgba(16, 17, 19, 0.78) !important;
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button.is-primary,
body[data-active-view="aiCanvas"] .workflow-edge-tools button[data-copy-edge-params] {
  min-width: 34px !important;
  padding: 0 6px !important;
}

body[data-active-view="aiCanvas"] .workflow-edge-tools button[data-focus-edge-node],
body[data-active-view="aiCanvas"] .workflow-edge-tools button[data-delete-edge] {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-edge-route-html:hover .workflow-edge-tools button[data-focus-edge-node],
body[data-active-view="aiCanvas"] .workflow-edge-route-html:hover .workflow-edge-tools button[data-delete-edge] {
  display: grid !important;
}

body[data-active-view="aiCanvas"] .workflow-edge-tools svg {
  width: 9px !important;
  height: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-node-card.workflow-libtv-reference-node {
  grid-template-rows: 22px minmax(0, 1fr) 166px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-compose {
  display: grid !important;
  grid-template-rows: 26px 24px 46px 36px !important;
  grid-auto-rows: 0 !important;
  gap: 6px !important;
  align-content: start !important;
  overflow: hidden !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-tool-row {
  grid-row: 1 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-mode-strip {
  grid-row: 2 !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix,
body[data-active-view="aiCanvas"] .workflow-generator-flow {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-prompt {
  grid-row: 3 !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  align-self: start !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row {
  grid-row: 4 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: static !important;
  transform: none !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-run-row > div {
  display: none !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-html > span {
  color: rgba(18, 18, 18, 0.62) !important;
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-html.is-selected > span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-html:hover > span {
  color: rgba(82, 92, 20, 0.86) !important;
  border-color: rgba(126, 151, 30, 0.18);
  background: rgba(255, 255, 255, 0.86);
}

body[data-active-view="aiCanvas"] .workflow-canvas-status {
  top: 64px !important;
  right: 18px !important;
  left: auto !important;
  z-index: 18 !important;
  width: auto !important;
  max-width: 340px !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  pointer-events: none !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status:has(.workflow-active-run-hud) {
  display: block !important;
}

body[data-active-view="aiCanvas"] .workflow-active-run-hud {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: min(340px, calc(100vw - 420px)) !important;
  min-width: 260px !important;
  transform: none !important;
}

/* v1.8.145 Task source lanes: Run Console groups tasks by generator node and shows input -> model -> result path on every card. */
/* v1.8.146 Console path filter: task queue gains production filters and group-level path focus without changing API flow. */
body[data-active-view="aiCanvas"] .workflow-console-title em {
  padding: 2px 6px;
  border-radius: 999px;
  color: rgba(216, 255, 114, 0.72);
  background: rgba(216, 255, 114, 0.075);
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-task-filter-strip {
  min-width: 0;
  display: flex;
  gap: 4px;
  align-items: center;
  overflow-x: auto;
  padding: 1px 0 2px;
  scrollbar-width: none;
}

body[data-active-view="aiCanvas"] .workflow-task-filter-strip::-webkit-scrollbar {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-task-filter-strip button {
  height: 23px;
  min-width: 0;
  flex: 0 0 auto;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.48);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-task-filter-strip button svg {
  width: 10px;
  height: 10px;
}

body[data-active-view="aiCanvas"] .workflow-task-filter-strip button em {
  min-width: 15px;
  padding: 1px 4px;
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.56);
  background: rgba(0, 0, 0, 0.18);
  font-style: normal;
  text-align: center;
}

body[data-active-view="aiCanvas"] .workflow-task-filter-strip button:hover,
body[data-active-view="aiCanvas"] .workflow-task-filter-strip button.is-active {
  border-color: rgba(216, 255, 114, 0.28);
  color: rgba(246, 247, 247, 0.84);
  background: rgba(216, 255, 114, 0.09);
}

body[data-active-view="aiCanvas"] .workflow-task-list.has-source-groups {
  grid-auto-columns: minmax(218px, 0.92fr);
  align-items: stretch;
}

body[data-active-view="aiCanvas"] .workflow-task-source-group {
  min-width: 0;
  padding: 5px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.025);
}

body[data-active-view="aiCanvas"] .workflow-task-source-group.is-path-focused {
  border-color: rgba(216, 255, 114, 0.42);
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.1),
    0 14px 34px rgba(0, 0, 0, 0.24);
}

body[data-active-view="aiCanvas"] .workflow-task-source-group header {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

body[data-active-view="aiCanvas"] .workflow-task-source-focus {
  min-width: 0;
  height: 18px;
  padding: 0;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  overflow: hidden;
  border: 0;
  color: rgba(246, 247, 247, 0.82);
  background: transparent;
  font-size: 9px;
  font-weight: 500;
  text-align: left;
}

body[data-active-view="aiCanvas"] .workflow-task-source-focus:hover {
  color: rgba(216, 255, 114, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-task-source-focus span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-source-group header span,
body[data-active-view="aiCanvas"] .workflow-task-source-group header em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 500;
}

body[data-active-view="aiCanvas"] .workflow-task-source-group header span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: rgba(246, 247, 247, 0.82);
}

body[data-active-view="aiCanvas"] .workflow-task-source-group header em {
  max-width: 86px;
  color: rgba(246, 247, 247, 0.42);
  font-style: normal;
}

body[data-active-view="aiCanvas"] .workflow-task-source-group header svg,
body[data-active-view="aiCanvas"] .workflow-task-source-focus svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  color: rgba(216, 255, 114, 0.82);
}

body[data-active-view="aiCanvas"] .workflow-task-source-route,
body[data-active-view="aiCanvas"] .workflow-task-card-route {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr);
  gap: 3px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-task-source-route {
  padding: 4px 5px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.12);
}

body[data-active-view="aiCanvas"] .workflow-task-source-route b,
body[data-active-view="aiCanvas"] .workflow-task-card-route span {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.5);
  font-size: 8.5px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-source-route svg,
body[data-active-view="aiCanvas"] .workflow-task-card-route > svg {
  width: 10px;
  height: 10px;
  color: rgba(246, 247, 247, 0.28);
}

body[data-active-view="aiCanvas"] .workflow-task-card-route span {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-task-card-route span svg {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  color: rgba(216, 255, 114, 0.56);
}

body[data-active-view="aiCanvas"] .workflow-task-source-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

body[data-active-view="aiCanvas"] .workflow-task-source-stats span {
  min-width: 0;
  height: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.46);
  background: rgba(255, 255, 255, 0.045);
  font-size: 8.5px;
  font-weight: 400;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-source-stats span.is-failed {
  color: rgba(255, 141, 141, 0.86);
  background: rgba(255, 118, 118, 0.09);
}

body[data-active-view="aiCanvas"] .workflow-task-source-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

body[data-active-view="aiCanvas"] .workflow-task-source-actions button {
  min-width: 0;
  height: 21px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.52);
  background: rgba(255, 255, 255, 0.035);
  font-size: 8.5px;
  font-weight: 400;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-task-source-actions button:hover {
  border-color: rgba(216, 255, 114, 0.24);
  color: rgba(246, 247, 247, 0.84);
  background: rgba(216, 255, 114, 0.075);
}

body[data-active-view="aiCanvas"] .workflow-task-source-actions button svg {
  width: 9px;
  height: 9px;
}

body[data-active-view="aiCanvas"] .workflow-task-source-list {
  min-width: 0;
  display: grid;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-task-source-list .workflow-task-card {
  min-width: 0;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-console-title em {
  color: rgba(84, 105, 24, 0.78);
  background: rgba(126, 151, 30, 0.08);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-source-group {
  border-color: rgba(18, 18, 18, 0.06);
  background: rgba(18, 18, 18, 0.025);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-filter-strip button {
  border-color: rgba(18, 18, 18, 0.06);
  color: rgba(18, 18, 18, 0.5);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-filter-strip button em {
  color: rgba(18, 18, 18, 0.48);
  background: rgba(18, 18, 18, 0.055);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-filter-strip button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-filter-strip button.is-active {
  border-color: rgba(84, 105, 24, 0.24);
  color: rgba(18, 18, 18, 0.78);
  background: rgba(126, 151, 30, 0.08);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-source-group.is-path-focused {
  border-color: rgba(84, 105, 24, 0.24);
  box-shadow:
    0 0 0 1px rgba(126, 151, 30, 0.08),
    0 12px 28px rgba(18, 18, 18, 0.08);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-source-group header span {
  color: rgba(18, 18, 18, 0.74);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-source-focus {
  color: rgba(18, 18, 18, 0.74);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-source-group header em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-source-route b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-card-route span {
  color: rgba(18, 18, 18, 0.46);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-source-route {
  border-color: rgba(18, 18, 18, 0.055);
  background: rgba(18, 18, 18, 0.03);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-source-stats span {
  color: rgba(18, 18, 18, 0.44);
  background: rgba(18, 18, 18, 0.045);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-source-stats span.is-failed {
  color: rgba(154, 42, 42, 0.8);
  background: rgba(182, 56, 56, 0.075);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-source-actions button {
  border-color: rgba(18, 18, 18, 0.055);
  color: rgba(18, 18, 18, 0.48);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-source-actions button:hover {
  border-color: rgba(84, 105, 24, 0.22);
  color: rgba(18, 18, 18, 0.76);
  background: rgba(126, 151, 30, 0.075);
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-selection-toolbar {
    max-width: min(358px, calc(100vw - 76px)) !important;
    transform: translate(-50%, -100%) scale(0.94);
    transform-origin: center bottom;
  }

  body[data-active-view="aiCanvas"] .workflow-selection-meta {
    display: none;
  }

  body[data-active-view="aiCanvas"] .workflow-selection-production-preview {
    width: min(318px, calc(100vw - 76px));
  }

  body[data-active-view="aiCanvas"] .workflow-selection-production-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-active-view="aiCanvas"] .workflow-task-list.has-source-groups {
    grid-auto-columns: minmax(238px, 1fr);
  }
}

/* v1.8.147 Run plan preview: Keling-style preflight sheet summarizes task mix, engine, cost, and blockers before running. */
body[data-active-view="aiCanvas"] .workflow-run-plan-preview[hidden] {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-preview {
  position: fixed;
  top: 74px;
  right: 18px;
  z-index: 960;
  width: min(432px, calc(100vw - 28px));
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-card {
  pointer-events: auto;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 18px;
  color: rgba(246, 247, 247, 0.88);
  background:
    radial-gradient(circle at 16% 0%, rgba(216, 255, 114, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(24, 25, 25, 0.96), rgba(12, 13, 13, 0.94));
  box-shadow:
    0 24px 68px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-card.is-failed {
  border-color: rgba(255, 118, 118, 0.24);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 118, 118, 0.13), transparent 32%),
    linear-gradient(180deg, rgba(24, 25, 25, 0.96), rgba(12, 13, 13, 0.94));
}

body[data-active-view="aiCanvas"] .workflow-run-plan-head,
body[data-active-view="aiCanvas"] .workflow-run-plan-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-head div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-head span {
  color: rgba(216, 255, 114, 0.78);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-head strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 247, 247, 0.92);
  font-size: 15px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-stats,
body[data-active-view="aiCanvas"] .workflow-run-plan-engine-row {
  display: grid;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-active-view="aiCanvas"] .workflow-run-plan-stats span,
body[data-active-view="aiCanvas"] .workflow-run-plan-engine-row span {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-stats span {
  min-height: 48px;
  display: grid;
  place-items: center;
  color: rgba(246, 247, 247, 0.46);
  font-size: 9px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-stats b {
  display: block;
  color: rgba(246, 247, 247, 0.9);
  font-size: 17px;
  font-weight: 500;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-engine-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-active-view="aiCanvas"] .workflow-run-plan-engine-row span {
  height: 27px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  color: rgba(246, 247, 247, 0.52);
  font-size: 9px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-engine-row svg {
  width: 11px;
  height: 11px;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-engine-row .is-real,
body[data-active-view="aiCanvas"] .workflow-run-plan-engine-row .is-ready {
  color: rgba(216, 255, 114, 0.82);
  background: rgba(216, 255, 114, 0.075);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-engine-row .is-failed {
  color: rgba(255, 141, 141, 0.88);
  background: rgba(255, 118, 118, 0.09);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-issues {
  display: grid;
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-issues span,
body[data-active-view="aiCanvas"] .workflow-run-plan-mock-note {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 118, 118, 0.16);
  border-radius: 12px;
  color: rgba(255, 171, 171, 0.9);
  background: rgba(255, 118, 118, 0.065);
  font-size: 10px;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-issues span {
  display: flex;
  gap: 6px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-issues svg,
body[data-active-view="aiCanvas"] .workflow-run-plan-mock-note svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-mock-note {
  border-color: rgba(216, 255, 114, 0.12);
  color: rgba(246, 247, 247, 0.52);
  background: rgba(216, 255, 114, 0.045);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-mock-note span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: rgba(216, 255, 114, 0.8);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-mock-note em {
  color: rgba(246, 247, 247, 0.46);
  font-style: normal;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-list {
  max-height: 236px;
  display: grid;
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-list article.is-failed {
  border-color: rgba(255, 118, 118, 0.16);
  background: rgba(255, 118, 118, 0.055);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-list article > svg {
  width: 28px;
  height: 28px;
  padding: 7px;
  border-radius: 10px;
  color: rgba(216, 255, 114, 0.78);
  background: rgba(216, 255, 114, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-list article.is-failed > svg {
  color: rgba(255, 141, 141, 0.9);
  background: rgba(255, 118, 118, 0.09);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-list div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-list strong,
body[data-active-view="aiCanvas"] .workflow-run-plan-list span,
body[data-active-view="aiCanvas"] .workflow-run-plan-list em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-list strong {
  color: rgba(246, 247, 247, 0.86);
  font-size: 11px;
  font-weight: 500;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-list span,
body[data-active-view="aiCanvas"] .workflow-run-plan-list em {
  color: rgba(246, 247, 247, 0.46);
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-list b {
  color: rgba(246, 247, 247, 0.58);
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
}

/* v1.8.151 Run plan contract: each preflight item exposes safe API input contract without leaking full media payloads. */
body[data-active-view="aiCanvas"] .workflow-run-plan-contract {
  min-width: 0;
  margin-top: 6px;
  border: 1px solid rgba(216, 255, 114, 0.09);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-contract summary {
  min-width: 0;
  min-height: 28px;
  display: grid;
  grid-template-columns: 14px auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 0 8px;
  color: rgba(216, 255, 114, 0.78);
  cursor: pointer;
  list-style: none;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-contract summary::-webkit-details-marker {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-contract summary svg {
  width: 12px;
  height: 12px;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-contract summary span,
body[data-active-view="aiCanvas"] .workflow-run-plan-contract summary b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 500;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-contract summary b {
  justify-self: end;
  max-width: 168px;
  color: rgba(246, 247, 247, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-contract-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px !important;
  padding: 0 7px 7px;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-contract-grid span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  overflow: visible;
  white-space: normal;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-contract-grid b,
body[data-active-view="aiCanvas"] .workflow-run-plan-contract-grid em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-style: normal;
  font-weight: 400;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-contract-grid b {
  color: rgba(246, 247, 247, 0.38);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-contract-grid em {
  color: rgba(246, 247, 247, 0.68);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-contract pre {
  max-height: 122px;
  margin: 0 7px 7px;
  padding: 8px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 9px;
  color: rgba(246, 247, 247, 0.58);
  background: rgba(0, 0, 0, 0.22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 8px;
  font-weight: 400;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* v1.8.153 Run plan copy: preflight contracts can export safe payload snapshots for API handoff/debugging. */
body[data-active-view="aiCanvas"] .workflow-run-plan-copy {
  width: calc(100% - 14px);
  min-height: 28px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin: 0 7px 7px;
  border: 1px solid rgba(216, 255, 114, 0.16);
  border-radius: 9px;
  color: rgba(216, 255, 114, 0.82);
  background: rgba(216, 255, 114, 0.055);
  font-size: 9px;
  font-weight: 500;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-copy svg {
  width: 11px;
  height: 11px;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-copy:hover {
  border-color: rgba(216, 255, 114, 0.28);
  background: rgba(216, 255, 114, 0.095);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-actions button {
  height: 31px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.58);
  background: rgba(255, 255, 255, 0.045);
  font-size: 10px;
  font-weight: 500;
}

body[data-active-view="aiCanvas"] .workflow-run-plan-actions button.is-primary {
  min-width: 118px;
  border-color: rgba(216, 255, 114, 0.34);
  color: rgba(18, 20, 20, 0.92);
  background: rgba(216, 255, 114, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-run-plan-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-card {
  border-color: rgba(18, 18, 18, 0.075);
  color: rgba(18, 18, 18, 0.86);
  background:
    radial-gradient(circle at 16% 0%, rgba(126, 151, 30, 0.09), transparent 34%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 58px rgba(18, 18, 18, 0.12);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-head strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-stats b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-list strong {
  color: rgba(18, 18, 18, 0.82);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-engine-row .is-real,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-engine-row .is-ready,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-mock-note span {
  color: rgba(84, 105, 24, 0.82);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-stats span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-engine-row span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-list article,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-actions button {
  border-color: rgba(18, 18, 18, 0.06);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-stats span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-engine-row span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-list span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-list em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-list b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-mock-note,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-mock-note em {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-contract {
  border-color: rgba(84, 105, 24, 0.12);
  background: rgba(255, 255, 255, 0.58);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-contract summary {
  color: rgba(84, 105, 24, 0.82);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-contract summary b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-contract-grid b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-contract pre {
  color: rgba(18, 18, 18, 0.46);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-contract-grid span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-contract pre {
  border-color: rgba(18, 18, 18, 0.055);
  background: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-contract-grid em {
  color: rgba(18, 18, 18, 0.66);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-copy {
  border-color: rgba(84, 105, 24, 0.16);
  color: rgba(84, 105, 24, 0.82);
  background: rgba(126, 151, 30, 0.055);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-copy:hover {
  border-color: rgba(84, 105, 24, 0.26);
  background: rgba(126, 151, 30, 0.09);
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-run-plan-preview {
    top: 62px;
    right: 10px;
    left: 10px;
    width: auto;
  }

  body[data-active-view="aiCanvas"] .workflow-run-plan-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-active-view="aiCanvas"] .workflow-run-plan-engine-row {
    grid-template-columns: 1fr;
  }

  body[data-active-view="aiCanvas"] .workflow-run-plan-contract-grid {
    grid-template-columns: 1fr;
  }
}

/* v1.8.96 Node lock: prevent accidental edits on finished workflow chains. */
body[data-active-view="aiCanvas"] .workflow-node.is-locked {
  border-color: rgba(255, 255, 255, 0.18) !important;
  cursor: default;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 54px rgba(0, 0, 0, 0.36) !important;
}

body[data-active-view="aiCanvas"] .workflow-node.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 8px);
  opacity: 0.34;
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-node.is-locked > * {
  position: relative;
  z-index: 1;
}

body[data-active-view="aiCanvas"] .workflow-node.is-locked.is-selected {
  border-color: rgba(216, 255, 114, 0.52) !important;
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.34),
    0 0 0 5px rgba(216, 255, 114, 0.08),
    0 26px 78px rgba(0, 0, 0, 0.44) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-lock-badge {
  height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  color: rgba(246, 247, 247, 0.62);
  background: rgba(255, 255, 255, 0.055);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
}

body[data-active-view="aiCanvas"] .workflow-node-lock-badge svg {
  width: 11px;
  height: 11px;
  stroke-width: 2;
}

body[data-active-view="aiCanvas"] .workflow-node button:disabled,
body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(1);
}

body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button.is-disabled,
body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button:disabled {
  color: rgba(246, 247, 247, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-locked {
  border-color: rgba(18, 18, 18, 0.16) !important;
  box-shadow:
    0 0 0 1px rgba(18, 18, 18, 0.06),
    0 18px 44px rgba(18, 18, 18, 0.12) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-locked::after {
  background:
    repeating-linear-gradient(135deg, rgba(18, 18, 18, 0.035) 0 1px, transparent 1px 8px);
  opacity: 0.46;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-lock-badge {
  color: rgba(18, 18, 18, 0.5);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.045);
}

/* v1.8.97 Workflow groups: frame selected node chains like a professional infinite canvas. */
body[data-active-view="aiCanvas"] .workflow-node-group {
  z-index: 0;
  min-width: 320px;
  padding: 11px;
  border: 1px solid rgba(216, 255, 114, 0.2) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(216, 255, 114, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(13, 14, 15, 0.48) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 58px rgba(0, 0, 0, 0.22) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-group::before {
  left: 16px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg, rgba(216, 255, 114, 0.74), rgba(118, 231, 197, 0.24));
}

body[data-active-view="aiCanvas"] .workflow-node-group .workflow-node-head {
  position: absolute;
  left: 14px;
  top: 12px;
  right: 14px;
  z-index: 3;
  pointer-events: auto;
}

body[data-active-view="aiCanvas"] .workflow-node-group .workflow-node-head span {
  color: rgba(216, 255, 114, 0.9);
  border: 1px solid rgba(216, 255, 114, 0.16);
  background: rgba(216, 255, 114, 0.07);
}

body[data-active-view="aiCanvas"] .workflow-node-group .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-node-group .workflow-node-progress {
  display: none;
}

body[data-active-view="aiCanvas"] .workflow-group-node-card {
  height: 100%;
  min-height: 190px;
  padding: 50px 16px 16px;
  display: grid;
  align-content: start;
  gap: 8px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 22px 22px, rgba(216, 255, 114, 0.08) 0 1px, transparent 1px 18px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012));
  pointer-events: none;
}

body[data-active-view="aiCanvas"] .workflow-group-node-card strong {
  color: rgba(250, 250, 249, 0.86);
  font-size: 14px;
  font-weight: 600;
}

body[data-active-view="aiCanvas"] .workflow-group-node-card p {
  max-width: 320px;
  min-height: 0;
  color: rgba(250, 250, 249, 0.44);
  font-size: 11px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
}

body[data-active-view="aiCanvas"] .workflow-group-node-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-active-view="aiCanvas"] .workflow-group-node-meta span {
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: rgba(250, 250, 249, 0.58);
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
}

body[data-active-view="aiCanvas"] .workflow-group-node-meta svg {
  width: 12px;
  height: 12px;
}

body[data-active-view="aiCanvas"] .workflow-node-group.is-selected {
  border-color: rgba(216, 255, 114, 0.58) !important;
  box-shadow:
    0 0 0 1px rgba(216, 255, 114, 0.24),
    0 0 0 5px rgba(216, 255, 114, 0.08),
    0 28px 80px rgba(0, 0, 0, 0.34) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-group {
  border-color: rgba(126, 151, 30, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(126, 151, 30, 0.055), rgba(255, 255, 255, 0.42)),
    rgba(255, 255, 255, 0.54) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-group .workflow-node-head span {
  color: rgba(68, 82, 20, 0.8);
  border-color: rgba(126, 151, 30, 0.14);
  background: rgba(126, 151, 30, 0.07);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-group-node-card strong {
  color: rgba(18, 18, 18, 0.78);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-group-node-card p {
  color: rgba(18, 18, 18, 0.46);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-group-node-meta span {
  color: rgba(18, 18, 18, 0.52);
  border-color: rgba(18, 18, 18, 0.08);
  background: rgba(18, 18, 18, 0.04);
}

/* v1.8.101 Group inspector: make workflow groups behave like canvas frames. */
body[data-active-view="aiCanvas"] .workflow-node-group {
  --workflow-group-accent-rgb: 216, 255, 114;
  --workflow-group-accent: rgba(var(--workflow-group-accent-rgb), 0.86);
  --workflow-group-accent-soft: rgba(var(--workflow-group-accent-rgb), 0.1);
  --workflow-group-accent-line: rgba(var(--workflow-group-accent-rgb), 0.34);
  border-color: var(--workflow-group-accent-line) !important;
  background:
    linear-gradient(180deg, rgba(var(--workflow-group-accent-rgb), 0.07), rgba(255, 255, 255, 0.018)),
    rgba(13, 14, 15, 0.5) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-group.is-tone-blue {
  --workflow-group-accent-rgb: 126, 186, 255;
}

body[data-active-view="aiCanvas"] .workflow-node-group.is-tone-rose {
  --workflow-group-accent-rgb: 255, 134, 188;
}

body[data-active-view="aiCanvas"] .workflow-node-group.is-tone-neutral {
  --workflow-group-accent-rgb: 198, 204, 213;
}

body[data-active-view="aiCanvas"] .workflow-node-group::before {
  background: linear-gradient(90deg, var(--workflow-group-accent), rgba(var(--workflow-group-accent-rgb), 0.18));
}

body[data-active-view="aiCanvas"] .workflow-node-group .workflow-node-head span {
  color: var(--workflow-group-accent);
  border-color: rgba(var(--workflow-group-accent-rgb), 0.18);
  background: rgba(var(--workflow-group-accent-rgb), 0.08);
}

body[data-active-view="aiCanvas"] .workflow-group-node-card {
  background:
    radial-gradient(circle at 22px 22px, rgba(var(--workflow-group-accent-rgb), 0.11) 0 1px, transparent 1px 18px),
    linear-gradient(135deg, rgba(var(--workflow-group-accent-rgb), 0.055), rgba(255, 255, 255, 0.014));
}

body[data-active-view="aiCanvas"] .workflow-node-group.is-selected {
  border-color: rgba(var(--workflow-group-accent-rgb), 0.68) !important;
  box-shadow:
    0 0 0 1px rgba(var(--workflow-group-accent-rgb), 0.3),
    0 0 0 5px rgba(var(--workflow-group-accent-rgb), 0.09),
    0 28px 80px rgba(0, 0, 0, 0.34) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-group {
  background:
    linear-gradient(180deg, rgba(var(--workflow-group-accent-rgb), 0.08), rgba(255, 255, 255, 0.5)),
    rgba(255, 255, 255, 0.58) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-group .workflow-node-head span {
  color: rgba(var(--workflow-group-accent-rgb), 0.92);
  border-color: rgba(var(--workflow-group-accent-rgb), 0.2);
  background: rgba(var(--workflow-group-accent-rgb), 0.1);
}

body[data-active-view="aiCanvas"] .workflow-group-inspector-card {
  --workflow-group-accent-rgb: 216, 255, 114;
  display: grid;
  gap: 12px;
}

body[data-active-view="aiCanvas"] .workflow-group-inspector-card.is-tone-blue {
  --workflow-group-accent-rgb: 126, 186, 255;
}

body[data-active-view="aiCanvas"] .workflow-group-inspector-card.is-tone-rose {
  --workflow-group-accent-rgb: 255, 134, 188;
}

body[data-active-view="aiCanvas"] .workflow-group-inspector-card.is-tone-neutral {
  --workflow-group-accent-rgb: 198, 204, 213;
}

body[data-active-view="aiCanvas"] .workflow-inspector.is-group-selection {
  min-width: 286px;
}

body[data-active-view="aiCanvas"] .workflow-group-inspector-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-active-view="aiCanvas"] .workflow-group-inspector-summary span {
  min-height: 54px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: rgba(250, 250, 249, 0.5);
  background: rgba(255, 255, 255, 0.035);
  font-size: 11px;
}

body[data-active-view="aiCanvas"] .workflow-group-inspector-summary b {
  display: block;
  margin-bottom: 4px;
  color: rgba(250, 250, 249, 0.84);
  font-size: 18px;
  font-weight: 500;
}

body[data-active-view="aiCanvas"] .workflow-group-inspector-map {
  position: relative;
  height: 82px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.12) 1px, transparent 0) 0 0 / 14px 14px,
    linear-gradient(135deg, rgba(var(--workflow-group-accent-rgb), 0.075), rgba(255, 255, 255, 0.025));
}

body[data-active-view="aiCanvas"] .workflow-group-inspector-map i {
  position: absolute;
  min-width: 20px;
  min-height: 18px;
  border: 1px solid rgba(var(--workflow-group-accent-rgb), 0.44);
  border-radius: 10px;
  background: rgba(var(--workflow-group-accent-rgb), 0.13);
  box-shadow: 0 0 0 3px rgba(var(--workflow-group-accent-rgb), 0.065);
}

body[data-active-view="aiCanvas"] .workflow-group-inspector-status {
  color: rgba(250, 250, 249, 0.48);
  font-size: 11px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-group-inspector-summary span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-group-inspector-map {
  border-color: rgba(18, 18, 18, 0.08);
  background-color: rgba(18, 18, 18, 0.035);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-group-inspector-summary span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-group-inspector-status {
  color: rgba(18, 18, 18, 0.48);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-group-inspector-summary b {
  color: rgba(18, 18, 18, 0.8);
}

/* v1.8.103 Group collapse: compact frame shelves for large workflow sections. */
body[data-active-view="aiCanvas"] .workflow-node-group.is-collapsed {
  min-width: 320px;
  border-style: solid !important;
  border-radius: 21px !important;
  background:
    linear-gradient(135deg, rgba(var(--workflow-group-accent-rgb), 0.12), rgba(255, 255, 255, 0.025)),
    rgba(13, 14, 15, 0.72) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 14px 42px rgba(0, 0, 0, 0.3) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-group.is-collapsed::before {
  left: 16px;
  right: auto;
  width: 74px;
  height: 3px;
  border-radius: 999px;
}

body[data-active-view="aiCanvas"] .workflow-node-group.is-collapsed .workflow-node-head {
  top: 10px;
}

body[data-active-view="aiCanvas"] .workflow-node-group.is-collapsed .workflow-group-node-card {
  min-height: 0;
  padding: 48px 14px 14px;
  gap: 7px;
  align-content: center;
  border-radius: 16px;
  background:
    radial-gradient(circle at 24px 24px, rgba(var(--workflow-group-accent-rgb), 0.14) 0 1px, transparent 1px 17px),
    linear-gradient(135deg, rgba(var(--workflow-group-accent-rgb), 0.075), rgba(255, 255, 255, 0.018));
}

body[data-active-view="aiCanvas"] .workflow-node-group.is-collapsed .workflow-group-node-card p {
  max-width: none;
  -webkit-line-clamp: 1;
}

body[data-active-view="aiCanvas"] .workflow-node-group.is-collapsed .workflow-group-node-meta {
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-node-group.is-collapsed .workflow-group-node-meta span {
  height: 22px;
  padding: 0 7px;
  font-size: 9.5px;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-group.is-collapsed {
  background:
    linear-gradient(135deg, rgba(var(--workflow-group-accent-rgb), 0.12), rgba(255, 255, 255, 0.62)),
    rgba(255, 255, 255, 0.78) !important;
}

@keyframes workflowSoftPulse {
  0%, 100% {
    opacity: 0.72;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* v1.8.141 Node action dock: model nodes expose route, prompt, media, API, cost, and output readiness before running. */
body[data-active-view="aiCanvas"] .workflow-generator-compose {
  grid-template-rows: 26px 25px 42px minmax(22px, 1fr) 31px !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix {
  min-width: 0;
  margin: 0 9px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix span {
  position: relative;
  min-width: 0;
  height: 18px;
  padding: 0 6px;
  display: grid;
  grid-template-columns: 11px minmax(0, auto) minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.058);
  border-radius: 7px;
  color: rgba(246, 247, 247, 0.56);
  background: rgba(255, 255, 255, 0.022);
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix span > *:not(u) {
  position: relative;
  z-index: 1;
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix u {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(216, 255, 114, 0.13), rgba(116, 228, 165, 0.06));
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  transition: width 180ms ease, opacity 180ms ease;
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix svg {
  width: 10.5px;
  height: 10.5px;
  stroke-width: 1.8;
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix b,
body[data-active-view="aiCanvas"] .workflow-generator-input-matrix em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8.8px;
  font-style: normal;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix b {
  color: rgba(246, 247, 247, 0.42);
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix em {
  color: rgba(246, 247, 247, 0.76);
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-ok,
body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-ready {
  border-color: rgba(116, 228, 165, 0.18);
  background: rgba(116, 228, 165, 0.045);
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-ok svg,
body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-ready svg {
  color: rgba(116, 228, 165, 0.92);
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-warn,
body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-mock {
  border-color: rgba(216, 255, 114, 0.16);
  background: rgba(216, 255, 114, 0.038);
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-warn svg,
body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-mock svg {
  color: rgba(216, 255, 114, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-missing,
body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-blocked {
  border-color: rgba(255, 118, 118, 0.22);
  background: rgba(255, 118, 118, 0.055);
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-missing svg,
body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-blocked svg {
  color: rgba(255, 118, 118, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-running {
  border-color: rgba(216, 255, 114, 0.34);
  color: rgba(246, 247, 247, 0.86);
  background: rgba(216, 255, 114, 0.055);
  box-shadow: 0 0 0 1px rgba(216, 255, 114, 0.055), 0 0 20px rgba(216, 255, 114, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-running u,
body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-completed u,
body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-failed u {
  opacity: 1;
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-running svg {
  color: rgba(216, 255, 114, 0.98);
  animation: workflowSoftPulse 1.2s ease-in-out infinite;
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-completed {
  border-color: rgba(116, 228, 165, 0.22);
  background: rgba(116, 228, 165, 0.06);
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-completed u {
  background: linear-gradient(90deg, rgba(116, 228, 165, 0.13), rgba(116, 228, 165, 0.035));
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-failed {
  border-color: rgba(255, 118, 118, 0.38);
  background: rgba(255, 118, 118, 0.075);
  box-shadow: 0 0 0 1px rgba(255, 118, 118, 0.07), 0 0 18px rgba(255, 118, 118, 0.08);
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-failed u {
  background: linear-gradient(90deg, rgba(255, 118, 118, 0.18), rgba(255, 118, 118, 0.035));
}

body[data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-waiting {
  opacity: 0.72;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-input-matrix span {
  color: rgba(18, 18, 18, 0.58);
  border-color: rgba(18, 18, 18, 0.07);
  background: rgba(18, 18, 18, 0.03);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-input-matrix b {
  color: rgba(18, 18, 18, 0.42);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-input-matrix em {
  color: rgba(18, 18, 18, 0.74);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-ok,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-ready {
  border-color: rgba(30, 132, 76, 0.16);
  background: rgba(30, 132, 76, 0.055);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-warn,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-mock {
  border-color: rgba(135, 122, 20, 0.18);
  background: rgba(135, 122, 20, 0.055);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-missing,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-blocked {
  border-color: rgba(190, 52, 52, 0.18);
  background: rgba(190, 52, 52, 0.055);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-running {
  border-color: rgba(120, 118, 20, 0.24);
  background: rgba(130, 126, 22, 0.07);
  box-shadow: 0 0 0 1px rgba(120, 118, 20, 0.045);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-completed {
  border-color: rgba(30, 132, 76, 0.18);
  background: rgba(30, 132, 76, 0.065);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-generator-input-matrix .is-runtime-failed {
  border-color: rgba(190, 52, 52, 0.24);
  background: rgba(190, 52, 52, 0.075);
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-generator-compose {
    grid-template-rows: 26px 25px auto minmax(22px, 1fr) 31px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-generator-input-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v1.8.141 Node action dock: selected nodes expose compact Keling-style replicate, slot, media, and rerun actions in place. */
body[data-active-view="aiCanvas"] .workflow-node-quick-menu {
  top: -38px !important;
  min-height: 30px;
  gap: 5px;
  align-items: center;
}

body[data-active-view="aiCanvas"] .workflow-node.is-selected .workflow-node-quick-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(-3px) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu-handle {
  height: 29px !important;
  min-width: 0;
  padding: 0 9px !important;
  display: inline-flex !important;
  gap: 5px;
  color: rgba(246, 247, 247, 0.76);
  border-color: rgba(255, 255, 255, 0.082);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
    rgba(18, 19, 21, 0.86);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu-handle b {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 300 !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu-actions {
  width: max-content;
  max-width: min(470px, calc(100vw - 32px)) !important;
  height: 30px !important;
  padding: 3px !important;
  gap: 3px !important;
  overflow: visible !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(14, 15, 16, 0.9) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body[data-active-view="aiCanvas"] .workflow-node:hover .workflow-node-quick-menu-actions,
body[data-active-view="aiCanvas"] .workflow-node.is-selected .workflow-node-quick-menu-actions {
  max-width: min(520px, calc(100vw - 32px)) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button {
  position: relative;
  width: 25px !important;
  min-width: 25px !important;
  height: 24px !important;
  border-radius: 10px !important;
  color: rgba(246, 247, 247, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  background: rgba(255, 255, 255, 0.034) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="run"],
body[data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="input"].is-primary {
  width: auto !important;
  min-width: 54px !important;
  padding: 0 8px !important;
  gap: 5px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="run"] span,
body[data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="input"].is-primary span {
  display: inline !important;
  max-width: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="run"] {
  color: #101315 !important;
  border-color: rgba(216, 255, 114, 0.44) !important;
  background: rgba(216, 255, 114, 0.92) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="input"] {
  color: rgba(130, 207, 255, 0.9);
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="download"],
body[data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="view"] {
  color: rgba(170, 202, 255, 0.86);
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="danger"] {
  color: rgba(255, 126, 126, 0.9);
  background: rgba(255, 126, 126, 0.07) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button:hover {
  transform: translateY(-1px);
  color: rgba(246, 247, 247, 0.96);
  border-color: rgba(246, 247, 247, 0.18) !important;
  background: rgba(246, 247, 247, 0.08) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="run"]:hover {
  color: #101315 !important;
  background: rgba(246, 247, 247, 0.96) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="danger"]:hover {
  color: #161111 !important;
  border-color: rgba(255, 126, 126, 0.45) !important;
  background: rgba(255, 126, 126, 0.9) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-menu-handle,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-menu-actions {
  color: rgba(18, 18, 18, 0.64);
  border-color: rgba(18, 18, 18, 0.075) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 244, 238, 0.82)),
    rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 18px 42px rgba(18, 18, 18, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-menu button {
  color: rgba(18, 18, 18, 0.62);
  border-color: rgba(18, 18, 18, 0.07) !important;
  background: rgba(18, 18, 18, 0.04) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="run"] {
  color: rgba(246, 247, 247, 0.96) !important;
  border-color: rgba(18, 18, 18, 0.18) !important;
  background: rgba(18, 18, 18, 0.88) !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="input"] {
  color: rgba(20, 92, 145, 0.84);
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="danger"] {
  color: rgba(176, 42, 42, 0.82);
  background: rgba(176, 42, 42, 0.055) !important;
}

/* v1.8.170 Midjourney Explore-inspired template browsing rhythm */
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) {
  --template-columns: 5;
  background: #fafafa;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .app-shell {
  grid-template-columns: 184px minmax(0, 1fr);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .sidebar {
  padding: 26px 16px 16px;
  gap: 18px;
  border-right-color: transparent;
  background: #fafafa;
  box-shadow: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .brand-block {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-height: 42px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(18, 18, 18, 0.08);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .brand-mark::before {
  inset: 5px;
  border-radius: 7px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .brand-mark span {
  font-size: 18px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .brand-mark em {
  right: 6px;
  bottom: 6px;
  width: 5px;
  height: 5px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .brand-block .eyebrow {
  display: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .brand-block h1 {
  color: #242424;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-list {
  gap: 6px;
}

.nav-group-label {
  margin: 16px 4px 4px;
  display: block;
  color: rgba(24, 24, 24, 0.46);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.nav-group-label:first-child {
  margin-top: 0;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-item {
  min-height: 38px;
  padding: 0 12px;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  border: 0;
  border-radius: 16px;
  color: rgba(24, 24, 24, 0.62);
  background: transparent;
  font-size: 14px;
  font-weight: 820;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-item svg {
  width: 18px;
  height: 18px;
  color: rgba(24, 24, 24, 0.48);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-item:hover {
  color: #232323;
  background: rgba(24, 24, 24, 0.045);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-item:hover svg {
  color: #232323;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-item.active {
  color: #ef3f35;
  background: #fff0ee;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-item.active svg {
  color: #ef3f35;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .sidebar-bottom {
  gap: 8px;
  border-top: 0;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .side-status {
  min-height: 38px;
  border: 0;
  border-radius: 16px;
  background: rgba(24, 24, 24, 0.045);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .main {
  padding: 26px 30px 32px 20px;
  background: #fafafa;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .topbar {
  min-height: 48px;
  margin: -10px 0 18px;
  padding: 0;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .topbar .eyebrow {
  display: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .topbar h2 {
  color: #242424;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .top-actions {
  gap: 8px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .top-upload-button {
  display: none !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-panel {
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero {
  min-height: 52px;
  margin: 0 auto 28px;
  padding: 0 12px 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 10px 26px rgba(24, 24, 24, 0.045);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-copy {
  max-width: none;
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-copy::before {
  content: "+";
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: rgba(24, 24, 24, 0.34);
  background: rgba(24, 24, 24, 0.045);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-copy .eyebrow,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-copy span {
  display: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-copy h3 {
  min-width: 0;
  margin: 0;
  color: rgba(24, 24, 24, 0.32);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-actions-only {
  min-height: 38px;
  margin-bottom: 18px;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-actions-only .template-library-hero-copy {
  display: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-actions .primary-button,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-actions .text-button {
  min-height: 34px;
  border-radius: 11px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-actions .primary-button {
  border-color: rgba(24, 24, 24, 0.12);
  color: #fff;
  background: #151515;
  box-shadow: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-actions .text-button {
  border-color: rgba(24, 24, 24, 0.08);
  color: rgba(24, 24, 24, 0.7);
  background: rgba(24, 24, 24, 0.04);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-clean-toolbar {
  margin: 0 0 12px;
  gap: 12px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-search-actions {
  min-width: 0;
  flex: 1 1 auto;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .search-box {
  min-height: 38px;
  border-color: rgba(24, 24, 24, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-search-box {
  width: min(420px, 42vw);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .search-box input {
  color: #242424;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .search-box input::placeholder {
  color: rgba(24, 24, 24, 0.36);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .result-count {
  color: rgba(24, 24, 24, 0.46);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-sort-box {
  min-width: 156px;
  color: rgba(24, 24, 24, 0.46);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-sort-box select {
  min-height: 36px;
  border-color: rgba(24, 24, 24, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-category-shell {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-category-head {
  top: 0;
  right: 0;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .tag-manager-toggle {
  border-color: rgba(24, 24, 24, 0.08);
  border-radius: 999px;
  color: rgba(24, 24, 24, 0.54);
  background: rgba(255, 255, 255, 0.78);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-category-filter {
  gap: 10px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-tag-group:first-child .template-tag-buttons {
  padding-right: 106px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-tag-group-title {
  color: rgba(24, 24, 24, 0.44);
  font-size: 12px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-tag-buttons {
  gap: 7px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-category-filter button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  color: rgba(24, 24, 24, 0.58);
  background: transparent;
  font-size: 13px;
  font-weight: 820;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-category-filter button:hover {
  color: #242424;
  background: rgba(24, 24, 24, 0.045);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-category-filter button.active {
  color: #ef3f35;
  background: #fff0ee;
}

.template-section-title {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  min-height: 26px;
}

.template-section-title strong {
  color: #242424;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
}

.favorite-template-framework {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
}

.favorite-template-framework-head {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.favorite-template-framework-head div {
  display: grid;
  gap: 3px;
}

.favorite-template-framework-head span,
.favorite-template-framework-head small {
  color: rgba(24, 24, 24, 0.46);
  font-size: 12px;
  font-weight: 850;
}

.favorite-template-framework-head strong {
  color: #242424;
  font-size: 18px;
  font-weight: 930;
  line-height: 1.1;
}

.favorite-template-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.favorite-template-item {
  min-width: 0;
  padding: 8px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

.favorite-template-item:hover,
.favorite-template-item:focus-visible {
  border-color: rgba(24, 24, 24, 0.18);
  outline: none;
  box-shadow: 0 12px 28px rgba(24, 24, 24, 0.1);
}

.favorite-template-media {
  width: 72px;
  aspect-ratio: var(--template-aspect-ratio, 9 / 16);
  overflow: hidden;
  border-radius: 9px;
  background: #e8e8e5;
}

.favorite-template-media img,
.favorite-template-placeholder {
  width: 100%;
  height: 100%;
}

.favorite-template-media img {
  display: block;
  object-fit: cover;
}

.favorite-template-placeholder {
  display: grid;
  place-items: center;
  color: rgba(24, 24, 24, 0.42);
}

.favorite-template-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.favorite-template-copy span,
.favorite-template-copy small {
  color: rgba(24, 24, 24, 0.52);
  font-size: 12px;
  font-weight: 780;
}

.favorite-template-copy strong {
  min-width: 0;
  color: #242424;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 900;
}

.favorite-template-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.favorite-template-actions .template-card-engagement-button {
  min-height: 30px;
  color: rgba(24, 24, 24, 0.7);
  background: rgba(24, 24, 24, 0.06);
  border-color: rgba(24, 24, 24, 0.08);
  text-shadow: none;
}

.favorite-template-actions .template-card-engagement-button:hover,
.favorite-template-actions .template-card-engagement-button:focus-visible,
.favorite-template-actions .template-card-engagement-button.is-active {
  color: #111;
  background: #fff;
}

.favorite-template-empty {
  min-height: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: rgba(24, 24, 24, 0.42);
  border: 1px dashed rgba(24, 24, 24, 0.12);
  border-radius: 12px;
}

.favorite-template-empty strong {
  font-size: 13px;
  font-weight: 880;
}

body[data-active-view="templateFavorites"] {
  background: #fafafa;
}

body[data-active-view="templateFavorites"] .app-shell {
  grid-template-columns: 184px minmax(0, 1fr);
}

body[data-active-view="templateFavorites"] .sidebar {
  padding: 26px 16px 16px;
  gap: 18px;
  border-right-color: transparent;
  background: #fafafa;
  box-shadow: none;
}

body[data-active-view="templateFavorites"] .brand-block {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-height: 42px;
}

body[data-active-view="templateFavorites"] .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(18, 18, 18, 0.08);
}

body[data-active-view="templateFavorites"] .brand-mark::before {
  inset: 5px;
  border-radius: 7px;
}

body[data-active-view="templateFavorites"] .brand-mark span {
  font-size: 18px;
}

body[data-active-view="templateFavorites"] .brand-mark em {
  right: 6px;
  bottom: 6px;
  width: 5px;
  height: 5px;
}

body[data-active-view="templateFavorites"] .brand-block .eyebrow {
  display: none;
}

body[data-active-view="templateFavorites"] .brand-block h1 {
  color: #242424;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
}

body[data-active-view="templateFavorites"] .nav-list {
  gap: 6px;
}

body[data-active-view="templateFavorites"] .nav-item {
  min-height: 38px;
  padding: 0 12px;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  border: 0;
  border-radius: 16px;
  color: rgba(24, 24, 24, 0.62);
  background: transparent;
  font-size: 14px;
  font-weight: 820;
}

body[data-active-view="templateFavorites"] .nav-item svg {
  width: 18px;
  height: 18px;
  color: rgba(24, 24, 24, 0.48);
}

body[data-active-view="templateFavorites"] .nav-item:hover {
  color: #232323;
  background: rgba(24, 24, 24, 0.045);
}

body[data-active-view="templateFavorites"] .nav-item:hover svg {
  color: #232323;
}

body[data-active-view="templateFavorites"] .nav-item.active {
  color: #ef3f35;
  background: #fff0ee;
}

body[data-active-view="templateFavorites"] .nav-item.active svg {
  color: #ef3f35;
}

body[data-active-view="templateFavorites"] .sidebar-bottom {
  gap: 8px;
  border-top: 0;
}

body[data-active-view="templateFavorites"] .side-status {
  min-height: 38px;
  border: 0;
  border-radius: 16px;
  background: rgba(24, 24, 24, 0.045);
}

body[data-active-view="templateFavorites"] .main {
  padding: 26px 30px 32px 20px;
  background: #fafafa;
}

body[data-active-view="templateFavorites"] .topbar {
  min-height: 48px;
  margin: -10px 0 18px;
  padding: 0;
  display: flex;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-active-view="templateFavorites"] .topbar .eyebrow {
  display: none;
}

body[data-active-view="templateFavorites"] .topbar h2 {
  color: #242424;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

body[data-active-view="templateFavorites"] .favorite-page-panel {
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="templateFavorites"] .favorite-page-panel > .template-detail-heading {
  margin: 0 0 14px;
  padding: 0;
  align-items: center;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="templateFavorites"] .favorite-page-panel > .template-detail-heading .eyebrow {
  display: none;
}

body[data-active-view="templateFavorites"] .favorite-page-panel > .template-detail-heading h3 {
  color: #242424;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
}

body[data-active-view="templateFavorites"] .favorite-page-panel > .template-detail-heading span {
  color: rgba(24, 24, 24, 0.46);
  font-size: 13px;
  font-weight: 720;
}

body[data-active-view="templateFavorites"] .favorite-page-panel > .template-detail-heading .text-button,
body[data-active-view="templateFavorites"] .favorite-template-empty .text-button {
  min-height: 34px;
  border-color: rgba(24, 24, 24, 0.08);
  border-radius: 11px;
  color: rgba(24, 24, 24, 0.72);
  background: rgba(24, 24, 24, 0.04);
  box-shadow: none;
}

body[data-active-view="templateFavorites"] .favorite-template-page-framework {
  margin: 0;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 10px 26px rgba(24, 24, 24, 0.045);
}

body[data-active-view="templateFavorites"] .favorite-template-rail {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

body[data-active-view="templateFavorites"] .favorite-template-item {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
}

body[data-active-view="templateFavorites"] .favorite-template-media {
  width: 92px;
}

body[data-active-view="templateFavorites"] .favorite-template-actions {
  grid-column: 2;
}

body[data-active-view="templateFavorites"] .favorite-template-masonry {
  display: grid;
  grid-template-columns: repeat(var(--rendered-template-columns, var(--template-columns)), minmax(0, 1fr)) !important;
  gap: 2px !important;
  column-count: auto;
}

body[data-active-view="templateFavorites"] .favorite-content-item {
  min-width: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px auto;
  gap: 12px;
  align-items: stretch;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  box-shadow: none;
}

body[data-active-view="templateFavorites"] .favorite-content-item:hover,
body[data-active-view="templateFavorites"] .favorite-content-item:focus-visible {
  border-color: rgba(24, 24, 24, 0.16);
  outline: none;
  background: #fff;
  box-shadow: 0 14px 34px rgba(24, 24, 24, 0.08);
}

body[data-active-view="templateFavorites"] .favorite-content-main {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

body[data-active-view="templateFavorites"] .favorite-content-kicker,
body[data-active-view="templateFavorites"] .favorite-content-tags,
body[data-active-view="templateFavorites"] .favorite-content-metrics {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

body[data-active-view="templateFavorites"] .favorite-content-kicker span,
body[data-active-view="templateFavorites"] .favorite-content-tags span,
body[data-active-view="templateFavorites"] .favorite-content-metrics span {
  min-height: 24px;
  max-width: 100%;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  color: rgba(24, 24, 24, 0.58);
  background: rgba(24, 24, 24, 0.045);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

body[data-active-view="templateFavorites"] .favorite-content-kicker span:first-child {
  color: #ef3f35;
  background: #fff0ee;
}

body[data-active-view="templateFavorites"] .favorite-content-main strong {
  min-width: 0;
  color: #242424;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 930;
  line-height: 1.18;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body[data-active-view="templateFavorites"] .favorite-content-main p {
  max-width: 880px;
  margin: 0;
  color: rgba(24, 24, 24, 0.58);
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

body[data-active-view="templateFavorites"] .favorite-content-tags span {
  color: rgba(24, 24, 24, 0.52);
  background: rgba(24, 24, 24, 0.035);
}

body[data-active-view="templateFavorites"] .favorite-content-metrics span {
  min-height: 25px;
  color: rgba(24, 24, 24, 0.64);
  background: rgba(255, 255, 255, 0.72);
}

body[data-active-view="templateFavorites"] .favorite-content-metrics svg {
  width: 14px;
  height: 14px;
}

body[data-active-view="templateFavorites"] .favorite-content-preview {
  width: 112px;
  aspect-ratio: var(--template-aspect-ratio, 9 / 16);
  max-height: 156px;
  align-self: center;
  overflow: hidden;
  border-radius: 9px;
  background: #e8e8e5;
}

body[data-active-view="templateFavorites"] .favorite-content-preview img,
body[data-active-view="templateFavorites"] .favorite-content-placeholder {
  width: 100%;
  height: 100%;
}

body[data-active-view="templateFavorites"] .favorite-content-preview img {
  display: block;
  object-fit: cover;
}

body[data-active-view="templateFavorites"] .favorite-content-placeholder {
  display: grid;
  place-items: center;
  color: rgba(24, 24, 24, 0.42);
}

body[data-active-view="templateFavorites"] .favorite-content-actions {
  min-width: 128px;
  display: grid;
  align-content: center;
  gap: 7px;
}

body[data-active-view="templateFavorites"] .favorite-content-actions .text-button,
body[data-active-view="templateFavorites"] .favorite-content-actions .primary-button,
body[data-active-view="templateFavorites"] .favorite-content-actions .template-card-engagement-button {
  width: 100%;
  min-height: 32px;
  justify-content: center;
  border-radius: 10px;
  text-shadow: none;
}

body[data-active-view="templateFavorites"] .favorite-content-actions .template-card-engagement-button {
  color: rgba(24, 24, 24, 0.7);
  background: rgba(24, 24, 24, 0.06);
}

@media (max-width: 900px) {
  body[data-active-view="templateFavorites"] .app-shell {
    grid-template-columns: 1fr;
  }

  body[data-active-view="templateFavorites"] .sidebar {
    position: static;
    height: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-active-view="templateFavorites"] .nav-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
  }

  body[data-active-view="templateFavorites"] .nav-group-label {
    display: none;
  }

  body[data-active-view="templateFavorites"] .nav-item {
    width: auto;
    min-width: max-content;
  }

  body[data-active-view="templateFavorites"] .main {
    padding: 14px 10px 22px;
  }

  body[data-active-view="templateFavorites"] .topbar {
    margin: 0 0 12px;
  }

  body[data-active-view="templateFavorites"] .favorite-content-item {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  body[data-active-view="templateFavorites"] .favorite-content-actions {
    grid-column: 1 / -1;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body[data-active-view="templateFavorites"] .favorite-page-panel > .template-detail-heading {
    align-items: stretch;
  }

  body[data-active-view="templateFavorites"] .favorite-template-rail {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  body[data-active-view="templateFavorites"] .favorite-template-item {
    min-width: 0;
    grid-template-columns: 82px minmax(0, 1fr);
  }

  body[data-active-view="templateFavorites"] .favorite-template-media {
    width: 82px;
  }

  body[data-active-view="templateFavorites"] .favorite-content-item {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-active-view="templateFavorites"] .favorite-content-preview {
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
  }

  body[data-active-view="templateFavorites"] .favorite-content-actions {
    grid-template-columns: 1fr;
  }
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-masonry {
  gap: 2px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-masonry-column {
  gap: 2px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-video-frame {
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: #ececec;
  box-shadow: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card:hover .template-video-frame,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card:focus-visible .template-video-frame {
  transform: translateY(-1px) scale(1.003);
  box-shadow: 0 16px 34px rgba(24, 24, 24, 0.14);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-video-frame::before {
  inset: 0;
  opacity: 0;
  transform: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-video-frame::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .viewport-video video,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-video-poster,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-image-cover {
  object-fit: cover;
  background: #e8e8e5;
  transform: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-video-placeholder {
  color: rgba(24, 24, 24, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(236, 236, 232, 0.78)),
    var(--template-cover-image, none) center / cover no-repeat,
    #e8e8e5;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-video-overlay {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 26%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.2) 48%, transparent 72%);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-badges {
  top: 9px;
  left: 9px;
  right: 9px;
  gap: 6px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-badges span,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .play-chip {
  min-height: 27px;
  max-width: 100%;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.46);
  font-size: 11px;
  line-height: 1;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-copy {
  padding: 10px;
  gap: 7px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-tags {
  gap: 5px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-tags span {
  max-width: min(100%, 92px);
  min-height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 11px;
  line-height: 1;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-parameters {
  gap: 5px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-parameters span {
  min-height: 32px;
  padding: 5px 7px;
  border: 0;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.38);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-parameters em {
  font-size: 9px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-parameters b {
  font-size: 11px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-copy strong {
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.22;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  align-items: center;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-meta b {
  flex: 0 1 auto;
  max-width: 96px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 1.1;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-meta b:nth-child(2) {
  grid-column: auto;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-action-tray {
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-primary-action,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-secondary-action {
  min-height: 32px;
  border-radius: 8px;
  font-size: 12px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-primary-action {
  padding: 0 10px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-secondary-action {
  width: 32px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-cta {
  margin-left: auto;
  min-width: 78px;
  max-width: 88px;
  min-height: 30px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.82);
  font-size: 12px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-button {
  min-height: 30px;
  padding: 0 8px;
  flex: 0 0 auto;
  border: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  font-size: 12px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-button:hover,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-button:focus-visible,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-button.is-active {
  color: #111;
  background: #fff;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template {
  padding-bottom: 0;
  transition: padding-bottom 0.2s ease;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template:hover,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template:focus-within {
  padding-bottom: 48px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-video-frame {
  overflow: visible;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-video-overlay {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 30%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent 44%);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-copy {
  top: calc(100% - 18px);
  bottom: auto;
  padding: 18px 6px 7px;
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0 0 7px 7px;
  background:
    var(--template-cover-image, none) center bottom / cover no-repeat,
    linear-gradient(
      180deg,
      var(--template-extension-top, #26344a) 0%,
      var(--template-extension-mid, #182334) 48%,
      var(--template-extension-bottom, #101723) 100%
    );
  background-blend-mode: soft-light, normal;
  box-shadow: inset 0 1px 0 var(--template-extension-line, #324056);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-copy::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 34px;
  z-index: 0;
  background:
    radial-gradient(circle at 12% 72%, var(--template-extension-spark-a, #485569) 0 1px, transparent 1.9px),
    radial-gradient(circle at 28% 58%, var(--template-extension-spark-b, #3c4a5f) 0 1.2px, transparent 2.3px),
    radial-gradient(circle at 47% 70%, var(--template-extension-spark-a, #4a576c) 0 1px, transparent 2px),
    radial-gradient(circle at 69% 56%, var(--template-extension-spark-c, #35455b) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 86% 74%, var(--template-extension-spark-b, #3d4b60) 0 1px, transparent 2px),
    var(--template-cover-image, none) center bottom / cover no-repeat,
    linear-gradient(
      180deg,
      var(--template-extension-top, #26344a) 0%,
      var(--template-extension-mid, #182334) 58%,
      var(--template-extension-bottom, #101723) 100%
    );
  background-blend-mode: screen, screen, screen, screen, screen, soft-light, normal;
  filter: blur(3px) saturate(1.08);
  transform: translateY(1px);
  mask-image: linear-gradient(180deg, transparent, #000 42%, #000);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%, #000);
  pointer-events: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-copy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0 0 7px 7px;
  background:
    var(--template-cover-image, none) center bottom / cover no-repeat,
    linear-gradient(
      180deg,
      var(--template-extension-top, #26344a) 0%,
      var(--template-extension-mid, #182334) 48%,
      var(--template-extension-bottom, #101723) 100%
    );
  background-blend-mode: soft-light, normal;
  filter: blur(10px) saturate(1.14);
  transform: scale(1.08);
  clip-path: inset(0 round 0 0 7px 7px);
  pointer-events: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-copy > * {
  position: relative;
  z-index: 1;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-badges,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-tags {
  display: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-parameters {
  display: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-parameters span {
  min-height: 26px;
  padding: 4px 7px;
  border: 0;
  border-radius: 7px;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  text-shadow: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-parameters em {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-size: 9px;
  text-shadow: none !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-parameters b {
  color: var(--text);
  font-size: 11px;
  text-shadow: none !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-parameters,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-action-tray {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-parameters,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-action-tray {
  transform: translateY(-4px);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template:hover .template-card-parameters,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template:focus-within .template-card-parameters,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template:hover .template-card-action-tray,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template:focus-within .template-card-action-tray {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template:hover .template-card-copy,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template:focus-within .template-card-copy {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-meta {
  gap: 5px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-meta b {
  min-height: 28px;
  max-width: none;
  padding: 0 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  font-size: 12px;
  text-shadow: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-meta b svg {
  color: rgba(255, 255, 255, 0.74);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-engagement-button {
  min-height: 28px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  text-shadow: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-engagement-button:hover,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-engagement-button:focus-visible,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-engagement-button.is-active {
  color: #111;
  background: #fff;
  box-shadow: 0 8px 18px rgba(24, 24, 24, 0.1);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-action-tray {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-primary-action,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-secondary-action {
  min-height: 32px;
  border: 1px solid #eef2f6;
  border-radius: 7px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-primary-action {
  color: #111;
  background: #eef2f6;
  width: 100%;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-primary-action.is-manual-action {
  color: #111;
  background: #eef2f6;
  box-shadow: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-secondary-action {
  width: 32px;
  border-color: #29364a;
  color: #eef2f6;
  background: #29364a;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-primary-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v1.8.197 Home card inline engagement */
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-inline {
  min-width: 0;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  flex: 0 1 auto;
  pointer-events: auto;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-inline .template-card-engagement-button {
  min-width: 0;
  min-height: 26px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  text-shadow: none;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-inline .template-card-engagement-button:hover,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-inline .template-card-engagement-button:focus-visible,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-inline .template-card-engagement-button.is-active {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-inline .template-card-engagement-button svg {
  width: 13px;
  height: 13px;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-inline .template-card-engagement-button span {
  min-width: 0;
  color: currentColor !important;
  text-shadow: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v1.8.202 Video card engagement stays inside media */
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-video-engagement {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  z-index: 7;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-video-engagement .template-card-engagement-inline {
  max-width: 100%;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  pointer-events: auto;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-video-engagement .template-card-engagement-button {
  min-height: 25px;
  padding: 0 7px;
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-video-engagement .template-card-engagement-button:hover,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-video-engagement .template-card-engagement-button:focus-visible,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-video-engagement .template-card-engagement-button.is-active {
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 900px) {
  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .app-shell {
    grid-template-columns: 1fr;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .sidebar {
    position: static;
    height: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-group-label {
    display: none;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-item {
    width: auto;
    min-width: max-content;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .main {
    padding: 14px 10px 22px;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .topbar {
    margin: 0 0 12px;
  }
}

@media (max-width: 640px) {
  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero {
    margin-bottom: 18px;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-actions-only {
    display: none;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-library-hero-actions {
    display: none;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-clean-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-search-box {
    width: 100%;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-sort-box {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-tag-group:first-child .template-tag-buttons {
    padding-right: 0;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-category-head {
    position: static;
    justify-content: flex-start;
    margin-bottom: 8px;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-copy strong {
    font-size: 15px;
  }

  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-cta {
    min-width: 72px;
  }

  .favorite-template-framework {
    padding: 12px;
  }

  .favorite-template-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  .favorite-template-item {
    min-width: 238px;
    scroll-snap-align: start;
  }
}

/* v1.8.170 Replication workbench follows the template home rhythm */
body[data-active-view="templateGeneration"] {
  background: #fafafa;
}

body[data-active-view="templateGeneration"] .app-shell {
  grid-template-columns: 184px minmax(0, 1fr);
}

body[data-active-view="templateGeneration"] .sidebar {
  padding: 26px 16px 16px;
  gap: 18px;
  border-right-color: transparent;
  background: #fafafa;
  box-shadow: none;
}

body[data-active-view="templateGeneration"] .brand-block {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-height: 42px;
}

body[data-active-view="templateGeneration"] .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(18, 18, 18, 0.08);
}

body[data-active-view="templateGeneration"] .brand-mark::before {
  inset: 5px;
  border-radius: 7px;
}

body[data-active-view="templateGeneration"] .brand-mark span {
  font-size: 18px;
}

body[data-active-view="templateGeneration"] .brand-mark em {
  right: 6px;
  bottom: 6px;
  width: 5px;
  height: 5px;
}

body[data-active-view="templateGeneration"] .brand-block .eyebrow {
  display: none;
}

body[data-active-view="templateGeneration"] .brand-block h1 {
  color: #242424;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
}

body[data-active-view="templateGeneration"] .nav-list {
  gap: 6px;
}

body[data-active-view="templateGeneration"] .nav-item {
  min-height: 38px;
  padding: 0 12px;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  border: 0;
  border-radius: 16px;
  color: rgba(24, 24, 24, 0.62);
  background: transparent;
  font-size: 14px;
  font-weight: 820;
}

body[data-active-view="templateGeneration"] .nav-item svg {
  width: 18px;
  height: 18px;
  color: rgba(24, 24, 24, 0.48);
}

body[data-active-view="templateGeneration"] .nav-item:hover {
  color: #232323;
  background: rgba(24, 24, 24, 0.045);
}

body[data-active-view="templateGeneration"] .nav-item:hover svg {
  color: #232323;
}

body[data-active-view="templateGeneration"] .nav-item.active {
  color: #ef3f35;
  background: #fff0ee;
}

body[data-active-view="templateGeneration"] .nav-item.active svg {
  color: #ef3f35;
}

body[data-active-view="templateGeneration"] .sidebar-bottom {
  gap: 8px;
  border-top: 0;
}

body[data-active-view="templateGeneration"] .side-status {
  min-height: 38px;
  border: 0;
  border-radius: 16px;
  background: rgba(24, 24, 24, 0.045);
}

body[data-active-view="templateGeneration"] .main {
  padding: 26px 30px 32px 20px;
  background: #fafafa;
}

body[data-active-view="templateGeneration"] .topbar {
  min-height: 48px;
  margin: -10px 0 18px;
  padding: 0;
  display: flex;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-active-view="templateGeneration"] .topbar .eyebrow {
  display: none;
}

body[data-active-view="templateGeneration"] .topbar h2 {
  color: #242424;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

body[data-active-view="templateGeneration"] .generation-page-panel {
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="templateGeneration"] .generation-page-panel > .template-detail-heading {
  margin: 0 0 14px;
  padding: 0;
  align-items: center;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="templateGeneration"] .generation-page-panel > .template-generation-heading-actions {
  justify-content: flex-end;
  margin-bottom: 10px;
}

body[data-active-view="templateGeneration"] .generation-page-panel > .template-detail-heading .eyebrow {
  display: none;
}

body[data-active-view="templateGeneration"] .generation-page-panel > .template-detail-heading h3 {
  color: #242424;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
}

body[data-active-view="templateGeneration"] .generation-page-panel > .template-detail-heading span {
  color: rgba(24, 24, 24, 0.46);
  font-size: 13px;
  font-weight: 720;
}

body[data-active-view="templateGeneration"] .generation-page-panel > .template-detail-heading .text-button,
body[data-active-view="templateGeneration"] .generation-selected-template .text-button,
body[data-active-view="templateGeneration"] .batch-secondary-button {
  min-height: 34px;
  border-color: rgba(24, 24, 24, 0.08);
  border-radius: 11px;
  color: rgba(24, 24, 24, 0.72);
  background: rgba(24, 24, 24, 0.04);
  box-shadow: none;
}

body[data-active-view="templateGeneration"] .generation-template-picker {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 10px 26px rgba(24, 24, 24, 0.045);
}

body[data-active-view="templateGeneration"] .generation-selected-template {
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 12px;
}

body[data-active-view="templateGeneration"] .batch-current-template-panel .generation-selected-template {
  grid-template-columns: 86px minmax(0, 1fr);
}

body[data-active-view="templateGeneration"] .batch-current-template-panel .generation-selected-template .text-button {
  grid-column: 2;
  justify-self: start;
}

body[data-active-view="templateGeneration"] .generation-selected-media {
  width: 86px;
  border: 0;
  border-radius: 8px;
  background: #ececec;
}

body[data-active-view="templateGeneration"] .generation-selected-copy span,
body[data-active-view="templateGeneration"] .generation-selected-copy small {
  color: rgba(24, 24, 24, 0.48);
}

body[data-active-view="templateGeneration"] .generation-selected-copy strong {
  color: #242424;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 900;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body[data-active-view="templateGeneration"] .template-generation-panel {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="templateGeneration"] .batch-generation-grid {
  gap: 12px;
  margin-bottom: 12px;
}

body[data-active-view="templateGeneration"] .batch-panel {
  padding: 14px;
  border-color: rgba(24, 24, 24, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}

body[data-active-view="templateGeneration"] .batch-panel h4 {
  margin-bottom: 12px;
  color: #242424;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

body[data-active-view="templateGeneration"] .batch-drop-zone {
  min-height: 194px;
  border-color: rgba(24, 24, 24, 0.12);
  border-radius: 12px;
  color: rgba(24, 24, 24, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(236, 236, 232, 0.72)),
    #eee;
}

body[data-active-view="templateGeneration"] .batch-drop-zone.folder-import {
  border: 1px solid rgba(24, 24, 24, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(236, 236, 232, 0.66)),
    #eee;
}

body[data-active-view="templateGeneration"] .batch-drop-zone svg,
body[data-active-view="templateGeneration"] .batch-drop-zone.folder-import svg {
  color: rgba(24, 24, 24, 0.56);
}

body[data-active-view="templateGeneration"] .batch-drop-zone strong,
body[data-active-view="templateGeneration"] .batch-upload-list strong,
body[data-active-view="templateGeneration"] .generation-output strong,
body[data-active-view="templateGeneration"] .generation-history-head strong {
  color: #242424;
}

body[data-active-view="templateGeneration"] .batch-drop-zone span,
body[data-active-view="templateGeneration"] .batch-upload-list span,
body[data-active-view="templateGeneration"] .batch-empty-upload,
body[data-active-view="templateGeneration"] .batch-submit-row > span,
body[data-active-view="templateGeneration"] .generation-output span,
body[data-active-view="templateGeneration"] .generation-history-head span {
  color: rgba(24, 24, 24, 0.5);
}

body[data-active-view="templateGeneration"] .batch-drop-zone em,
body[data-active-view="templateGeneration"] .batch-primary-button {
  border-color: rgba(24, 24, 24, 0.12);
  color: #fff;
  background: #151515;
  box-shadow: none;
}

body[data-active-view="templateGeneration"] .batch-upload-list article {
  border-bottom-color: rgba(24, 24, 24, 0.08);
}

body[data-active-view="templateGeneration"] .batch-uploaded-panel .batch-upload-list article {
  border-color: rgba(24, 24, 24, 0.08);
  background: rgba(24, 24, 24, 0.035);
}

body[data-active-view="templateGeneration"] .batch-thumb {
  border-color: rgba(24, 24, 24, 0.08);
  background: #e8e8e5;
}

body[data-active-view="templateGeneration"] .generation-user-simple,
body[data-active-view="templateGeneration"] .generation-duration-control,
body[data-active-view="templateGeneration"] .generation-prompt-chain,
body[data-active-view="templateGeneration"] .generation-history-panel,
body[data-active-view="templateGeneration"] .generation-output,
body[data-active-view="templateGeneration"] .batch-warning {
  border-color: rgba(24, 24, 24, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: none;
}

body[data-active-view="templateGeneration"] .batch-config-panel input,
body[data-active-view="templateGeneration"] .batch-config-panel select,
body[data-active-view="templateGeneration"] .batch-config-panel textarea,
body[data-active-view="templateGeneration"] .generation-count-display,
body[data-active-view="templateGeneration"] .generation-fixed-duration-field strong {
  min-height: 38px;
  border-color: rgba(24, 24, 24, 0.08);
  border-radius: 11px;
  color: #242424;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
}

body[data-active-view="templateGeneration"] .generation-credit-pill {
  border-color: rgba(24, 24, 24, 0.08);
  color: rgba(24, 24, 24, 0.54);
  background: rgba(24, 24, 24, 0.04);
}

body[data-active-view="templateGeneration"] .generation-history-card,
body[data-active-view="templateGeneration"] .generation-history-empty,
body[data-active-view="templateGeneration"] .generation-final-video-card {
  border-color: rgba(24, 24, 24, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

body[data-active-view="templateGeneration"] .generation-picker-panel {
  border-color: rgba(24, 24, 24, 0.1);
  background: rgba(250, 250, 250, 0.98);
  box-shadow: 0 28px 86px rgba(15, 23, 42, 0.16);
}

@media (max-width: 900px) {
  body[data-active-view="templateGeneration"] .app-shell {
    grid-template-columns: 1fr;
  }

  body[data-active-view="templateGeneration"] .sidebar {
    position: static;
    height: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-active-view="templateGeneration"] .nav-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
  }

  body[data-active-view="templateGeneration"] .nav-group-label {
    display: none;
  }

  body[data-active-view="templateGeneration"] .nav-item {
    width: auto;
    min-width: max-content;
  }

  body[data-active-view="templateGeneration"] .main {
    padding: 14px 10px 22px;
  }

  body[data-active-view="templateGeneration"] .topbar {
    margin: 0 0 12px;
  }
}

@media (max-width: 640px) {
  body[data-active-view="templateGeneration"] .generation-selected-template {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  body[data-active-view="templateGeneration"] .generation-selected-media {
    width: 70px;
  }

  body[data-active-view="templateGeneration"] .generation-selected-template .text-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  body[data-active-view="templateGeneration"] .batch-current-template-panel .generation-selected-template .text-button {
    grid-column: 1 / -1;
  }

  body[data-active-view="templateGeneration"] .batch-drop-zone {
    min-height: 156px;
  }

  body[data-active-view="templateGeneration"] .batch-uploaded-panel .batch-upload-list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    overflow-x: visible;
    overflow-y: visible;
  }
}

/* v1.8.170 Creator studio follows the template home rhythm */
body[data-active-view="creatorStudio"] {
  --creator-home-text: #242424;
  --creator-home-muted: rgba(24, 24, 24, 0.5);
  --creator-home-line: rgba(24, 24, 24, 0.08);
  --creator-home-soft: rgba(24, 24, 24, 0.04);
  background: #fafafa;
}

body[data-active-view="creatorStudio"] .app-shell {
  grid-template-columns: 184px minmax(0, 1fr);
}

body[data-active-view="creatorStudio"] .sidebar {
  padding: 26px 16px 16px;
  gap: 18px;
  border-right-color: transparent;
  background: #fafafa;
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .brand-block {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-height: 42px;
}

body[data-active-view="creatorStudio"] .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(18, 18, 18, 0.08);
}

body[data-active-view="creatorStudio"] .brand-mark::before {
  inset: 5px;
  border-radius: 7px;
}

body[data-active-view="creatorStudio"] .brand-mark span {
  font-size: 18px;
}

body[data-active-view="creatorStudio"] .brand-mark em {
  right: 6px;
  bottom: 6px;
  width: 5px;
  height: 5px;
}

body[data-active-view="creatorStudio"] .brand-block .eyebrow {
  display: none;
}

body[data-active-view="creatorStudio"] .brand-block h1 {
  color: var(--creator-home-text);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
}

body[data-active-view="creatorStudio"] .nav-list {
  gap: 6px;
}

body[data-active-view="creatorStudio"] .nav-item {
  min-height: 38px;
  padding: 0 12px;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  border: 0;
  border-radius: 16px;
  color: rgba(24, 24, 24, 0.62);
  background: transparent;
  font-size: 14px;
  font-weight: 820;
}

body[data-active-view="creatorStudio"] .nav-item svg {
  width: 18px;
  height: 18px;
  color: rgba(24, 24, 24, 0.48);
}

body[data-active-view="creatorStudio"] .nav-item:hover {
  color: #232323;
  background: rgba(24, 24, 24, 0.045);
}

body[data-active-view="creatorStudio"] .nav-item:hover svg {
  color: #232323;
}

body[data-active-view="creatorStudio"] .nav-item.active {
  color: #ef3f35;
  background: #fff0ee;
}

body[data-active-view="creatorStudio"] .nav-item.active svg {
  color: #ef3f35;
}

body[data-active-view="creatorStudio"] .sidebar-bottom {
  gap: 8px;
  border-top: 0;
}

body[data-active-view="creatorStudio"] .side-status {
  min-height: 38px;
  border: 0;
  border-radius: 16px;
  background: rgba(24, 24, 24, 0.045);
}

body[data-active-view="creatorStudio"] .main {
  padding: 26px 30px 32px 20px;
  background: #fafafa;
}

body[data-active-view="creatorStudio"] .topbar {
  min-height: 48px;
  margin: -10px 0 18px;
  padding: 0;
  display: flex;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-active-view="creatorStudio"] .topbar .eyebrow {
  display: none;
}

body[data-active-view="creatorStudio"] .topbar h2 {
  color: var(--creator-home-text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

body[data-active-view="creatorStudio"] .creator-access-panel {
  min-height: min(620px, calc(100vh - 132px));
  padding: clamp(46px, 8vw, 82px) 18px;
  gap: 10px;
  border-color: var(--creator-home-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  color: var(--creator-home-muted);
}

body[data-active-view="creatorStudio"] .creator-access-panel svg {
  width: 30px;
  height: 30px;
  color: var(--creator-home-text);
}

body[data-active-view="creatorStudio"] .creator-access-panel strong {
  color: var(--creator-home-text);
  font-size: clamp(21px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.18;
}

body[data-active-view="creatorStudio"] .creator-access-panel span {
  color: var(--creator-home-muted);
  font-size: 14px;
  line-height: 1.6;
}

body[data-active-view="creatorStudio"] .creator-access-panel .primary-button {
  min-height: 38px;
  border-color: rgba(24, 24, 24, 0.12);
  border-radius: 11px;
  color: #fff;
  background: #151515;
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-studio-shell {
  min-height: auto;
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
  gap: 12px;
}

body[data-active-view="creatorStudio"] .creator-control-panel,
body[data-active-view="creatorStudio"] .creator-board-panel,
body[data-active-view="creatorStudio"] .creator-result-panel {
  border-color: var(--creator-home-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-control-panel {
  top: 18px;
  max-height: calc(100vh - 52px);
  padding: 12px;
  gap: 8px;
}

body[data-active-view="creatorStudio"] .creator-console-panel {
  background: rgba(255, 255, 255, 0.78);
}

body[data-active-view="creatorStudio"] .creator-section,
body[data-active-view="creatorStudio"] .creator-integrated-settings,
body[data-active-view="creatorStudio"] .creator-inline-upload,
body[data-active-view="creatorStudio"] .creator-quick-model,
body[data-active-view="creatorStudio"] .creator-count-compact,
body[data-active-view="creatorStudio"] .creator-prompt-box,
body[data-active-view="creatorStudio"] .creator-setting-grid label,
body[data-active-view="creatorStudio"] .creator-submit-row,
body[data-active-view="creatorStudio"] .creator-model-row,
body[data-active-view="creatorStudio"] .creator-switch-row,
body[data-active-view="creatorStudio"] .creator-setting-note {
  border-color: var(--creator-home-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-section-head b {
  border-color: var(--creator-home-line);
  border-radius: 10px;
  color: rgba(24, 24, 24, 0.72);
  background: var(--creator-home-soft);
}

body[data-active-view="creatorStudio"] .creator-section-head strong,
body[data-active-view="creatorStudio"] .creator-task-group-tab strong,
body[data-active-view="creatorStudio"] .creator-task-tab strong,
body[data-active-view="creatorStudio"] .creator-mode-tab strong,
body[data-active-view="creatorStudio"] .creator-model-pill strong,
body[data-active-view="creatorStudio"] .creator-upload-card strong,
body[data-active-view="creatorStudio"] .creator-result-head h3,
body[data-active-view="creatorStudio"] .creator-result-toolbar strong,
body[data-active-view="creatorStudio"] .creator-result-history-head strong,
body[data-active-view="creatorStudio"] .creator-result-copy strong {
  color: var(--creator-home-text);
}

body[data-active-view="creatorStudio"] .creator-section-head span,
body[data-active-view="creatorStudio"] .creator-task-group-tab span,
body[data-active-view="creatorStudio"] .creator-task-tab span,
body[data-active-view="creatorStudio"] .creator-mode-tab span,
body[data-active-view="creatorStudio"] .creator-model-pill small,
body[data-active-view="creatorStudio"] .creator-upload-card span,
body[data-active-view="creatorStudio"] .creator-upload-head,
body[data-active-view="creatorStudio"] .creator-path-box span,
body[data-active-view="creatorStudio"] .creator-path-box em,
body[data-active-view="creatorStudio"] .creator-setting-grid label span,
body[data-active-view="creatorStudio"] .creator-result-head span,
body[data-active-view="creatorStudio"] .creator-result-toolbar span,
body[data-active-view="creatorStudio"] .creator-result-history-head span,
body[data-active-view="creatorStudio"] .creator-result-copy span,
body[data-active-view="creatorStudio"] .creator-submit-row span,
body[data-active-view="creatorStudio"] .creator-submit-row em,
body[data-active-view="creatorStudio"] .creator-setting-note {
  color: var(--creator-home-muted);
}

body[data-active-view="creatorStudio"] .creator-task-group-tab,
body[data-active-view="creatorStudio"] .creator-task-tab,
body[data-active-view="creatorStudio"] .creator-mode-tab,
body[data-active-view="creatorStudio"] .creator-model-pill {
  border-color: var(--creator-home-line);
  border-radius: 12px;
  color: rgba(24, 24, 24, 0.62);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-task-group-tab:hover,
body[data-active-view="creatorStudio"] .creator-task-tab:hover,
body[data-active-view="creatorStudio"] .creator-mode-tab:hover,
body[data-active-view="creatorStudio"] .creator-model-pill:hover {
  border-color: rgba(24, 24, 24, 0.14);
  background: rgba(24, 24, 24, 0.04);
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-task-group-tab.active,
body[data-active-view="creatorStudio"] .creator-task-tab.active,
body[data-active-view="creatorStudio"] .creator-mode-tab.active,
body[data-active-view="creatorStudio"] .creator-model-pill.active {
  color: #ef3f35;
  border-color: transparent;
  background: #fff0ee;
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-task-group-tab.active strong,
body[data-active-view="creatorStudio"] .creator-task-group-tab.active span,
body[data-active-view="creatorStudio"] .creator-task-tab.active strong,
body[data-active-view="creatorStudio"] .creator-task-tab.active span,
body[data-active-view="creatorStudio"] .creator-mode-tab.active strong,
body[data-active-view="creatorStudio"] .creator-mode-tab.active span,
body[data-active-view="creatorStudio"] .creator-model-pill.active strong,
body[data-active-view="creatorStudio"] .creator-model-pill.active small {
  color: inherit;
}

body[data-active-view="creatorStudio"] .creator-console-panel .creator-model-pill {
  min-height: 34px;
  border-radius: 999px;
}

body[data-active-view="creatorStudio"] .creator-upload-card {
  border-color: rgba(24, 24, 24, 0.12);
  border-radius: 12px;
  color: rgba(24, 24, 24, 0.62);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(236, 236, 232, 0.7)),
    #eee;
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-upload-card:hover,
body[data-active-view="creatorStudio"] .creator-upload-card.is-dragging {
  border-color: rgba(24, 24, 24, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(236, 236, 232, 0.78)),
    #eee;
}

body[data-active-view="creatorStudio"] .creator-upload-card svg,
body[data-active-view="creatorStudio"] .creator-result-empty svg,
body[data-active-view="creatorStudio"] .creator-result-placeholder {
  color: rgba(24, 24, 24, 0.56);
}

body[data-active-view="creatorStudio"] .creator-upload-card.compact {
  border-color: rgba(24, 24, 24, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(236, 236, 232, 0.7)),
    #eee;
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-upload-list article,
body[data-active-view="creatorStudio"] .creator-upload-empty,
body[data-active-view="creatorStudio"] .creator-result-toolbar,
body[data-active-view="creatorStudio"] .creator-result-history-head,
body[data-active-view="creatorStudio"] .creator-result-empty,
body[data-active-view="creatorStudio"] .creator-board-card,
body[data-active-view="creatorStudio"] .creator-board-empty,
body[data-active-view="creatorStudio"] .creator-batch-notes article {
  border-color: var(--creator-home-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-prompt-box input,
body[data-active-view="creatorStudio"] .creator-prompt-box textarea,
body[data-active-view="creatorStudio"] .creator-setting-grid select,
body[data-active-view="creatorStudio"] .creator-setting-grid input,
body[data-active-view="creatorStudio"] .creator-path-box select,
body[data-active-view="creatorStudio"] .creator-model-select-row select,
body[data-active-view="creatorStudio"] .creator-board-add select,
body[data-active-view="creatorStudio"] .creator-board-add textarea,
body[data-active-view="creatorStudio"] .creator-count-compact input {
  border-color: var(--creator-home-line);
  border-radius: 11px;
  color: var(--creator-home-text);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-prompt-box input:focus,
body[data-active-view="creatorStudio"] .creator-prompt-box textarea:focus,
body[data-active-view="creatorStudio"] .creator-setting-grid select:focus,
body[data-active-view="creatorStudio"] .creator-setting-grid input:focus,
body[data-active-view="creatorStudio"] .creator-path-box select:focus,
body[data-active-view="creatorStudio"] .creator-model-select-row select:focus,
body[data-active-view="creatorStudio"] .creator-board-add select:focus,
body[data-active-view="creatorStudio"] .creator-board-add textarea:focus,
body[data-active-view="creatorStudio"] .creator-count-compact input:focus {
  border-color: rgba(24, 24, 24, 0.22);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(24, 24, 24, 0.055);
}

body[data-active-view="creatorStudio"] .creator-submit-row .text-button,
body[data-active-view="creatorStudio"] .creator-upload-list article > button,
body[data-active-view="creatorStudio"] .creator-result-toolbar .batch-secondary-button,
body[data-active-view="creatorStudio"] .creator-result-history-head .batch-secondary-button {
  min-height: 34px;
  border-color: var(--creator-home-line);
  border-radius: 11px;
  color: rgba(24, 24, 24, 0.72);
  background: var(--creator-home-soft);
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-submit-row .primary-button {
  min-height: 38px;
  border-color: rgba(24, 24, 24, 0.12);
  border-radius: 11px;
  color: #fff;
  background: #151515;
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-board-panel {
  min-height: auto;
  padding: 14px;
  gap: 14px;
}

body[data-active-view="creatorStudio"] .creator-board-head h3 {
  color: var(--creator-home-text);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 900;
  line-height: 1.12;
}

body[data-active-view="creatorStudio"] .creator-result-panel {
  min-height: min(560px, calc(100vh - 86px));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
}

body[data-active-view="creatorStudio"] .creator-history-panel {
  margin-top: 0;
}

body[data-active-view="creatorStudio"] .creator-result-head {
  padding: 14px;
  border-bottom-color: var(--creator-home-line);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
}

body[data-active-view="creatorStudio"] .creator-result-head h3 {
  font-size: 22px;
  font-weight: 900;
}

body[data-active-view="creatorStudio"] .creator-result-head > span {
  border-color: var(--creator-home-line);
  border-radius: 999px;
  background: var(--creator-home-soft);
}

body[data-active-view="creatorStudio"] .creator-result-grid {
  min-height: calc(100vh - 132px);
  padding: 10px;
  gap: 8px;
  background: #f3f3f1;
  background-size: auto;
}

body[data-active-view="creatorStudio"] .creator-result-card {
  border-color: var(--creator-home-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

body[data-active-view="creatorStudio"] .creator-result-media {
  background: #ececea;
}

body[data-active-view="creatorStudio"] .creator-result-media img,
body[data-active-view="creatorStudio"] .creator-result-media video {
  background: #ececea;
}

body[data-active-view="creatorStudio"] .creator-result-copy {
  border-top-color: var(--creator-home-line);
  background: #fff;
}

@media (max-width: 900px) {
  body[data-active-view="creatorStudio"] .app-shell {
    grid-template-columns: 1fr;
  }

  body[data-active-view="creatorStudio"] .sidebar {
    position: static;
    height: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-active-view="creatorStudio"] .nav-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
  }

  body[data-active-view="creatorStudio"] .nav-group-label {
    display: none;
  }

  body[data-active-view="creatorStudio"] .nav-item {
    width: auto;
    min-width: max-content;
  }

  body[data-active-view="creatorStudio"] .main {
    padding: 14px 10px 22px;
  }

  body[data-active-view="creatorStudio"] .topbar {
    margin: 0 0 12px;
  }

  body[data-active-view="creatorStudio"] .creator-studio-shell {
    grid-template-columns: 1fr;
  }

  body[data-active-view="creatorStudio"] .creator-control-panel {
    position: static;
    max-height: none;
  }

  body[data-active-view="creatorStudio"] .creator-access-panel {
    min-height: min(520px, calc(100vh - 260px));
  }
}

@media (max-width: 640px) {
  body[data-active-view="creatorStudio"] .creator-access-panel {
    padding: 48px 16px;
  }

  body[data-active-view="creatorStudio"] .creator-access-panel strong {
    font-size: 22px;
  }

  body[data-active-view="creatorStudio"] .creator-task-group-tabs,
  body[data-active-view="creatorStudio"] .creator-task-tabs,
  body[data-active-view="creatorStudio"] .creator-quick-toolbar,
  body[data-active-view="creatorStudio"] .creator-submit-row {
    grid-template-columns: 1fr;
  }

  body[data-active-view="creatorStudio"] .creator-submit-row > span,
  body[data-active-view="creatorStudio"] .creator-submit-row em,
  body[data-active-view="creatorStudio"] .creator-submit-row .text-button,
  body[data-active-view="creatorStudio"] .creator-submit-row .primary-button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  body[data-active-view="creatorStudio"] .creator-result-grid,
  body[data-active-view="creatorStudio"] .creator-result-history-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-active-view="aiCanvas"] .workflow-node-quick-menu {
    top: -34px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-node-quick-menu-handle {
    display: none !important;
  }

  body[data-active-view="aiCanvas"] .workflow-node-quick-menu-actions {
    max-width: min(360px, calc(100vw - 18px)) !important;
  }

  body[data-active-view="aiCanvas"] .workflow-node-quick-menu button[data-quick-action-role="run"] {
    min-width: 42px !important;
  }
}

/* Final theme integrity guard for late home/workbench layout overrides. */
body[data-theme="dark"][data-active-view="templates"],
body[data-theme="dark"][data-active-view="templateFavorites"],
body[data-theme="dark"][data-active-view="templateGeneration"],
body[data-theme="dark"][data-active-view="creatorStudio"] {
  background: #080808 !important;
}

body[data-theme="dark"][data-active-view="templates"] .sidebar,
body[data-theme="dark"][data-active-view="templateFavorites"] .sidebar,
body[data-theme="dark"][data-active-view="templateGeneration"] .sidebar,
body[data-theme="dark"][data-active-view="creatorStudio"] .sidebar {
  border-right-color: rgba(255, 255, 255, 0.08) !important;
  background: #0f0f0f !important;
}

body[data-theme="dark"][data-active-view="templates"] .main,
body[data-theme="dark"][data-active-view="templateFavorites"] .main,
body[data-theme="dark"][data-active-view="templateGeneration"] .main,
body[data-theme="dark"][data-active-view="creatorStudio"] .main {
  background: #080808 !important;
}

body[data-theme="dark"][data-active-view="templates"] .brand-block h1,
body[data-theme="dark"][data-active-view="templateFavorites"] .brand-block h1,
body[data-theme="dark"][data-active-view="templateGeneration"] .brand-block h1,
body[data-theme="dark"][data-active-view="creatorStudio"] .brand-block h1,
body[data-theme="dark"][data-active-view="templates"] .topbar h2,
body[data-theme="dark"][data-active-view="templateFavorites"] .topbar h2,
body[data-theme="dark"][data-active-view="templateGeneration"] .topbar h2,
body[data-theme="dark"][data-active-view="creatorStudio"] .topbar h2 {
  color: #f3f3f3 !important;
}

body[data-theme="dark"][data-active-view="templates"] .nav-item,
body[data-theme="dark"][data-active-view="templateFavorites"] .nav-item,
body[data-theme="dark"][data-active-view="templateGeneration"] .nav-item,
body[data-theme="dark"][data-active-view="creatorStudio"] .nav-item {
  color: rgba(243, 243, 243, 0.62) !important;
  background: transparent !important;
}

body[data-theme="dark"][data-active-view="templates"] .nav-item svg,
body[data-theme="dark"][data-active-view="templateFavorites"] .nav-item svg,
body[data-theme="dark"][data-active-view="templateGeneration"] .nav-item svg,
body[data-theme="dark"][data-active-view="creatorStudio"] .nav-item svg {
  color: rgba(243, 243, 243, 0.46) !important;
}

body[data-theme="dark"][data-active-view="templates"] .nav-item:hover,
body[data-theme="dark"][data-active-view="templateFavorites"] .nav-item:hover,
body[data-theme="dark"][data-active-view="templateGeneration"] .nav-item:hover,
body[data-theme="dark"][data-active-view="creatorStudio"] .nav-item:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

body[data-theme="dark"][data-active-view="templates"] .nav-item.active,
body[data-theme="dark"][data-active-view="templateFavorites"] .nav-item.active,
body[data-theme="dark"][data-active-view="templateGeneration"] .nav-item.active,
body[data-theme="dark"][data-active-view="creatorStudio"] .nav-item.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body[data-theme="dark"][data-active-view="templates"] .nav-item.active svg,
body[data-theme="dark"][data-active-view="templateFavorites"] .nav-item.active svg,
body[data-theme="dark"][data-active-view="templateGeneration"] .nav-item.active svg,
body[data-theme="dark"][data-active-view="creatorStudio"] .nav-item.active svg {
  color: #fff !important;
}

body[data-theme="dark"][data-active-view="templates"] .side-status,
body[data-theme="dark"][data-active-view="templateFavorites"] .side-status,
body[data-theme="dark"][data-active-view="templateGeneration"] .side-status,
body[data-theme="dark"][data-active-view="creatorStudio"] .side-status {
  color: rgba(243, 243, 243, 0.74) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

body[data-theme="dark"][data-active-view="templates"] .side-status strong,
body[data-theme="dark"][data-active-view="templateFavorites"] .side-status strong,
body[data-theme="dark"][data-active-view="templateGeneration"] .side-status strong,
body[data-theme="dark"][data-active-view="creatorStudio"] .side-status strong {
  color: #f3f3f3 !important;
}

body[data-theme="dark"][data-active-view="templates"] .template-library-hero,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-framework,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-item,
body[data-theme="dark"][data-active-view="templateGeneration"] .generation-template-picker,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-access-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-board-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-panel {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(22, 22, 22, 0.86) !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="templates"] .template-clean-toolbar,
body[data-theme="dark"][data-active-view="templates"] .search-box,
body[data-theme="dark"][data-active-view="templates"] .template-card,
body[data-theme="dark"][data-active-view="templateFavorites"] .template-clean-toolbar,
body[data-theme="dark"][data-active-view="templateFavorites"] .search-box,
body[data-theme="dark"][data-active-view="templateFavorites"] .template-card,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-item,
body[data-theme="dark"][data-active-view="templateFavorites"] .empty-state,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-empty,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-actions .template-card-engagement-button,
body[data-theme="dark"][data-active-view="templateGeneration"] .batch-panel,
body[data-theme="dark"][data-active-view="templateGeneration"] .generation-selected-template,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-upload-card,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-upload-list article,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-model-pill,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-task-tab,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-mode-tab {
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #f3f3f3 !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-framework-head strong,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-copy strong,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-main strong,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-empty strong,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-page-panel > .template-detail-heading h3 {
  color: #f3f3f3 !important;
}

body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-framework-head span,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-framework-head small,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-copy span,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-copy small,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-main p,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-kicker span,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-tags span,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-metrics span,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-empty,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-page-panel > .template-detail-heading span {
  color: rgba(243, 243, 243, 0.56) !important;
}

body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-media,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-preview,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-placeholder,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-template-placeholder {
  color: rgba(243, 243, 243, 0.5) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-kicker span,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-tags span,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-metrics span,
body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-actions .template-card-engagement-button {
  background: rgba(255, 255, 255, 0.07) !important;
}

body[data-theme="dark"][data-active-view="templateFavorites"] .favorite-content-kicker span:first-child {
  color: #fff !important;
  background: rgba(239, 63, 53, 0.22) !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] {
  --creator-home-text: #f3f3f3;
  --creator-home-muted: rgba(243, 243, 243, 0.56);
  --creator-home-line: rgba(255, 255, 255, 0.1);
  --creator-home-soft: rgba(255, 255, 255, 0.06);
}

body[data-theme="light"][data-active-view="aiCanvas"] .app-shell,
body[data-theme="light"][data-active-view="aiCanvas"] .main {
  color: #141414 !important;
  background: #f4f2ed !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #f2efe7;
  --wf-surface: rgba(255, 255, 255, 0.92);
  --wf-panel: rgba(250, 248, 242, 0.94);
  --wf-panel-soft: rgba(18, 18, 18, 0.045);
  --wf-ink: #141414;
  --wf-muted: #6c6e66;
  --wf-line: rgba(18, 18, 18, 0.11);
  --wf-line-strong: rgba(18, 18, 18, 0.28);
  --wf-accent: #151711;
  --wf-accent-2: #277c66;
  --wf-blue: #246f96;
  --wf-success: #16805a;
  --wf-warning: #a66a00;
  --wf-danger: #c94141;
  --wf-info: #246f96;
  color: #141414 !important;
  background: #f4f2ed !important;
}

body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    radial-gradient(circle at 36% 30%, rgba(151, 171, 77, 0.11), transparent 24%),
    radial-gradient(circle at 72% 64%, rgba(72, 150, 185, 0.08), transparent 30%),
    linear-gradient(rgba(18, 18, 18, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.075) 1px, transparent 1px),
    linear-gradient(rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    #f2efe7 !important;
  background-size: auto, auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px, auto !important;
}

/* v1.8.170 All production workspaces follow the Discover rhythm. */
:root {
  --discover-ui-text: #242424;
  --discover-ui-muted: rgba(24, 24, 24, 0.5);
  --discover-ui-line: rgba(24, 24, 24, 0.08);
  --discover-ui-soft: rgba(24, 24, 24, 0.04);
  --discover-ui-panel: rgba(255, 255, 255, 0.78);
  --discover-ui-fill: #fafafa;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) {
  --discover-ui-text: #242424;
  --discover-ui-muted: rgba(24, 24, 24, 0.5);
  --discover-ui-line: rgba(24, 24, 24, 0.08);
  --discover-ui-soft: rgba(24, 24, 24, 0.04);
  --discover-ui-panel: rgba(255, 255, 255, 0.78);
  --discover-ui-fill: #fafafa;
  color: var(--discover-ui-text) !important;
  background: var(--discover-ui-fill) !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .app-shell {
  grid-template-columns: 184px minmax(0, 1fr) !important;
  background: var(--discover-ui-fill) !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .sidebar {
  display: flex !important;
  padding: 26px 16px 16px !important;
  gap: 18px !important;
  border-right-color: transparent !important;
  background: var(--discover-ui-fill) !important;
  box-shadow: none !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .brand-block {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-height: 42px;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(18, 18, 18, 0.08);
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .brand-mark::before {
  inset: 5px;
  border-radius: 7px;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .brand-mark span {
  font-size: 18px;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .brand-mark em {
  right: 6px;
  bottom: 6px;
  width: 5px;
  height: 5px;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .brand-block .eyebrow {
  display: none;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .brand-block h1 {
  color: var(--discover-ui-text) !important;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .nav-list {
  gap: 6px;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .nav-item {
  min-height: 38px;
  padding: 0 12px;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  border: 0 !important;
  border-radius: 16px;
  color: rgba(24, 24, 24, 0.62) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 820 !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .nav-item svg {
  width: 18px;
  height: 18px;
  color: rgba(24, 24, 24, 0.48) !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .nav-item:hover {
  color: #232323 !important;
  background: rgba(24, 24, 24, 0.045) !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .nav-item.active {
  color: #ef3f35 !important;
  background: #fff0ee !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .nav-item.active svg {
  color: #ef3f35 !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .sidebar-bottom {
  gap: 8px;
  border-top: 0;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .side-status {
  min-height: 38px;
  border: 0 !important;
  border-radius: 16px;
  color: rgba(24, 24, 24, 0.62) !important;
  background: rgba(24, 24, 24, 0.045) !important;
  box-shadow: none !important;
}

/* v1.8.232 Detail pages keep the same labeled sidebar as Discover. */
body[data-active-view="templateDetail"] .brand-block > div:not(.brand-mark) {
  display: block !important;
}

body[data-active-view="templateDetail"] .nav-item span {
  display: inline !important;
}

body[data-active-view="templateDetail"] .side-account-copy {
  display: grid !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .main {
  min-height: 100vh;
  padding: 26px 30px 32px 20px !important;
  overflow: auto !important;
  background: var(--discover-ui-fill) !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .topbar {
  min-height: 48px;
  margin: -10px 0 18px;
  padding: 0;
  display: flex !important;
  border-bottom: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .topbar .eyebrow {
  display: none;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .topbar h2 {
  color: var(--discover-ui-text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .panel,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-detail-panel,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-upload-panel,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-center-panel {
  max-width: none;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .panel-heading,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-detail-heading {
  margin: 0 0 14px;
  padding: 0;
  align-items: center;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-detail-heading .eyebrow {
  display: none;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-detail-heading h3,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .panel-heading h3 {
  color: var(--discover-ui-text);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-detail-heading span,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .panel-heading span {
  color: var(--discover-ui-muted);
}

/* v1.8.292 Template detail save action */
body[data-active-view="templateDetail"] .template-detail-heading .template-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

body[data-active-view="templateDetail"] .template-heading-actions,
body[data-active-view="templateDetail"] .template-actions {
  align-items: center;
}

body[data-active-view="templateDetail"] #saveTemplateDraft {
  min-width: 112px;
  border-color: #151515 !important;
  color: #fff !important;
  background: #151515 !important;
}

body[data-active-view="templateDetail"] #saveTemplateDraft.is-saving {
  cursor: wait;
  opacity: 0.78;
}

body[data-active-view="templateDetail"] #saveTemplateDraft.is-saved {
  border-color: rgba(34, 122, 73, 0.86) !important;
  background: #227a49 !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .text-button,
.admin-access-card .text-button,
.account-user-card .text-button,
.permission-upgrade-card .text-button {
  min-height: 34px;
  border-color: var(--discover-ui-line) !important;
  border-radius: 11px;
  color: rgba(24, 24, 24, 0.72) !important;
  background: var(--discover-ui-soft) !important;
  box-shadow: none !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .primary-button,
.admin-access-card .primary-button,
.account-user-card .primary-button,
.permission-upgrade-card .primary-button {
  min-height: 38px;
  border-color: rgba(24, 24, 24, 0.12) !important;
  border-radius: 11px;
  color: #fff !important;
  background: #151515 !important;
  box-shadow: none !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-upload-section,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-slot-card,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-upload-preview,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-upload-module-picker,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-upload-asset-picker,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-upload-flow-controls label,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-upload-switch,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-upload-status,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-edit-panel,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-chain-panel,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-content-panel,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-overview-grid article,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-list-card,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-empty-state,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .admin-user-stats article,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .admin-user-row,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .permission-request-row,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .permission-request-status,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-record-list article,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-generation-card,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-manual-credit-note,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-payment-list article,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-list-empty {
  border-color: var(--discover-ui-line) !important;
  border-radius: 12px;
  background: var(--discover-ui-panel) !important;
  box-shadow: none !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) input,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) select,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) textarea,
.admin-access-card input,
.admin-access-card select,
.admin-access-card textarea,
.account-user-card input,
.account-user-card select {
  border-color: var(--discover-ui-line) !important;
  border-radius: 11px !important;
  color: var(--discover-ui-text) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: none !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) input:focus,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) select:focus,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) textarea:focus,
.admin-access-card input:focus,
.admin-access-card select:focus,
.admin-access-card textarea:focus,
.account-user-card input:focus,
.account-user-card select:focus {
  border-color: rgba(24, 24, 24, 0.22) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(24, 24, 24, 0.055) !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .template-upload-module-chip,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-recharge-presets button,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .admin-user-metrics span,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .permission-request-meta span,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .permission-request-toolbar select,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-task-result-links a {
  border-color: var(--discover-ui-line) !important;
  color: rgba(24, 24, 24, 0.72) !important;
  background: var(--discover-ui-soft) !important;
  box-shadow: none !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-overview-grid strong,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-list-head span,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-record-list b,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .admin-user-main strong,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .admin-user-stats strong,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .permission-request-main strong,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .permission-request-status strong {
  color: var(--discover-ui-text) !important;
}

body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-overview-grid span,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-overview-grid small,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-list-head small,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-record-list span,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .account-record-list small,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .admin-user-main span,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .admin-user-main small,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .admin-user-metrics span,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .permission-request-main span,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .permission-request-main small,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .permission-request-meta span,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .permission-request-status span,
body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .permission-request-status small {
  color: var(--discover-ui-muted) !important;
}

.admin-access-backdrop,
.account-user-dialog {
  background: rgba(250, 250, 250, 0.74) !important;
  backdrop-filter: blur(18px);
}

.admin-access-card,
.permission-upgrade-card,
.account-user-card,
.account-user-summary span,
.account-user-detail-form,
.account-user-detail-grid section {
  border-color: var(--discover-ui-line) !important;
  border-radius: 12px !important;
  color: var(--discover-ui-text) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 28px 86px rgba(15, 23, 42, 0.12) !important;
}

.admin-access-card > svg,
.permission-upgrade-card > svg,
.account-empty-state svg,
.account-manual-credit-note svg {
  color: var(--discover-ui-text) !important;
  background: var(--discover-ui-soft) !important;
}

.admin-access-card h3,
.permission-upgrade-card h3,
.account-user-head h3,
.account-user-summary b {
  color: var(--discover-ui-text) !important;
}

.admin-access-card p,
.admin-access-card label span,
.auth-access-note,
.account-user-head span,
.account-user-summary span,
.account-user-detail-form label span {
  color: var(--discover-ui-muted) !important;
}

.auth-mode-switch,
.permission-request-status {
  border-color: var(--discover-ui-line) !important;
  background: var(--discover-ui-soft) !important;
  box-shadow: none !important;
}

.auth-mode-switch button.active {
  color: #ef3f35 !important;
  background: #fff0ee !important;
}

body[data-active-view="aiCanvas"] .workspace,
body[data-active-view="aiCanvas"] .workspace-view,
body[data-active-view="aiCanvas"] #aiCanvasWorkspace {
  min-height: auto !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #f3f3f1;
  --wf-surface: rgba(255, 255, 255, 0.82);
  --wf-panel: rgba(255, 255, 255, 0.86);
  --wf-panel-soft: rgba(24, 24, 24, 0.045);
  --wf-ink: #242424;
  --wf-muted: rgba(24, 24, 24, 0.52);
  --wf-line: rgba(24, 24, 24, 0.08);
  --wf-line-strong: rgba(24, 24, 24, 0.18);
  --wf-accent: #151515;
  --wf-accent-2: #ef3f35;
  --wf-blue: #246f96;
  --wf-success: #16805a;
  --wf-warning: #a66a00;
  --wf-danger: #c94141;
  width: 100% !important;
  height: calc(100vh - 96px) !important;
  min-height: 680px !important;
  overflow: hidden !important;
  color: var(--wf-ink) !important;
  border: 1px solid var(--discover-ui-line) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-stage {
  min-height: 100% !important;
  background: #f3f3f1 !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-surface {
  height: 100% !important;
  min-height: 640px !important;
  background:
    linear-gradient(rgba(24, 24, 24, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 24, 24, 0.04) 1px, transparent 1px),
    #f3f3f1 !important;
  background-size: 36px 36px, 36px 36px, auto !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-aura {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-topbar {
  inset: 12px 12px auto 12px !important;
}

body[data-active-view="aiCanvas"] .workflow-brand {
  color: var(--wf-ink) !important;
}

body[data-active-view="aiCanvas"] .workflow-brand-mark {
  color: #fff !important;
  background: #151515 !important;
  transform: none !important;
}

body[data-active-view="aiCanvas"] .workflow-brand span,
body[data-active-view="aiCanvas"] .workflow-brand strong {
  color: var(--wf-ink) !important;
  border-left-color: var(--wf-line) !important;
  font-weight: 800 !important;
}

body[data-active-view="aiCanvas"] .workflow-brand em {
  color: var(--wf-muted) !important;
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill,
body[data-active-view="aiCanvas"] .workflow-icon-button,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-sidebar,
body[data-active-view="aiCanvas"] .workflow-canvas-toolbar,
body[data-active-view="aiCanvas"] .workflow-bottom-controls,
body[data-active-view="aiCanvas"] .workflow-inspector,
body[data-active-view="aiCanvas"] .workflow-taskbar,
body[data-active-view="aiCanvas"] .workflow-run-panel,
body[data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-active-view="aiCanvas"] .workflow-console-grid section,
body[data-active-view="aiCanvas"] .workflow-command-card,
body[data-active-view="aiCanvas"] .workflow-context-menu,
body[data-active-view="aiCanvas"] .workflow-link-menu,
body[data-active-view="aiCanvas"] .workflow-api-status-card,
body[data-active-view="aiCanvas"] .workflow-starter-card,
body[data-active-view="aiCanvas"] .workflow-node {
  border-color: var(--wf-line) !important;
  color: var(--wf-ink) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
}

body[data-active-view="aiCanvas"] .workflow-api-status-pill span,
body[data-active-view="aiCanvas"] .workflow-api-status-pill em,
body[data-active-view="aiCanvas"] .workflow-api-status-card span,
body[data-active-view="aiCanvas"] .workflow-node p,
body[data-active-view="aiCanvas"] .workflow-node small,
body[data-active-view="aiCanvas"] .workflow-node-meta small,
body[data-active-view="aiCanvas"] .workflow-node-contract span,
body[data-active-view="aiCanvas"] .workflow-empty > strong,
body[data-active-view="aiCanvas"] .workflow-empty span,
body[data-active-view="aiCanvas"] .workflow-starter-card span,
body[data-active-view="aiCanvas"] .workflow-canvas-status span,
body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-zoom {
  color: var(--wf-muted) !important;
}

body[data-active-view="aiCanvas"] .workflow-run-button,
body[data-active-view="aiCanvas"] .workflow-primary-button,
body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button:first-child {
  color: #fff !important;
  border-color: rgba(24, 24, 24, 0.12) !important;
  background: #151515 !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-icon-button:hover,
body[data-active-view="aiCanvas"] .workflow-tool-button:hover,
body[data-active-view="aiCanvas"] .workflow-primary-button:hover {
  color: var(--wf-ink) !important;
  background: rgba(24, 24, 24, 0.055) !important;
  transform: translateY(-1px);
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button {
  color: rgba(24, 24, 24, 0.62) !important;
  background: transparent !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button:hover,
body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-icon-button.is-active {
  color: #ef3f35 !important;
  background: #fff0ee !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button span {
  color: var(--wf-ink) !important;
  background: #fff !important;
  box-shadow: 0 12px 34px rgba(24, 24, 24, 0.12);
}

body[data-active-view="aiCanvas"] .workflow-empty {
  width: min(900px, calc(100% - 120px)) !important;
  color: var(--wf-muted) !important;
}

body[data-active-view="aiCanvas"] .workflow-empty > svg {
  color: var(--wf-ink) !important;
}

body[data-active-view="aiCanvas"] .workflow-starter-card::after {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-starter-card strong,
body[data-active-view="aiCanvas"] .workflow-node strong,
body[data-active-view="aiCanvas"] .workflow-section-head strong,
body[data-active-view="aiCanvas"] .workflow-panel-head strong,
body[data-active-view="aiCanvas"] .workflow-console-title strong {
  color: var(--wf-ink) !important;
  font-weight: 800 !important;
}

body[data-active-view="aiCanvas"] .workflow-node.is-selected {
  border-color: rgba(24, 24, 24, 0.28) !important;
  box-shadow: 0 0 0 3px rgba(24, 24, 24, 0.07) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-head span {
  color: #fff !important;
  background: #151515 !important;
}

body[data-active-view="aiCanvas"] .workflow-edge {
  stroke: rgba(24, 24, 24, 0.42) !important;
}

body[data-active-view="aiCanvas"] .workflow-edge:hover,
body[data-active-view="aiCanvas"] .workflow-edge.is-selected,
body[data-active-view="aiCanvas"] .workflow-edge.is-running {
  stroke: #151515 !important;
}

body[data-active-view="aiCanvas"] .workflow-edges marker path {
  fill: #151515 !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-tabs button.active,
body[data-active-view="aiCanvas"] .workflow-mode-grid button.active,
body[data-active-view="aiCanvas"] .workflow-inspector-tabs span.active {
  color: #ef3f35 !important;
  background: #fff0ee !important;
}

@media (max-width: 900px) {
  body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .app-shell {
    grid-template-columns: 1fr !important;
  }

  body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .sidebar {
    position: static !important;
    height: auto !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .nav-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
  }

  body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .nav-group-label {
    display: none;
  }

  body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .nav-item {
    width: auto;
    min-width: max-content;
  }

  body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .main {
    padding: 14px 10px 22px !important;
  }

  body:is([data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .topbar {
    margin: 0 0 12px;
  }

  body[data-active-view="aiCanvas"] .workflow-canvas-shell {
    height: calc(100vh - 270px) !important;
    min-height: 560px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-empty {
    width: min(360px, calc(100% - 44px)) !important;
    transform: translate(-50%, -42%) !important;
  }
}

/* v1.8.171 Canvas final Discover guard: override legacy fullscreen/dark canvas rules. */
body[data-active-view="aiCanvas"],
body[data-theme="dark"][data-active-view="aiCanvas"],
body[data-theme="light"][data-active-view="aiCanvas"] {
  color: #151515 !important;
  background: #fafafa !important;
}

body[data-active-view="aiCanvas"] .app-shell,
body[data-theme="dark"][data-active-view="aiCanvas"] .app-shell,
body[data-theme="light"][data-active-view="aiCanvas"] .app-shell {
  display: grid !important;
  grid-template-columns: 184px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  background: #fafafa !important;
}

body[data-active-view="aiCanvas"] .app-shell > .sidebar,
body[data-active-view="aiCanvas"] .sidebar,
body[data-theme="dark"][data-active-view="aiCanvas"] .app-shell > .sidebar,
body[data-theme="dark"][data-active-view="aiCanvas"] .sidebar,
body[data-theme="light"][data-active-view="aiCanvas"] .app-shell > .sidebar,
body[data-theme="light"][data-active-view="aiCanvas"] .sidebar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 40 !important;
  display: flex !important;
  width: 184px !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 18px 16px !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 18px !important;
  color: #151515 !important;
  border-right: 1px solid transparent !important;
  background: #fafafa !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .main,
body[data-theme="dark"][data-active-view="aiCanvas"] .main,
body[data-theme="light"][data-active-view="aiCanvas"] .main {
  min-height: 100vh !important;
  width: auto !important;
  padding: 18px 30px 34px 20px !important;
  overflow: visible !important;
  color: #151515 !important;
  background: #fafafa !important;
}

body[data-active-view="aiCanvas"] .topbar,
body[data-theme="dark"][data-active-view="aiCanvas"] .topbar,
body[data-theme="light"][data-active-view="aiCanvas"] .topbar {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  width: 100% !important;
  height: 48px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: #151515 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] #aiCanvas,
body[data-active-view="aiCanvas"] #aiCanvasWorkspace {
  min-height: auto !important;
  width: 100% !important;
  color: var(--discover-ui-ink) !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-shell,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  width: 100% !important;
  height: calc(100vh - 102px) !important;
  min-height: 700px !important;
  max-height: none !important;
  overflow: hidden !important;
  color: #242424 !important;
  border: 1px solid var(--discover-ui-line) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  body[data-active-view="aiCanvas"] .app-shell,
  body[data-theme="dark"][data-active-view="aiCanvas"] .app-shell,
  body[data-theme="light"][data-active-view="aiCanvas"] .app-shell {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  body[data-active-view="aiCanvas"] .app-shell > .sidebar,
  body[data-active-view="aiCanvas"] .sidebar,
  body[data-theme="dark"][data-active-view="aiCanvas"] .app-shell > .sidebar,
  body[data-theme="dark"][data-active-view="aiCanvas"] .sidebar,
  body[data-theme="light"][data-active-view="aiCanvas"] .app-shell > .sidebar,
  body[data-theme="light"][data-active-view="aiCanvas"] .sidebar {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 12px !important;
  }

  body[data-active-view="aiCanvas"] .main,
  body[data-theme="dark"][data-active-view="aiCanvas"] .main,
  body[data-theme="light"][data-active-view="aiCanvas"] .main {
    width: 100% !important;
    padding: 14px 10px 22px !important;
  }

  body[data-active-view="aiCanvas"] .topbar,
  body[data-theme="dark"][data-active-view="aiCanvas"] .topbar,
  body[data-theme="light"][data-active-view="aiCanvas"] .topbar {
    height: auto !important;
    min-height: 72px !important;
    margin-bottom: 12px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-canvas-shell,
  body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-shell,
  body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
    height: calc(100vh - 295px) !important;
    min-height: 560px !important;
  }
}

/* v1.8.171 Canvas theme guard: late light workbench rules must not override dark mode. */
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #090a0b;
  --wf-surface: rgba(13, 14, 16, 0.84);
  --wf-panel: rgba(18, 19, 21, 0.86);
  --wf-panel-soft: rgba(255, 255, 255, 0.045);
  --wf-ink: rgba(246, 247, 247, 0.9);
  --wf-muted: rgba(246, 247, 247, 0.52);
  --wf-line: rgba(255, 255, 255, 0.085);
  --wf-line-strong: rgba(255, 255, 255, 0.18);
  --wf-accent: rgba(216, 255, 114, 0.94);
  --wf-accent-2: rgba(118, 231, 197, 0.9);
  color: var(--wf-ink) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(216, 255, 114, 0.035), transparent 24%),
    #090a0b !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-stage {
  background: #090a0b !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.026), transparent 28%),
    linear-gradient(rgba(255, 255, 255, 0.036) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    #090a0b !important;
  background-size: auto, 22px 22px, 22px 22px, auto !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-api-status-pill,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-icon-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-tool-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-toolbar,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-bottom-controls,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-taskbar,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-panel,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-console-grid section,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-command-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-context-menu,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-link-menu,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-api-status-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-starter-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node {
  border-color: rgba(255, 255, 255, 0.085) !important;
  color: rgba(246, 247, 247, 0.86) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.01)),
    rgba(16, 17, 19, 0.88) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-brand,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-brand span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-brand strong,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-starter-card strong,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node strong,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-section-head strong,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-panel-head strong,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-console-title strong {
  color: rgba(246, 247, 247, 0.9) !important;
  font-weight: 300 !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-api-status-pill span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-api-status-pill em,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-api-status-card span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node p,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node small,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node-meta small,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node-contract span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-empty > strong,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-empty span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-starter-card span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-status span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-zoom {
  color: rgba(246, 247, 247, 0.52) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-primary-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-toolbar button:first-child {
  color: #111315 !important;
  border-color: rgba(216, 255, 114, 0.3) !important;
  background: rgba(216, 255, 114, 0.92) !important;
}

/* v1.8.185 Sidebar same-style entry: keep the workbench route, remove the large left label. */
.nav-list .nav-item.nav-item-icon-only,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"], [data-active-view="templateGeneration"], [data-active-view="creatorStudio"], [data-active-view="templateDetail"], [data-active-view="templateUpload"], [data-active-view="accountCenter"]) .nav-list .nav-item.nav-item-icon-only,
body[data-theme="dark"] .nav-list .nav-item.nav-item-icon-only,
body[data-theme="light"] .nav-list .nav-item.nav-item-icon-only {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  justify-content: center !important;
  justify-self: start !important;
  text-align: center !important;
}

.nav-list .nav-item.nav-item-icon-only svg,
.nav-list .nav-item.nav-item-icon-only i {
  grid-column: 1 !important;
  margin: 0 !important;
}

/* v1.8.192 Canvas main-interface redesign: restrained production workbench. */
body[data-active-view="aiCanvas"],
body[data-theme="light"][data-active-view="aiCanvas"] {
  --wf-bg: #f6f5f1;
  --wf-surface: #ffffff;
  --wf-panel: #fbfaf7;
  --wf-panel-soft: #f1efea;
  --wf-ink: #151515;
  --wf-muted: #76736d;
  --wf-line: #e4e0d8;
  --wf-line-strong: #cbc5ba;
  --wf-accent: #151515;
  --wf-accent-2: #ef3f35;
  --wf-blue: #276f94;
  --wf-success: #177859;
  --wf-warning: #9b6500;
  --wf-danger: #c94141;
  --wf-info: #276f94;
  color: var(--wf-ink) !important;
  background: #fafafa !important;
}

body[data-active-view="aiCanvas"] .app-shell,
body[data-theme="light"][data-active-view="aiCanvas"] .app-shell {
  grid-template-columns: 184px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  color: var(--wf-ink) !important;
  background: #fafafa !important;
}

body[data-active-view="aiCanvas"] .main,
body[data-theme="light"][data-active-view="aiCanvas"] .main {
  width: auto !important;
  min-height: 100vh !important;
  padding: 18px 30px 26px 20px !important;
  overflow: hidden !important;
  color: var(--wf-ink) !important;
  background: #fafafa !important;
}

body[data-active-view="aiCanvas"] .topbar,
body[data-theme="light"][data-active-view="aiCanvas"] .topbar {
  height: 48px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: var(--wf-ink) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] #aiCanvasWorkspace {
  width: 100% !important;
  min-height: 0 !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  width: 100% !important;
  height: calc(100vh - 88px) !important;
  min-height: 680px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 248px) minmax(520px, 1fr) minmax(270px, 306px) !important;
  grid-template-rows: 54px minmax(0, 1fr) 108px !important;
  grid-template-areas:
    "top top top"
    "left stage right"
    "tasks tasks tasks" !important;
  gap: 8px !important;
  overflow: hidden !important;
  color: var(--wf-ink) !important;
  border: 1px solid var(--wf-line) !important;
  border-radius: 12px !important;
  background: var(--wf-bg) !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell,
body[data-active-view="aiCanvas"] .workflow-canvas-shell * {
  letter-spacing: 0 !important;
}

body[data-active-view="aiCanvas"] .workflow-topbar,
body[data-active-view="aiCanvas"] .workflow-sidebar,
body[data-active-view="aiCanvas"] .workflow-stage,
body[data-active-view="aiCanvas"] .workflow-inspector,
body[data-active-view="aiCanvas"] .workflow-taskbar,
body[data-active-view="aiCanvas"] .workflow-run-panel,
body[data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-active-view="aiCanvas"] .workflow-console-grid section,
body[data-active-view="aiCanvas"] .workflow-command-card,
body[data-active-view="aiCanvas"] .workflow-context-menu,
body[data-active-view="aiCanvas"] .workflow-link-menu,
body[data-active-view="aiCanvas"] .workflow-api-status-card,
body[data-active-view="aiCanvas"] .workflow-starter-card,
body[data-active-view="aiCanvas"] .workflow-node,
body[data-active-view="aiCanvas"] .workflow-real-run-dialog,
body[data-active-view="aiCanvas"] .workflow-run-plan-card,
body[data-active-view="aiCanvas"] .workflow-task-detail-card,
body[data-active-view="aiCanvas"] .workflow-task-diagnostic-card {
  color: var(--wf-ink) !important;
  border-color: var(--wf-line) !important;
  background: var(--wf-surface) !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-topbar {
  grid-area: top !important;
  padding: 6px !important;
  display: grid !important;
  grid-template-columns: minmax(210px, 0.72fr) minmax(250px, 1fr) minmax(300px, auto) !important;
  gap: 8px !important;
  align-items: center !important;
  border-radius: 0 !important;
  border-width: 0 0 1px 0 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(14px) !important;
}

body[data-active-view="aiCanvas"] .workflow-brand {
  min-width: 0 !important;
  gap: 8px !important;
}

body[data-active-view="aiCanvas"] .workflow-brand-mark,
body[data-active-view="aiCanvas"] .workflow-icon-button.workflow-brand-mark {
  width: 34px !important;
  min-height: 34px !important;
  color: #fff !important;
  border-color: #151515 !important;
  background: #151515 !important;
  transform: none !important;
}

body[data-active-view="aiCanvas"] .workflow-brand span,
body[data-active-view="aiCanvas"] .workflow-section-head span,
body[data-active-view="aiCanvas"] .workflow-panel-head span,
body[data-active-view="aiCanvas"] .workflow-taskbar-head span,
body[data-active-view="aiCanvas"] .workflow-field span,
body[data-active-view="aiCanvas"] .workflow-console-title span {
  color: var(--wf-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  text-transform: none !important;
}

body[data-active-view="aiCanvas"] .workflow-brand strong,
body[data-active-view="aiCanvas"] .workflow-section-head strong,
body[data-active-view="aiCanvas"] .workflow-panel-head strong,
body[data-active-view="aiCanvas"] .workflow-console-title strong,
body[data-active-view="aiCanvas"] .workflow-node strong {
  color: var(--wf-ink) !important;
  font-weight: 800 !important;
}

body[data-active-view="aiCanvas"] .workflow-brand strong {
  font-size: 15px !important;
}

body[data-active-view="aiCanvas"] .workflow-brand em,
body[data-active-view="aiCanvas"] .workflow-section-head em {
  color: var(--wf-muted) !important;
  border-color: var(--wf-line) !important;
  background: var(--wf-panel) !important;
}

body[data-active-view="aiCanvas"] .workflow-run-summary {
  justify-content: flex-start !important;
  gap: 5px !important;
  overflow: auto hidden !important;
}

body[data-active-view="aiCanvas"] .workflow-run-summary span {
  min-height: 30px !important;
  padding: 0 8px !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
  color: var(--wf-muted) !important;
  border-color: var(--wf-line) !important;
  border-radius: 8px !important;
  background: var(--wf-panel) !important;
  font-size: 11px !important;
}

body[data-active-view="aiCanvas"] .workflow-run-summary b {
  color: var(--wf-ink) !important;
}

body[data-active-view="aiCanvas"] .workflow-actions {
  min-width: 0 !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  overflow: hidden !important;
}

body[data-active-view="aiCanvas"] .workflow-action-group {
  min-height: 34px !important;
  padding: 3px !important;
  gap: 3px !important;
  border: 1px solid var(--wf-line) !important;
  border-radius: 8px !important;
  background: var(--wf-panel) !important;
}

body[data-active-view="aiCanvas"] .workflow-action-group.is-secondary .workflow-tool-button:nth-last-child(-n + 2) {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-icon-button,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-primary-button,
body[data-active-view="aiCanvas"] .workflow-secondary-button,
body[data-active-view="aiCanvas"] .workflow-sidebar-tabs button,
body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button,
body[data-active-view="aiCanvas"] .workflow-palette-card,
body[data-active-view="aiCanvas"] .workflow-template-card,
body[data-active-view="aiCanvas"] .workflow-asset-card button,
body[data-active-view="aiCanvas"] .workflow-history-card button,
body[data-active-view="aiCanvas"] .workflow-mode-grid button,
body[data-active-view="aiCanvas"] .workflow-inspector-actions button,
body[data-active-view="aiCanvas"] .workflow-task-card button,
body[data-active-view="aiCanvas"] .workflow-command-list button,
body[data-active-view="aiCanvas"] .workflow-reference-strip button,
body[data-active-view="aiCanvas"] .workflow-snapshot-list button,
body[data-active-view="aiCanvas"] .workflow-result-strip button,
body[data-active-view="aiCanvas"] .workflow-real-run-actions button,
body[data-active-view="aiCanvas"] .workflow-run-plan-actions button {
  color: var(--wf-ink) !important;
  border-color: var(--wf-line) !important;
  background: var(--wf-surface) !important;
  box-shadow: none !important;
  font-weight: 760 !important;
}

body[data-active-view="aiCanvas"] .workflow-icon-button,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-primary-button,
body[data-active-view="aiCanvas"] .workflow-secondary-button {
  min-height: 30px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

body[data-active-view="aiCanvas"] .workflow-icon-button {
  width: 30px !important;
}

body[data-active-view="aiCanvas"] .workflow-run-button,
body[data-active-view="aiCanvas"] .workflow-primary-button,
body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button:first-child,
body[data-active-view="aiCanvas"] .workflow-real-run-actions .is-primary,
body[data-active-view="aiCanvas"] .workflow-run-plan-actions .is-primary {
  color: #fff !important;
  border-color: #151515 !important;
  background: #151515 !important;
}

body[data-active-view="aiCanvas"] .workflow-run-button {
  min-width: 112px !important;
  min-height: 36px !important;
  font-size: 12px !important;
}

body[data-active-view="aiCanvas"] .workflow-icon-button:hover,
body[data-active-view="aiCanvas"] .workflow-tool-button:hover,
body[data-active-view="aiCanvas"] .workflow-secondary-button:hover,
body[data-active-view="aiCanvas"] .workflow-inspector-actions button:hover,
body[data-active-view="aiCanvas"] .workflow-task-card button:hover,
body[data-active-view="aiCanvas"] .workflow-console-title button:hover {
  color: #ef3f35 !important;
  border-color: #f1c4bf !important;
  background: #fff0ee !important;
  transform: none !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar {
  grid-area: left !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-tabs {
  min-height: 0 !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  border-right: 1px solid var(--wf-line) !important;
  border-bottom: 0 !important;
  background: var(--wf-panel) !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-tabs button {
  width: 36px !important;
  min-height: 38px !important;
  padding: 4px 0 !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  color: var(--wf-muted) !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-size: 9px !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-tabs button svg {
  width: 16px !important;
  height: 16px !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-tabs button.active,
body[data-active-view="aiCanvas"] .workflow-mode-grid button.active,
body[data-active-view="aiCanvas"] .workflow-inspector-tabs span.active,
body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-icon-button.is-active {
  color: #fff !important;
  border-color: #151515 !important;
  background: #151515 !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-content,
body[data-active-view="aiCanvas"] .workflow-inspector {
  scrollbar-color: #d5d0c7 transparent !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-content {
  padding: 10px !important;
  gap: 8px !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-search {
  min-height: 34px !important;
  padding: 0 9px !important;
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: center !important;
  color: var(--wf-muted) !important;
  border: 1px solid var(--wf-line) !important;
  border-radius: 8px !important;
  background: var(--wf-surface) !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-search input,
body[data-active-view="aiCanvas"] .workflow-field input,
body[data-active-view="aiCanvas"] .workflow-field select,
body[data-active-view="aiCanvas"] .workflow-field textarea {
  color: var(--wf-ink) !important;
  border-color: var(--wf-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-search input::placeholder,
body[data-active-view="aiCanvas"] .workflow-field input::placeholder,
body[data-active-view="aiCanvas"] .workflow-field textarea::placeholder {
  color: #a5a09a !important;
}

body[data-active-view="aiCanvas"] .workflow-panel-head.is-compact {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-group {
  gap: 6px !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-group > span {
  color: var(--wf-muted) !important;
  font-size: 11px !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-card,
body[data-active-view="aiCanvas"] .workflow-template-card,
body[data-active-view="aiCanvas"] .workflow-asset-card,
body[data-active-view="aiCanvas"] .workflow-history-card {
  border: 1px solid var(--wf-line) !important;
  border-radius: 8px !important;
  background: var(--wf-surface) !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-card {
  padding: 8px !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
}

body[data-active-view="aiCanvas"] .workflow-template-card {
  padding: 9px !important;
  gap: 4px !important;
}

body[data-active-view="aiCanvas"] .workflow-asset-card {
  padding: 7px !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-card:hover,
body[data-active-view="aiCanvas"] .workflow-template-card:hover,
body[data-active-view="aiCanvas"] .workflow-asset-card:hover,
body[data-active-view="aiCanvas"] .workflow-history-card:hover,
body[data-active-view="aiCanvas"] .workflow-node:hover,
body[data-active-view="aiCanvas"] .workflow-task-card:hover {
  border-color: var(--wf-line-strong) !important;
  background: #fff !important;
  transform: none !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-card i {
  width: 30px !important;
  height: 30px !important;
  color: #fff !important;
  border-radius: 8px !important;
  background: #151515 !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-card strong,
body[data-active-view="aiCanvas"] .workflow-template-card strong,
body[data-active-view="aiCanvas"] .workflow-asset-card strong,
body[data-active-view="aiCanvas"] .workflow-history-card strong,
body[data-active-view="aiCanvas"] .workflow-task-card strong {
  color: var(--wf-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body[data-active-view="aiCanvas"] .workflow-palette-card small,
body[data-active-view="aiCanvas"] .workflow-template-card span,
body[data-active-view="aiCanvas"] .workflow-asset-card span,
body[data-active-view="aiCanvas"] .workflow-history-card span,
body[data-active-view="aiCanvas"] .workflow-task-card span,
body[data-active-view="aiCanvas"] .workflow-task-card small,
body[data-active-view="aiCanvas"] .workflow-node p,
body[data-active-view="aiCanvas"] .workflow-node small,
body[data-active-view="aiCanvas"] .workflow-node-meta small,
body[data-active-view="aiCanvas"] .workflow-node-contract span,
body[data-active-view="aiCanvas"] .workflow-empty span,
body[data-active-view="aiCanvas"] .workflow-starter-card span,
body[data-active-view="aiCanvas"] .workflow-canvas-status em,
body[data-active-view="aiCanvas"] .workflow-api-status-pill span,
body[data-active-view="aiCanvas"] .workflow-api-status-card span,
body[data-active-view="aiCanvas"] .workflow-bottom-controls .workflow-zoom {
  color: var(--wf-muted) !important;
}

body[data-active-view="aiCanvas"] .workflow-stage {
  grid-area: stage !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: #f1efea !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-surface {
  height: 100% !important;
  min-height: 0 !important;
  background:
    linear-gradient(rgba(21, 21, 21, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 21, 21, 0.05) 1px, transparent 1px),
    #f1efea !important;
  background-size: 28px 28px, 28px 28px, auto !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-aura {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar {
  top: 10px !important;
  left: 10px !important;
  padding: 4px !important;
  gap: 4px !important;
  border-color: var(--wf-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 30px rgba(21, 21, 21, 0.08) !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button {
  min-height: 30px !important;
  color: var(--wf-muted) !important;
  border-radius: 7px !important;
  background: transparent !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button:hover {
  color: #ef3f35 !important;
  background: #fff0ee !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button span {
  color: var(--wf-ink) !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(21, 21, 21, 0.1) !important;
}

body[data-active-view="aiCanvas"] .workflow-bottom-controls {
  left: 50% !important;
  right: auto !important;
  bottom: 12px !important;
  padding: 5px !important;
  gap: 5px !important;
  border-color: var(--wf-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 32px rgba(21, 21, 21, 0.1) !important;
  transform: translateX(-50%) !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status {
  top: 10px !important;
  right: 10px !important;
  max-width: min(560px, calc(100% - 290px)) !important;
  min-height: 34px !important;
  padding: 4px 9px !important;
  color: var(--wf-muted) !important;
  border: 1px solid var(--wf-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 30px rgba(21, 21, 21, 0.08) !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-status span {
  color: var(--wf-ink) !important;
}

body[data-active-view="aiCanvas"] .workflow-empty {
  width: min(640px, calc(100% - 64px)) !important;
  padding: 20px !important;
  gap: 14px !important;
  color: var(--wf-muted) !important;
  border: 1px dashed var(--wf-line-strong) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
}

body[data-active-view="aiCanvas"] .workflow-empty > svg {
  color: var(--wf-ink) !important;
}

body[data-active-view="aiCanvas"] .workflow-empty > strong {
  color: var(--wf-ink) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}

body[data-active-view="aiCanvas"] .workflow-empty-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body[data-active-view="aiCanvas"] .workflow-starter-card {
  min-height: 92px !important;
  padding: 12px !important;
  align-content: center !important;
  border-radius: 8px !important;
  background: #fff !important;
}

body[data-active-view="aiCanvas"] .workflow-starter-card::after {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-starter-card svg {
  color: var(--wf-ink) !important;
}

body[data-active-view="aiCanvas"] .workflow-node {
  min-width: 220px !important;
  padding: 12px !important;
  gap: 8px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 12px 26px rgba(21, 21, 21, 0.08) !important;
  backdrop-filter: blur(8px) !important;
}

body[data-active-view="aiCanvas"] .workflow-node::before {
  left: 12px !important;
  right: 12px !important;
  top: 0 !important;
  height: 3px !important;
  background: #e9e5dc !important;
}

body[data-active-view="aiCanvas"] .workflow-node.is-selected {
  border-color: #151515 !important;
  box-shadow: 0 0 0 3px rgba(21, 21, 21, 0.08), 0 14px 34px rgba(21, 21, 21, 0.12) !important;
}

body[data-active-view="aiCanvas"] .workflow-node.is-running,
body[data-active-view="aiCanvas"] .workflow-node.is-validating,
body[data-active-view="aiCanvas"] .workflow-node.is-submitting,
body[data-active-view="aiCanvas"] .workflow-node.is-queued,
body[data-active-view="aiCanvas"] .workflow-node.is-generating,
body[data-active-view="aiCanvas"] .workflow-node.is-compositing {
  border-color: rgba(39, 111, 148, 0.45) !important;
}

body[data-active-view="aiCanvas"] .workflow-node.is-completed {
  border-color: rgba(23, 120, 89, 0.45) !important;
}

body[data-active-view="aiCanvas"] .workflow-node.is-failed {
  border-color: rgba(201, 65, 65, 0.48) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-head span {
  color: #fff !important;
  border-radius: 999px !important;
  background: #151515 !important;
}

body[data-active-view="aiCanvas"] .workflow-node-head em {
  color: var(--wf-muted) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-head button {
  color: var(--wf-muted) !important;
  border-color: var(--wf-line) !important;
  background: #fff !important;
}

body[data-active-view="aiCanvas"] .workflow-node-media,
body[data-active-view="aiCanvas"] .workflow-inspector-preview,
body[data-active-view="aiCanvas"] .workflow-asset-thumb {
  color: var(--wf-muted) !important;
  border: 1px solid var(--wf-line) !important;
  border-radius: 8px !important;
  background: var(--wf-panel-soft) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-media {
  min-height: 120px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-media.is-result {
  min-height: 150px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-meta,
body[data-active-view="aiCanvas"] .workflow-node-contract,
body[data-active-view="aiCanvas"] .workflow-run-hints,
body[data-active-view="aiCanvas"] .workflow-inspector-note,
body[data-active-view="aiCanvas"] .workflow-reference-strip {
  gap: 5px !important;
}

body[data-active-view="aiCanvas"] .workflow-node-meta small,
body[data-active-view="aiCanvas"] .workflow-node-contract span,
body[data-active-view="aiCanvas"] .workflow-reference-strip span,
body[data-active-view="aiCanvas"] .workflow-run-hints span,
body[data-active-view="aiCanvas"] .workflow-inspector-note span {
  color: var(--wf-muted) !important;
  border-color: var(--wf-line) !important;
  background: var(--wf-panel) !important;
}

body[data-active-view="aiCanvas"] .workflow-port {
  width: 14px !important;
  height: 14px !important;
  border-color: #fff !important;
  background: #151515 !important;
  box-shadow: 0 0 0 1px rgba(21, 21, 21, 0.2) !important;
}

body[data-active-view="aiCanvas"] .workflow-port.input {
  left: -7px !important;
}

body[data-active-view="aiCanvas"] .workflow-port.output {
  right: -7px !important;
}

body[data-active-view="aiCanvas"] .workflow-edge {
  stroke: rgba(21, 21, 21, 0.42) !important;
  stroke-width: 2.4 !important;
  filter: none !important;
}

body[data-active-view="aiCanvas"] .workflow-edge:hover,
body[data-active-view="aiCanvas"] .workflow-edge.is-selected {
  stroke: #151515 !important;
}

body[data-active-view="aiCanvas"] .workflow-edge.is-running {
  stroke: var(--wf-blue) !important;
}

body[data-active-view="aiCanvas"] .workflow-edges marker path {
  fill: #151515 !important;
}

body[data-active-view="aiCanvas"] .workflow-edge-label {
  fill: var(--wf-muted) !important;
  stroke: rgba(255, 255, 255, 0.86) !important;
}

body[data-active-view="aiCanvas"] .workflow-minimap,
body[data-active-view="aiCanvas"] .workflow-selection-toolbar,
body[data-active-view="aiCanvas"] .workflow-quick-create,
body[data-active-view="aiCanvas"] .workflow-slot-picker {
  color: var(--wf-muted) !important;
  border-color: var(--wf-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 32px rgba(21, 21, 21, 0.1) !important;
}

body[data-active-view="aiCanvas"] .workflow-minimap strong {
  color: var(--wf-ink) !important;
}

body[data-active-view="aiCanvas"] .workflow-inspector {
  grid-area: right !important;
  padding: 10px !important;
  gap: 8px !important;
  overflow: auto !important;
  border-radius: 8px !important;
}

body[data-active-view="aiCanvas"] .workflow-run-panel,
body[data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-active-view="aiCanvas"] .workflow-api-status-card,
body[data-active-view="aiCanvas"] .workflow-console-grid section {
  padding: 10px !important;
  gap: 8px !important;
  border-radius: 8px !important;
  background: var(--wf-panel) !important;
}

body[data-active-view="aiCanvas"] .workflow-mode-grid,
body[data-active-view="aiCanvas"] .workflow-inspector-tabs {
  padding: 3px !important;
  gap: 3px !important;
  border-color: var(--wf-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
}

body[data-active-view="aiCanvas"] .workflow-mode-grid button,
body[data-active-view="aiCanvas"] .workflow-inspector-tabs span {
  min-height: 28px !important;
  color: var(--wf-muted) !important;
  border-radius: 7px !important;
}

body[data-active-view="aiCanvas"] .workflow-field textarea {
  min-height: 88px !important;
  resize: vertical !important;
}

body[data-active-view="aiCanvas"] .workflow-prompt-field textarea {
  min-height: 130px !important;
}

body[data-active-view="aiCanvas"] .workflow-metrics span,
body[data-active-view="aiCanvas"] .workflow-side-metrics span,
body[data-active-view="aiCanvas"] .workflow-real-run-summary span,
body[data-active-view="aiCanvas"] .workflow-run-plan-stats span {
  color: var(--wf-muted) !important;
  border-color: var(--wf-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
}

body[data-active-view="aiCanvas"] .workflow-metrics b,
body[data-active-view="aiCanvas"] .workflow-side-metrics b,
body[data-active-view="aiCanvas"] .workflow-real-run-summary b,
body[data-active-view="aiCanvas"] .workflow-run-plan-stats b {
  color: var(--wf-ink) !important;
}

body[data-active-view="aiCanvas"] .workflow-taskbar {
  grid-area: tasks !important;
  padding: 8px !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 8px !important;
  border-radius: 0 !important;
  border-width: 1px 0 0 0 !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

body[data-active-view="aiCanvas"] .workflow-taskbar-head {
  border-color: var(--wf-line) !important;
  border-radius: 8px !important;
  background: var(--wf-panel) !important;
}

body[data-active-view="aiCanvas"] .workflow-console-grid {
  grid-template-columns: 1.25fr 1fr 1fr 0.9fr !important;
  gap: 8px !important;
}

body[data-active-view="aiCanvas"] .workflow-task-card {
  border-color: var(--wf-line) !important;
  border-left-width: 3px !important;
  border-radius: 8px !important;
  background: #fff !important;
}

body[data-active-view="aiCanvas"] .workflow-task-card progress,
body[data-active-view="aiCanvas"] .workflow-task-card progress::-webkit-progress-bar,
body[data-active-view="aiCanvas"] .workflow-node-progress,
body[data-active-view="aiCanvas"] .workflow-node-runtime-meter,
body[data-active-view="aiCanvas"] .workflow-pipeline-meter {
  background: #ebe7df !important;
}

body[data-active-view="aiCanvas"] .workflow-task-card progress::-webkit-progress-value,
body[data-active-view="aiCanvas"] .workflow-node-progress i,
body[data-active-view="aiCanvas"] .workflow-node-runtime-meter b,
body[data-active-view="aiCanvas"] .workflow-pipeline-meter i {
  background: #151515 !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-node-runtime,
body[data-active-view="aiCanvas"] .workflow-active-run-hud,
body[data-active-view="aiCanvas"] .workflow-canvas-result-toast,
body[data-active-view="aiCanvas"] .workflow-media-node-actions button,
body[data-active-view="aiCanvas"] .workflow-result-node-actions button {
  color: var(--wf-ink) !important;
  border-color: var(--wf-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 28px rgba(21, 21, 21, 0.12) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-runtime strong,
body[data-active-view="aiCanvas"] .workflow-node-runtime p,
body[data-active-view="aiCanvas"] .workflow-generator-node-card > strong,
body[data-active-view="aiCanvas"] .workflow-generator-node-card > p,
body[data-active-view="aiCanvas"] .workflow-generator-flow span,
body[data-active-view="aiCanvas"] .workflow-generator-flow b,
body[data-active-view="aiCanvas"] .workflow-generator-meta small,
body[data-active-view="aiCanvas"] .workflow-generator-requirements span,
body[data-active-view="aiCanvas"] .workflow-generator-head em {
  color: var(--wf-ink) !important;
  font-weight: 650 !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-head span {
  color: #fff !important;
  background: #151515 !important;
}

body[data-active-view="aiCanvas"] .workflow-generator-run {
  color: var(--wf-ink) !important;
  border-color: var(--wf-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
}

body[data-active-view="aiCanvas"] .workflow-command-palette,
body[data-active-view="aiCanvas"] .workflow-real-run-confirm,
body[data-active-view="aiCanvas"] .workflow-media-preview,
body[data-active-view="aiCanvas"] .workflow-task-detail,
body[data-active-view="aiCanvas"] .workflow-task-diagnostic,
body[data-active-view="aiCanvas"] .workflow-run-plan-preview {
  color: var(--wf-ink) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] {
  --wf-bg: #0f100f;
  --wf-surface: #181918;
  --wf-panel: #20211f;
  --wf-panel-soft: #262724;
  --wf-ink: #f4f3ee;
  --wf-muted: #aaa8a0;
  --wf-line: rgba(255, 255, 255, 0.1);
  --wf-line-strong: rgba(255, 255, 255, 0.2);
  --wf-accent: #f4f3ee;
  --wf-accent-2: #ff7a70;
  --wf-blue: #78bddb;
  --wf-success: #7fd0a7;
  --wf-warning: #f0c76d;
  --wf-danger: #ff8585;
  --wf-info: #78bddb;
  color: var(--wf-ink) !important;
  background: #10110f !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .app-shell,
body[data-theme="dark"][data-active-view="aiCanvas"] .main {
  color: var(--wf-ink) !important;
  background: #10110f !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  color: var(--wf-ink) !important;
  border-color: var(--wf-line) !important;
  background: var(--wf-bg) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-topbar,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-taskbar,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-panel,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-console-grid section,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-api-status-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-palette-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-template-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-asset-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-history-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-task-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-starter-card {
  color: var(--wf-ink) !important;
  border-color: var(--wf-line) !important;
  background: var(--wf-surface) !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-stage,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    #111210 !important;
  background-size: 28px 28px, 28px 28px, auto !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar-tabs,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-action-group,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar-search,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-mode-grid,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector-tabs,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-field input,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-field select,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-field textarea,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-toolbar,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-bottom-controls,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-status,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-minimap,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-empty {
  color: var(--wf-ink) !important;
  border-color: var(--wf-line) !important;
  background: rgba(24, 25, 24, 0.94) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-icon-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-tool-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-primary-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-secondary-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-toolbar button {
  color: var(--wf-ink) !important;
  border-color: var(--wf-line) !important;
  background: var(--wf-panel) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-primary-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-toolbar button:first-child,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar-tabs button.active,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-mode-grid button.active,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector-tabs span.active {
  color: #151515 !important;
  border-color: #f4f3ee !important;
  background: #f4f3ee !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-brand-mark,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node-head span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-palette-card i {
  color: #151515 !important;
  background: #f4f3ee !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node-media,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector-preview,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-asset-thumb {
  background: var(--wf-panel-soft) !important;
}

@media (max-width: 1180px) {
  body[data-active-view="aiCanvas"] .workflow-canvas-shell {
    grid-template-columns: minmax(210px, 242px) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(540px, 1fr) auto 112px !important;
    grid-template-areas:
      "top top"
      "left stage"
      "right right"
      "tasks tasks" !important;
  }

  body[data-active-view="aiCanvas"] .workflow-topbar {
    grid-template-columns: minmax(210px, 1fr) minmax(220px, auto) !important;
    grid-template-areas:
      "brand actions"
      "summary summary" !important;
    height: auto !important;
  }

  body[data-active-view="aiCanvas"] .workflow-brand {
    grid-area: brand !important;
  }

  body[data-active-view="aiCanvas"] .workflow-run-summary {
    grid-area: summary !important;
  }

  body[data-active-view="aiCanvas"] .workflow-actions {
    grid-area: actions !important;
  }

  body[data-active-view="aiCanvas"] .workflow-inspector {
    max-height: 300px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    align-items: start !important;
  }
}

@media (max-width: 900px) {
  body[data-active-view="aiCanvas"] .app-shell,
  body[data-theme="dark"][data-active-view="aiCanvas"] .app-shell,
  body[data-theme="light"][data-active-view="aiCanvas"] .app-shell {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  body[data-active-view="aiCanvas"] .main,
  body[data-theme="dark"][data-active-view="aiCanvas"] .main,
  body[data-theme="light"][data-active-view="aiCanvas"] .main {
    width: 100% !important;
    padding: 14px 10px 22px !important;
    overflow: visible !important;
  }

  body[data-active-view="aiCanvas"] .workflow-canvas-shell {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto 68svh auto auto !important;
    grid-template-areas:
      "top"
      "left"
      "stage"
      "right"
      "tasks" !important;
  }

  body[data-active-view="aiCanvas"] .workflow-topbar {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "summary"
      "actions" !important;
  }

  body[data-active-view="aiCanvas"] .workflow-actions,
  body[data-active-view="aiCanvas"] .workflow-run-summary,
  body[data-active-view="aiCanvas"] .workflow-canvas-toolbar {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  body[data-active-view="aiCanvas"] .workflow-sidebar {
    max-height: 280px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-stage,
  body[data-active-view="aiCanvas"] .workflow-canvas-surface {
    min-height: 68svh !important;
  }

  body[data-active-view="aiCanvas"] .workflow-empty {
    width: min(360px, calc(100% - 36px)) !important;
    padding: 16px !important;
  }

  body[data-active-view="aiCanvas"] .workflow-empty-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-active-view="aiCanvas"] .workflow-inspector {
    max-height: none !important;
    display: flex !important;
  }

  body[data-active-view="aiCanvas"] .workflow-taskbar,
  body[data-active-view="aiCanvas"] .workflow-console-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v1.8.192 Canvas layout guard: remove legacy floating panels. */
body[data-active-view="aiCanvas"] .workflow-topbar,
body[data-active-view="aiCanvas"] .workflow-sidebar,
body[data-active-view="aiCanvas"] .workflow-stage,
body[data-active-view="aiCanvas"] .workflow-inspector,
body[data-active-view="aiCanvas"] .workflow-taskbar {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell.is-console-collapsed {
  grid-template-rows: 54px minmax(0, 1fr) 74px !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar {
  display: grid !important;
  padding: 0 !important;
}

body[data-active-view="aiCanvas"] .workflow-stage {
  display: block !important;
}

body[data-active-view="aiCanvas"] .workflow-inspector {
  display: flex !important;
}

body[data-active-view="aiCanvas"] .workflow-taskbar,
body[data-active-view="aiCanvas"] .workflow-taskbar.is-collapsed,
body[data-active-view="aiCanvas"] .workflow-canvas-shell.has-activity .workflow-taskbar,
body[data-active-view="aiCanvas"] .workflow-canvas-shell.has-activity .workflow-taskbar.is-collapsed {
  display: grid !important;
  overflow: hidden !important;
}

body[data-active-view="aiCanvas"] .workflow-taskbar.is-collapsed {
  align-content: center !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
  padding: 8px !important;
}

body[data-active-view="aiCanvas"] .workflow-taskbar.is-collapsed .workflow-taskbar-head {
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}

body[data-active-view="aiCanvas"] .workflow-taskbar.is-collapsed .workflow-taskbar-head span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  body[data-active-view="aiCanvas"] .workflow-canvas-shell,
  body[data-active-view="aiCanvas"] .workflow-canvas-shell.is-console-collapsed {
    grid-template-rows: auto auto 68svh auto auto !important;
  }

  body[data-active-view="aiCanvas"] .workflow-sidebar,
  body[data-active-view="aiCanvas"] .workflow-stage,
  body[data-active-view="aiCanvas"] .workflow-canvas-surface,
  body[data-active-view="aiCanvas"] .workflow-inspector,
  body[data-active-view="aiCanvas"] .workflow-taskbar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-active-view="aiCanvas"] .workflow-stage {
    overflow: hidden !important;
  }

  body[data-active-view="aiCanvas"] .workflow-sidebar {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  body[data-active-view="aiCanvas"] .workflow-bottom-controls {
    max-width: calc(100% - 20px) !important;
    overflow-x: auto !important;
  }

  body[data-active-view="aiCanvas"] .workflow-canvas-status {
    left: 10px !important;
    right: 10px !important;
    max-width: none !important;
  }
}

/* v1.8.199 Dark mode contrast system: neutral black layers, readable text, and explicit button polarity. */
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) {
  color-scheme: dark !important;
  --bg: #000000;
  --bg-2: #050505;
  --panel: rgba(11, 11, 11, 0.92);
  --panel-strong: rgba(18, 18, 18, 0.96);
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.26);
  --text: #f4f4f4;
  --muted: #b7b7b7;
  --dark-ink: #000000;
  --dark-rail: #050505;
  --dark-surface: #0b0b0b;
  --dark-surface-2: #141414;
  --dark-surface-3: #1f1f1f;
  --dark-text: #f4f4f4;
  --dark-text-strong: #ffffff;
  --dark-muted: #b7b7b7;
  --dark-subtle: #8c8c8c;
  --dark-border: rgba(255, 255, 255, 0.13);
  --dark-border-strong: rgba(255, 255, 255, 0.26);
  --dark-accent: #ff6b5f;
  --dark-accent-strong: #ff8a7f;
  --dark-accent-soft: rgba(255, 107, 95, 0.16);
  --dark-control: #171717;
  --dark-control-hover: #242424;
  --dark-inverse: #f3f3f3;
  --dark-inverse-text: #0a0a0a;
  --shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
  color: var(--dark-text) !important;
  background: var(--dark-ink) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .app-shell,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .main {
  color: var(--dark-text) !important;
  background: var(--dark-ink) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .sidebar {
  color: var(--dark-text) !important;
  border-right-color: var(--dark-border) !important;
  background: var(--dark-rail) !important;
  box-shadow: 10px 0 34px rgba(0, 0, 0, 0.22) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .brand-mark {
  color: var(--dark-inverse-text) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: var(--dark-inverse) !important;
  box-shadow: none !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .brand-block h1,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .topbar h2,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-section-title strong,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-detail-heading h3,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .panel-heading h3 {
  color: var(--dark-text-strong) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .brand-block .eyebrow,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .topbar .eyebrow,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-detail-heading span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .panel-heading span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .result-count,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .nav-group-label {
  color: var(--dark-muted) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .nav-item {
  color: var(--dark-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .nav-item svg,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .nav-item i {
  color: var(--dark-subtle) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .nav-item:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .nav-item:focus-visible {
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
  background: var(--dark-control) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .nav-item.active {
  color: var(--dark-text-strong) !important;
  border-color: rgba(255, 107, 95, 0.34) !important;
  background: var(--dark-accent-soft) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .nav-item.active svg,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .nav-item.active i {
  color: var(--dark-accent-strong) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .side-status,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .theme-toggle-card {
  color: var(--dark-muted) !important;
  border-color: var(--dark-border) !important;
  background: var(--dark-surface) !important;
  box-shadow: none !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .side-status strong,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .side-account-copy strong {
  color: var(--dark-text) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .side-status em,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .side-account-copy em {
  color: var(--dark-subtle) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .side-status:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .theme-toggle-card:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .side-status.active {
  color: var(--dark-text-strong) !important;
  border-color: var(--dark-border-strong) !important;
  background: var(--dark-surface-2) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .topbar {
  color: var(--dark-text) !important;
  background: transparent !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-library-panel,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-discover-panel,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .panel,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .generation-page-panel,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-generation-panel,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .generation-template-picker,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-access-panel,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-control-panel,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-board-panel,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-result-panel {
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
  background: var(--dark-surface) !important;
  box-shadow: none !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-clean-toolbar,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .search-box,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-sort-box,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-category-shell,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-content-item,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .empty-state,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .batch-panel,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .generation-selected-template,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-section,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-integrated-settings,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-inline-upload,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-prompt-box,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-setting-grid label,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-upload-card,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-model-pill,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-task-tab,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-mode-tab,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-board-card,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-result-card {
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
  background: var(--dark-surface-2) !important;
  box-shadow: none !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-content-item:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-clean-toolbar:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-upload-card:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-task-tab:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-mode-tab:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-model-pill:hover {
  border-color: var(--dark-border-strong) !important;
  background: var(--dark-surface-3) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) input,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) textarea,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) select,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-sort-box select,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .search-box input,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-prompt-box input,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-prompt-box textarea,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-setting-grid select,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-setting-grid input,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-board-add select,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-board-add textarea {
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
  background-color: var(--dark-control) !important;
  box-shadow: none !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) select option {
  color: var(--dark-text) !important;
  background: var(--dark-control) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) input::placeholder,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) textarea::placeholder,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .search-box input::placeholder {
  color: var(--dark-subtle) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) input:focus,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) textarea:focus,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) select:focus,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .search-box:focus-within,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-sort-box select:focus {
  color: var(--dark-text-strong) !important;
  border-color: rgba(255, 107, 95, 0.46) !important;
  background-color: var(--dark-control-hover) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 95, 0.14) !important;
  outline: none !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-category-filter {
  background: transparent !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-category-filter button,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .tag-manager-toggle,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-engagement-button,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .text-button,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .batch-secondary-button {
  color: var(--dark-muted) !important;
  border-color: var(--dark-border) !important;
  background: var(--dark-control) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-category-filter button:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-category-filter button:focus-visible,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-category-filter button.active,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .tag-manager-toggle:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .text-button:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-engagement-button:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-engagement-button.is-active {
  color: var(--dark-text-strong) !important;
  border-color: rgba(255, 107, 95, 0.34) !important;
  background: var(--dark-accent-soft) !important;
}

body[data-theme="dark"]:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-inline .template-card-engagement-button {
  color: rgba(243, 243, 243, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body[data-theme="dark"]:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-inline .template-card-engagement-button:hover,
body[data-theme="dark"]:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-inline .template-card-engagement-button:focus-visible,
body[data-theme="dark"]:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-engagement-inline .template-card-engagement-button.is-active {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .primary-button,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .batch-primary-button,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-primary-action,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .batch-panel .primary-button,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-submit-row .primary-button {
  color: var(--dark-inverse-text) !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
  background: var(--dark-inverse) !important;
  box-shadow: none !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .primary-button:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .batch-primary-button:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-primary-action:hover {
  color: #050505 !important;
  border-color: #ffffff !important;
  background: #ffffff !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card.is-video-template {
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
  background: var(--dark-surface-2) !important;
  box-shadow: none !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card:hover,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card:focus-visible,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card:focus-within {
  border-color: var(--dark-border-strong) !important;
  background: var(--dark-surface-3) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-video-overlay {
  background:
    linear-gradient(180deg, rgba(6, 9, 13, 0.04) 0%, rgba(6, 9, 13, 0.26) 42%, rgba(6, 9, 13, 0.84) 100%) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-copy,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-badges,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-meta {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-copy strong,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-copy b,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-content-main strong,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-section-head strong,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-task-tab strong,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-mode-tab strong,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-model-pill strong,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-result-copy strong,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .batch-panel strong,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .generation-selected-template strong {
  color: var(--dark-text-strong) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-copy span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-copy small,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-copy em,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-content-main p,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-content-tags span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-content-kicker span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-content-metrics span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-section-head span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-task-tab span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-mode-tab span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-model-pill small,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-upload-card span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-setting-note,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .batch-panel span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .generation-selected-template span {
  color: var(--dark-muted) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-tags span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-badges span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .play-chip,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-mode-chip,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-content-tags span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-content-kicker span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-content-metrics span {
  color: var(--dark-muted) !important;
  border-color: var(--dark-border) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-meta b,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-card-parameters span,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-content-metrics span {
  color: var(--dark-text) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-video-placeholder,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .favorite-content-placeholder,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-result-placeholder,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-result-media {
  color: var(--dark-muted) !important;
  background: #090909 !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-result-grid,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-result-copy,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-console-panel,
body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .creator-result-head {
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
  background: var(--dark-surface) !important;
}

body[data-theme="dark"]:not([data-active-view="aiCanvas"]) ::selection {
  color: var(--dark-inverse-text);
  background: rgba(255, 138, 127, 0.72);
}

@media (max-width: 900px) {
  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) {
    overflow-x: hidden !important;
  }

  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .app-shell,
  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .sidebar,
  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .main,
  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-library-panel,
  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-category-shell,
  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-clean-toolbar {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .nav-list,
  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-category-filter,
  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-tag-buttons {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .nav-list::-webkit-scrollbar,
  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-category-filter::-webkit-scrollbar,
  body[data-theme="dark"]:not([data-active-view="aiCanvas"]) .template-tag-buttons::-webkit-scrollbar {
    display: none !important;
  }
}

/* Favorites mirror the Discover masonry card layout. */
body[data-active-view="templateFavorites"] .favorite-template-masonry {
  display: grid !important;
  grid-template-columns: repeat(var(--rendered-template-columns, var(--template-columns)), minmax(0, 1fr)) !important;
  gap: 2px !important;
  column-count: auto !important;
}

body[data-active-view="templateFavorites"] .favorite-template-masonry .template-masonry-column {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

body[data-active-view="templateFavorites"] .favorite-template-masonry > .empty-state {
  grid-column: 1 / -1 !important;
}

/* v1.8.214 Minimal translucent hover action slider. */
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider {
  touch-action: pan-y !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider:hover,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider:focus-within {
  padding-bottom: 0 !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider .template-video-frame {
  overflow: hidden !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider .template-video-frame::before {
  inset: 0 !important;
  transform: none !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-copy {
  display: none !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-image-template .template-card-cta {
  display: none !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider > .template-card-action-tray {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 0 6px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 0 solid transparent !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
  background: rgba(255, 255, 255, 0.46) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 22px rgba(24, 24, 24, 0.06) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transform-origin: top center !important;
  pointer-events: none !important;
  transition:
    height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-top 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0.18s ease !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider:hover > .template-card-action-tray,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider:focus-within > .template-card-action-tray {
  height: 54px !important;
  margin-top: -1px !important;
  padding: 8px !important;
  border-width: 0 1px 1px !important;
  border-color: rgba(255, 255, 255, 0.52) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider > .template-card-action-tray::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -10px !important;
  height: 16px !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28)) !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider > .template-card-action-tray > * {
  position: relative !important;
  z-index: 1 !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider .template-card-primary-action {
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(24, 24, 24, 0.88) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: rgba(12, 12, 12, 0.92) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 20px rgba(24, 24, 24, 0.16) !important;
  text-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider .template-card-primary-action:hover,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider .template-card-primary-action:focus-visible {
  border-color: rgba(0, 0, 0, 0.96) !important;
  color: #fff !important;
  background: #000 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 24px rgba(24, 24, 24, 0.22) !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider .template-card-primary-action svg {
  width: 16px !important;
  height: 16px !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider .template-card-primary-action span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
  body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.has-template-action-slider > .template-card-action-tray {
    transition: none !important;
  }
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-list,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-category-filter,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-tag-buttons {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.26) transparent !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-list::-webkit-scrollbar,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-category-filter::-webkit-scrollbar,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-tag-buttons::-webkit-scrollbar {
  display: block !important;
  height: 6px !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-list::-webkit-scrollbar-track,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-category-filter::-webkit-scrollbar-track,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-tag-buttons::-webkit-scrollbar-track {
  background: transparent !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-list::-webkit-scrollbar-thumb,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-category-filter::-webkit-scrollbar-thumb,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-tag-buttons::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .nav-list::-webkit-scrollbar-thumb:hover,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-category-filter::-webkit-scrollbar-thumb:hover,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-tag-buttons::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.34) !important;
}

/* v1.8.201 Creator generation Discover workbench */
body[data-active-view="creatorStudio"] .main {
  padding: 24px clamp(18px, 2.4vw, 34px) 34px 20px;
}

body[data-active-view="creatorStudio"] .topbar {
  margin: -6px 0 18px;
}

body[data-active-view="creatorStudio"] .creator-studio-shell {
  grid-template-columns: minmax(332px, 390px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

body[data-active-view="creatorStudio"] .creator-control-panel {
  top: 18px;
  max-height: calc(100vh - 56px);
  padding: 0;
  overflow: auto;
  border-radius: 12px;
  background: #fff;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar {
  padding: 10px;
  gap: 6px;
  border-bottom: 1px solid var(--creator-home-line);
  background: #fff;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab {
  min-height: 36px;
  border-radius: 10px;
  background: rgba(24, 24, 24, 0.035);
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab.active {
  color: #ef3f35;
  background: #fff0ee;
}

body[data-active-view="creatorStudio"] .creator-quick-controls {
  padding: 10px;
  gap: 10px;
}

body[data-active-view="creatorStudio"] .creator-quick-toolbar {
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
}

body[data-active-view="creatorStudio"] .creator-quick-model,
body[data-active-view="creatorStudio"] .creator-count-compact,
body[data-active-view="creatorStudio"] .creator-inline-upload {
  border-radius: 12px;
  background: #f5f5f3;
}

body[data-active-view="creatorStudio"] .creator-console-panel .creator-quick-model .creator-model-pill {
  min-height: 32px;
  padding: 6px 10px;
}

body[data-active-view="creatorStudio"] .creator-count-compact input {
  min-height: 32px;
  font-size: 13px;
}

body[data-active-view="creatorStudio"] .creator-quick-upload .creator-upload-card.compact {
  min-height: 52px;
  padding: 9px 10px;
  border-radius: 10px;
}

body[data-active-view="creatorStudio"] .creator-section {
  margin: 0 10px 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-active-view="creatorStudio"] .creator-prompt-box {
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}

body[data-active-view="creatorStudio"] #creatorImagePrompt,
body[data-active-view="creatorStudio"] #creatorVideoPrompt {
  min-height: clamp(178px, 27vh, 310px);
  max-height: min(44vh, 430px);
}

body[data-active-view="creatorStudio"] #creatorImagePrompt:focus,
body[data-active-view="creatorStudio"] #creatorVideoPrompt:focus {
  min-height: clamp(220px, 35vh, 420px);
}

body[data-active-view="creatorStudio"] .creator-submit-row {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: 0;
  padding: 10px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}

body[data-active-view="creatorStudio"] .creator-integrated-settings {
  margin: 0 10px 10px;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings summary {
  min-height: 38px;
  padding: 8px 10px;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings-body {
  padding: 0 10px 10px;
}

body[data-active-view="creatorStudio"] .creator-advanced-grid {
  grid-template-columns: 1fr;
}

body[data-active-view="creatorStudio"] .creator-result-panel {
  min-height: min(640px, calc(100vh - 86px));
  border-radius: 12px;
  background: #fff;
}

body[data-active-view="creatorStudio"] .creator-result-head {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.94);
}

body[data-active-view="creatorStudio"] .creator-result-grid {
  min-height: calc(100vh - 138px);
  padding: 12px;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 10px;
  background: #fafafa;
}

body[data-active-view="creatorStudio"] .creator-result-history-section {
  gap: 9px;
}

body[data-active-view="creatorStudio"] .creator-result-history-head {
  padding: 4px 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-active-view="creatorStudio"] .creator-result-history-head strong {
  font-size: 16px;
  line-height: 1.2;
}

body[data-active-view="creatorStudio"] .creator-result-history-grid {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 10px;
}

body[data-active-view="creatorStudio"] .creator-result-card {
  border-radius: 8px;
  background: #fff;
}

body[data-active-view="creatorStudio"] .creator-result-media {
  aspect-ratio: 4 / 5;
  background: #ececea;
}

body[data-active-view="creatorStudio"] .creator-result-media em {
  left: 8px;
  bottom: 8px;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.58);
}

body[data-active-view="creatorStudio"] .creator-result-copy {
  padding: 9px 10px 10px;
}

body[data-active-view="creatorStudio"] .creator-result-copy strong {
  font-size: 13px;
}

body[data-active-view="creatorStudio"] .creator-result-copy span {
  min-height: 30px;
}

body[data-active-view="creatorStudio"] .creator-result-copy .generation-result-actions {
  margin-top: 2px;
}

body[data-active-view="creatorStudio"] .creator-result-copy .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-result-copy .generation-result-action-button {
  min-height: 30px;
  border-color: var(--creator-home-line);
  color: rgba(24, 24, 24, 0.78);
  background: #f6fbf9;
}

body[data-active-view="creatorStudio"] .creator-history-panel {
  grid-column: 1 / -1;
  margin-top: 2px;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-prompt-box,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-integrated-settings {
  background: #151515 !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-mode-switchbar,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-head,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-submit-row {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(21, 21, 21, 0.94) !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-quick-model,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-count-compact,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-inline-upload,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab {
  background: rgba(255, 255, 255, 0.055) !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid {
  background: #0b0b0b !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-history-head {
  background: transparent !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-card,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-copy {
  background: #151515 !important;
}

@media (max-width: 1120px) {
  body[data-active-view="creatorStudio"] .creator-studio-shell {
    grid-template-columns: minmax(310px, 360px) minmax(0, 1fr);
  }

  body[data-active-view="creatorStudio"] .creator-result-grid,
  body[data-active-view="creatorStudio"] .creator-result-history-grid {
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  }
}

@media (max-width: 900px) {
  body[data-active-view="creatorStudio"] .creator-studio-shell {
    grid-template-columns: 1fr;
  }

  body[data-active-view="creatorStudio"] .creator-control-panel {
    position: static;
    max-height: none;
  }

  body[data-active-view="creatorStudio"] .creator-history-panel {
    grid-column: 1;
  }
}

@media (max-width: 640px) {
  body[data-active-view="creatorStudio"] .creator-quick-toolbar {
    grid-template-columns: 1fr;
  }

  body[data-active-view="creatorStudio"] .creator-result-grid,
  body[data-active-view="creatorStudio"] .creator-result-history-grid,
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v1.8.199 Canvas mobile final guard: keep the workbench single-column below tablet width. */
@media (max-width: 900px) {
  body[data-active-view="aiCanvas"],
  body[data-theme="light"][data-active-view="aiCanvas"],
  body[data-theme="dark"][data-active-view="aiCanvas"] {
    overflow-x: hidden !important;
  }

  body[data-active-view="aiCanvas"] .app-shell,
  body[data-theme="light"][data-active-view="aiCanvas"] .app-shell,
  body[data-theme="dark"][data-active-view="aiCanvas"] .app-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body[data-active-view="aiCanvas"] .main,
  body[data-theme="light"][data-active-view="aiCanvas"] .main,
  body[data-theme="dark"][data-active-view="aiCanvas"] .main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 10px 22px !important;
    overflow: visible !important;
  }

  body[data-active-view="aiCanvas"] .workflow-canvas-shell,
  body[data-active-view="aiCanvas"] .workflow-canvas-shell.is-console-collapsed,
  body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell,
  body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-shell {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(560px, 68svh) auto auto !important;
    grid-template-areas:
      "top"
      "left"
      "stage"
      "right"
      "tasks" !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  body[data-active-view="aiCanvas"] .workflow-topbar,
  body[data-theme="light"][data-active-view="aiCanvas"] .workflow-topbar,
  body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-topbar {
    grid-area: top !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "brand"
      "summary"
      "actions" !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body[data-active-view="aiCanvas"] .workflow-brand,
  body[data-active-view="aiCanvas"] .workflow-run-summary,
  body[data-active-view="aiCanvas"] .workflow-actions {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-active-view="aiCanvas"] .workflow-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  body[data-active-view="aiCanvas"] .workflow-action-group.is-secondary {
    display: none !important;
  }

  body[data-active-view="aiCanvas"] .workflow-sidebar,
  body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar,
  body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar {
    grid-area: left !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 320px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body[data-active-view="aiCanvas"] .workflow-stage,
  body[data-theme="light"][data-active-view="aiCanvas"] .workflow-stage,
  body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-stage {
    grid-area: stage !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 68svh !important;
    overflow: hidden !important;
  }

  body[data-active-view="aiCanvas"] .workflow-canvas-surface,
  body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-surface,
  body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-surface {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 68svh !important;
    overflow: hidden !important;
  }

  body[data-active-view="aiCanvas"] .workflow-inspector,
  body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector,
  body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector {
    grid-area: right !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    display: flex !important;
    overflow: visible !important;
  }

  body[data-active-view="aiCanvas"] .workflow-taskbar,
  body[data-theme="light"][data-active-view="aiCanvas"] .workflow-taskbar,
  body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-taskbar {
    grid-area: tasks !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body[data-active-view="aiCanvas"] .workflow-console-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: 280px !important;
    overflow: auto !important;
  }

  body[data-active-view="aiCanvas"] .workflow-bottom-controls {
    max-width: calc(100% - 20px) !important;
    overflow-x: auto !important;
  }
}

/* v1.8.210 Creator restored light layout controls */
/* Creator studio follows the site visual system with a Kling-style arrangement */
body[data-active-view="creatorStudio"] {
  --creator-kling-bg: #f7f7f4;
  --creator-kling-panel: #ffffff;
  --creator-kling-panel-strong: #f2f2ef;
  --creator-kling-card: #ffffff;
  --creator-kling-line: rgba(24, 24, 24, 0.1);
  --creator-kling-soft-line: rgba(24, 24, 24, 0.075);
  --creator-kling-text: #181818;
  --creator-kling-muted: rgba(24, 24, 24, 0.58);
  --creator-kling-faint: rgba(24, 24, 24, 0.38);
  --creator-kling-accent: #ef4b43;
  --creator-kling-accent-2: #f36a5f;
  color: var(--creator-kling-text) !important;
  background: var(--creator-kling-bg) !important;
}

body[data-active-view="creatorStudio"] .app-shell,
body[data-active-view="creatorStudio"] .main,
body[data-theme="light"][data-active-view="creatorStudio"] .app-shell,
body[data-theme="light"][data-active-view="creatorStudio"] .main,
body[data-theme="dark"][data-active-view="creatorStudio"] .app-shell,
body[data-theme="dark"][data-active-view="creatorStudio"] .main {
  background: var(--creator-kling-bg) !important;
}

body[data-active-view="creatorStudio"] .main {
  overflow: hidden;
}

body[data-active-view="creatorStudio"] .topbar {
  display: flex !important;
  min-height: 76px;
  margin: 0 !important;
  padding: 18px 22px 14px !important;
  border-bottom: 1px solid rgba(24, 24, 24, 0.08);
  background: var(--creator-kling-bg) !important;
}

body[data-active-view="creatorStudio"] .topbar h1,
body[data-active-view="creatorStudio"] .topbar-title,
body[data-active-view="creatorStudio"] .topbar-eyebrow {
  color: var(--creator-kling-text) !important;
}

body[data-active-view="creatorStudio"] .sidebar {
  border-right-color: rgba(24, 24, 24, 0.08) !important;
  color: rgba(24, 24, 24, 0.62) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .sidebar .brand-name,
body[data-active-view="creatorStudio"] .sidebar .nav-section-label {
  color: rgba(24, 24, 24, 0.68) !important;
}

body[data-active-view="creatorStudio"] .nav-item,
body[data-active-view="creatorStudio"] .sidebar-footer button {
  color: rgba(24, 24, 24, 0.58) !important;
}

body[data-active-view="creatorStudio"] .nav-item.active {
  color: #ef3f35 !important;
  background: #fff0ee !important;
}

body[data-active-view="creatorStudio"] .creator-studio-shell {
  min-height: calc(100svh - 76px);
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr) 78px !important;
  background: var(--creator-kling-bg) !important;
}

body[data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel {
  height: calc(100svh - 76px);
  max-height: calc(100svh - 76px) !important;
  border-right: 1px solid var(--creator-kling-line) !important;
  color: var(--creator-kling-text) !important;
  background: var(--creator-kling-panel) !important;
}

body[data-active-view="creatorStudio"] .creator-control-panel::-webkit-scrollbar-thumb,
body[data-active-view="creatorStudio"] .creator-result-grid::-webkit-scrollbar-thumb,
body[data-active-view="creatorStudio"] .creator-kling-rail::-webkit-scrollbar-thumb {
  background: rgba(24, 24, 24, 0.16);
}

body[data-active-view="creatorStudio"] .creator-task-group-tab,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab {
  color: rgba(24, 24, 24, 0.56) !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-task-group-tab.active {
  color: #181818 !important;
  background: #ececea !important;
}

body[data-active-view="creatorStudio"] .creator-quick-model,
body[data-active-view="creatorStudio"] .creator-count-compact,
body[data-active-view="creatorStudio"] .creator-inline-upload,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-quick-model,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-count-compact,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-inline-upload,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-quick-model,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-count-compact,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-inline-upload {
  border-color: var(--creator-kling-soft-line) !important;
  color: var(--creator-kling-text) !important;
  background: #f5f5f2 !important;
}

body[data-active-view="creatorStudio"] .creator-model-option-group > span,
body[data-active-view="creatorStudio"] .creator-count-compact span,
body[data-active-view="creatorStudio"] .creator-upload-head,
body[data-active-view="creatorStudio"] .creator-upload-head button {
  color: var(--creator-kling-muted) !important;
}

body[data-active-view="creatorStudio"] .creator-model-pill {
  color: rgba(24, 24, 24, 0.62) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-model-pill.active {
  color: #fff !important;
  border-color: var(--creator-kling-accent) !important;
  background: var(--creator-kling-accent) !important;
}

body[data-active-view="creatorStudio"] .creator-count-compact input,
body[data-active-view="creatorStudio"] .creator-setting-grid input,
body[data-active-view="creatorStudio"] .creator-setting-grid select,
body[data-active-view="creatorStudio"] .creator-integrated-settings textarea,
body[data-active-view="creatorStudio"] .creator-prompt-box textarea {
  border-color: rgba(24, 24, 24, 0.1) !important;
  color: var(--creator-kling-text) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-count-compact input:focus,
body[data-active-view="creatorStudio"] .creator-setting-grid input:focus,
body[data-active-view="creatorStudio"] .creator-setting-grid select:focus,
body[data-active-view="creatorStudio"] .creator-integrated-settings textarea:focus,
body[data-active-view="creatorStudio"] .creator-prompt-box textarea:focus {
  border-color: rgba(17, 17, 17, 0.44) !important;
  box-shadow: 0 0 0 3px rgba(239, 75, 67, 0.12) !important;
}

body[data-active-view="creatorStudio"] .creator-upload-card.compact {
  border-color: rgba(24, 24, 24, 0.14) !important;
  color: var(--creator-kling-muted) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-upload-card.compact strong,
body[data-active-view="creatorStudio"] .creator-upload-card.compact i {
  color: rgba(24, 24, 24, 0.72) !important;
}

body[data-active-view="creatorStudio"] .creator-upload-list article,
body[data-active-view="creatorStudio"] .creator-upload-empty {
  border-color: rgba(24, 24, 24, 0.08) !important;
  color: var(--creator-kling-muted) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-prompt-box,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-prompt-box,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-prompt-box {
  border-color: var(--creator-kling-soft-line) !important;
  color: var(--creator-kling-text) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-prompt-box > span,
body[data-active-view="creatorStudio"] #creatorStatus,
body[data-active-view="creatorStudio"] .creator-setting-grid label,
body[data-active-view="creatorStudio"] .creator-switch-row {
  color: var(--creator-kling-muted) !important;
}

body[data-active-view="creatorStudio"] #creatorImagePrompt::placeholder,
body[data-active-view="creatorStudio"] #creatorVideoPrompt::placeholder {
  color: rgba(24, 24, 24, 0.36) !important;
}

body[data-active-view="creatorStudio"] .creator-submit-row,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-submit-row,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-submit-row {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 26%) !important;
}

body[data-active-view="creatorStudio"] #creatorCancelButton {
  border-color: rgba(24, 24, 24, 0.08) !important;
  color: var(--creator-kling-muted) !important;
  background: #f4f4f1 !important;
}

body[data-active-view="creatorStudio"] #creatorGenerateButton {
  color: #fff !important;
  background: var(--creator-kling-accent) !important;
  box-shadow: 0 14px 28px rgba(239, 75, 67, 0.14) !important;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-integrated-settings,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-integrated-settings {
  border-color: var(--creator-kling-soft-line) !important;
  color: var(--creator-kling-text) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings summary {
  color: var(--creator-kling-muted) !important;
}

body[data-active-view="creatorStudio"] .creator-result-panel,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-panel {
  min-height: calc(100svh - 76px) !important;
  color: var(--creator-kling-text) !important;
  background: var(--creator-kling-bg) !important;
}

body[data-active-view="creatorStudio"] .creator-result-head,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-head,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-head {
  border-bottom-color: rgba(24, 24, 24, 0.08) !important;
  color: var(--creator-kling-text) !important;
  background: rgba(247, 247, 244, 0.94) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-feed-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--creator-kling-muted);
  cursor: pointer;
}

body[data-active-view="creatorStudio"] .creator-kling-feed-tabs button.active {
  color: #ef3f35;
  background: #fff0ee;
  box-shadow: inset 0 0 0 1px rgba(24, 24, 24, 0.07);
}

body[data-active-view="creatorStudio"] #creatorResultModel {
  border-color: rgba(24, 24, 24, 0.08) !important;
  color: var(--creator-kling-muted) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid {
  min-height: calc(100svh - 136px) !important;
  max-height: calc(100svh - 136px);
  background: var(--creator-kling-bg) !important;
}

body[data-active-view="creatorStudio"] .creator-result-empty {
  border-color: var(--creator-kling-soft-line) !important;
  color: var(--creator-kling-muted) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-result-toolbar,
body[data-active-view="creatorStudio"] .creator-result-history-head {
  color: var(--creator-kling-text) !important;
}

body[data-active-view="creatorStudio"] .creator-result-toolbar span,
body[data-active-view="creatorStudio"] .creator-result-history-head span {
  color: var(--creator-kling-muted) !important;
}

body[data-active-view="creatorStudio"] .creator-result-card,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-card,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-card {
  border-color: var(--creator-kling-soft-line) !important;
  color: var(--creator-kling-text) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-rail-selected {
  border-color: rgba(239, 75, 67, 0.52) !important;
  box-shadow: 0 0 0 3px rgba(239, 75, 67, 0.1) !important;
}

/* v1.8.287 Creator rail selections locate and highlight matching history cards */
body[data-active-view="creatorStudio"] .creator-result-card[data-result-url] {
  scroll-margin: 96px !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-rail-locating {
  animation: creator-rail-locate-pulse 1.45s ease-out 1 !important;
}

@keyframes creator-rail-locate-pulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(239, 75, 67, 0.34),
      0 0 0 3px rgba(239, 75, 67, 0.12);
  }

  42% {
    box-shadow:
      0 0 0 8px rgba(239, 75, 67, 0.12),
      0 18px 40px rgba(239, 75, 67, 0.16);
  }

  100% {
    box-shadow:
      0 0 0 3px rgba(239, 75, 67, 0.1),
      0 10px 24px rgba(24, 24, 24, 0.06);
  }
}

body[data-active-view="creatorStudio"] .creator-result-media {
  background: #efefeb !important;
}

body[data-active-view="creatorStudio"] .creator-result-media img,
body[data-active-view="creatorStudio"] .creator-result-media video {
  background: #efefeb;
}

body[data-active-view="creatorStudio"] .creator-result-media em {
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #2f2f2f !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

body[data-active-view="creatorStudio"] .creator-result-placeholder {
  color: var(--creator-kling-muted) !important;
  background: #efefeb !important;
}

body[data-active-view="creatorStudio"] .creator-result-copy,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-copy,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-copy {
  color: var(--creator-kling-text) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-result-copy strong {
  color: var(--creator-kling-text) !important;
}

body[data-active-view="creatorStudio"] .creator-result-copy span {
  color: var(--creator-kling-muted) !important;
}

body[data-active-view="creatorStudio"] .creator-result-copy .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-result-copy .generation-result-action-button,
body[data-active-view="creatorStudio"] .batch-secondary-button {
  border-color: rgba(24, 24, 24, 0.08) !important;
  color: #181818 !important;
  background: #f6f6f2 !important;
}

body[data-active-view="creatorStudio"] .creator-result-copy .generation-result-actions a:hover,
body[data-active-view="creatorStudio"] .creator-result-copy .generation-result-action-button:hover,
body[data-active-view="creatorStudio"] .batch-secondary-button:hover {
  border-color: var(--creator-kling-accent) !important;
  color: #fff !important;
  background: var(--creator-kling-accent) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-rail {
  position: sticky;
  top: 0;
  height: calc(100svh - 76px);
  padding: 14px 9px;
  overflow: auto;
  border-left-color: rgba(24, 24, 24, 0.08) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-kling-rail-head {
  display: grid;
  place-items: center;
  gap: 4px;
  margin-bottom: 10px;
  color: var(--creator-kling-muted);
  font-size: 11px;
}

body[data-active-view="creatorStudio"] .creator-kling-rail-list {
  display: grid;
  gap: 8px;
}

body[data-active-view="creatorStudio"] .creator-kling-rail-thumb {
  position: relative;
  display: block;
  width: 56px;
  height: 72px;
  overflow: hidden;
  padding: 0;
  border-color: rgba(24, 24, 24, 0.1);
  border-radius: 9px;
  background: #f1f1ee;
  cursor: pointer;
}

body[data-active-view="creatorStudio"] .creator-kling-rail-thumb.active {
  border-color: var(--creator-kling-accent);
  box-shadow:
    0 0 0 2px rgba(239, 75, 67, 0.22),
    0 8px 18px rgba(239, 75, 67, 0.12);
  transform: translateY(-1px);
}

body[data-active-view="creatorStudio"] .creator-kling-rail-thumb.active::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid rgba(239, 75, 67, 0.82);
  border-radius: 7px;
  pointer-events: none;
}

body[data-active-view="creatorStudio"] .creator-kling-rail-thumb img,
body[data-active-view="creatorStudio"] .creator-kling-rail-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-active-view="creatorStudio"] .creator-kling-rail-thumb span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 4px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: 5px;
  color: rgba(24, 24, 24, 0.72);
  font-size: 10px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.86);
}

body[data-active-view="creatorStudio"] .creator-kling-rail-empty {
  width: 56px;
  padding: 14px 6px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: 9px;
  border-color: rgba(24, 24, 24, 0.08);
  color: var(--creator-kling-faint);
  text-align: center;
  font-size: 11px;
}

body[data-active-view="creatorStudio"] .creator-access-panel {
  border-color: var(--creator-kling-soft-line) !important;
  color: var(--creator-kling-text) !important;
  background: #fff !important;
}

@media (max-width: 900px) {
  body[data-active-view="creatorStudio"] .main {
    overflow: auto;
  }

  body[data-active-view="creatorStudio"] .creator-studio-shell {
    min-height: auto;
  }

  body[data-active-view="creatorStudio"] .creator-control-panel,
  body[data-active-view="creatorStudio"] .creator-result-panel {
    height: auto;
    max-height: none !important;
    min-height: auto !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-grid {
    max-height: none;
    min-height: 60svh !important;
  }
}

/* v1.8.212 Creator two-column history layout */
body[data-active-view="creatorStudio"] .main {
  overflow: auto !important;
}

body[data-active-view="creatorStudio"] .creator-studio-shell {
  grid-template-columns: minmax(340px, 410px) minmax(0, 1fr) 78px !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  gap: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-result-panel,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-panel {
  height: calc(100svh - 76px) !important;
  min-height: calc(100svh - 76px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid {
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  padding: 22px !important;
  overflow: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  align-content: start !important;
  align-items: start !important;
  gap: 18px !important;
  background: var(--creator-kling-bg) !important;
}

body[data-active-view="creatorStudio"] .creator-result-toolbar,
body[data-active-view="creatorStudio"] .creator-result-history-section,
body[data-active-view="creatorStudio"] .creator-result-empty {
  grid-column: 1 / -1 !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section {
  min-width: 0 !important;
  display: grid !important;
  gap: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-head {
  padding: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body[data-active-view="creatorStudio"] .creator-result-card {
  min-width: 0 !important;
  border-radius: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-result-media {
  min-height: 0 !important;
  aspect-ratio: 4 / 5 !important;
}

body[data-active-view="creatorStudio"] .creator-result-media img,
body[data-active-view="creatorStudio"] .creator-result-media video {
  object-fit: cover !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel {
  grid-column: 2 / 4 !important;
  min-width: 0 !important;
  margin: 18px 22px 24px !important;
  padding: 18px !important;
  display: grid !important;
  gap: 14px !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 14px !important;
  color: var(--creator-kling-text) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-toolbar,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-empty {
  grid-column: 1 / -1 !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-toolbar {
  border-color: rgba(24, 24, 24, 0.08) !important;
  background: #f6f6f2 !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-filter-tabs button {
  border-color: rgba(24, 24, 24, 0.08) !important;
  color: rgba(24, 24, 24, 0.62) !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-filter-tabs button.active {
  border-color: #181818 !important;
  color: #fff !important;
  background: #181818 !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group {
  display: grid !important;
  gap: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-head {
  padding: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-head span,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-head strong,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy strong {
  color: var(--creator-kling-text) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-head strong,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-head span,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy span,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy small,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy em {
  color: var(--creator-kling-muted) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card {
  overflow: hidden !important;
  border-color: rgba(24, 24, 24, 0.08) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media {
  min-height: 0 !important;
  aspect-ratio: 4 / 5 !important;
  background: #efefeb !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media img,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media video,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media > div {
  background: #efefeb !important;
  object-fit: cover !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-empty {
  border-color: rgba(24, 24, 24, 0.1) !important;
  color: var(--creator-kling-muted) !important;
  background: #f6f6f2 !important;
}

@media (max-width: 1180px) {
  body[data-active-view="creatorStudio"] .creator-studio-shell {
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important;
  }

  body[data-active-view="creatorStudio"] .creator-kling-rail {
    display: none !important;
  }

  body[data-active-view="creatorStudio"] .creator-history-panel {
    grid-column: 2 !important;
  }
}

@media (max-width: 900px) {
  body[data-active-view="creatorStudio"] .creator-studio-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-view="creatorStudio"] .creator-control-panel,
  body[data-theme="light"][data-active-view="creatorStudio"] .creator-control-panel,
  body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel,
  body[data-active-view="creatorStudio"] .creator-result-panel,
  body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-panel,
  body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-panel {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-grid,
  body[data-active-view="creatorStudio"] .creator-result-history-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px !important;
  }

  body[data-active-view="creatorStudio"] .creator-history-panel {
    grid-column: 1 !important;
    margin: 12px !important;
  }

  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v1.8.216 Creator result dual display pages */
body[data-active-view="creatorStudio"] .creator-result-head-actions {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

body[data-active-view="creatorStudio"] .creator-result-view-switch {
  min-height: 34px !important;
  padding: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

body[data-active-view="creatorStudio"] .creator-result-view-switch button {
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: rgba(24, 24, 24, 0.58) !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

body[data-active-view="creatorStudio"] .creator-result-view-switch button i {
  width: 15px !important;
  height: 15px !important;
}

body[data-active-view="creatorStudio"] .creator-result-view-switch button.active {
  color: #fff !important;
  background: #181818 !important;
  box-shadow: 0 6px 14px rgba(24, 24, 24, 0.12) !important;
}

body[data-active-view="creatorStudio"] .creator-result-head-actions #creatorResultModel {
  min-height: 34px !important;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-history-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card {
  min-height: 226px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 42%) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-media {
  height: 100% !important;
  min-height: 226px !important;
  aspect-ratio: auto !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-copy,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-copy,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-copy {
  min-width: 0 !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
  border-top: 0 !important;
  border-left: 1px solid rgba(24, 24, 24, 0.08) !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-copy strong {
  font-size: 15px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-copy span {
  display: block !important;
  max-width: 54ch !important;
  color: rgba(24, 24, 24, 0.6) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  -webkit-line-clamp: unset !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .generation-result-actions {
  margin-top: 4px !important;
}

/* v1.8.217 Creator resizable prompt/result split and 3x3 video grid */
body[data-active-view="creatorStudio"] .creator-studio-shell {
  grid-template-columns: minmax(300px, var(--creator-control-width, 390px)) 12px minmax(0, 1fr) 78px !important;
}

body[data-active-view="creatorStudio"] .creator-panel-resizer {
  align-self: stretch !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  width: 12px !important;
  min-width: 12px !important;
  height: calc(100svh - 76px) !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(24, 24, 24, 0.32) !important;
  background: transparent !important;
  cursor: col-resize !important;
}

body[data-active-view="creatorStudio"] .creator-panel-resizer span {
  width: 3px !important;
  height: 52px !important;
  border-radius: 999px !important;
  background: rgba(24, 24, 24, 0.14) !important;
  transition: height 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

body[data-active-view="creatorStudio"] .creator-panel-resizer:hover span,
body.is-resizing-creator-panels .creator-panel-resizer span {
  height: 86px !important;
  background: #181818 !important;
  box-shadow: 0 0 0 4px rgba(24, 24, 24, 0.08) !important;
}

body.is-resizing-creator-panels {
  cursor: col-resize !important;
  user-select: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="video"]:not([data-creator-result-view="detail"]),
body[data-active-view="creatorStudio"] .creator-result-history-section.is-video-history .creator-result-history-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="video"]:not([data-creator-result-view="detail"]) .creator-result-card,
body[data-active-view="creatorStudio"] .creator-result-history-section.is-video-history .creator-result-card {
  border-radius: 10px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel {
  grid-column: 3 / 5 !important;
}

@media (max-width: 1180px) {
  body[data-active-view="creatorStudio"] .creator-studio-shell {
    grid-template-columns: minmax(300px, var(--creator-control-width, 370px)) 12px minmax(0, 1fr) !important;
  }

  body[data-active-view="creatorStudio"] .creator-history-panel {
    grid-column: 3 !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-head {
    flex-wrap: wrap !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-head-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

@media (max-width: 900px) {
  body[data-active-view="creatorStudio"] .creator-studio-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-view="creatorStudio"] .creator-panel-resizer {
    display: none !important;
  }

  body[data-active-view="creatorStudio"] .creator-history-panel {
    grid-column: 1 !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="video"]:not([data-creator-result-view="detail"]),
  body[data-active-view="creatorStudio"] .creator-result-history-section.is-video-history .creator-result-history-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 720px) {
  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="video"]:not([data-creator-result-view="detail"]),
  body[data-active-view="creatorStudio"] .creator-result-history-section.is-video-history .creator-result-history-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-view-switch button span {
    display: none !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-media {
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-copy,
  body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-copy,
  body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-copy {
    border-left: 0 !important;
    border-top: 1px solid rgba(24, 24, 24, 0.08) !important;
  }
}

/* v1.8.218 Creator left console rebuilt after Kling video layout */
body[data-active-view="creatorStudio"] {
  --creator-kling-bg: #f7f7f7;
  --creator-kling-panel: #fbfbfb;
  --creator-kling-panel-strong: #ffffff;
  --creator-kling-card: #ffffff;
  --creator-kling-line: rgba(18, 18, 18, 0.1);
  --creator-kling-soft-line: rgba(18, 18, 18, 0.07);
  --creator-kling-text: #181818;
  --creator-kling-muted: rgba(24, 24, 24, 0.58);
  --creator-kling-faint: rgba(24, 24, 24, 0.36);
  --creator-kling-accent: #ef4b43;
  --creator-kling-accent-2: #181818;
}

body[data-active-view="creatorStudio"] .topbar {
  display: none !important;
}

body[data-active-view="creatorStudio"] .main {
  padding: 0 !important;
  overflow: hidden !important;
}

body[data-active-view="creatorStudio"] .creator-studio-shell {
  min-height: 100svh !important;
  grid-template-columns: minmax(410px, var(--creator-control-width, 456px)) 12px minmax(0, 1fr) 78px !important;
  gap: 0 !important;
  background: var(--creator-kling-bg) !important;
}

body[data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel {
  height: 100svh !important;
  max-height: 100svh !important;
  padding: 0 18px !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto auto !important;
  gap: 10px !important;
  overflow: auto !important;
  border-right: 1px solid rgba(18, 18, 18, 0.1) !important;
  border-radius: 0 !important;
  color: var(--creator-kling-text) !important;
  background: #fbfbfb !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar {
  min-height: 58px !important;
  margin: 0 -18px !important;
  padding: 0 18px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-bottom: 1px solid rgba(18, 18, 18, 0.08) !important;
  background: #fbfbfb !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab {
  min-height: 58px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(24, 24, 24, 0.52) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 transparent !important;
  transform: none !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab strong {
  color: inherit !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab.active {
  color: #181818 !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 #181818 !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab.is-disabled {
  cursor: default !important;
  opacity: 0.72 !important;
}

body[data-active-view="creatorStudio"] .creator-kling-model-card {
  min-height: 54px !important;
  margin-top: 4px !important;
  padding: 7px 11px 7px 7px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 11px !important;
  border: 1px solid rgba(18, 18, 18, 0.1) !important;
  border-radius: 12px !important;
  color: #181818 !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-model-badge {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.34), transparent 28%), linear-gradient(135deg, #181818 0%, #ef4b43 100%) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-model-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

body[data-active-view="creatorStudio"] .creator-model-copy strong {
  color: #181818 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body[data-active-view="creatorStudio"] .creator-model-copy span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(24, 24, 24, 0.54) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="creatorStudio"] .creator-kling-model-card > i {
  width: 17px !important;
  height: 17px !important;
  color: rgba(24, 24, 24, 0.48) !important;
}

body[data-active-view="creatorStudio"] .creator-model-option-row {
  min-width: 0 !important;
  display: grid !important;
  gap: 8px !important;
}

body[data-active-view="creatorStudio"] .creator-quick-model,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-quick-model,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-quick-model {
  padding: 8px !important;
  border: 1px solid rgba(18, 18, 18, 0.08) !important;
  border-radius: 12px !important;
  background: #f1f1ef !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-model-option-group > span {
  display: block !important;
  margin-bottom: 7px !important;
  color: rgba(24, 24, 24, 0.52) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body[data-active-view="creatorStudio"] .creator-model-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-model-pill {
  min-height: 29px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(18, 18, 18, 0.08) !important;
  border-radius: 9px !important;
  color: rgba(24, 24, 24, 0.68) !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

body[data-active-view="creatorStudio"] .creator-model-pill.active {
  color: #fff !important;
  border-color: #181818 !important;
  background: #181818 !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card {
  min-height: 0 !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(18, 18, 18, 0.08) !important;
  border-radius: 12px !important;
  background: #0f0f0f !important;
}

body[data-active-view="creatorStudio"] .creator-reference-tabs {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body[data-active-view="creatorStudio"] .creator-reference-tabs button {
  min-height: 30px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

body[data-active-view="creatorStudio"] .creator-reference-tabs button.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body[data-active-view="creatorStudio"] .creator-reference-tabs button span,
body[data-active-view="creatorStudio"] .creator-reference-tabs button strong {
  font: inherit !important;
  color: inherit !important;
}

body[data-active-view="creatorStudio"] .creator-kling-upload-zone {
  min-width: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-inline-upload,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-inline-upload,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-inline-upload {
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-kling-upload-zone .creator-inline-upload > .creator-upload-card.compact {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body[data-active-view="creatorStudio"] .creator-kling-upload-zone .creator-inline-upload > .creator-upload-head {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin-top: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-kling-upload-zone .creator-inline-upload > #creatorUploadList {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

body[data-active-view="creatorStudio"] .creator-kling-upload-zone #creatorTailUploadPanel {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  border: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-kling-upload-zone #creatorTailUploadPanel[hidden] {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-kling-upload-zone #creatorTailUploadPanel .creator-upload-head,
body[data-active-view="creatorStudio"] .creator-kling-upload-zone #creatorTailUploadList {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact {
  min-height: 66px !important;
  padding: 10px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.64) !important;
  background: #1a1a1a !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact i {
  width: 19px !important;
  height: 19px !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact strong {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact span {
  color: rgba(255, 255, 255, 0.44) !important;
  font-size: 11px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-head {
  margin-top: 8px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-head button {
  color: rgba(255, 255, 255, 0.7) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-list {
  margin-top: 8px !important;
  display: grid !important;
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-list article,
body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-empty {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.58) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-prompt-box,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-prompt-box,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-prompt-box {
  height: 100% !important;
  min-height: 180px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-kling-prompt-box > span {
  margin-bottom: 7px !important;
  color: rgba(255, 255, 255, 0.44) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body[data-active-view="creatorStudio"] #creatorImagePrompt,
body[data-active-view="creatorStudio"] #creatorVideoPrompt {
  width: 100% !important;
  height: 100% !important;
  min-height: 170px !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  background: transparent !important;
  box-shadow: none !important;
  resize: none !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

body[data-active-view="creatorStudio"] #creatorImagePrompt::placeholder,
body[data-active-view="creatorStudio"] #creatorVideoPrompt::placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
}

body[data-active-view="creatorStudio"] .creator-prompt-helper {
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

body[data-active-view="creatorStudio"] .creator-storyboard-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body[data-active-view="creatorStudio"] .creator-storyboard-row .creator-switch-row,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-storyboard-row .creator-switch-row,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-storyboard-row .creator-switch-row,
body[data-active-view="creatorStudio"] .creator-storyboard-button {
  min-height: 30px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body[data-active-view="creatorStudio"] .creator-storyboard-row .creator-switch-row input {
  accent-color: #ef4b43 !important;
}

body[data-active-view="creatorStudio"] .creator-content-policy {
  color: rgba(24, 24, 24, 0.42) !important;
  font-size: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-parameter-bar {
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body[data-active-view="creatorStudio"] .creator-parameter-bar .creator-mode-panel {
  display: contents !important;
}

body[data-active-view="creatorStudio"] .creator-parameter-bar .creator-mode-panel[hidden] {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-count-compact,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-count-compact,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-count-compact {
  min-height: 34px !important;
  padding: 4px 8px !important;
  display: inline-grid !important;
  grid-template-columns: auto minmax(42px, auto) !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid rgba(18, 18, 18, 0.08) !important;
  border-radius: 10px !important;
  color: #181818 !important;
  background: #fff !important;
}

body[data-active-view="creatorStudio"] .creator-count-compact span {
  color: rgba(24, 24, 24, 0.5) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body[data-active-view="creatorStudio"] .creator-count-compact input,
body[data-active-view="creatorStudio"] .creator-count-compact select {
  min-width: 0 !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #181818 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body[data-active-view="creatorStudio"] .creator-output-count-field input {
  width: 36px !important;
}

body[data-active-view="creatorStudio"] .creator-cfg-compact input {
  width: 44px !important;
}

body[data-active-view="creatorStudio"] .creator-submit-row,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-submit-row,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-submit-row {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 8 !important;
  margin: 0 -18px !important;
  padding: 10px 18px 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  border: 0 !important;
  border-top: 1px solid rgba(18, 18, 18, 0.08) !important;
  border-radius: 0 !important;
  background: rgba(251, 251, 251, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-submit-row > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  color: rgba(24, 24, 24, 0.58) !important;
  font-size: 12px !important;
}

body[data-active-view="creatorStudio"] #creatorCancelButton {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 30px !important;
}

body[data-active-view="creatorStudio"] #creatorGenerateButton {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-height: 42px !important;
  width: 100% !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #ef4b43, #181818) !important;
  box-shadow: 0 10px 22px rgba(239, 75, 67, 0.16) !important;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-integrated-settings,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-integrated-settings {
  margin: 0 -18px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-top: 1px solid rgba(18, 18, 18, 0.08) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings summary {
  min-height: 42px !important;
  padding: 8px 18px !important;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings-body {
  padding: 0 18px 14px !important;
}

body[data-active-view="creatorStudio"] .creator-advanced-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-active-view="creatorStudio"] .creator-panel-resizer {
  height: 100svh !important;
}

body[data-active-view="creatorStudio"] .creator-result-panel,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-panel,
body[data-active-view="creatorStudio"] .creator-kling-rail {
  height: 100svh !important;
  min-height: 100svh !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid {
  min-height: 0 !important;
}

@media (max-width: 1180px) {
  body[data-active-view="creatorStudio"] .creator-studio-shell {
    grid-template-columns: minmax(390px, var(--creator-control-width, 430px)) 12px minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  body[data-active-view="creatorStudio"] .main {
    overflow: auto !important;
  }

  body[data-active-view="creatorStudio"] .creator-studio-shell {
    min-height: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-view="creatorStudio"] .creator-control-panel,
  body[data-theme="light"][data-active-view="creatorStudio"] .creator-control-panel,
  body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel {
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
  }
}

@media (max-width: 560px) {
  body[data-active-view="creatorStudio"] .creator-mode-switchbar {
    overflow-x: auto !important;
    grid-template-columns: repeat(4, minmax(86px, 1fr)) !important;
  }

  body[data-active-view="creatorStudio"] .creator-count-compact {
    flex: 1 1 142px !important;
  }
}

/* v1.8.219 Creator studio neutral color system and reachable settings */
body[data-active-view="creatorStudio"] {
  --creator-surface-page: #f6f5f3;
  --creator-surface-panel: #fbfaf8;
  --creator-surface-card: #ffffff;
  --creator-surface-soft: #f2f1ee;
  --creator-line: rgba(26, 24, 21, 0.1);
  --creator-line-strong: rgba(26, 24, 21, 0.16);
  --creator-text-main: #1b1916;
  --creator-text-subtle: rgba(27, 25, 22, 0.62);
  --creator-text-faint: rgba(27, 25, 22, 0.42);
  --creator-red: #e54840;
  --creator-red-soft: rgba(229, 72, 64, 0.12);
  --creator-shadow-soft: 0 14px 34px rgba(28, 24, 18, 0.06);
}

body[data-active-view="creatorStudio"] .creator-studio-shell {
  background: var(--creator-surface-page) !important;
}

body[data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel {
  grid-template-rows: auto auto auto 318px auto auto auto auto !important;
  gap: 9px !important;
  color: var(--creator-text-main) !important;
  border-right-color: var(--creator-line) !important;
  background: var(--creator-surface-panel) !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar {
  border-bottom-color: var(--creator-line) !important;
  background: var(--creator-surface-panel) !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab {
  color: var(--creator-text-faint) !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab.active {
  color: var(--creator-text-main) !important;
  box-shadow: inset 0 -2px 0 var(--creator-text-main) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-model-card,
body[data-active-view="creatorStudio"] .creator-quick-model,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-quick-model,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-quick-model {
  border-color: var(--creator-line) !important;
  color: var(--creator-text-main) !important;
  background: var(--creator-surface-card) !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-quick-model {
  background: var(--creator-surface-soft) !important;
}

body[data-active-view="creatorStudio"] .creator-model-badge {
  color: #fff !important;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.38), transparent 28%),
    linear-gradient(135deg, #1b1916 0%, #9f312d 48%, var(--creator-red) 100%) !important;
}

body[data-active-view="creatorStudio"] .creator-model-copy strong,
body[data-active-view="creatorStudio"] .creator-model-option-group > span {
  color: var(--creator-text-main) !important;
}

body[data-active-view="creatorStudio"] .creator-model-copy span {
  color: var(--creator-text-subtle) !important;
}

body[data-active-view="creatorStudio"] .creator-model-pill {
  color: var(--creator-text-subtle) !important;
  border-color: rgba(27, 25, 22, 0.08) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

body[data-active-view="creatorStudio"] .creator-model-pill.active {
  color: #fff !important;
  border-color: var(--creator-text-main) !important;
  background: var(--creator-text-main) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card {
  padding: 10px !important;
  gap: 8px !important;
  color: var(--creator-text-main) !important;
  border-color: var(--creator-line) !important;
  background: var(--creator-surface-card) !important;
  box-shadow: var(--creator-shadow-soft) !important;
}

body[data-active-view="creatorStudio"] .creator-reference-tabs {
  min-height: 30px !important;
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-reference-tabs button {
  min-height: 28px !important;
  color: var(--creator-text-subtle) !important;
  background: var(--creator-surface-soft) !important;
}

body[data-active-view="creatorStudio"] .creator-reference-tabs button.active {
  color: #fff !important;
  background: var(--creator-text-main) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact {
  min-height: 60px !important;
  color: var(--creator-text-subtle) !important;
  border-color: rgba(27, 25, 22, 0.1) !important;
  background: var(--creator-surface-soft) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact i,
body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact strong {
  color: var(--creator-text-main) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact span,
body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-head,
body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-list article,
body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-empty {
  color: var(--creator-text-subtle) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-head button {
  color: var(--creator-text-main) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-list article,
body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-empty {
  border-color: rgba(27, 25, 22, 0.08) !important;
  background: rgba(246, 245, 243, 0.78) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-prompt-box,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-prompt-box,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-prompt-box {
  min-height: 128px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-prompt-box > span {
  color: var(--creator-text-subtle) !important;
}

body[data-active-view="creatorStudio"] #creatorImagePrompt,
body[data-active-view="creatorStudio"] #creatorVideoPrompt {
  min-height: 118px !important;
  padding: 12px !important;
  color: var(--creator-text-main) !important;
  border: 1px solid rgba(27, 25, 22, 0.08) !important;
  border-radius: 10px !important;
  background: #faf9f7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body[data-active-view="creatorStudio"] #creatorImagePrompt::placeholder,
body[data-active-view="creatorStudio"] #creatorVideoPrompt::placeholder {
  color: var(--creator-text-faint) !important;
}

body[data-active-view="creatorStudio"] .creator-prompt-helper {
  color: var(--creator-text-subtle) !important;
}

body[data-active-view="creatorStudio"] .creator-storyboard-row .creator-switch-row,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-storyboard-row .creator-switch-row,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-storyboard-row .creator-switch-row,
body[data-active-view="creatorStudio"] .creator-storyboard-button {
  color: var(--creator-text-subtle) !important;
  border-color: rgba(27, 25, 22, 0.1) !important;
  background: var(--creator-surface-soft) !important;
}

body[data-active-view="creatorStudio"] .creator-content-policy {
  color: var(--creator-text-faint) !important;
}

body[data-active-view="creatorStudio"] .creator-count-compact,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-count-compact,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-count-compact {
  border-color: var(--creator-line) !important;
  color: var(--creator-text-main) !important;
  background: var(--creator-surface-card) !important;
}

body[data-active-view="creatorStudio"] .creator-count-compact span {
  color: var(--creator-text-subtle) !important;
}

body[data-active-view="creatorStudio"] .creator-count-compact input,
body[data-active-view="creatorStudio"] .creator-count-compact select {
  color: var(--creator-text-main) !important;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-integrated-settings,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-integrated-settings {
  position: relative !important;
  z-index: 11 !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 1px solid var(--creator-line) !important;
  border-radius: 12px !important;
  color: var(--creator-text-main) !important;
  background: var(--creator-surface-card) !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings summary {
  min-height: 44px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  border-radius: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings summary span {
  color: var(--creator-text-main) !important;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings summary strong {
  color: var(--creator-text-subtle) !important;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings-body {
  padding: 0 12px 12px !important;
}

body[data-active-view="creatorStudio"] .creator-submit-row,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-submit-row,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-submit-row {
  z-index: 10 !important;
  margin: 0 -18px !important;
  padding: 10px 18px 14px !important;
  border-top-color: var(--creator-line) !important;
  background: rgba(251, 250, 248, 0.96) !important;
  box-shadow: 0 -18px 28px rgba(251, 250, 248, 0.76) !important;
}

body[data-active-view="creatorStudio"] .creator-submit-row > span {
  color: var(--creator-text-subtle) !important;
}

body[data-active-view="creatorStudio"] #creatorGenerateButton {
  color: #fff !important;
  background: var(--creator-red) !important;
  box-shadow: 0 12px 24px rgba(229, 72, 64, 0.18) !important;
}

body[data-active-view="creatorStudio"] #creatorGenerateButton:hover {
  background: #d93e37 !important;
}

body[data-active-view="creatorStudio"] #creatorCancelButton {
  color: var(--creator-text-faint) !important;
  border-color: var(--creator-line) !important;
  background: rgba(255, 255, 255, 0.74) !important;
}

body[data-active-view="creatorStudio"] .creator-result-panel,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-panel {
  background: var(--creator-surface-page) !important;
}

body[data-active-view="creatorStudio"] .creator-result-head {
  border-bottom: 1px solid var(--creator-line) !important;
  background: rgba(246, 245, 243, 0.92) !important;
  backdrop-filter: blur(14px) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-feed-tabs button,
body[data-active-view="creatorStudio"] .creator-result-view-switch,
body[data-active-view="creatorStudio"] #creatorResultModel {
  border-color: var(--creator-line) !important;
  color: var(--creator-text-subtle) !important;
  background: var(--creator-surface-card) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-feed-tabs button.active {
  color: var(--creator-red) !important;
  border-color: var(--creator-red-soft) !important;
  background: var(--creator-red-soft) !important;
}

body[data-active-view="creatorStudio"] .creator-result-view-switch button.active {
  color: #fff !important;
  background: var(--creator-text-main) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-rail {
  border-left: 1px solid var(--creator-line) !important;
  background: rgba(251, 250, 248, 0.9) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel {
  background: var(--creator-surface-page) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-toolbar,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-empty {
  border-color: var(--creator-line) !important;
  background: var(--creator-surface-card) !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar {
  min-height: 48px !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab {
  min-height: 48px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-model-card {
  min-height: 48px !important;
  padding: 6px 10px 6px 6px !important;
  grid-template-columns: 36px minmax(0, 1fr) 18px !important;
}

body[data-active-view="creatorStudio"] .creator-model-badge {
  width: 36px !important;
  height: 36px !important;
  font-size: 15px !important;
}

body[data-active-view="creatorStudio"] .creator-quick-model,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-quick-model,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-quick-model {
  padding: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-model-option-group > span {
  margin-bottom: 5px !important;
}

body[data-active-view="creatorStudio"] .creator-model-pill {
  min-height: 26px !important;
  padding: 0 9px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card {
  min-height: 318px !important;
  grid-template-rows: auto auto minmax(110px, 1fr) auto auto !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-list:has(.creator-upload-empty) {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-head {
  min-height: 18px !important;
  margin-top: 5px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-prompt-box,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-prompt-box,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-prompt-box {
  min-height: 112px !important;
}

body[data-active-view="creatorStudio"] #creatorImagePrompt,
body[data-active-view="creatorStudio"] #creatorVideoPrompt {
  height: 70px !important;
  min-height: 70px !important;
}

body[data-active-view="creatorStudio"] .creator-prompt-helper {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-parameter-bar {
  min-height: 46px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 2px !important;
}

body[data-active-view="creatorStudio"] .creator-count-compact,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-count-compact,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-count-compact {
  flex: 0 0 auto !important;
  min-height: 32px !important;
}

body[data-active-view="creatorStudio"] .creator-submit-row,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-submit-row,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-submit-row {
  padding-top: 8px !important;
  padding-bottom: 10px !important;
}

body[data-active-view="creatorStudio"] #creatorGenerateButton {
  min-height: 40px !important;
}

body[data-active-view="creatorStudio"] .creator-control-panel:has(.creator-integrated-settings[open]) .creator-submit-row,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-control-panel:has(.creator-integrated-settings[open]) .creator-submit-row,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel:has(.creator-integrated-settings[open]) .creator-submit-row {
  position: static !important;
  box-shadow: none !important;
}

/* v1.8.220 Creator model switcher integrated into model card */
body[data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel {
  grid-template-rows: auto auto 318px auto auto auto auto !important;
}

body[data-active-view="creatorStudio"] .creator-model-dropdown {
  position: relative !important;
  z-index: 24 !important;
  min-width: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-model-dropdown.is-open {
  z-index: 60 !important;
}

body[data-active-view="creatorStudio"] .creator-kling-model-card,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-model-card,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-model-card {
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  text-align: left !important;
}

body[data-active-view="creatorStudio"] .creator-kling-model-card:hover,
body[data-active-view="creatorStudio"] .creator-model-dropdown.is-open .creator-kling-model-card {
  border-color: var(--creator-line-strong) !important;
  box-shadow: 0 12px 26px rgba(28, 24, 18, 0.06) !important;
}

body[data-active-view="creatorStudio"] .creator-model-chevron {
  transition: transform 0.18s ease !important;
}

body[data-active-view="creatorStudio"] .creator-model-dropdown.is-open .creator-model-chevron {
  transform: rotate(180deg) !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu[hidden],
body[data-active-view="creatorStudio"] .creator-model-menu-group[hidden] {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  max-height: min(300px, calc(100svh - 152px)) !important;
  padding: 7px !important;
  display: grid !important;
  gap: 5px !important;
  overflow: auto !important;
  border: 1px solid var(--creator-line-strong) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 20px 46px rgba(28, 24, 18, 0.16) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu-group {
  display: grid !important;
  gap: 5px !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu-item {
  width: 100% !important;
  min-height: 58px !important;
  padding: 8px !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: var(--creator-text-main) !important;
  background: transparent !important;
  text-align: left !important;
  cursor: pointer !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu-item:hover {
  border-color: rgba(27, 25, 22, 0.08) !important;
  background: var(--creator-surface-soft) !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu-item.active {
  border-color: rgba(229, 72, 64, 0.18) !important;
  background: var(--creator-red-soft) !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu-item.is-disabled {
  cursor: default !important;
  opacity: 0.56 !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu-badge {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.34), transparent 30%),
    linear-gradient(135deg, #1b1916 0%, #9f312d 48%, var(--creator-red) 100%) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu-copy strong,
body[data-active-view="creatorStudio"] .creator-model-menu-copy small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu-copy strong {
  color: var(--creator-text-main) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu-copy small {
  color: var(--creator-text-subtle) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu-item > i {
  width: 17px !important;
  height: 17px !important;
  color: var(--creator-red) !important;
  opacity: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-model-menu-item.active > i {
  opacity: 1 !important;
}

/* v1.8.221 Creator two-mode tabs only */
body[data-active-view="creatorStudio"] .creator-mode-switchbar,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-mode-switchbar,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-mode-switchbar {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 560px) {
  body[data-active-view="creatorStudio"] .creator-mode-switchbar,
  body[data-theme="light"][data-active-view="creatorStudio"] .creator-mode-switchbar,
  body[data-theme="dark"][data-active-view="creatorStudio"] .creator-mode-switchbar {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }
}

/* v1.8.222 Creator history matches home media cards */
body[data-active-view="creatorStudio"] .creator-history-panel,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel {
  padding: 18px 22px 28px !important;
  gap: 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--creator-surface-page) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-head {
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-head span,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-head strong {
  color: var(--creator-text-subtle) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-head strong,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-head span {
  color: var(--creator-text-main) !important;
  font-size: 18px !important;
  font-weight: 940 !important;
  letter-spacing: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-grid {
  gap: 16px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-toolbar {
  padding: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid var(--creator-line) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.62) !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-toolbar {
  background: rgba(18, 18, 18, 0.72) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-filter-tabs {
  flex: 1 1 auto !important;
  min-width: 220px !important;
  padding: 0 !important;
  gap: 6px !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-filter-tabs button {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--creator-text-subtle) !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-filter-tabs button.active {
  color: var(--creator-red) !important;
  background: var(--creator-red-soft) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-toolbar > .batch-secondary-button {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-color: var(--creator-line) !important;
  border-radius: 999px !important;
  color: var(--creator-text-main) !important;
  background: var(--creator-surface-card) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group {
  gap: 12px !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-head {
  padding: 4px 0 0 !important;
  border: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-head .batch-secondary-button {
  min-height: 30px !important;
  padding: 0 10px !important;
  border-color: var(--creator-line) !important;
  border-radius: 999px !important;
  color: var(--creator-text-subtle) !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card {
  overflow: visible !important;
  display: grid !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media {
  position: relative !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  background:
    var(--template-cover-image, none) center / cover no-repeat,
    linear-gradient(135deg, #efeee8, #cfd8d4) !important;
  box-shadow: 0 14px 34px rgba(28, 24, 18, 0.11) !important;
  transition: transform 0.22s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-media {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    var(--template-cover-image, none) center / cover no-repeat,
    linear-gradient(135deg, #1a1a1a, #050505) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover .generation-history-media,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within .generation-history-media {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  box-shadow: 0 18px 42px rgba(28, 24, 18, 0.16) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 30%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.72), transparent 45%) !important;
  opacity: 0.72 !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media img,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media video,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media > div:not(.generation-history-card-badges):not(.generation-history-card-actions) {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background: transparent !important;
  object-fit: cover !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card-badges {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  z-index: 4 !important;
  min-height: 26px !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card-badges span {
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 5px 8px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(18, 18, 18, 0.48) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.46) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card-actions {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 4 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(14px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within .generation-history-card-actions {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card-actions .generation-result-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card-actions .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card-actions .generation-result-action-button {
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #111 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 920 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card-actions .generation-result-action-button {
  color: #fff !important;
  background: rgba(24, 24, 24, 0.72) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy {
  min-width: 0 !important;
  padding: 0 2px 2px !important;
  gap: 5px !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy strong {
  color: var(--creator-text-main) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy span,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy small,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy em {
  color: var(--creator-text-subtle) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy small {
  display: block !important;
  -webkit-line-clamp: unset !important;
  color: var(--creator-text-faint) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-empty {
  border-color: var(--creator-line) !important;
  border-radius: 12px !important;
  color: var(--creator-text-subtle) !important;
  background: var(--creator-surface-card) !important;
}

@media (hover: none) {
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card-actions {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body[data-active-view="creatorStudio"] .creator-history-panel,
  body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel,
  body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel {
    padding: 14px 12px 22px !important;
  }

  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v1.8.223 Creator history denser columns and image zoom */
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.generation-image-preview-zoom {
  margin-right: auto;
  min-width: 0;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.generation-image-preview-zoom span {
  min-width: 48px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.generation-image-preview-zoom button {
  min-width: 36px;
  padding: 0 10px;
}

.generation-image-preview-zoom svg {
  width: 15px;
  height: 15px;
}

.generation-image-preview-stage img[data-generation-image-preview-image] {
  transform-origin: center center;
  transition: width 0.16s ease, max-width 0.16s ease, max-height 0.16s ease;
}

@media (max-width: 1080px) {
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .generation-image-preview-actions {
    justify-content: stretch;
  }

  .generation-image-preview-zoom {
    width: 100%;
    margin-right: 0;
    justify-content: center;
  }
}

@media (max-width: 430px) {
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v1.8.224 Creator compact controls and larger prompt */
body[data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel {
  padding: 0 14px !important;
  grid-template-rows: 42px max-content 418px max-content max-content max-content max-content !important;
  gap: 6px !important;
  align-content: start !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 -14px !important;
  padding: 0 14px !important;
  overflow: hidden !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
}

body[data-active-view="creatorStudio"] .creator-mode-switchbar .creator-task-group-tab strong {
  font-size: 14px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-model-card {
  min-height: 42px !important;
  margin-top: 2px !important;
  padding: 5px 9px 5px 5px !important;
  grid-template-columns: 32px minmax(0, 1fr) 16px !important;
  gap: 8px !important;
}

body[data-active-view="creatorStudio"] .creator-model-badge {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

body[data-active-view="creatorStudio"] .creator-model-copy strong {
  font-size: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-model-copy span {
  font-size: 10.5px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card {
  min-height: 418px !important;
  padding: 8px !important;
  grid-template-rows: auto auto minmax(224px, 1fr) auto auto !important;
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-reference-tabs {
  min-height: 26px !important;
  gap: 5px !important;
}

body[data-active-view="creatorStudio"] .creator-reference-tabs button {
  min-height: 26px !important;
  padding: 0 8px !important;
  font-size: 11.5px !important;
}

body[data-active-view="creatorStudio"] .creator-inline-upload,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-inline-upload,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-inline-upload {
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact {
  min-height: 48px !important;
  padding: 6px !important;
  gap: 3px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact i {
  width: 16px !important;
  height: 16px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact strong {
  font-size: 11.5px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-card.compact span {
  font-size: 10px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-head {
  min-height: 15px !important;
  margin-top: 2px !important;
  font-size: 10.5px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-prompt-box,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-prompt-box,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-prompt-box {
  min-height: 238px !important;
}

body[data-active-view="creatorStudio"] .creator-kling-prompt-box > span {
  margin-bottom: 4px !important;
  font-size: 11.5px !important;
}

body[data-active-view="creatorStudio"] #creatorImagePrompt,
body[data-active-view="creatorStudio"] #creatorVideoPrompt {
  min-height: 224px !important;
  padding: 10px !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
}

body[data-active-view="creatorStudio"] .creator-prompt-helper {
  font-size: 11px !important;
  line-height: 1.42 !important;
}

body[data-active-view="creatorStudio"] .creator-storyboard-row {
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-storyboard-row .creator-switch-row,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-storyboard-row .creator-switch-row,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-storyboard-row .creator-switch-row,
body[data-active-view="creatorStudio"] .creator-storyboard-button {
  min-height: 26px !important;
  padding: 0 8px !important;
  font-size: 11.5px !important;
}

body[data-active-view="creatorStudio"] .creator-content-policy {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

body[data-active-view="creatorStudio"] .creator-parameter-bar {
  min-height: 30px !important;
  gap: 5px !important;
}

body[data-active-view="creatorStudio"] .creator-count-compact,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-count-compact,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-count-compact {
  min-height: 30px !important;
  padding: 3px 7px !important;
  gap: 5px !important;
  border-radius: 9px !important;
}

body[data-active-view="creatorStudio"] .creator-count-compact input,
body[data-active-view="creatorStudio"] .creator-count-compact select {
  min-height: 22px !important;
  font-size: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings summary {
  min-height: 34px !important;
  padding: 6px 10px !important;
}

body[data-active-view="creatorStudio"] .creator-integrated-settings-body {
  padding: 0 10px 10px !important;
}

body[data-active-view="creatorStudio"] .creator-submit-row,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-submit-row,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-submit-row {
  margin: 0 -14px !important;
  min-height: 34px !important;
  padding: 4px 14px 5px !important;
  grid-template-columns: minmax(68px, 1fr) 66px minmax(126px, auto) !important;
  grid-template-rows: minmax(30px, auto) !important;
  gap: 5px 7px !important;
  align-items: center !important;
  align-content: center !important;
  box-shadow: 0 -10px 18px rgba(251, 250, 248, 0.62) !important;
}

body[data-active-view="creatorStudio"] .creator-submit-row > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: auto !important;
  align-self: center !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
}

body[data-active-view="creatorStudio"] .creator-submit-row em {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-submit-row .primary-button,
body[data-active-view="creatorStudio"] .creator-submit-row .text-button {
  grid-row: 1 !important;
  width: auto !important;
  min-height: 30px !important;
  padding-inline: 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body[data-active-view="creatorStudio"] #creatorCancelButton {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 66px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
}

body[data-active-view="creatorStudio"] .creator-submit-row .primary-button {
  min-width: 118px !important;
}

body[data-active-view="creatorStudio"] #creatorGenerateButton {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 126px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
}

@media (max-width: 900px) {
  body[data-active-view="creatorStudio"] .creator-control-panel,
  body[data-theme="light"][data-active-view="creatorStudio"] .creator-control-panel,
  body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel {
    grid-template-rows: 42px auto minmax(390px, auto) auto auto auto auto !important;
  }
}

/* v1.8.225 Creator history media density and detail zoom */
body[data-active-view="creatorStudio"] .creator-result-history-section.is-image-history .creator-result-history-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-history-video .creator-result-copy {
  padding: 8px 10px 10px !important;
  gap: 7px !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-history-video .creator-result-copy > strong,
body[data-active-view="creatorStudio"] .creator-result-card.is-history-video .creator-result-copy > div,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] .generation-history-copy > div {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-history-video .creator-result-copy > span,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] .generation-history-copy small {
  min-height: 0 !important;
  display: block !important;
  color: var(--creator-text-subtle) !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.generation-image-preview-card {
  width: min(1280px, calc(100vw - 36px)) !important;
}

.generation-image-preview-actions {
  flex-wrap: wrap !important;
}

.generation-image-preview-stage.is-zoomed {
  place-items: start center !important;
  cursor: grab !important;
  touch-action: none !important;
}

.generation-image-preview-stage.is-dragging {
  cursor: grabbing !important;
}

.generation-image-preview-stage.is-zoomed img[data-generation-image-preview-image] {
  max-width: none !important;
  max-height: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

@media (max-width: 1180px) {
  body[data-active-view="creatorStudio"] .creator-result-history-section.is-image-history .creator-result-history-grid,
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body[data-active-view="creatorStudio"] .creator-result-history-section.is-image-history .creator-result-history-grid,
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v1.8.226 Creator history hover reveal and scroll playback */
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-history-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-media {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
  background:
    var(--template-cover-image, none) center / cover no-repeat,
    linear-gradient(135deg, #efeee8, #d4dbd8) !important;
  box-shadow: 0 12px 28px rgba(28, 24, 18, 0.1) !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-media {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    var(--template-cover-image, none) center / cover no-repeat,
    linear-gradient(135deg, #181818, #050505) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32) !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-media::after,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 28%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent 52%) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card:hover .creator-result-media::after,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card:focus-within .creator-result-media::after,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-preview-playing .creator-result-media::after,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover .generation-history-media::after,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within .generation-history-media::after,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.is-history-preview-playing .generation-history-media::after {
  opacity: 1 !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-media img,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-media video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-media em {
  z-index: 5 !important;
  left: 8px !important;
  bottom: 8px !important;
  max-width: calc(100% - 16px) !important;
  color: #fff !important;
  background: rgba(18, 18, 18, 0.52) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-copy,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-copy,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-copy {
  position: absolute !important;
  left: 9px !important;
  right: 9px !important;
  bottom: 9px !important;
  z-index: 6 !important;
  min-width: 0 !important;
  max-width: calc(100% - 18px) !important;
  padding: 10px !important;
  display: grid !important;
  gap: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: rgba(18, 18, 18, 0.5) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(14px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card:hover .creator-result-copy,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card:focus-within .creator-result-copy,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-preview-playing .creator-result-copy {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-copy strong,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-copy span {
  min-height: 0 !important;
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42) !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-history-video .creator-result-copy > strong {
  display: block !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-copy strong {
  overflow: hidden !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-copy span {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-copy .generation-result-actions {
  margin-top: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-copy .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-copy .generation-result-action-button {
  min-height: 31px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #111 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media {
  border-radius: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card-badges {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover .generation-history-card-badges,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within .generation-history-card-badges,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.is-history-preview-playing .generation-history-card-badges {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy {
  position: absolute !important;
  left: 9px !important;
  right: 9px !important;
  bottom: 50px !important;
  z-index: 5 !important;
  min-width: 0 !important;
  max-width: calc(100% - 18px) !important;
  padding: 0 !important;
  display: grid !important;
  gap: 4px !important;
  color: #fff !important;
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(14px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover .generation-history-copy,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within .generation-history-copy,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.is-history-preview-playing .generation-history-copy {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy > div,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] .generation-history-copy > div {
  display: grid !important;
  gap: 2px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy strong,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy span,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy small,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy em {
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.48) !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy strong {
  display: block !important;
  overflow: hidden !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy span,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy small,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy em {
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card-actions {
  bottom: 9px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.is-history-preview-playing .generation-history-card-actions {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

@media (hover: none) {
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(14px) !important;
  }

  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.is-history-preview-playing .generation-history-card-actions,
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within .generation-history-card-actions {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
}

@media (max-width: 1180px) {
  body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-history-grid,
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-history-grid,
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 430px) {
  body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-history-grid,
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v1.8.227 Creator duration slider without storyboard */
body[data-active-view="creatorStudio"] .creator-kling-compose-card,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-compose-card,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-compose-card {
  grid-template-rows: auto auto minmax(248px, 1fr) auto !important;
}

body[data-active-view="creatorStudio"] .creator-duration-compact,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-duration-compact,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-duration-compact {
  min-width: 176px !important;
  grid-template-columns: auto minmax(92px, 1fr) auto !important;
}

body[data-active-view="creatorStudio"] .creator-duration-compact > span {
  white-space: nowrap !important;
}

body[data-active-view="creatorStudio"] .creator-duration-slider,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-duration-slider,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-duration-slider {
  width: 100% !important;
  min-width: 92px !important;
  height: 18px !important;
  padding: 0 !important;
  accent-color: #ef4b43 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

body[data-active-view="creatorStudio"] .creator-duration-slider::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(24, 24, 24, 0.16) !important;
}

body[data-active-view="creatorStudio"] .creator-duration-slider::-webkit-slider-thumb {
  width: 14px !important;
  height: 14px !important;
  margin-top: -5px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: #ef4b43 !important;
  box-shadow: 0 2px 8px rgba(239, 75, 67, 0.28) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

body[data-active-view="creatorStudio"] .creator-duration-slider::-moz-range-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(24, 24, 24, 0.16) !important;
}

body[data-active-view="creatorStudio"] .creator-duration-slider::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: #ef4b43 !important;
  box-shadow: 0 2px 8px rgba(239, 75, 67, 0.28) !important;
}

body[data-active-view="creatorStudio"] #creatorDurationValue {
  min-width: 32px !important;
  color: #181818 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

body[data-active-view="creatorStudio"] #creatorDurationTicks {
  display: none !important;
}

/* v1.8.288 Creator duration uses click-to-adjust compact control */
body[data-active-view="creatorStudio"] .creator-duration-compact,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-duration-compact,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-duration-compact {
  position: relative !important;
  min-width: 86px !important;
  grid-template-columns: auto auto !important;
}

body[data-active-view="creatorStudio"] .creator-duration-control {
  position: relative !important;
  min-width: 58px !important;
}

body[data-active-view="creatorStudio"] .creator-duration-trigger {
  min-width: 58px !important;
  min-height: 24px !important;
  padding: 0 5px 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: #181818 !important;
  background: rgba(24, 24, 24, 0.04) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body[data-active-view="creatorStudio"] .creator-duration-trigger strong {
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body[data-active-view="creatorStudio"] .creator-duration-trigger i {
  width: 12px !important;
  height: 12px !important;
  color: rgba(24, 24, 24, 0.42) !important;
  transition: transform 0.16s ease !important;
}

body[data-active-view="creatorStudio"] .creator-duration-control.is-open .creator-duration-trigger {
  color: #ef3f35 !important;
  background: #fff0ee !important;
}

body[data-active-view="creatorStudio"] .creator-duration-control.is-open .creator-duration-trigger i {
  transform: rotate(180deg) !important;
}

body[data-active-view="creatorStudio"] .creator-duration-popover {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  z-index: 40 !important;
  min-width: 154px !important;
  padding: 6px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(42px, 1fr)) !important;
  gap: 5px !important;
  border: 1px solid rgba(24, 24, 24, 0.1) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 16px 34px rgba(24, 24, 24, 0.16) !important;
}

body[data-active-view="creatorStudio"] .creator-duration-popover[hidden] {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-duration-popover button {
  min-height: 28px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: rgba(24, 24, 24, 0.72) !important;
  background: rgba(24, 24, 24, 0.04) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

body[data-active-view="creatorStudio"] .creator-duration-popover button.active {
  color: #fff !important;
  background: #ef4b43 !important;
}

/* v1.8.229 Creator history video download button tray restored */
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] {
  overflow: visible !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-result-media,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] .generation-history-media {
  border-radius: 12px 12px 10px 10px !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-video-download-tray,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-video-download-tray,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] .generation-video-download-tray,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] .generation-video-download-tray,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] .generation-video-download-tray {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 0 6px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 0 solid transparent !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
  color: rgba(12, 12, 12, 0.88) !important;
  background: rgba(255, 255, 255, 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 22px rgba(24, 24, 24, 0.06) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transform-origin: top center !important;
  pointer-events: none !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
  transition:
    height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-top 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0.18s ease !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video:hover .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video:has(> .creator-result-media:hover) .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video:focus-within .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video.is-history-preview-playing .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"]:hover .generation-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"]:has(> .generation-history-media:hover) .generation-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"]:focus-within .generation-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"].is-history-preview-playing .generation-video-download-tray {
  height: 41px !important;
  margin-top: -1px !important;
  padding: 6px !important;
  border-width: 0 1px 1px !important;
  border-color: rgba(255, 255, 255, 0.52) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-video-download-tray > strong,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-video-download-tray > span {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-video-download-tray .generation-result-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-video-download-tray .generation-result-actions {
  width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-video-download-tray .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-video-download-tray .generation-result-action-button,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-video-download-tray .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-video-download-tray .generation-result-action-button {
  width: 100% !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 8px !important;
  color: rgba(12, 12, 12, 0.88) !important;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 5px 12px rgba(24, 24, 24, 0.04) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-video-download-tray .generation-result-actions a:hover,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-video-download-tray .generation-result-actions a:focus-visible,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-video-download-tray .generation-result-action-button:hover,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-video-download-tray .generation-result-action-button:focus-visible,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-video-download-tray .generation-result-actions a:hover,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-video-download-tray .generation-result-actions a:focus-visible,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-video-download-tray .generation-result-action-button:hover,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-video-download-tray .generation-result-action-button:focus-visible {
  border-color: rgba(24, 24, 24, 0.14) !important;
  color: #000 !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-video-download-tray,
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] .generation-video-download-tray {
    transition: none !important;
  }
}

/* v1.8.230 Creator bottom history full-width clean media grid */
body[data-active-view="creatorStudio"] .creator-history-panel,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 18px 22px 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--creator-surface-page) !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-grid,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group {
  width: 100% !important;
  min-width: 0 !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-toolbar {
  margin-bottom: 2px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
  width: 100% !important;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card {
  position: relative !important;
  overflow: visible !important;
  display: block !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-media,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f1f0ed !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover .generation-history-media,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within .generation-history-media,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.is-history-preview-playing .generation-history-media {
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media::after,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover .generation-history-media::after,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within .generation-history-media::after,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.is-history-preview-playing .generation-history-media::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media img,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-media video {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background: #f1f0ed !important;
  object-fit: cover !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card-badges,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-copy {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-image-action-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-video-download-tray,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 0 6px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 0 solid transparent !important;
  border-radius: 0 0 10px 10px !important;
  background: rgba(255, 255, 255, 0.46) !important;
  box-shadow: 0 10px 22px rgba(24, 24, 24, 0.05) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
  transition:
    height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-top 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0.18s ease !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover > .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover > .generation-image-action-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover > .generation-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:has(> .generation-history-media:hover) > .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within > .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.is-history-preview-playing > .generation-history-card-actions {
  height: 41px !important;
  margin-top: -1px !important;
  padding: 6px !important;
  border-width: 0 1px 1px !important;
  border-color: rgba(255, 255, 255, 0.52) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions .generation-result-actions {
  width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions .generation-result-action-button {
  width: 100% !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 8px !important;
  color: rgba(12, 12, 12, 0.88) !important;
  background: rgba(255, 255, 255, 0.76) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

@media (max-width: 1180px) {
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body[data-active-view="creatorStudio"] .creator-history-panel {
    padding: 14px 12px 24px !important;
  }

  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v1.8.231 Creator detail video fills right result panel */
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 16px 20px 22px !important;
  align-content: start !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"],
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"],
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(360px, calc(100svh - 250px)) auto !important;
  gap: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: #111 !important;
  box-shadow: 0 18px 34px rgba(24, 24, 24, 0.1) !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-media,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-media,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-media {
  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  background: #1d1d1d !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-media video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  background: #1d1d1d !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-media em {
  top: 12px !important;
  right: auto !important;
  bottom: auto !important;
  left: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(18, 18, 18, 0.48) !important;
  text-shadow: none !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy {
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 11px 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 3px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 0 14px 14px !important;
  color: #fff !important;
  background: #151616 !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy strong {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy span {
  grid-column: 1 !important;
  grid-row: 2 !important;
  max-width: none !important;
  display: block !important;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-actions {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  min-width: 132px !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-action-button {
  width: 100% !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-actions a:hover,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-actions a:focus-visible,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-action-button:hover,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-action-button:focus-visible {
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #111 !important;
  background: #fff !important;
}

@media (max-width: 720px) {
  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] {
    padding: 12px !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] {
    grid-template-rows: minmax(300px, 64svh) auto !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-media {
    min-height: 300px !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-actions {
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    margin-top: 8px !important;
  }
}

/* v1.8.213 Home video badges and icon-only favorite */
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-badges {
  width: auto !important;
  max-width: calc(100% - 18px) !important;
  top: 9px !important;
  left: 9px !important;
  right: auto !important;
  display: flex !important;
  justify-content: flex-start !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-card-badges .play-chip {
  display: none !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template .template-mode-chip {
  min-height: 25px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(18, 18, 18, 0.5) !important;
  box-shadow: none !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.44) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template.is-replicable-template .template-mode-chip {
  background: rgba(26, 118, 58, 0.58) !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card.is-video-template.is-manual-template .template-mode-chip {
  background: rgba(132, 86, 26, 0.62) !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-video-engagement .template-card-engagement-inline {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-video-engagement .template-card-engagement-button {
  width: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.52) !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-video-engagement .template-card-engagement-button span {
  display: none !important;
}

body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-video-engagement .template-card-engagement-button:hover,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-video-engagement .template-card-engagement-button:focus-visible,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-card-video-engagement .template-card-engagement-button.is-active {
  border: 0 !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

/* v1.8.215 Home search starts without the top site title */
body[data-active-view="templates"] .topbar {
  display: none !important;
}

body[data-active-view="templates"] .template-library-panel {
  margin-top: 0 !important;
}

/* v1.8.236 Creator fullscreen icon actions and five-column video results */
body[data-active-view="creatorStudio"] .generation-result-actions .generation-result-action-button.is-icon-only,
body[data-active-view="creatorStudio"] .creator-video-download-tray .generation-result-action-button.is-icon-only,
body[data-active-view="creatorStudio"] .generation-video-download-tray .generation-result-action-button.is-icon-only,
body[data-active-view="creatorStudio"] .generation-image-action-tray .generation-result-action-button.is-icon-only {
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 !important;
}

body[data-active-view="creatorStudio"] .generation-result-action-button.is-icon-only svg {
  width: 16px !important;
  height: 16px !important;
}

body[data-active-view="creatorStudio"] .generation-result-actions:has(.generation-result-action-button.is-icon-only) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="video"]:not([data-creator-result-view="detail"]) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid:not([data-creator-result-view="detail"]) .creator-result-history-section.is-video-history .creator-result-history-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"],
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-history-grid,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-history-section.is-video-history .creator-result-history-grid,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-history-section.is-image-history .creator-result-history-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (max-width: 1280px) {
  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="video"]:not([data-creator-result-view="detail"]),
  body[data-active-view="creatorStudio"] .creator-result-grid:not([data-creator-result-view="detail"]) .creator-result-history-section.is-video-history .creator-result-history-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1080px) {
  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="video"]:not([data-creator-result-view="detail"]),
  body[data-active-view="creatorStudio"] .creator-result-grid:not([data-creator-result-view="detail"]) .creator-result-history-section.is-video-history .creator-result-history-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="video"]:not([data-creator-result-view="detail"]),
  body[data-active-view="creatorStudio"] .creator-result-grid:not([data-creator-result-view="detail"]) .creator-result-history-section.is-video-history .creator-result-history-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v1.8.237 Canvas follows Discover home color and button system */
body[data-active-view="aiCanvas"],
body[data-theme="light"][data-active-view="aiCanvas"] {
  --bg: #fafafa;
  --bg-2: #f2f2ef;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-strong: rgba(255, 255, 255, 0.94);
  --line: rgba(24, 24, 24, 0.08);
  --line-strong: rgba(24, 24, 24, 0.16);
  --text: #242424;
  --muted: rgba(24, 24, 24, 0.52);
  color: #242424 !important;
  background: #fafafa !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] {
  --bg: #000000;
  --bg-2: #050505;
  --panel: rgba(11, 11, 11, 0.92);
  --panel-strong: rgba(18, 18, 18, 0.96);
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.26);
  --text: #f4f4f4;
  --muted: #b7b7b7;
  color: #f4f4f4 !important;
  background: #000 !important;
}

body[data-active-view="aiCanvas"] .app-shell,
body[data-theme="light"][data-active-view="aiCanvas"] .app-shell,
body[data-active-view="aiCanvas"] .main,
body[data-theme="light"][data-active-view="aiCanvas"] .main {
  color: #242424 !important;
  background: #fafafa !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .app-shell,
body[data-theme="dark"][data-active-view="aiCanvas"] .main {
  color: #f4f4f4 !important;
  background: #000 !important;
}

body[data-active-view="aiCanvas"] .main,
body[data-theme="light"][data-active-view="aiCanvas"] .main {
  padding: 26px 30px 32px 20px !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .main {
  padding: 26px 30px 32px 20px !important;
  background: #000 !important;
}

body[data-active-view="aiCanvas"] .app-shell > .sidebar,
body[data-theme="light"][data-active-view="aiCanvas"] .app-shell > .sidebar,
body[data-active-view="aiCanvas"] .sidebar,
body[data-theme="light"][data-active-view="aiCanvas"] .sidebar {
  padding: 26px 16px 16px !important;
  gap: 18px !important;
  border-right-color: transparent !important;
  color: #242424 !important;
  background: #fafafa !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .app-shell > .sidebar,
body[data-theme="dark"][data-active-view="aiCanvas"] .sidebar {
  border-right-color: rgba(255, 255, 255, 0.13) !important;
  color: #f4f4f4 !important;
  background: #000 !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .nav-group-label,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-group-label {
  color: rgba(24, 24, 24, 0.46) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .nav-group-label {
  color: #b7b7b7 !important;
}

body[data-active-view="aiCanvas"] .nav-item,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item {
  min-height: 38px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: rgba(24, 24, 24, 0.62) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 820 !important;
}

body[data-active-view="aiCanvas"] .nav-item svg,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item svg {
  color: rgba(24, 24, 24, 0.48) !important;
}

body[data-active-view="aiCanvas"] .nav-item:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item:hover {
  color: #232323 !important;
  background: rgba(24, 24, 24, 0.045) !important;
}

body[data-active-view="aiCanvas"] .nav-item:hover svg,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item:hover svg {
  color: #232323 !important;
}

body[data-active-view="aiCanvas"] .nav-item.active,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item.active {
  color: #ef3f35 !important;
  background: #fff0ee !important;
}

body[data-active-view="aiCanvas"] .nav-item.active svg,
body[data-theme="light"][data-active-view="aiCanvas"] .nav-item.active svg {
  color: #ef3f35 !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .nav-item {
  color: #b7b7b7 !important;
  background: transparent !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .nav-item svg {
  color: #8c8c8c !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .nav-item:hover {
  color: #f4f4f4 !important;
  background: #171717 !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .nav-item:hover svg {
  color: #f4f4f4 !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .nav-item.active {
  color: #ff8a7f !important;
  background: rgba(255, 107, 95, 0.16) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .nav-item.active svg {
  color: #ff8a7f !important;
}

body[data-active-view="aiCanvas"] .side-status,
body[data-active-view="aiCanvas"] .theme-toggle-card,
body[data-theme="light"][data-active-view="aiCanvas"] .side-status,
body[data-theme="light"][data-active-view="aiCanvas"] .theme-toggle-card {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: rgba(24, 24, 24, 0.62) !important;
  background: rgba(24, 24, 24, 0.045) !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .side-status,
body[data-theme="dark"][data-active-view="aiCanvas"] .theme-toggle-card {
  color: #b7b7b7 !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: #0b0b0b !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #fafafa;
  --wf-surface: rgba(255, 255, 255, 0.94);
  --wf-panel: rgba(255, 255, 255, 0.86);
  --wf-panel-soft: rgba(24, 24, 24, 0.04);
  --wf-ink: #242424;
  --wf-muted: rgba(24, 24, 24, 0.52);
  --wf-line: rgba(24, 24, 24, 0.08);
  --wf-line-strong: rgba(24, 24, 24, 0.16);
  --wf-accent: #151515;
  --wf-accent-2: #ef3f35;
  --wf-blue: #555;
  --wf-success: #16805a;
  --wf-warning: #a66a00;
  --wf-danger: #ef3f35;
  --wf-info: #555;
  color: #242424 !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-shell {
  --wf-bg: #000000;
  --wf-surface: #0b0b0b;
  --wf-panel: #141414;
  --wf-panel-soft: rgba(255, 255, 255, 0.07);
  --wf-ink: #f4f4f4;
  --wf-muted: #b7b7b7;
  --wf-line: rgba(255, 255, 255, 0.13);
  --wf-line-strong: rgba(255, 255, 255, 0.26);
  --wf-accent: #f3f3f3;
  --wf-accent-2: #ff8a7f;
  --wf-blue: #b7b7b7;
  --wf-success: #77e0a8;
  --wf-warning: #ffd36e;
  --wf-danger: #ff8a7f;
  --wf-info: #b7b7b7;
  color: #f4f4f4 !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-shell {
  gap: 8px !important;
}

body[data-active-view="aiCanvas"] .workflow-topbar,
body[data-active-view="aiCanvas"] .workflow-sidebar,
body[data-active-view="aiCanvas"] .workflow-stage,
body[data-active-view="aiCanvas"] .workflow-inspector,
body[data-active-view="aiCanvas"] .workflow-taskbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-topbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-stage,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-taskbar {
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 14px !important;
  color: #242424 !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 10px 26px rgba(24, 24, 24, 0.045) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-topbar,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-stage,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-taskbar {
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: #f4f4f4 !important;
  background: #0b0b0b !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-topbar {
  min-height: 48px !important;
  padding: 6px !important;
}

body[data-active-view="aiCanvas"] .workflow-brand span,
body[data-active-view="aiCanvas"] .workflow-panel-head span,
body[data-active-view="aiCanvas"] .workflow-section-head span,
body[data-active-view="aiCanvas"] .workflow-field span,
body[data-active-view="aiCanvas"] .workflow-run-summary span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-brand span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-panel-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-section-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-field span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-summary span {
  color: rgba(24, 24, 24, 0.52) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-brand span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-panel-head span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-section-head span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-field span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-summary span {
  color: #b7b7b7 !important;
}

body[data-active-view="aiCanvas"] .workflow-brand strong,
body[data-active-view="aiCanvas"] .workflow-panel-head strong,
body[data-active-view="aiCanvas"] .workflow-section-head strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-brand strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-panel-head strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-section-head strong {
  color: #242424 !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-brand strong,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-panel-head strong,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-section-head strong {
  color: #f4f4f4 !important;
}

body[data-active-view="aiCanvas"] .workflow-brand em,
body[data-active-view="aiCanvas"] .workflow-section-head em,
body[data-active-view="aiCanvas"] .workflow-run-summary span,
body[data-active-view="aiCanvas"] .workflow-api-status-pill,
body[data-active-view="aiCanvas"] .workflow-canvas-status,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-brand em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-section-head em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-summary span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-api-status-pill,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-status {
  border-color: rgba(24, 24, 24, 0.08) !important;
  color: rgba(24, 24, 24, 0.58) !important;
  background: rgba(24, 24, 24, 0.045) !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-brand em,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-section-head em,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-summary span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-api-status-pill,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-status {
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: #b7b7b7 !important;
  background: #171717 !important;
}

body[data-active-view="aiCanvas"] .workflow-action-group,
body[data-active-view="aiCanvas"] .workflow-canvas-toolbar,
body[data-active-view="aiCanvas"] .workflow-bottom-controls,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-action-group,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-toolbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-bottom-controls {
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 10px 26px rgba(24, 24, 24, 0.045) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-action-group,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-toolbar,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-bottom-controls {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: #0b0b0b !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-icon-button,
body[data-active-view="aiCanvas"] .workflow-tool-button,
body[data-active-view="aiCanvas"] .workflow-secondary-button,
body[data-active-view="aiCanvas"] .workflow-sidebar-tabs button,
body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button,
body[data-active-view="aiCanvas"] .workflow-inspector-actions button,
body[data-active-view="aiCanvas"] .workflow-command-list button,
body[data-active-view="aiCanvas"] .workflow-context-menu button,
body[data-active-view="aiCanvas"] .workflow-link-menu button,
body[data-active-view="aiCanvas"] .workflow-node-quick-menu button,
body[data-active-view="aiCanvas"] .workflow-asset-card button,
body[data-active-view="aiCanvas"] .workflow-history-card button,
body[data-active-view="aiCanvas"] .workflow-task-card button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-icon-button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-tool-button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-secondary-button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar-tabs button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-toolbar button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector-actions button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-list button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-context-menu button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-menu button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-asset-card button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-history-card button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-card button {
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 11px !important;
  color: rgba(24, 24, 24, 0.7) !important;
  background: rgba(24, 24, 24, 0.04) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-icon-button:hover,
body[data-active-view="aiCanvas"] .workflow-tool-button:hover,
body[data-active-view="aiCanvas"] .workflow-secondary-button:hover,
body[data-active-view="aiCanvas"] .workflow-sidebar-tabs button:hover,
body[data-active-view="aiCanvas"] .workflow-canvas-toolbar button:hover,
body[data-active-view="aiCanvas"] .workflow-inspector-actions button:hover,
body[data-active-view="aiCanvas"] .workflow-command-list button:hover,
body[data-active-view="aiCanvas"] .workflow-context-menu button:hover,
body[data-active-view="aiCanvas"] .workflow-link-menu button:hover,
body[data-active-view="aiCanvas"] .workflow-node-quick-menu button:hover,
body[data-active-view="aiCanvas"] .workflow-asset-card button:hover,
body[data-active-view="aiCanvas"] .workflow-history-card button:hover,
body[data-active-view="aiCanvas"] .workflow-task-card button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-icon-button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-tool-button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-secondary-button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar-tabs button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-toolbar button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector-actions button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-list button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-context-menu button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-quick-menu button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-asset-card button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-history-card button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-card button:hover {
  color: #242424 !important;
  border-color: rgba(24, 24, 24, 0.12) !important;
  background: rgba(24, 24, 24, 0.07) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-icon-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-tool-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-secondary-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar-tabs button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-toolbar button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector-actions button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-command-list button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-context-menu button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-link-menu button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node-quick-menu button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-asset-card button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-history-card button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-task-card button {
  color: #b7b7b7 !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: #171717 !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-icon-button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-tool-button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-secondary-button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar-tabs button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-toolbar button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector-actions button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-command-list button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-context-menu button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-link-menu button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node-quick-menu button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-asset-card button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-history-card button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-task-card button:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  background: #242424 !important;
}

body[data-active-view="aiCanvas"] .workflow-primary-button,
body[data-active-view="aiCanvas"] .workflow-run-button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-primary-button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-button {
  border: 1px solid rgba(24, 24, 24, 0.12) !important;
  border-radius: 11px !important;
  color: #fff !important;
  background: #151515 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-primary-button:hover,
body[data-active-view="aiCanvas"] .workflow-run-button:hover,
body[data-active-view="aiCanvas"] .workflow-primary-button:focus-visible,
body[data-active-view="aiCanvas"] .workflow-run-button:focus-visible,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-primary-button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-button:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-primary-button:focus-visible,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-button:focus-visible {
  color: #fff !important;
  border-color: rgba(24, 24, 24, 0.18) !important;
  background: #000 !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-primary-button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-button {
  color: #050505 !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
  background: #f3f3f3 !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-primary-button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-button:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-primary-button:focus-visible,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-button:focus-visible {
  color: #000 !important;
  border-color: #fff !important;
  background: #fff !important;
}

body[data-active-view="aiCanvas"] .workflow-sidebar-tabs button.active,
body[data-active-view="aiCanvas"] .workflow-mode-grid button.active,
body[data-active-view="aiCanvas"] .workflow-inspector-tabs span.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar-tabs button.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-mode-grid button.active,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector-tabs span.active {
  color: #ef3f35 !important;
  border-color: transparent !important;
  background: #fff0ee !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar-tabs button.active,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-mode-grid button.active,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector-tabs span.active {
  color: #ff8a7f !important;
  border-color: rgba(255, 107, 95, 0.34) !important;
  background: rgba(255, 107, 95, 0.16) !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-surface,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  border-radius: 12px !important;
  background:
    linear-gradient(rgba(24, 24, 24, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 24, 24, 0.028) 1px, transparent 1px),
    #fafafa !important;
  background-size: 42px 42px, 42px 42px, auto !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-surface {
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    #000 !important;
  background-size: 42px 42px, 42px 42px, auto !important;
}

body[data-active-view="aiCanvas"] .workflow-canvas-aura {
  display: none !important;
}

body[data-active-view="aiCanvas"] .workflow-node,
body[data-active-view="aiCanvas"] .workflow-run-panel,
body[data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-active-view="aiCanvas"] .workflow-console-grid section,
body[data-active-view="aiCanvas"] .workflow-command-card,
body[data-active-view="aiCanvas"] .workflow-context-menu,
body[data-active-view="aiCanvas"] .workflow-link-menu,
body[data-active-view="aiCanvas"] .workflow-palette-card,
body[data-active-view="aiCanvas"] .workflow-template-card,
body[data-active-view="aiCanvas"] .workflow-asset-card,
body[data-active-view="aiCanvas"] .workflow-history-card,
body[data-active-view="aiCanvas"] .workflow-task-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-panel,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-console-grid section,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-command-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-context-menu,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-link-menu,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-palette-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-template-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-asset-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-history-card,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-card {
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 12px !important;
  color: #242424 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 10px 26px rgba(24, 24, 24, 0.045) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-panel,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-inspector-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-console-grid section,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-command-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-context-menu,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-link-menu,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-palette-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-template-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-asset-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-history-card,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-task-card {
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: #f4f4f4 !important;
  background: #141414 !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-node:hover,
body[data-active-view="aiCanvas"] .workflow-palette-card:hover,
body[data-active-view="aiCanvas"] .workflow-template-card:hover,
body[data-active-view="aiCanvas"] .workflow-asset-card:hover,
body[data-active-view="aiCanvas"] .workflow-history-card:hover,
body[data-active-view="aiCanvas"] .workflow-task-card:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-palette-card:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-template-card:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-asset-card:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-history-card:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-card:hover {
  border-color: rgba(24, 24, 24, 0.14) !important;
  background: #fff !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-palette-card:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-template-card:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-asset-card:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-history-card:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-task-card:hover {
  border-color: rgba(255, 255, 255, 0.26) !important;
  background: #1f1f1f !important;
}

body[data-active-view="aiCanvas"] .workflow-node.is-selected,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-selected {
  border-color: rgba(239, 63, 53, 0.46) !important;
  box-shadow:
    0 0 0 3px rgba(239, 63, 53, 0.12),
    0 12px 30px rgba(24, 24, 24, 0.08) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node.is-selected {
  border-color: rgba(255, 107, 95, 0.58) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 95, 0.18) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-head span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-head span {
  border: 0 !important;
  border-radius: 9px !important;
  color: #ef3f35 !important;
  background: #fff0ee !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node-head span {
  color: #ff8a7f !important;
  background: rgba(255, 107, 95, 0.16) !important;
}

body[data-active-view="aiCanvas"] .workflow-node strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node strong {
  color: #242424 !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node strong {
  color: #f4f4f4 !important;
}

body[data-active-view="aiCanvas"] .workflow-node p,
body[data-active-view="aiCanvas"] .workflow-node small,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node p,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node small {
  color: rgba(24, 24, 24, 0.52) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node p,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node small {
  color: #b7b7b7 !important;
}

body[data-active-view="aiCanvas"] .workflow-node-media,
body[data-active-view="aiCanvas"] .workflow-node-head button,
body[data-active-view="aiCanvas"] .workflow-metrics span,
body[data-active-view="aiCanvas"] .workflow-side-metrics span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-media,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-head button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-metrics span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-side-metrics span {
  border-color: rgba(24, 24, 24, 0.08) !important;
  color: rgba(24, 24, 24, 0.52) !important;
  background: rgba(24, 24, 24, 0.045) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node-media,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node-head button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-metrics span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-side-metrics span {
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: #b7b7b7 !important;
  background: #0b0b0b !important;
}

body[data-active-view="aiCanvas"] .workflow-field input,
body[data-active-view="aiCanvas"] .workflow-field select,
body[data-active-view="aiCanvas"] .workflow-field textarea,
body[data-active-view="aiCanvas"] .workflow-sidebar-search,
body[data-active-view="aiCanvas"] .workflow-sidebar-search input,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-field input,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-field select,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-field textarea,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar-search,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar-search input {
  color: #242424 !important;
  border-color: rgba(24, 24, 24, 0.08) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-field input,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-field select,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-field textarea,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar-search,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar-search input {
  color: #f4f4f4 !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: #171717 !important;
}

body[data-active-view="aiCanvas"] .workflow-field input:focus,
body[data-active-view="aiCanvas"] .workflow-field select:focus,
body[data-active-view="aiCanvas"] .workflow-field textarea:focus,
body[data-active-view="aiCanvas"] .workflow-sidebar-search:focus-within,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-field input:focus,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-field select:focus,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-field textarea:focus,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar-search:focus-within {
  border-color: rgba(239, 63, 53, 0.34) !important;
  box-shadow: 0 0 0 3px rgba(239, 63, 53, 0.12) !important;
  outline: none !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-field input:focus,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-field select:focus,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-field textarea:focus,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar-search:focus-within {
  border-color: rgba(255, 107, 95, 0.46) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 95, 0.14) !important;
}

body[data-active-view="aiCanvas"] .workflow-field input::placeholder,
body[data-active-view="aiCanvas"] .workflow-field textarea::placeholder,
body[data-active-view="aiCanvas"] .workflow-sidebar-search input::placeholder,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-field input::placeholder,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-field textarea::placeholder,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-sidebar-search input::placeholder {
  color: rgba(24, 24, 24, 0.36) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-field input::placeholder,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-field textarea::placeholder,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-sidebar-search input::placeholder {
  color: #8c8c8c !important;
}

body[data-active-view="aiCanvas"] .workflow-port,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-port {
  border-color: #fff !important;
  background: #ef3f35 !important;
  box-shadow: 0 0 0 1px rgba(239, 63, 53, 0.34) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-port {
  border-color: #141414 !important;
  background: #ff8a7f !important;
  box-shadow: 0 0 0 1px rgba(255, 107, 95, 0.5) !important;
}

body[data-active-view="aiCanvas"] .workflow-edge,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge {
  stroke: rgba(24, 24, 24, 0.32) !important;
}

body[data-active-view="aiCanvas"] .workflow-edge:hover,
body[data-active-view="aiCanvas"] .workflow-edge.is-selected,
body[data-active-view="aiCanvas"] .workflow-edge.is-running,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge:hover,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge.is-selected,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge.is-running {
  stroke: #ef3f35 !important;
}

body[data-active-view="aiCanvas"] .workflow-edges marker path,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edges marker path {
  fill: rgba(24, 24, 24, 0.46) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-edge {
  stroke: rgba(255, 255, 255, 0.34) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-edge:hover,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-edge.is-selected,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-edge.is-running {
  stroke: #ff8a7f !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-edges marker path {
  fill: rgba(255, 255, 255, 0.58) !important;
}

/* v1.8.237 Canvas removes legacy neon run accents for homepage parity */
body[data-active-view="aiCanvas"] .workflow-selection-toolbar,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-toolbar {
  border-color: rgba(24, 24, 24, 0.08) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 48px rgba(24, 24, 24, 0.12) !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-selection-toolbar {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: rgba(17, 17, 17, 0.92) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar button,
body[data-active-view="aiCanvas"] .workflow-real-run-actions button,
body[data-active-view="aiCanvas"] .workflow-run-plan-actions button,
body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button,
body[data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-active-view="aiCanvas"] .workflow-media-preview-actions button,
body[data-active-view="aiCanvas"] .workflow-quick-actions button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-toolbar button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-run-actions button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-actions button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-action-toolbar button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-preview-actions button,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-actions button {
  border-color: rgba(24, 24, 24, 0.08) !important;
  color: rgba(24, 24, 24, 0.72) !important;
  background: rgba(24, 24, 24, 0.045) !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-selection-toolbar button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-real-run-actions button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-plan-actions button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node-action-toolbar button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-media-control-row button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-media-preview-actions button,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-quick-actions button {
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: #d8d8d8 !important;
  background: #171717 !important;
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar button.is-primary,
body[data-active-view="aiCanvas"] .workflow-selection-toolbar button.is-imported-plan,
body[data-active-view="aiCanvas"] .workflow-real-run-actions button.is-primary,
body[data-active-view="aiCanvas"] .workflow-run-plan-actions button.is-primary,
body[data-active-view="aiCanvas"] .workflow-node-action-toolbar button.is-primary,
body[data-active-view="aiCanvas"] .workflow-media-control-row button.is-primary,
body[data-active-view="aiCanvas"] .workflow-media-preview-actions button.is-primary,
body[data-active-view="aiCanvas"] .workflow-quick-actions button.is-primary,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-toolbar button.is-primary,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-toolbar button.is-imported-plan,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-run-actions button.is-primary,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-actions button.is-primary,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-action-toolbar button.is-primary,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-control-row button.is-primary,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-media-preview-actions button.is-primary,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-quick-actions button.is-primary {
  border-color: rgba(239, 63, 53, 0.28) !important;
  color: #ef3f35 !important;
  background: #fff0ee !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-selection-toolbar button.is-primary,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-selection-toolbar button.is-imported-plan,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-real-run-actions button.is-primary,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-plan-actions button.is-primary,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node-action-toolbar button.is-primary,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-media-control-row button.is-primary,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-media-preview-actions button.is-primary,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-quick-actions button.is-primary {
  border-color: rgba(255, 107, 95, 0.34) !important;
  color: #ff8a7f !important;
  background: rgba(255, 107, 95, 0.16) !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-selection-toolbar .is-danger,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-toolbar .is-danger {
  border-color: rgba(239, 63, 53, 0.18) !important;
  color: #ef3f35 !important;
  background: #fff0ee !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-selection-toolbar .is-danger {
  border-color: rgba(255, 107, 95, 0.34) !important;
  color: #ff8a7f !important;
  background: rgba(255, 107, 95, 0.16) !important;
}

body[data-active-view="aiCanvas"] .workflow-selection-production-preview,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-preview {
  border-color: rgba(24, 24, 24, 0.08) !important;
  color: #242424 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-selection-production-preview {
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: #f4f4f4 !important;
  background: rgba(20, 20, 20, 0.92) !important;
  box-shadow: none !important;
}

body[data-active-view="aiCanvas"] .workflow-selection-production-stats span,
body[data-active-view="aiCanvas"] .workflow-selection-production-modes b,
body[data-active-view="aiCanvas"] .workflow-selection-production-modes em,
body[data-active-view="aiCanvas"] .workflow-run-plan-stats span,
body[data-active-view="aiCanvas"] .workflow-real-run-summary span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-stats span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-modes b,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-modes em,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-stats span,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-run-summary span {
  border-color: rgba(24, 24, 24, 0.08) !important;
  color: rgba(24, 24, 24, 0.7) !important;
  background: rgba(24, 24, 24, 0.04) !important;
}

body[data-active-view="aiCanvas"] .workflow-selection-production-stats strong,
body[data-active-view="aiCanvas"] .workflow-selection-production-stats svg,
body[data-active-view="aiCanvas"] .workflow-run-plan-stats strong,
body[data-active-view="aiCanvas"] .workflow-real-run-summary strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-stats strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-selection-production-stats svg,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-plan-stats strong,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-real-run-summary strong {
  color: #ef3f35 !important;
  stroke: #ef3f35 !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-selection-production-stats span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-selection-production-modes b,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-selection-production-modes em,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-plan-stats span,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-real-run-summary span {
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: #d8d8d8 !important;
  background: #171717 !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-selection-production-stats strong,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-selection-production-stats svg,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-plan-stats strong,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-real-run-summary strong {
  color: #ff8a7f !important;
  stroke: #ff8a7f !important;
}

body[data-active-view="aiCanvas"] .workflow-run-summary .is-running,
body[data-active-view="aiCanvas"] .workflow-canvas-status span.is-running,
body[data-active-view="aiCanvas"] .workflow-node.is-running,
body[data-active-view="aiCanvas"] .workflow-task-card.is-running,
body[data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-running,
body[data-active-view="aiCanvas"] .workflow-task-run-log-list article.is-running,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-run-summary .is-running,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-canvas-status span.is-running,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node.is-running,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-card.is-running,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-running,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-task-run-log-list article.is-running {
  border-color: rgba(239, 63, 53, 0.28) !important;
  color: #ef3f35 !important;
  background: #fff0ee !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-run-summary .is-running,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-canvas-status span.is-running,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node.is-running,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-task-card.is-running,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-task-api-phase-track article.is-running,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-task-run-log-list article.is-running {
  border-color: rgba(255, 107, 95, 0.34) !important;
  color: #ff8a7f !important;
  background: rgba(255, 107, 95, 0.16) !important;
}

body[data-active-view="aiCanvas"] .workflow-node-progress i,
body[data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-running rect,
body[data-active-view="aiCanvas"] .workflow-edge-route-chip.is-running rect,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-node-progress i,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-running rect,
body[data-theme="light"][data-active-view="aiCanvas"] .workflow-edge-route-chip.is-running rect {
  fill: #ef3f35 !important;
  background: #ef3f35 !important;
}

body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-node-progress i,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-edge-stage-badge.is-running rect,
body[data-theme="dark"][data-active-view="aiCanvas"] .workflow-edge-route-chip.is-running rect {
  fill: #ff8a7f !important;
  background: #ff8a7f !important;
}

/* v1.8.238 Fullscreen generated media supports wheel and pinch zoom */
.generation-image-preview-stage,
.generation-video-preview-stage {
  overscroll-behavior: contain !important;
  touch-action: none !important;
}

.generation-image-preview-stage.is-pinching,
.generation-video-preview-stage.is-pinching {
  cursor: zoom-in !important;
}

.generation-video-preview-stage video {
  transform-origin: center center !important;
  transition: transform 0.16s ease !important;
  will-change: transform !important;
}

.generation-video-preview-stage.is-zoomed video {
  cursor: zoom-out !important;
}

/* v1.8.247 Fullscreen generated media gallery navigation */
.generation-image-preview-card,
.generation-video-preview-card {
  position: relative !important;
}

.generation-preview-nav-button {
  position: absolute;
  top: 50%;
  z-index: 8;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent) !important;
  border-radius: 999px !important;
  display: inline-grid;
  place-items: center;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  box-shadow: 0 18px 42px rgba(15, 15, 15, 0.18) !important;
  transform: translateY(-50%);
  backdrop-filter: blur(16px);
}

.generation-preview-nav-button:hover {
  color: #fff !important;
  border-color: var(--text) !important;
  background: var(--text) !important;
}

.generation-preview-nav-button svg {
  width: 22px;
  height: 22px;
}

.generation-preview-nav-button.is-prev {
  left: 18px;
}

.generation-preview-nav-button.is-next {
  right: 18px;
}

.generation-preview-nav-count {
  position: absolute;
  left: 50%;
  bottom: 72px;
  z-index: 7;
  min-width: 58px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 12px 26px rgba(15, 15, 15, 0.1);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}

@media (max-width: 720px) {
  .generation-preview-nav-button {
    top: auto;
    bottom: 76px;
    width: 42px;
    height: 42px;
    transform: none;
  }

  .generation-preview-nav-button.is-prev {
    left: 18px;
  }

  .generation-preview-nav-button.is-next {
    right: 18px;
  }

  .generation-preview-nav-count {
    bottom: 86px;
  }
}

/* v1.8.239 Creator history download actions stay visible */
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-image,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card {
  overflow: visible !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-image .creator-result-media,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-result-media,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card .generation-history-media {
  border-radius: 12px 12px 10px 10px !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-image .creator-result-copy,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-image .creator-result-copy,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-image .creator-result-copy,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-video-download-tray,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-video-download-tray,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-image-action-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-video-download-tray,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-top: -1px !important;
  padding: 5px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
  color: rgba(12, 12, 12, 0.88) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 10px 22px rgba(24, 24, 24, 0.05) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-image .creator-result-copy > strong,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-image .creator-result-copy > span,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-video-download-tray > strong,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-video-download-tray > span {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-image .creator-result-copy .generation-result-actions,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-video-download-tray .generation-result-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions .generation-result-actions {
  width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-image .creator-result-copy .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-video-download-tray .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions .generation-result-actions a {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* v1.8.251 Bottom generation history action tray slides out only on hover */
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-image-action-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-video-download-tray,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card > .generation-history-card-actions {
  height: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 0 6px !important;
  border-width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
  transition:
    height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-top 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0.18s ease !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover > .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover > .generation-image-action-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:hover > .generation-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:has(> .generation-history-media:hover) > .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:has(> .generation-history-media:hover) > .generation-image-action-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:has(> .generation-history-media:hover) > .generation-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within > .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within > .generation-image-action-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card:focus-within > .generation-video-download-tray {
  height: 41px !important;
  min-height: 41px !important;
  margin-top: -1px !important;
  padding: 6px !important;
  border-width: 0 1px 1px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* v1.8.241 Creator detail images keep their natural ratio */
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"],
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"],
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] {
  width: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-media,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-media,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-media {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 10px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 12px 12px 10px 10px !important;
  background: #f1f0ed !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-media img,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-media img,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-media img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: min(72svh, 760px) !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-copy,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-copy,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-copy {
  width: 100% !important;
  min-height: 44px !important;
  padding: 5px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  border-top: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.52) !important;
  border-radius: 0 0 10px 10px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 10px 22px rgba(24, 24, 24, 0.05) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-copy > strong,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-copy > span {
  display: none !important;
}

/* v1.8.256 Creator detail media preserves original aspect ratio */
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"],
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"],
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] {
  grid-template-rows: auto auto !important;
  overflow: visible !important;
  border: 1px solid rgba(24, 24, 24, 0.06) !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-media,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-media,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-media {
  height: auto !important;
  min-height: 0 !important;
  padding: 10px !important;
  overflow: visible !important;
  border-radius: 12px 12px 0 0 !important;
  background: #f1f0ed !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-media img,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-media img,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="image"] .creator-result-media img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: min(72svh, 760px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 10px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-media video,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-media video,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-media video {
  object-fit: contain !important;
  object-position: center center !important;
}

/* v1.8.244 Video cards include draggable progress scrubbers */
.generation-video-progress,
body[data-theme="light"] .generation-video-progress,
body[data-theme="dark"] .generation-video-progress {
  --video-progress: 0%;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 26px !important;
  padding: 7px 9px !important;
  display: grid !important;
  align-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.76) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

.generation-video-progress input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  cursor: pointer !important;
  touch-action: pan-x !important;
  accent-color: #ef4b43 !important;
}

.generation-video-progress input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      to right,
      #ef4b43 0%,
      #ef4b43 var(--video-progress),
      rgba(24, 24, 24, 0.16) var(--video-progress),
      rgba(24, 24, 24, 0.16) 100%
    ) !important;
}

.generation-video-progress input[type="range"]::-webkit-slider-thumb {
  width: 14px !important;
  height: 14px !important;
  margin-top: -5px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: #ef4b43 !important;
  box-shadow: 0 2px 8px rgba(239, 75, 67, 0.26) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.generation-video-progress input[type="range"]::-moz-range-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(24, 24, 24, 0.16) !important;
}

.generation-video-progress input[type="range"]::-moz-range-progress {
  height: 4px !important;
  border-radius: 999px !important;
  background: #ef4b43 !important;
}

.generation-video-progress input[type="range"]::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: #ef4b43 !important;
  box-shadow: 0 2px 8px rgba(239, 75, 67, 0.26) !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-result-media,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] .generation-history-media {
  border-radius: 12px 12px 0 0 !important;
}

body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .generation-video-progress,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] .generation-video-progress {
  position: relative !important;
  z-index: 1 !important;
  min-height: 28px !important;
  margin-top: -1px !important;
  padding: 7px 8px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"],
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"],
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] {
  grid-template-rows: minmax(360px, calc(100svh - 282px)) auto auto !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .generation-video-progress,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .generation-video-progress,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .generation-video-progress,
.generation-final-video-card .generation-video-progress {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #171717 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .generation-video-progress input[type="range"]::-webkit-slider-runnable-track,
.generation-final-video-card .generation-video-progress input[type="range"]::-webkit-slider-runnable-track {
  background:
    linear-gradient(
      to right,
      #ef4b43 0%,
      #ef4b43 var(--video-progress),
      rgba(255, 255, 255, 0.22) var(--video-progress),
      rgba(255, 255, 255, 0.22) 100%
    ) !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .generation-video-progress input[type="range"]::-moz-range-track,
.generation-final-video-card .generation-video-progress input[type="range"]::-moz-range-track {
  background: rgba(255, 255, 255, 0.22) !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .generation-video-progress + .creator-result-copy,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .generation-video-progress + .creator-result-copy,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .generation-video-progress + .creator-result-copy {
  border-radius: 0 0 14px 14px !important;
}

/* v1.8.252 Replication workbench hero, integrated settings, and prompt highlights */
body[data-active-view="templateGeneration"] {
  --replicate-bg: #fafafa;
  --replicate-card: rgba(255, 255, 255, 0.88);
  --replicate-card-strong: #fff;
  --replicate-text: #242424;
  --replicate-muted: rgba(24, 24, 24, 0.52);
  --replicate-faint: rgba(24, 24, 24, 0.36);
  --replicate-line: rgba(24, 24, 24, 0.08);
  --replicate-soft: rgba(24, 24, 24, 0.04);
  --replicate-accent: #ef4b43;
  --replicate-accent-soft: #fff0ee;
  --replicate-ink: #151515;
  background: var(--replicate-bg) !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] {
  --replicate-bg: #050505;
  --replicate-card: rgba(17, 17, 17, 0.92);
  --replicate-card-strong: #111;
  --replicate-text: #f5f5f5;
  --replicate-muted: rgba(255, 255, 255, 0.62);
  --replicate-faint: rgba(255, 255, 255, 0.42);
  --replicate-line: rgba(255, 255, 255, 0.1);
  --replicate-soft: rgba(255, 255, 255, 0.06);
  --replicate-accent-soft: rgba(239, 75, 67, 0.16);
  --replicate-ink: #f5f5f5;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 {
  display: grid !important;
  gap: 14px !important;
}

body[data-active-view="templateGeneration"] .generation-replication-hero {
  display: grid !important;
  grid-template-columns: minmax(280px, 370px) minmax(320px, 1fr) minmax(280px, 0.78fr) !important;
  grid-template-areas:
    "template upload queue"
    "template settings settings" !important;
  gap: 12px !important;
  align-items: stretch !important;
}

body[data-active-view="templateGeneration"] .generation-replication-hero > .batch-panel,
body[data-active-view="templateGeneration"] .generation-workflow-focus > .generation-prompt-chain,
body[data-active-view="templateGeneration"] .workflow-prompt-inspector,
body[data-active-view="templateGeneration"] .generation-run-panel {
  border: 1px solid var(--replicate-line) !important;
  border-radius: 14px !important;
  background: var(--replicate-card) !important;
  box-shadow: 0 12px 32px rgba(24, 24, 24, 0.045) !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] .generation-replication-hero > .batch-panel,
body[data-theme="dark"][data-active-view="templateGeneration"] .generation-workflow-focus > .generation-prompt-chain,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-prompt-inspector,
body[data-theme="dark"][data-active-view="templateGeneration"] .generation-run-panel {
  box-shadow: none !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card {
  grid-area: template !important;
  min-height: 100% !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-template {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(280px, 1fr) auto auto !important;
  gap: 10px !important;
  align-content: start !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-media {
  width: 100% !important;
  min-height: clamp(300px, 46vh, 520px) !important;
  aspect-ratio: 9 / 14 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #111 !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-media img,
body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-copy {
  display: grid !important;
  gap: 4px !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-copy span,
body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-copy small {
  color: var(--replicate-muted) !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-copy strong {
  color: var(--replicate-text) !important;
  font-size: clamp(22px, 2.1vw, 30px) !important;
  line-height: 1.08 !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-template .text-button {
  grid-column: 1 !important;
  justify-self: start !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-meta span {
  min-width: 0 !important;
  padding: 9px 10px !important;
  display: grid !important;
  gap: 3px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 10px !important;
  color: var(--replicate-faint) !important;
  background: var(--replicate-soft) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-meta b {
  color: var(--replicate-text) !important;
  font-size: 13px !important;
}

body[data-active-view="templateGeneration"] .generation-upload-hero-card {
  grid-area: upload !important;
  min-height: 270px !important;
}

body[data-active-view="templateGeneration"] .generation-upload-queue-card {
  grid-area: queue !important;
  min-height: 270px !important;
}

body[data-active-view="templateGeneration"] .batch-panel-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
}

body[data-active-view="templateGeneration"] .batch-panel-head h4 {
  margin: 0 !important;
}

body[data-active-view="templateGeneration"] .batch-panel-head span {
  color: var(--replicate-muted) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

body[data-active-view="templateGeneration"] .batch-panel-head b {
  color: var(--replicate-accent) !important;
}

body[data-active-view="templateGeneration"] .generation-upload-hero-card .workflow-runtime-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  height: calc(100% - 36px) !important;
}

body[data-active-view="templateGeneration"] .generation-upload-hero-card .workflow-runtime-input {
  min-height: 220px !important;
}

body[data-active-view="templateGeneration"] .generation-upload-queue-card .batch-upload-list {
  max-height: 238px !important;
  overflow: auto !important;
  display: grid !important;
  gap: 8px !important;
  padding-right: 2px !important;
}

body[data-active-view="templateGeneration"] .generation-upload-queue-card .batch-upload-list article {
  padding: 8px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-items: center !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 10px !important;
  background: var(--replicate-soft) !important;
}

body[data-active-view="templateGeneration"] .generation-settings-card {
  grid-area: settings !important;
  padding: 14px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-head {
  margin-bottom: 12px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: start !important;
  gap: 12px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-head h4 {
  margin: 0 0 4px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-head span,
body[data-active-view="templateGeneration"] .generation-settings-head em {
  color: var(--replicate-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 780 !important;
}

body[data-active-view="templateGeneration"] .generation-settings-head em {
  padding: 7px 10px !important;
  border-radius: 999px !important;
  color: var(--replicate-accent) !important;
  background: var(--replicate-accent-soft) !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .generation-settings-grid {
  grid-template-columns: 1fr 0.8fr 0.8fr 1fr !important;
  align-items: end !important;
}

body[data-active-view="templateGeneration"] .generation-settings-grid label {
  display: grid !important;
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-grid label > span,
body[data-active-view="templateGeneration"] .workflow-prompt-inspector label > span {
  color: var(--replicate-muted) !important;
  font-size: 12px !important;
  font-weight: 820 !important;
}

body[data-active-view="templateGeneration"] .generation-settings-grid input,
body[data-active-view="templateGeneration"] .generation-settings-grid select,
body[data-active-view="templateGeneration"] .generation-settings-grid .generation-fixed-duration-field strong {
  min-height: 42px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 11px !important;
  color: var(--replicate-text) !important;
  background: var(--replicate-card-strong) !important;
}

body[data-active-view="templateGeneration"] .generation-settings-grid .generation-fixed-duration-field em {
  display: none !important;
}

body[data-active-view="templateGeneration"] .generation-workflow-focus {
  display: grid !important;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

body[data-active-view="templateGeneration"] .generation-workflow-focus .generation-prompt-chain {
  margin: 0 !important;
  padding: 14px !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-view .template-chain-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-view .template-slot-card {
  padding: 12px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 12px !important;
  background: var(--replicate-soft) !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-view .template-slot-head span {
  color: #fff !important;
  background: var(--replicate-ink) !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-view .template-slot-head strong,
body[data-active-view="templateGeneration"] .workflow-chain-view .template-slot-card small {
  color: var(--replicate-text) !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-chain-head strong {
  color: var(--replicate-text) !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-chain-head span,
body[data-active-view="templateGeneration"] .generation-prompt-chain-head em {
  color: var(--replicate-muted) !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body[data-active-view="templateGeneration"] .workflow-prompt-highlights {
  min-height: 100% !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card {
  min-width: 0 !important;
  padding: 11px !important;
  display: grid !important;
  gap: 10px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 12px !important;
  background: var(--replicate-card-strong) !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card > div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  align-items: center !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card span {
  color: var(--replicate-text) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card strong {
  padding: 5px 8px !important;
  border-radius: 999px !important;
  color: var(--replicate-accent) !important;
  background: var(--replicate-accent-soft) !important;
  font-size: 11px !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card ol {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 7px !important;
  list-style: none !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card li {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: start !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card li em {
  color: var(--replicate-faint) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card li p {
  margin: 0 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  color: var(--replicate-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

body[data-active-view="templateGeneration"] .workflow-prompt-inspector {
  margin-top: 0 !important;
  padding: 14px !important;
}

body[data-active-view="templateGeneration"] .workflow-prompt-inspector .generation-prompt-text-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-view="templateGeneration"] .workflow-prompt-inspector label {
  min-width: 0 !important;
}

body[data-active-view="templateGeneration"] .workflow-prompt-inspector textarea {
  min-height: 170px !important;
  max-height: 240px !important;
  border-color: var(--replicate-line) !important;
  color: var(--replicate-text) !important;
  background: var(--replicate-card-strong) !important;
  resize: vertical !important;
}

body[data-active-view="templateGeneration"] .workflow-prompt-inspector .prompt-sequence-preview {
  max-height: 220px !important;
  overflow: auto !important;
  border-color: var(--replicate-line) !important;
  background: var(--replicate-soft) !important;
}

body[data-active-view="templateGeneration"] .generation-run-panel {
  padding: 12px !important;
  display: grid !important;
  gap: 12px !important;
}

body[data-active-view="templateGeneration"] .generation-run-panel > .batch-submit-row {
  padding: 10px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 12px !important;
  background: var(--replicate-soft) !important;
}

body[data-active-view="templateGeneration"] .generation-history-panel-wide {
  margin-top: 0 !important;
  border-color: var(--replicate-line) !important;
  background: var(--replicate-card-strong) !important;
}

@media (max-width: 1180px) {
  body[data-active-view="templateGeneration"] .generation-replication-hero {
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "template upload"
      "template queue"
      "settings settings" !important;
  }

  body[data-active-view="templateGeneration"] .generation-workflow-focus {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body[data-active-view="templateGeneration"] .generation-replication-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "template"
      "upload"
      "queue"
      "settings" !important;
  }

  body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-media {
    min-height: 300px !important;
  }

  body[data-active-view="templateGeneration"] .generation-template-hero-meta,
  body[data-active-view="templateGeneration"] .generation-settings-grid,
  body[data-active-view="templateGeneration"] .generation-prompt-highlight-grid,
  body[data-active-view="templateGeneration"] .workflow-prompt-inspector .generation-prompt-text-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v1.8.256 One-click generation compact layout */
body[data-active-view="templateGeneration"] .generation-page-panel {
  padding: 10px !important;
}

body[data-active-view="templateGeneration"] .generation-page-panel > .template-detail-heading {
  margin-bottom: 8px !important;
  padding: 8px 10px !important;
  min-height: 44px !important;
}

body[data-active-view="templateGeneration"] .generation-page-panel > .template-detail-heading h3 {
  font-size: clamp(20px, 2vw, 28px) !important;
  line-height: 1.08 !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 {
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-replication-hero {
  grid-template-columns: minmax(232px, 300px) minmax(300px, 1fr) minmax(240px, 0.7fr) !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-replication-hero > .batch-panel,
body[data-active-view="templateGeneration"] .generation-workflow-focus > .generation-prompt-chain,
body[data-active-view="templateGeneration"] .workflow-prompt-inspector,
body[data-active-view="templateGeneration"] .generation-run-panel {
  border-radius: 10px !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card,
body[data-active-view="templateGeneration"] .generation-settings-card,
body[data-active-view="templateGeneration"] .generation-workflow-focus .generation-prompt-chain,
body[data-active-view="templateGeneration"] .workflow-prompt-inspector,
body[data-active-view="templateGeneration"] .generation-run-panel {
  padding: 9px !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card {
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-template {
  grid-template-rows: minmax(200px, 1fr) auto auto !important;
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-media {
  min-height: clamp(220px, 34vh, 380px) !important;
  border-radius: 9px !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-copy {
  gap: 2px !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-copy strong {
  font-size: clamp(17px, 1.45vw, 23px) !important;
  line-height: 1.12 !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-meta {
  gap: 4px !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-meta span {
  padding: 6px 7px !important;
  gap: 1px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-meta b {
  font-size: 12px !important;
}

body[data-active-view="templateGeneration"] .generation-upload-hero-card,
body[data-active-view="templateGeneration"] .generation-upload-queue-card {
  min-height: 196px !important;
  padding: 9px !important;
}

body[data-active-view="templateGeneration"] .batch-panel-head {
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .batch-panel-head h4,
body[data-active-view="templateGeneration"] .generation-settings-head h4 {
  font-size: 15px !important;
}

body[data-active-view="templateGeneration"] .batch-panel-head span,
body[data-active-view="templateGeneration"] .generation-settings-head span,
body[data-active-view="templateGeneration"] .generation-settings-head em {
  font-size: 11px !important;
}

body[data-active-view="templateGeneration"] .generation-upload-hero-card .workflow-runtime-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 7px !important;
  height: calc(100% - 28px) !important;
}

body[data-active-view="templateGeneration"] .generation-upload-hero-card .workflow-runtime-input {
  min-height: 150px !important;
  padding: 10px !important;
  border-radius: 9px !important;
}

body[data-active-view="templateGeneration"] .generation-upload-queue-card .batch-upload-list {
  max-height: 168px !important;
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .generation-upload-queue-card .batch-upload-list article {
  padding: 6px !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  gap: 7px !important;
  border-radius: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-head {
  margin-bottom: 8px !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-head h4 {
  margin-bottom: 2px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-head em {
  padding: 5px 8px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-grid {
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-grid label {
  gap: 4px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-grid input,
body[data-active-view="templateGeneration"] .generation-settings-grid select,
body[data-active-view="templateGeneration"] .generation-settings-grid .generation-fixed-duration-field strong {
  min-height: 34px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

body[data-active-view="templateGeneration"] .generation-workflow-focus {
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr) !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-view .template-chain-grid {
  gap: 7px !important;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)) !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-view .template-slot-card,
body[data-active-view="templateGeneration"] .generation-prompt-highlight-card {
  padding: 8px !important;
  border-radius: 9px !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-grid,
body[data-active-view="templateGeneration"] .workflow-prompt-inspector .generation-prompt-text-grid {
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card {
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card > div {
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card ol {
  gap: 5px !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card li {
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 5px !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card li p {
  font-size: 11px !important;
  line-height: 1.32 !important;
  -webkit-line-clamp: 1 !important;
}

body[data-active-view="templateGeneration"] .workflow-prompt-inspector textarea {
  min-height: 118px !important;
  max-height: 180px !important;
  border-radius: 9px !important;
}

body[data-active-view="templateGeneration"] .workflow-prompt-inspector .prompt-sequence-preview {
  max-height: 150px !important;
  border-radius: 9px !important;
}

body[data-active-view="templateGeneration"] .generation-run-panel {
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-run-panel > .batch-submit-row {
  padding: 7px !important;
  min-height: 44px !important;
  border-radius: 9px !important;
}

body[data-active-view="templateGeneration"] .generation-output.batch-output {
  min-height: 86px !important;
  padding: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-history-panel-wide {
  padding: 9px !important;
}

body[data-active-view="templateGeneration"] .generation-history-grid {
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .generation-history-card,
body[data-active-view="templateGeneration"] .generation-final-video-card {
  border-radius: 9px !important;
}

@media (max-width: 1180px) {
  body[data-active-view="templateGeneration"] .generation-replication-hero {
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 760px) {
  body[data-active-view="templateGeneration"] .generation-page-panel {
    padding: 8px !important;
  }

  body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-media {
    min-height: 220px !important;
  }

  body[data-active-view="templateGeneration"] .generation-upload-hero-card,
  body[data-active-view="templateGeneration"] .generation-upload-queue-card {
    min-height: 160px !important;
  }

  body[data-active-view="templateGeneration"] .generation-upload-queue-card .batch-upload-list {
    max-height: 150px !important;
  }
}

/* v1.8.256 One-click legacy batch panel compacting */
body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) {
  display: grid !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-generation-grid {
  gap: 8px !important;
  margin-bottom: 8px !important;
  grid-template-columns: minmax(210px, 0.66fr) minmax(0, 1fr) minmax(260px, 0.82fr) !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-panel {
  padding: 10px !important;
  border-radius: 10px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-panel h4 {
  margin-bottom: 8px !important;
  font-size: 15px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-selected-template {
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-selected-copy strong {
  font-size: clamp(17px, 1.45vw, 22px) !important;
  line-height: 1.12 !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-current-template-panel .generation-selected-media {
  width: 72px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-current-template-panel .generation-selected-template {
  grid-template-columns: 72px minmax(0, 1fr) !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-drop-zone {
  min-height: 150px !important;
  gap: 7px !important;
  border-radius: 9px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-drop-zone svg {
  width: 28px !important;
  height: 28px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-drop-zone strong {
  font-size: 13px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-drop-zone span {
  font-size: 11px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-drop-zone em,
body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-primary-button,
body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-secondary-button {
  min-height: 30px !important;
  padding-inline: 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-panel-head {
  padding-bottom: 7px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-uploaded-panel .batch-upload-list {
  max-height: 160px !important;
  gap: 7px !important;
  padding-bottom: 0 !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-uploaded-panel .batch-upload-list article {
  min-width: 180px !important;
  padding: 7px !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-thumb {
  width: 38px !important;
  height: 38px !important;
  border-radius: 7px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-config-panel {
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-duration-control {
  padding: 8px !important;
  grid-template-columns: minmax(160px, 260px) minmax(0, 1fr) !important;
  gap: 8px !important;
  border-radius: 9px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-fixed-duration-field {
  gap: 4px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-fixed-duration-field strong,
body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-count-display,
body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-config-panel input,
body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-config-panel select,
body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-config-panel textarea {
  min-height: 34px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-config-grid,
body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-prompt-select-grid,
body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-prompt-text-grid {
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-music-preview {
  min-height: 30px !important;
  height: 34px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-warning {
  padding: 7px 9px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-prompt-chain {
  padding: 9px !important;
  gap: 8px !important;
  border-radius: 9px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-prompt-chain-head {
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-prompt-chain-head strong {
  margin-top: 2px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-prompt-chain-head em {
  font-size: 11px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-prompt-text-grid textarea {
  min-height: 108px !important;
  max-height: 168px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .prompt-sequence-preview {
  max-height: 130px !important;
  overflow: auto !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-submit-row {
  min-height: 40px !important;
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-credit-pill {
  padding: 6px 8px !important;
  font-size: 11px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-output {
  min-height: 82px !important;
  padding: 8px !important;
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-history-panel {
  padding: 9px !important;
  border-radius: 9px !important;
}

@media (max-width: 900px) {
body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-generation-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v1.8.259 Final compact chain settings and admin prompt editor override */
body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-card {
  align-content: start !important;
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .generation-settings-grid {
  grid-template-columns: minmax(0, 1fr) minmax(86px, 0.5fr) minmax(96px, 0.55fr) minmax(132px, 0.74fr) !important;
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view {
  margin: 0 !important;
  padding: 7px !important;
  gap: 7px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 9px !important;
  background: var(--replicate-soft) !important;
  box-shadow: none !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view .generation-prompt-chain-head {
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view .generation-prompt-chain-head strong {
  margin-top: 1px !important;
  overflow: hidden !important;
  font-size: 12px !important;
  line-height: 1.24 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view .template-chain-grid {
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)) !important;
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view .template-slot-card {
  padding: 7px !important;
  border-radius: 8px !important;
  background: var(--replicate-card-strong) !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view .template-slot-card small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .generation-workflow-focus {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-active-view="templateGeneration"] .workflow-prompt-highlights .generation-prompt-highlight-grid {
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)) !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card .generation-prompt-highlight-stage {
  justify-content: flex-start !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card .generation-prompt-highlight-stage span {
  max-width: 100% !important;
  padding: 4px 7px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  color: var(--replicate-accent) !important;
  background: var(--replicate-accent-soft) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card .generation-prompt-highlight-stage em {
  color: var(--replicate-faint) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-edit-panel {
  margin-top: 1px !important;
  border-top: 1px solid var(--replicate-line) !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-edit-panel summary {
  min-height: 28px !important;
  padding-top: 7px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--replicate-faint) !important;
  cursor: pointer !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  list-style: none !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-edit-panel summary::-webkit-details-marker {
  display: none !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-edit-panel textarea {
  width: 100% !important;
  min-height: 88px !important;
  max-height: 240px !important;
  padding: 8px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 8px !important;
  color: var(--replicate-text) !important;
  background: var(--replicate-card-strong) !important;
  font: inherit !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  resize: vertical !important;
}

@media (max-width: 760px) {
  body[data-active-view="templateGeneration"] .generation-settings-chain-layout .generation-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-active-view="templateGeneration"] .workflow-prompt-highlights .generation-prompt-highlight-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-drop-zone {
    min-height: 126px !important;
  }

  body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .generation-duration-control {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v1.8.257 One-click blueprint final compact pass */
body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-replication-hero {
  grid-template-columns: minmax(250px, 0.62fr) minmax(320px, 1fr) minmax(250px, 0.76fr) !important;
  grid-template-areas:
    "template upload queue"
    "settings settings settings" !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card {
  min-height: auto !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card .generation-selected-template {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 7px !important;
  align-items: center !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card .generation-selected-media {
  width: 82px !important;
  height: 108px !important;
  min-height: 108px !important;
  aspect-ratio: auto !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card .generation-selected-copy strong {
  font-size: clamp(17px, 1.35vw, 22px) !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card .generation-selected-template .text-button {
  grid-column: 2 !important;
  justify-self: start !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-meta {
  grid-column: 1 / -1 !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-hero-card,
body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-queue-card {
  min-height: 176px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-hero-card .workflow-runtime-grid {
  height: auto !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-hero-card .workflow-runtime-input {
  min-height: 138px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-card {
  min-height: 0 !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-grid {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.35fr) minmax(120px, 0.45fr) minmax(180px, 0.7fr) !important;
}

@media (max-width: 900px) {
  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-replication-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "template"
      "upload"
      "queue"
      "settings" !important;
  }
}

/* v1.8.257 Creator generation prompt textareas can be resized from the bottom */
body[data-active-view="creatorStudio"] .creator-kling-prompt-box,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-prompt-box,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-prompt-box {
  height: auto !important;
  min-height: 112px !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  overflow: visible !important;
}

body[data-active-view="creatorStudio"] #creatorImagePrompt,
body[data-active-view="creatorStudio"] #creatorVideoPrompt,
body[data-theme="light"][data-active-view="creatorStudio"] #creatorImagePrompt,
body[data-theme="light"][data-active-view="creatorStudio"] #creatorVideoPrompt,
body[data-theme="dark"][data-active-view="creatorStudio"] #creatorImagePrompt,
body[data-theme="dark"][data-active-view="creatorStudio"] #creatorVideoPrompt {
  height: 70px !important;
  min-height: 70px !important;
  max-height: min(62vh, 560px) !important;
  overflow: auto !important;
  resize: vertical !important;
}

/* v1.8.258 Compact generation settings, chain-ordered prompts, and hidden admin prompt editor */
body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-card {
  display: grid !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout {
  display: grid !important;
  grid-template-columns: minmax(500px, 1.16fr) minmax(280px, 0.84fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .generation-settings-grid {
  min-width: 0 !important;
  grid-template-columns: minmax(120px, 0.9fr) minmax(90px, 0.5fr) minmax(110px, 0.54fr) minmax(160px, 1fr) !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  display: grid !important;
  gap: 8px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 9px !important;
  background: var(--replicate-soft) !important;
  box-shadow: none !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view .generation-prompt-chain-head {
  margin: 0 !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view .generation-prompt-chain-head strong {
  margin-top: 1px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view .template-chain-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view .template-slot-card {
  padding: 7px !important;
  border-radius: 8px !important;
  background: var(--replicate-card-strong) !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view .template-slot-head {
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view .template-slot-head span {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
}

body[data-active-view="templateGeneration"] .generation-settings-chain-layout .workflow-chain-view .template-slot-card small {
  margin-top: 4px !important;
  display: block !important;
  overflow: hidden !important;
  color: var(--replicate-muted) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .generation-workflow-focus {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-active-view="templateGeneration"] .generation-workflow-focus > .workflow-prompt-highlights {
  width: 100% !important;
  min-height: 0 !important;
}

body[data-active-view="templateGeneration"] .workflow-prompt-highlights .generation-prompt-chain-head {
  margin-bottom: 8px !important;
}

body[data-active-view="templateGeneration"] .workflow-prompt-highlights .generation-prompt-highlight-grid {
  grid-template-columns: repeat(auto-fit, minmax(246px, 1fr)) !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card {
  align-content: start !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card .generation-prompt-highlight-stage,
body[data-active-view="templateGeneration"] .generation-prompt-highlight-card .generation-prompt-highlight-title {
  min-width: 0 !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card .generation-prompt-highlight-stage {
  justify-content: flex-start !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card .generation-prompt-highlight-stage span {
  max-width: 100% !important;
  padding: 4px 7px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  color: var(--replicate-accent) !important;
  background: var(--replicate-accent-soft) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card .generation-prompt-highlight-stage em {
  color: var(--replicate-faint) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-highlight-card .generation-prompt-highlight-title span {
  color: var(--replicate-text) !important;
  font-size: 12px !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-edit-panel {
  margin-top: 1px !important;
  border-top: 1px solid var(--replicate-line) !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-edit-panel summary {
  min-height: 28px !important;
  padding-top: 7px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--replicate-faint) !important;
  cursor: pointer !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  list-style: none !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-edit-panel summary::-webkit-details-marker {
  display: none !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-edit-panel summary svg {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.16s ease !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-edit-panel[open] summary svg {
  transform: rotate(180deg) !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-edit-panel label {
  display: grid !important;
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-edit-panel label > span {
  color: var(--replicate-muted) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
}

body[data-active-view="templateGeneration"] .generation-prompt-edit-panel textarea {
  width: 100% !important;
  min-height: 88px !important;
  max-height: 240px !important;
  padding: 8px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 8px !important;
  color: var(--replicate-text) !important;
  background: var(--replicate-card-strong) !important;
  font: inherit !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  resize: vertical !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] .generation-prompt-edit-panel textarea {
  background: #141414 !important;
}

@media (max-width: 1180px) {
  body[data-active-view="templateGeneration"] .generation-settings-chain-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body[data-active-view="templateGeneration"] .generation-settings-chain-layout .generation-settings-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  body[data-active-view="templateGeneration"] .workflow-prompt-highlights .generation-prompt-highlight-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v1.8.258 Creator generated videos use home-style scroll playback trays */
body[data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] {
  overflow: visible !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video .creator-result-media,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video .creator-result-media,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] .generation-history-media {
  border-radius: 12px 12px 0 0 !important;
  cursor: pointer !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video > .creator-video-download-tray,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video > .creator-video-download-tray,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video > .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video > .creator-video-download-tray,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video > .creator-video-download-tray,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video > .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] > .generation-video-download-tray,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] > .generation-video-download-tray,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] > .generation-video-download-tray {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 0 6px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 0 solid transparent !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
  color: rgba(12, 12, 12, 0.88) !important;
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 10px 22px rgba(24, 24, 24, 0.05) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
  transition:
    height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    min-height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-top 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0.18s ease !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video > .creator-video-download-tray,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video > .creator-video-download-tray,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] > .generation-video-download-tray {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(18, 18, 18, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.22) !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video:hover > .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video:has(> .creator-result-media:hover) > .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video:focus-within > .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video.is-history-preview-playing > .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video:hover > .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video:has(> .creator-result-media:hover) > .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video:focus-within > .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video.is-history-preview-playing > .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"]:hover > .generation-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"]:has(> .generation-history-media:hover) > .generation-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"]:focus-within > .generation-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"].is-history-preview-playing > .generation-video-download-tray {
  height: 41px !important;
  min-height: 41px !important;
  margin-top: -1px !important;
  padding: 6px !important;
  border-width: 0 1px 1px !important;
  border-color: rgba(255, 255, 255, 0.52) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video > .creator-video-download-tray > strong,
body[data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video > .creator-video-download-tray > span,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video > .creator-video-download-tray > strong,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video > .creator-video-download-tray > span {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video > .creator-video-download-tray .generation-result-actions,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video > .creator-video-download-tray .generation-result-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] > .generation-video-download-tray .generation-result-actions {
  width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video > .creator-video-download-tray .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video > .creator-video-download-tray .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] > .generation-video-download-tray .generation-result-actions a {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-active-view="creatorStudio"] .creator-result-grid > .creator-result-card.is-current-video > .creator-video-download-tray,
  body[data-active-view="creatorStudio"] .creator-result-history-section .creator-result-card.is-history-video > .creator-video-download-tray,
  body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card[data-generation-media-kind="video"] > .generation-video-download-tray {
    transition: none !important;
  }
}

/* v1.8.258 One-click: large template preview with settings attached to import side */
body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-replication-hero {
  grid-template-columns: minmax(320px, 420px) minmax(360px, 1fr) minmax(260px, 0.74fr) !important;
  grid-template-areas:
    "template upload queue"
    "template settings queue" !important;
  gap: 8px !important;
  align-items: stretch !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card,
body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-queue-card {
  min-height: min(72vh, 720px) !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card {
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-content: stretch !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card .generation-selected-template {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(360px, 1fr) auto auto !important;
  gap: 8px !important;
  align-items: stretch !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card .generation-selected-media {
  width: 100% !important;
  height: auto !important;
  min-height: clamp(360px, 52vh, 620px) !important;
  aspect-ratio: 9 / 14 !important;
  border-radius: 10px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card .generation-selected-copy strong {
  font-size: clamp(19px, 1.65vw, 26px) !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card .generation-selected-template .text-button {
  grid-column: 1 !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-hero-card {
  min-height: 246px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-hero-card .workflow-runtime-input {
  min-height: 196px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-card {
  min-height: 0 !important;
  align-content: end !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-card .generation-settings-head {
  margin-bottom: 6px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-grid {
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.36fr) minmax(110px, 0.42fr) minmax(160px, 0.62fr) !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-queue-card .batch-upload-list {
  max-height: calc(min(72vh, 720px) - 58px) !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-generation-grid {
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr) minmax(260px, 0.74fr) !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-current-template-panel .generation-selected-template {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(320px, 1fr) auto auto !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-current-template-panel .generation-selected-media {
  width: 100% !important;
  height: auto !important;
  min-height: clamp(320px, 48vh, 580px) !important;
  aspect-ratio: 9 / 14 !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-current-template-panel .generation-selected-template .text-button {
  grid-column: 1 !important;
}

body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-upload-panel .batch-drop-zone {
  min-height: 196px !important;
}

@media (max-width: 1180px) {
  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-replication-hero {
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "template upload"
      "template settings"
      "queue queue" !important;
  }

  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-queue-card {
    min-height: 220px !important;
  }
}

@media (max-width: 900px) {
  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-replication-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "template"
      "upload"
      "settings"
      "queue" !important;
  }

  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card,
  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-queue-card {
    min-height: 0 !important;
  }

  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card .generation-selected-template {
    grid-template-rows: minmax(320px, 58vh) auto auto !important;
  }

  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card .generation-selected-media {
    min-height: min(58vh, 520px) !important;
  }

  body[data-active-view="templateGeneration"] .template-generation-panel:not(.generation-workbench-v2) .batch-generation-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v1.8.261 Creator videos pause by default and prompt editor stays expanded */
body[data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-control-panel,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel {
  grid-template-rows: 42px max-content minmax(440px, calc(100svh - 390px)) max-content max-content max-content max-content !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-compose-card,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-compose-card {
  min-height: clamp(440px, 52svh, 620px) !important;
  grid-template-rows: auto auto minmax(330px, 1fr) auto !important;
}

body[data-active-view="creatorStudio"] .creator-kling-prompt-box,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-prompt-box,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-prompt-box {
  height: 100% !important;
  min-height: 330px !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  overflow: hidden !important;
}

body[data-active-view="creatorStudio"] #creatorImagePrompt,
body[data-active-view="creatorStudio"] #creatorVideoPrompt,
body[data-theme="light"][data-active-view="creatorStudio"] #creatorImagePrompt,
body[data-theme="light"][data-active-view="creatorStudio"] #creatorVideoPrompt,
body[data-theme="dark"][data-active-view="creatorStudio"] #creatorImagePrompt,
body[data-theme="dark"][data-active-view="creatorStudio"] #creatorVideoPrompt {
  height: 100% !important;
  min-height: 320px !important;
  max-height: none !important;
  overflow: auto !important;
  resize: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-media,
body[data-active-view="creatorStudio"] .generation-history-media {
  position: relative !important;
}

body[data-active-view="creatorStudio"] .generation-video-play-toggle,
body[data-theme="light"][data-active-view="creatorStudio"] .generation-video-play-toggle,
body[data-theme="dark"][data-active-view="creatorStudio"] .generation-video-play-toggle {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 6 !important;
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  background: rgba(12, 12, 12, 0.58) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
  cursor: pointer !important;
  backdrop-filter: blur(16px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
}

body[data-active-view="creatorStudio"] .generation-video-play-toggle:hover,
body[data-active-view="creatorStudio"] .generation-video-play-toggle:focus-visible {
  color: #fff !important;
  background: rgba(12, 12, 12, 0.76) !important;
}

body[data-active-view="creatorStudio"] .generation-video-play-toggle svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2.4 !important;
}

body[data-active-view="creatorStudio"] .generation-video-play-toggle span {
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .generation-video-play-toggle {
  top: 12px !important;
  left: 12px !important;
  min-height: 32px !important;
  padding: 0 11px !important;
}

@media (max-width: 900px) {
  body[data-active-view="creatorStudio"] .creator-control-panel,
  body[data-theme="light"][data-active-view="creatorStudio"] .creator-control-panel,
  body[data-theme="dark"][data-active-view="creatorStudio"] .creator-control-panel {
    grid-template-rows: none !important;
  }

  body[data-active-view="creatorStudio"] .creator-kling-compose-card,
  body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-compose-card,
  body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-compose-card {
    min-height: 430px !important;
  }

  body[data-active-view="creatorStudio"] #creatorImagePrompt,
  body[data-active-view="creatorStudio"] #creatorVideoPrompt,
  body[data-theme="light"][data-active-view="creatorStudio"] #creatorImagePrompt,
  body[data-theme="light"][data-active-view="creatorStudio"] #creatorVideoPrompt,
  body[data-theme="dark"][data-active-view="creatorStudio"] #creatorImagePrompt,
  body[data-theme="dark"][data-active-view="creatorStudio"] #creatorVideoPrompt {
    min-height: 300px !important;
  }
}

/* v1.8.262 Generated video cards hide custom red progress bars */
.generation-video-progress,
body[data-theme="light"] .generation-video-progress,
body[data-theme="dark"] .generation-video-progress {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* v1.8.267 Generated video cards keep progress below the media frame */
.creator-result-media + .generation-video-progress,
.generation-history-media + .generation-video-progress,
.account-generation-media + .generation-video-progress,
.canvas-result-media + .generation-video-progress,
body[data-theme="light"] .creator-result-media + .generation-video-progress,
body[data-theme="light"] .generation-history-media + .generation-video-progress,
body[data-theme="light"] .account-generation-media + .generation-video-progress,
body[data-theme="light"] .canvas-result-media + .generation-video-progress,
body[data-theme="dark"] .creator-result-media + .generation-video-progress,
body[data-theme="dark"] .generation-history-media + .generation-video-progress,
body[data-theme="dark"] .account-generation-media + .generation-video-progress,
body[data-theme="dark"] .canvas-result-media + .generation-video-progress {
  --video-progress: 0%;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 8px 9px !important;
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(24, 24, 24, 0.06) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.creator-result-media + .generation-video-progress input[type="range"],
.generation-history-media + .generation-video-progress input[type="range"],
.account-generation-media + .generation-video-progress input[type="range"],
.canvas-result-media + .generation-video-progress input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  cursor: pointer !important;
  touch-action: pan-x !important;
  accent-color: #ef4b43 !important;
}

.creator-result-media + .generation-video-progress input[type="range"]::-webkit-slider-runnable-track,
.generation-history-media + .generation-video-progress input[type="range"]::-webkit-slider-runnable-track,
.account-generation-media + .generation-video-progress input[type="range"]::-webkit-slider-runnable-track,
.canvas-result-media + .generation-video-progress input[type="range"]::-webkit-slider-runnable-track {
  height: 3px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      to right,
      #ef4b43 0%,
      #ef4b43 var(--video-progress),
      rgba(24, 24, 24, 0.16) var(--video-progress),
      rgba(24, 24, 24, 0.16) 100%
    ) !important;
  box-shadow: none !important;
}

.creator-result-media + .generation-video-progress input[type="range"]::-webkit-slider-thumb,
.generation-history-media + .generation-video-progress input[type="range"]::-webkit-slider-thumb,
.account-generation-media + .generation-video-progress input[type="range"]::-webkit-slider-thumb,
.canvas-result-media + .generation-video-progress input[type="range"]::-webkit-slider-thumb {
  width: 9px !important;
  height: 9px !important;
  margin-top: -3px !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  background: #ef4b43 !important;
  box-shadow: 0 2px 6px rgba(239, 75, 67, 0.24) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.creator-result-media + .generation-video-progress input[type="range"]::-moz-range-track,
.generation-history-media + .generation-video-progress input[type="range"]::-moz-range-track,
.account-generation-media + .generation-video-progress input[type="range"]::-moz-range-track,
.canvas-result-media + .generation-video-progress input[type="range"]::-moz-range-track {
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(24, 24, 24, 0.16) !important;
  box-shadow: none !important;
}

.creator-result-media + .generation-video-progress input[type="range"]::-moz-range-progress,
.generation-history-media + .generation-video-progress input[type="range"]::-moz-range-progress,
.account-generation-media + .generation-video-progress input[type="range"]::-moz-range-progress,
.canvas-result-media + .generation-video-progress input[type="range"]::-moz-range-progress {
  height: 3px !important;
  border-radius: 999px !important;
  background: #ef4b43 !important;
}

.creator-result-media + .generation-video-progress input[type="range"]::-moz-range-thumb,
.generation-history-media + .generation-video-progress input[type="range"]::-moz-range-thumb,
.account-generation-media + .generation-video-progress input[type="range"]::-moz-range-thumb,
.canvas-result-media + .generation-video-progress input[type="range"]::-moz-range-thumb {
  width: 9px !important;
  height: 9px !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  background: #ef4b43 !important;
  box-shadow: 0 2px 6px rgba(239, 75, 67, 0.24) !important;
}

body[data-theme="dark"] .creator-result-media + .generation-video-progress,
body[data-theme="dark"] .generation-history-media + .generation-video-progress,
body[data-theme="dark"] .account-generation-media + .generation-video-progress,
body[data-theme="dark"] .canvas-result-media + .generation-video-progress {
  background: rgba(24, 24, 24, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body[data-theme="dark"] .creator-result-media + .generation-video-progress input[type="range"]::-webkit-slider-runnable-track,
body[data-theme="dark"] .generation-history-media + .generation-video-progress input[type="range"]::-webkit-slider-runnable-track,
body[data-theme="dark"] .account-generation-media + .generation-video-progress input[type="range"]::-webkit-slider-runnable-track,
body[data-theme="dark"] .canvas-result-media + .generation-video-progress input[type="range"]::-webkit-slider-runnable-track {
  background:
    linear-gradient(
      to right,
      #ef4b43 0%,
      #ef4b43 var(--video-progress),
      rgba(255, 255, 255, 0.22) var(--video-progress),
      rgba(255, 255, 255, 0.22) 100%
    ) !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(360px, calc(100svh - 306px)) auto auto !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .creator-result-media,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .creator-result-media,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .creator-result-media {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 360px !important;
  aspect-ratio: auto !important;
  border-radius: 12px 12px 0 0 !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  justify-self: stretch !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(24, 24, 24, 0.06) !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress {
  background: rgba(24, 24, 24, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress + .creator-result-copy,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress + .creator-result-copy,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress + .creator-result-copy,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress + .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress + .generation-video-download-tray {
  grid-column: 1 !important;
  grid-row: 3 !important;
  border-left: 0 !important;
  border-top: 1px solid rgba(24, 24, 24, 0.08) !important;
}

/* v1.8.268 Generated videos use native browser progress only */
.generation-video-progress,
body[data-theme="light"] .generation-video-progress,
body[data-theme="dark"] .generation-video-progress,
.creator-result-media + .generation-video-progress,
.generation-history-media + .generation-video-progress,
.account-generation-media + .generation-video-progress,
.canvas-result-media + .generation-video-progress,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress + .creator-result-copy,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress + .creator-result-copy,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress + .creator-result-copy,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress + .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"].is-account-synced-video > .generation-video-progress + .generation-video-download-tray {
  grid-row: 2 !important;
}

/* v1.8.264 Creator playback cards mirror account-center state */
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="video"]:not([data-creator-result-view="detail"]),
body[data-active-view="creatorStudio"] .creator-result-history-section.is-video-history .creator-result-history-grid,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-group-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 10px !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  gap: 0 !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 12px !important;
  background: var(--creator-surface-card, #fff) !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(18, 18, 18, 0.88) !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-media,
body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .account-generation-media,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-media,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .account-generation-media {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 9 / 16 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #050505 !important;
  box-shadow: none !important;
  cursor: default !important;
  transform: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-media::after,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-media::after {
  content: none !important;
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-media video,
body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .account-generation-media video,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-media video,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .account-generation-media video,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-media img,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .account-generation-media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  background: #050505 !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .generation-video-play-toggle,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-video-play-toggle,
body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card > .generation-history-card-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card > .generation-video-download-tray,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card > .generation-image-action-tray {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-copy,
body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .account-generation-copy,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-copy,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-copy,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .account-generation-copy {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 10px !important;
  display: grid !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--creator-text-main, #181818) !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-copy > strong,
body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-copy > span,
body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-copy > small,
body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-copy > em,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > strong,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > span,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > small,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > em {
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
  color: inherit !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-copy > strong,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > strong {
  color: var(--creator-text-main, #181818) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-copy > span,
body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-copy > small,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > span,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > small {
  color: var(--creator-text-subtle, rgba(24, 24, 24, 0.58)) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
}

body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > em {
  color: #ff6b5d !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1.4 !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .creator-result-copy > .generation-result-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > .generation-result-actions {
  width: 100% !important;
  margin-top: 2px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 6px !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .generation-result-action-button,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-result-actions a,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-result-action-button {
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 8px !important;
  color: rgba(24, 24, 24, 0.82) !important;
  background: #f6fbf9 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .generation-result-actions a,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .generation-result-action-button,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-result-actions a,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-result-action-button {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body[data-active-view="creatorStudio"] .creator-result-card.is-account-synced-video .generation-result-action-button svg,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-result-action-button svg {
  width: 14px !important;
  height: 14px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card.is-account-synced-video {
  min-height: 226px !important;
  grid-template-columns: minmax(220px, 42%) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card.is-account-synced-video .creator-result-media {
  height: 100% !important;
  min-height: 226px !important;
  aspect-ratio: auto !important;
}

/* v1.8.275 Hide the oversized fullscreen action in creator detail videos */
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-action-button[data-generation-video-preview-url],
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-action-button[data-generation-video-preview-url],
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-action-button[data-generation-video-preview-url] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-actions:has(.generation-result-action-button[data-generation-video-preview-url]),
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-actions:has(.generation-result-action-button[data-generation-video-preview-url]),
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-view="detail"] .creator-result-card[data-result-kind="video"] .creator-result-copy .generation-result-actions:has(.generation-result-action-button[data-generation-video-preview-url]) {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* v1.8.268 One-click workflow node editor */
body[data-active-view="templateGeneration"] .generation-workflow-focus {
  display: grid !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-chain-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-chain-layout .generation-settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-chain-layout .workflow-chain-view {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-chain-layout .workflow-chain-view .generation-prompt-chain-head {
  min-width: 0 !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-chain-layout .workflow-chain-view .template-chain-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  padding-bottom: 2px !important;
  display: flex !important;
  gap: 6px !important;
  grid-template-columns: none !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-chain-layout .workflow-chain-view .template-slot-card {
  min-width: 128px !important;
  flex: 0 0 128px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor {
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 10px !important;
  background: var(--replicate-card) !important;
  box-shadow: none !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-head {
  margin-bottom: 8px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-head strong {
  max-width: min(760px, 72vw) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-toolbar button,
body[data-active-view="templateGeneration"] .workflow-node-editor-row-actions button {
  min-height: 30px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 8px !important;
  color: var(--replicate-text) !important;
  background: var(--replicate-soft) !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-toolbar button {
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-toolbar button:hover,
body[data-active-view="templateGeneration"] .workflow-node-editor-row-actions button:hover {
  border-color: rgba(239, 75, 67, 0.24) !important;
  color: var(--replicate-accent) !important;
  background: var(--replicate-accent-soft) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-toolbar svg,
body[data-active-view="templateGeneration"] .workflow-node-editor-row-actions svg {
  width: 14px !important;
  height: 14px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list {
  margin-top: 8px !important;
  display: grid !important;
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row {
  min-width: 0 !important;
  padding: 8px !important;
  display: grid !important;
  gap: 7px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 9px !important;
  background: var(--replicate-soft) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row-head {
  display: grid !important;
  grid-template-columns: 30px minmax(150px, 0.7fr) minmax(150px, 0.6fr) auto !important;
  align-items: end !important;
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row-head > span {
  width: 28px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  color: var(--replicate-accent) !important;
  background: var(--replicate-accent-soft) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row label {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row small {
  color: var(--replicate-faint) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row input,
body[data-active-view="templateGeneration"] .workflow-node-editor-row select,
body[data-active-view="templateGeneration"] .workflow-node-editor-row textarea {
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 8px !important;
  color: var(--replicate-text) !important;
  background: var(--replicate-card-strong) !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  outline: none !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row input,
body[data-active-view="templateGeneration"] .workflow-node-editor-row select {
  height: 32px !important;
  padding: 0 8px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row textarea {
  min-height: 72px !important;
  max-height: 260px !important;
  padding: 8px !important;
  line-height: 1.45 !important;
  resize: vertical !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-fields {
  display: grid !important;
  grid-template-columns: minmax(130px, 0.36fr) minmax(140px, 0.42fr) minmax(260px, 1fr) !important;
  gap: 7px !important;
  align-items: start !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 5px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row-actions button {
  width: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-link {
  padding: 5px 7px !important;
  overflow: hidden !important;
  border-radius: 7px !important;
  color: var(--replicate-muted) !important;
  background: var(--replicate-card-strong) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-note {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--replicate-line) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-note span {
  color: var(--replicate-muted) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.45 !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-row input,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-row select,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-row textarea,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-link {
  background: #141414 !important;
}

@media (max-width: 920px) {
  body[data-active-view="templateGeneration"] .workflow-node-editor-row-head,
  body[data-active-view="templateGeneration"] .workflow-node-editor-fields {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-row-head > span {
    justify-self: start !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-row-actions {
    justify-content: flex-start !important;
  }
}

/* v1.8.269 One-click workflow nodes use column cards */
@media (min-width: 721px) {
  body[data-active-view="templateGeneration"] .workflow-node-editor-list {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(260px, 300px) !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    padding: 2px 2px 8px !important;
    scroll-snap-type: x proximity !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-row {
    width: 100% !important;
    min-width: 260px !important;
    max-width: 300px !important;
    min-height: 372px !important;
    align-content: start !important;
    scroll-snap-align: start !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-row-head {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: start !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-row-head > label:nth-of-type(2) {
    grid-column: 1 / -1 !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-row-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-content: flex-end !important;
    align-self: start !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-fields {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-row textarea {
    min-height: 96px !important;
  }
}

@media (max-width: 720px) {
  body[data-active-view="templateGeneration"] .workflow-node-editor-list {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    scroll-snap-type: none !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-row {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    scroll-snap-align: none !important;
  }
}

/* v1.8.271 One-click upload and settings merged into a compact workbench */
body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-replication-hero {
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr) !important;
  grid-template-areas: "template workbench" !important;
  gap: 8px !important;
  align-items: stretch !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card {
  grid-area: workbench !important;
  min-width: 0 !important;
  min-height: min(72vh, 720px) !important;
  padding: 8px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  align-content: start !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-material-row {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1.05fr) minmax(240px, 0.95fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-block {
  grid-area: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 10px !important;
  background: var(--replicate-soft) !important;
  box-shadow: none !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-hero-card,
body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-queue-card,
body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-card {
  min-height: 0 !important;
  align-content: start !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-hero-card .workflow-runtime-grid {
  height: auto !important;
  margin-top: 8px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-hero-card .workflow-runtime-input {
  min-height: 118px !important;
  padding: 12px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-queue-card .batch-upload-list {
  min-height: 118px !important;
  max-height: 172px !important;
  margin-top: 8px !important;
  overflow: auto !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-upload-queue-card .batch-empty-upload {
  min-height: 118px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-card .generation-settings-head {
  margin-bottom: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card .generation-settings-chain-layout {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.86fr) minmax(300px, 1fr) !important;
  gap: 8px !important;
  align-items: start !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card .generation-settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card .generation-settings-controls {
  min-width: 0 !important;
  display: grid !important;
  gap: 7px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-grid .generation-music-field {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-grid .generation-music-field > span {
  color: var(--replicate-muted) !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  line-height: 1.2 !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-music-select-row {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px !important;
  align-items: center !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-music-preview-button {
  min-width: 48px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: #151515 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] .generation-workbench-v2 .generation-music-preview-button {
  color: #151515 !important;
  background: #f5f5f5 !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-music-preview-row[hidden] {
  display: none !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-music-preview-row {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(112px, 0.44fr) minmax(180px, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 7px 8px !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 8px !important;
  background: var(--replicate-card) !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-music-preview-row > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-music-preview-row span {
  color: var(--replicate-muted) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-music-preview-row strong {
  min-width: 0 !important;
  color: var(--replicate-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-music-preview-row audio {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  display: block !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card .workflow-chain-view {
  margin: 0 !important;
  padding: 8px !important;
  border-radius: 9px !important;
  background: var(--replicate-card-strong) !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card .workflow-chain-view .template-chain-grid {
  padding-bottom: 0 !important;
}

@media (max-width: 1180px) {
  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-replication-hero {
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr) !important;
    grid-template-areas: "template workbench" !important;
  }

  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-material-row,
  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card .generation-settings-chain-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-music-preview-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-replication-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "template"
      "workbench" !important;
  }

  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card {
    min-height: 0 !important;
  }
}

/* v1.8.273 One-click header and current-chain compact row */
body[data-active-view="templateGeneration"] .topbar {
  display: none !important;
}

body[data-active-view="templateGeneration"] .main {
  padding-top: 16px !important;
}

body[data-active-view="templateGeneration"] .generation-page-panel {
  padding-top: 0 !important;
}

body[data-active-view="templateGeneration"] .generation-page-panel > .template-generation-title-row {
  min-height: 34px !important;
  margin: 0 0 8px !important;
  padding: 0 4px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body[data-active-view="templateGeneration"] .template-generation-title-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 0 !important;
}

body[data-active-view="templateGeneration"] .template-generation-title-copy h3 {
  margin: 0 !important;
  color: #242424 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

body[data-active-view="templateGeneration"] .generation-page-panel > .template-generation-title-row .text-button {
  flex: 0 0 auto !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-replication-hero {
  align-items: start !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card {
  min-height: 0 !important;
  grid-template-rows: auto auto !important;
  align-self: start !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-card {
  align-content: start !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card .generation-settings-chain-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card .workflow-chain-view {
  width: 100% !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card .workflow-chain-view .template-chain-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, max-content)) !important;
  gap: 6px !important;
  align-items: start !important;
}

/* v1.8.277 One-click current-chain stack shell */
body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-chain-editor-stack {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-chain-editor-stack > .workflow-chain-view {
  width: 100% !important;
}

/* v1.8.279 Drag reorder workflow nodes */
body[data-active-view="templateGeneration"] .workflow-node-drag-handle {
  cursor: grab !important;
  touch-action: none !important;
  -webkit-user-drag: element !important;
}

body[data-active-view="templateGeneration"] .workflow-node-drag-handle:active {
  cursor: grabbing !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row {
  transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row.is-dragging {
  opacity: 0.62 !important;
  border-color: rgba(239, 75, 67, 0.42) !important;
  box-shadow: 0 14px 30px rgba(24, 24, 24, 0.12) !important;
  cursor: grabbing !important;
}

/* v1.8.281 Comfy-style one-click workflow nodes */
body[data-active-view="templateGeneration"] .workflow-node-editor-row {
  position: relative !important;
  overflow: visible !important;
  border-left: 3px solid rgba(239, 75, 67, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.52)),
    var(--replicate-soft) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row[data-workflow-node-type="image_to_video"] {
  border-left-color: rgba(33, 33, 33, 0.82) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-row[data-workflow-node-type="music_compose"],
body[data-active-view="templateGeneration"] .workflow-node-editor-row[data-workflow-node-type="voiceover_generate"],
body[data-active-view="templateGeneration"] .workflow-node-editor-row[data-workflow-node-type="subtitle_generate"] {
  border-left-color: rgba(116, 108, 89, 0.54) !important;
}

@media (min-width: 721px) {
  body[data-active-view="templateGeneration"] .workflow-node-editor-list {
    grid-auto-columns: minmax(320px, 360px) !important;
    gap: 14px !important;
    padding: 2px 12px 10px 2px !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-row {
    min-width: 320px !important;
    max-width: 360px !important;
    min-height: 510px !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-row:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 78px !important;
    right: -17px !important;
    width: 18px !important;
    border-top: 2px dashed rgba(239, 75, 67, 0.34) !important;
    pointer-events: none !important;
  }
}

body[data-active-view="templateGeneration"] .workflow-node-editor-ports {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) !important;
  gap: 4px !important;
  align-items: center !important;
}

body[data-active-view="templateGeneration"] .workflow-node-port {
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 6px 7px !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  gap: 5px !important;
  align-items: center !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 8px !important;
  color: var(--replicate-text) !important;
  background: var(--replicate-card-strong) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-port i {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 3px rgba(239, 75, 67, 0.1) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-port.is-input i {
  background: #7f7a70 !important;
}

body[data-active-view="templateGeneration"] .workflow-node-port.is-output i {
  background: var(--replicate-accent) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-port b,
body[data-active-view="templateGeneration"] .workflow-node-port em {
  min-width: 0 !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .workflow-node-port b {
  font-size: 10px !important;
  font-weight: 950 !important;
}

body[data-active-view="templateGeneration"] .workflow-node-port em {
  color: var(--replicate-muted) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 760 !important;
}

body[data-active-view="templateGeneration"] .workflow-node-port-line {
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(127, 122, 112, 0.32), rgba(239, 75, 67, 0.72)) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-param-grid {
  padding: 8px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  border: 1px solid rgba(18, 18, 18, 0.08) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.46) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-param-wide {
  grid-column: 1 / -1 !important;
}

body[data-active-view="templateGeneration"] .workflow-node-param-grid textarea {
  min-height: 62px !important;
  max-height: 190px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-prompt textarea {
  min-height: 128px !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-node-card {
  position: relative !important;
  gap: 6px !important;
  border-left: 3px solid rgba(239, 75, 67, 0.34) !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-node-ports {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) !important;
  gap: 4px !important;
  align-items: center !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-node-ports small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-node-ports svg {
  width: 12px !important;
  height: 12px !important;
  color: var(--replicate-accent) !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-row,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-param-grid,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-port,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-chain-node-card {
  background: #141414 !important;
}

@media (max-width: 720px) {
  body[data-active-view="templateGeneration"] .workflow-node-param-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-ports {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-port-line {
    display: none !important;
  }
}

@media (max-width: 720px) {
  body[data-active-view="templateGeneration"] .generation-page-panel > .template-generation-title-row {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

/* v1.8.276 Creator side cards keep filenames inside preview dialogs only */
body[data-active-view="creatorStudio"] .creator-result-grid:not([data-creator-result-view="detail"]) .creator-result-card .creator-result-copy > strong,
body[data-active-view="creatorStudio"] .creator-result-grid:not([data-creator-result-view="detail"]) .creator-result-card .creator-result-copy > span,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid:not([data-creator-result-view="detail"]) .creator-result-card .creator-result-copy > strong,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-result-grid:not([data-creator-result-view="detail"]) .creator-result-card .creator-result-copy > span,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid:not([data-creator-result-view="detail"]) .creator-result-card .creator-result-copy > strong,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-result-grid:not([data-creator-result-view="detail"]) .creator-result-card .creator-result-copy > span,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > strong,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > span,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > strong,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > span,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > strong,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > span {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid:not([data-creator-result-view="detail"]) .creator-result-card .creator-result-copy > .generation-result-actions,
body[data-active-view="creatorStudio"] .creator-history-panel .generation-history-card.account-generation-card .generation-history-copy > .generation-result-actions {
  margin-top: 0 !important;
}

/* v1.8.282 One-click fluid template column without manual slider */
body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-replication-hero {
  grid-template-columns: minmax(300px, clamp(320px, 32vw, 440px)) minmax(0, 1fr) !important;
  grid-template-areas: "template workbench" !important;
  gap: 8px !important;
  align-items: start !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-template-hero-card {
  grid-area: template !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-workbench-side-card {
  grid-area: workbench !important;
  min-width: 0 !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-selected-template-head {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-selected-template-head > span {
  min-width: 0 !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-selected-template-head .text-button {
  flex: 0 0 auto !important;
  min-height: 30px !important;
  padding: 0 10px !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-grid input[type="hidden"] {
  display: none !important;
}

body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-grid {
  grid-template-columns: minmax(110px, 0.36fr) minmax(110px, 0.36fr) minmax(180px, 0.72fr) !important;
}

/* v1.8.284 One-click chain opens editor subpage */
body.has-workflow-editor-dialog {
  overflow: hidden !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-view[data-workflow-chain-open] {
  cursor: pointer !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-view[data-workflow-chain-open]:hover,
body[data-active-view="templateGeneration"] .workflow-chain-view[data-workflow-chain-open]:focus-visible {
  border-color: rgba(239, 75, 67, 0.28) !important;
  background: var(--replicate-card-strong) !important;
  box-shadow: 0 12px 26px rgba(24, 24, 24, 0.08) !important;
  outline: none !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-head-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

body[data-active-view="templateGeneration"] .workflow-chain-head-actions span {
  min-height: 24px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid rgba(239, 75, 67, 0.18) !important;
  border-radius: 999px !important;
  color: var(--replicate-accent) !important;
  background: var(--replicate-accent-soft) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-dialog[hidden] {
  display: none !important;
}

/* v1.8.289 One-click workflow editor drawer unfreeze */
body[data-active-view="templateGeneration"] .workflow-node-editor-dialog {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2200 !important;
  padding: 12px !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  background: rgba(18, 18, 18, 0.38) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-shell {
  position: relative !important;
  z-index: 3 !important;
  width: min(1120px, calc(100vw - 28px)) !important;
  height: calc(100svh - 24px) !important;
  max-height: none !important;
  margin-left: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid var(--replicate-line) !important;
  border-radius: 14px !important;
  background: var(--replicate-card-strong) !important;
  box-shadow: 0 26px 70px rgba(18, 18, 18, 0.24) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-dialog-head {
  min-width: 0 !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--replicate-line) !important;
  background: var(--replicate-card-strong) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-dialog-head > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-dialog-head span {
  color: var(--replicate-muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-dialog-head strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--replicate-text) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-dialog .workflow-node-editor {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-dialog .workflow-node-editor-head strong {
  max-width: min(880px, 70vw) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-dialog .workflow-node-editor-list {
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-dialog .workflow-node-editor-row {
  max-height: calc(100svh - 230px) !important;
  overflow-y: auto !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-shell,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-dialog-head {
  background: #141414 !important;
}

/* v1.8.286 One-click selected template video controls */
body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-media .generation-template-preview-video.is-interactive-video {
  z-index: 0 !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-media .generation-template-preview-video.is-interactive-video video {
  cursor: pointer !important;
  background: #111 !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-media .generation-template-preview-video.is-interactive-video.is-playing video {
  object-fit: contain !important;
}

body[data-active-view="templateGeneration"] .generation-template-hero-card .generation-selected-media .generation-template-preview-video.is-interactive-video + .generation-template-reference-empty {
  pointer-events: none !important;
}

@media (max-width: 900px) {
  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-replication-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "template"
      "workbench" !important;
  }

  body[data-active-view="templateGeneration"] .generation-workbench-v2 .generation-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body[data-active-view="templateGeneration"] .workflow-chain-head-actions {
    align-items: flex-end !important;
    flex-direction: column !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-dialog {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-shell {
    width: 100vw !important;
    height: 100svh !important;
    border-radius: 0 !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-dialog-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-dialog .workflow-node-editor-row {
    max-height: none !important;
  }
}

/* v1.8.285 Creator imported frames replace upload boxes */
body[data-active-view="creatorStudio"] .creator-inline-upload.has-first-frame > #creatorImageUploadCard {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-inline-upload.has-first-frame > #creatorUploadList {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-height: 66px !important;
  max-height: 118px !important;
  margin: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  overflow: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: #1a1a1a !important;
}

body[data-active-view="creatorStudio"] .creator-inline-upload.has-first-frame > .creator-upload-head {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

body[data-active-view="creatorStudio"] .creator-kling-upload-zone #creatorTailUploadPanel.has-tail-frame > #creatorTailUploadCard {
  display: none !important;
}

body[data-active-view="creatorStudio"] .creator-kling-upload-zone #creatorTailUploadPanel.has-tail-frame > #creatorTailUploadList {
  min-height: 66px !important;
  max-height: 118px !important;
  margin: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  overflow: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: #1a1a1a !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-upload-list.is-dragging,
body[data-active-view="creatorStudio"] .creator-kling-upload-zone #creatorTailUploadPanel.has-tail-frame > #creatorTailUploadList.is-dragging {
  border-color: rgba(255, 255, 255, 0.26) !important;
  background: #222 !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-frame-preview-card,
body[data-theme="light"][data-active-view="creatorStudio"] .creator-kling-compose-card .creator-frame-preview-card,
body[data-theme="dark"][data-active-view="creatorStudio"] .creator-kling-compose-card .creator-frame-preview-card {
  min-height: 64px !important;
  padding: 6px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  background: transparent !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-frame-preview-card img {
  width: 44px !important;
  height: 50px !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-frame-preview-card strong,
body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-frame-preview-card span {
  min-width: 0 !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-frame-preview-card strong {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body[data-active-view="creatorStudio"] .creator-kling-compose-card .creator-frame-preview-card span {
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 11px !important;
}

body[data-active-view="creatorStudio"] .creator-upload-preview-actions {
  display: grid !important;
  grid-auto-flow: column !important;
  gap: 5px !important;
}

body[data-active-view="creatorStudio"] .creator-upload-preview-actions button {
  min-height: 28px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 7px !important;
  color: rgba(255, 255, 255, 0.76) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

body[data-active-view="creatorStudio"] .creator-upload-preview-actions button:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* v1.8.295 Creator image results stay scoped and aligned */
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="image"]:not([data-creator-result-view="detail"]) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="image"]:not([data-creator-result-view="detail"]) .creator-result-history-section.is-image-history .creator-result-history-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="image"]:not([data-creator-result-view="detail"]) > .creator-result-card[data-result-kind="image"],
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="image"]:not([data-creator-result-view="detail"]) .creator-result-history-section.is-image-history .creator-result-card.is-history-image {
  min-width: 0 !important;
  border-radius: 12px !important;
}

body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="image"]:not([data-creator-result-view="detail"]) > .creator-result-card[data-result-kind="image"] .creator-result-media,
body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="image"]:not([data-creator-result-view="detail"]) .creator-result-history-section.is-image-history .creator-result-card.is-history-image .creator-result-media {
  aspect-ratio: 4 / 5 !important;
}

@media (max-width: 1180px) {
  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="image"]:not([data-creator-result-view="detail"]),
  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="image"]:not([data-creator-result-view="detail"]) .creator-result-history-section.is-image-history .creator-result-history-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="image"]:not([data-creator-result-view="detail"]),
  body[data-active-view="creatorStudio"] .creator-result-grid[data-creator-result-mode="image"]:not([data-creator-result-view="detail"]) .creator-result-history-section.is-image-history .creator-result-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v1.8.297 Home preview videos do not block page scrolling */
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-video-frame .viewport-video,
body:is([data-active-view="templates"], [data-active-view="templateFavorites"]) .template-video-frame .viewport-video video {
  pointer-events: none !important;
}

/* v1.8.298 One-click editor uses a Comfy-style draggable node canvas */
body[data-active-view="templateGeneration"] .workflow-node-editor.is-comfy-editor {
  height: 100% !important;
  min-height: 0 !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  background: #f7f7f4 !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-layout {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 154px minmax(0, 1fr) !important;
  gap: 10px !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-palette {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 9px !important;
  display: grid !important;
  grid-auto-flow: row !important;
  align-content: start !important;
  gap: 7px !important;
  overflow: auto !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-palette > span {
  color: rgba(24, 24, 24, 0.46) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-palette button {
  width: 100% !important;
  justify-content: flex-start !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  background: #fff !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-canvas-shell {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 12px !important;
  background: #f1f0ed !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-canvas-head {
  min-width: 0 !important;
  padding: 9px 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(24, 24, 24, 0.08) !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-canvas-head > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-canvas-head strong {
  color: #242424 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-canvas-head span,
body[data-active-view="templateGeneration"] .workflow-comfy-canvas-head em {
  color: rgba(24, 24, 24, 0.5) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 760 !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-dialog .workflow-node-editor-list.workflow-comfy-canvas,
body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas {
  position: relative !important;
  height: min(68svh, 720px) !important;
  min-height: 620px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scroll-snap-type: none !important;
  background:
    linear-gradient(rgba(24, 24, 24, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 24, 24, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 24px 24px, rgba(239, 75, 67, 0.08), transparent 18px),
    #f1f0ed !important;
  background-size: 32px 32px, 32px 32px, 220px 220px, auto !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-edge-layer {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-edge {
  fill: none !important;
  stroke: rgba(36, 36, 36, 0.42) !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 7 7 !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-edge.is-video-node {
  stroke: rgba(24, 24, 24, 0.68) !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-edge.is-audio-node,
body[data-active-view="templateGeneration"] .workflow-comfy-edge.is-edit-node {
  stroke: rgba(116, 108, 89, 0.56) !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-edge-terminal {
  fill: #fff !important;
  stroke: rgba(239, 75, 67, 0.72) !important;
  stroke-width: 2 !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 2 !important;
  width: 326px !important;
  min-width: 326px !important;
  max-width: 326px !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 9px !important;
  display: grid !important;
  gap: 8px !important;
  transform: translate(var(--workflow-node-x, 34px), var(--workflow-node-y, 54px)) !important;
  scroll-snap-align: none !important;
  border: 1px solid rgba(24, 24, 24, 0.1) !important;
  border-left: 4px solid rgba(239, 75, 67, 0.52) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 28px rgba(24, 24, 24, 0.08) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row::after {
  content: none !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row.is-video-node {
  border-left-color: rgba(24, 24, 24, 0.82) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row.is-audio-node,
body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row.is-edit-node {
  border-left-color: rgba(116, 108, 89, 0.68) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row.is-selected {
  z-index: 6 !important;
  width: 386px !important;
  max-width: 386px !important;
  border-color: rgba(239, 75, 67, 0.34) !important;
  box-shadow: 0 22px 48px rgba(24, 24, 24, 0.16) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row.is-dragging {
  z-index: 10 !important;
  opacity: 0.86 !important;
  cursor: grabbing !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row-head {
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  align-items: start !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row-head > label:nth-of-type(2) {
  grid-column: 1 / -1 !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row-head > span {
  background: rgba(239, 75, 67, 0.1) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-ports {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) !important;
  gap: 5px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-port-stack {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-port {
  min-height: 30px !important;
  padding: 5px 6px !important;
  grid-template-columns: auto minmax(34px, auto) minmax(0, 1fr) !important;
  border-radius: 999px !important;
  background: #fff !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-port-line {
  width: 20px !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-port-line i {
  width: 100% !important;
  height: 2px !important;
  display: block !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(127, 122, 112, 0.32), rgba(239, 75, 67, 0.72)) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-mini-spec {
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-mini-spec span {
  max-width: 100% !important;
  min-height: 22px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(24, 24, 24, 0.56) !important;
  background: rgba(24, 24, 24, 0.035) !important;
  font-size: 10px !important;
  font-weight: 860 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row:not(.is-selected) .workflow-node-editor-config {
  display: none !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row.is-selected .workflow-node-editor-config {
  max-height: 360px !important;
  padding-top: 8px !important;
  display: grid !important;
  gap: 8px !important;
  overflow: auto !important;
  border-top: 1px solid rgba(24, 24, 24, 0.08) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row:not(.is-selected) .workflow-node-editor-link {
  display: none !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-fields {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-param-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-prompt textarea {
  min-height: 150px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor.is-comfy-editor,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-comfy-canvas-shell,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas {
  background-color: #101010 !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-comfy-palette,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-comfy-canvas-head,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row {
  background: #171717 !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-mini-spec span,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-port {
  color: rgba(255, 255, 255, 0.68) !important;
  background: #202020 !important;
}

@media (max-width: 920px) {
  body[data-active-view="templateGeneration"] .workflow-comfy-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-view="templateGeneration"] .workflow-comfy-palette {
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    overflow-x: auto !important;
  }

  body[data-active-view="templateGeneration"] .workflow-comfy-palette button {
    width: auto !important;
  }
}

/* v1.8.300 One-click workflow editor shows all nodes as a clean sortable board */
body[data-active-view="templateGeneration"] .workflow-node-editor-shell {
  width: min(1280px, calc(100vw - 28px)) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor.is-comfy-editor {
  background: #f8f7f4 !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-layout {
  grid-template-columns: 142px minmax(0, 1fr) !important;
  align-items: stretch !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-palette {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.84) !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-canvas-shell {
  overflow: hidden !important;
  background: #efeeea !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-canvas-head {
  min-height: 46px !important;
  padding: 8px 12px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-dialog .workflow-node-editor-list.workflow-comfy-canvas,
body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas {
  position: relative !important;
  height: min(70svh, 720px) !important;
  min-height: 540px !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 12px !important;
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-columns: initial !important;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 12px !important;
  overflow: auto !important;
  scroll-snap-type: none !important;
  background:
    linear-gradient(rgba(24, 24, 24, 0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 24, 24, 0.042) 1px, transparent 1px),
    #efeeea !important;
  background-size: 28px 28px, 28px 28px, auto !important;
}

body[data-active-view="templateGeneration"] .workflow-comfy-edge-layer {
  display: none !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 8px !important;
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  overflow: visible !important;
  transform: none !important;
  cursor: grab !important;
  border: 1px solid rgba(24, 24, 24, 0.09) !important;
  border-left: 4px solid rgba(239, 75, 67, 0.48) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 10px 24px rgba(24, 24, 24, 0.07) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row.is-video-node {
  border-left-color: rgba(24, 24, 24, 0.78) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row.is-audio-node,
body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row.is-edit-node {
  border-left-color: rgba(116, 108, 89, 0.72) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row.is-selected {
  width: auto !important;
  max-width: none !important;
  border-color: rgba(239, 75, 67, 0.34) !important;
  box-shadow: 0 16px 34px rgba(24, 24, 24, 0.14) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas > .workflow-node-editor-row.is-dragging {
  opacity: 0.78 !important;
  cursor: grabbing !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row-head {
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  gap: 7px !important;
  cursor: grab !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row-head > label:nth-of-type(2) {
  grid-column: 1 / -1 !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row-actions {
  gap: 4px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row-actions button {
  width: 30px !important;
  height: 30px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-ports {
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) !important;
  gap: 4px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-port {
  min-height: 28px !important;
  padding: 4px 6px !important;
  grid-template-columns: auto minmax(28px, auto) minmax(0, 1fr) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-mini-spec {
  gap: 4px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-mini-spec span {
  min-height: 21px !important;
  padding: 0 6px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row:not(.is-selected) .workflow-node-editor-config,
body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row:not(.is-selected) .workflow-node-editor-link {
  display: none !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-row.is-selected .workflow-node-editor-config {
  max-height: 300px !important;
  padding: 9px 0 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: auto !important;
  border-top: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-fields,
body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-param-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas .workflow-node-editor-prompt textarea {
  min-height: 126px !important;
  max-height: 180px !important;
}

body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas::after {
  content: "拖动节点卡片调整顺序，点击节点编辑提升词和参数" !important;
  position: sticky !important;
  left: 12px !important;
  bottom: 10px !important;
  z-index: 4 !important;
  grid-column: 1 / -1 !important;
  width: max-content !important;
  max-width: calc(100% - 24px) !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(24, 24, 24, 0.5) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 8px 22px rgba(24, 24, 24, 0.08) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  pointer-events: none !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor.is-comfy-editor,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-comfy-canvas-shell,
body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas {
  background-color: #101010 !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas {
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    #101010 !important;
  background-size: 28px 28px, 28px 28px, auto !important;
}

body[data-theme="dark"][data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas::after {
  color: rgba(255, 255, 255, 0.62) !important;
  background: rgba(24, 24, 24, 0.88) !important;
}

@media (max-width: 920px) {
  body[data-active-view="templateGeneration"] .workflow-comfy-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-view="templateGeneration"] .workflow-node-editor-list.workflow-comfy-canvas {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  }
}

/* v1.8.301 Template save and sync controls follow the main UI action system. */
.top-upload-button,
body[data-active-view="templateDetail"] #saveTemplateDraft {
  min-height: 38px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(24, 24, 24, 0.12) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: #151515 !important;
  box-shadow: 0 14px 30px rgba(24, 24, 24, 0.14) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.top-upload-button svg,
body[data-active-view="templateDetail"] #saveTemplateDraft svg,
body[data-active-view="templateDetail"] .template-actions .text-button svg,
.template-video-replace .text-button svg,
.template-sync-pill svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
  stroke-width: 2.2 !important;
}

body[data-active-view="templateDetail"] .template-detail-heading .template-actions {
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

body[data-active-view="templateDetail"] .template-actions .text-button {
  min-height: 38px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  gap: 7px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 12px !important;
  color: rgba(24, 24, 24, 0.72) !important;
  background: rgba(246, 246, 244, 0.9) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body[data-active-view="templateDetail"] .template-actions .text-button:hover,
.template-video-replace .text-button:hover {
  color: rgba(24, 24, 24, 0.92) !important;
  border-color: rgba(24, 24, 24, 0.14) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

body[data-active-view="templateDetail"] .template-actions .text-button.danger {
  color: rgba(189, 54, 49, 0.88) !important;
  border-color: rgba(219, 76, 70, 0.14) !important;
  background: rgba(255, 243, 241, 0.92) !important;
}

body[data-active-view="templateDetail"] .template-actions .text-button.danger:hover {
  color: rgba(148, 33, 29, 0.95) !important;
  border-color: rgba(219, 76, 70, 0.22) !important;
  background: rgba(255, 235, 232, 0.96) !important;
}

body[data-active-view="templateDetail"] #saveTemplateDraft.is-saving {
  opacity: 0.84 !important;
  cursor: wait !important;
}

body[data-active-view="templateDetail"] #saveTemplateDraft.is-saving svg {
  animation: templateSaveSpin 0.85s linear infinite !important;
}

body[data-active-view="templateDetail"] #saveTemplateDraft.is-saved {
  border-color: rgba(37, 126, 82, 0.2) !important;
  background: #1f7a4c !important;
  box-shadow: 0 14px 30px rgba(31, 122, 76, 0.16) !important;
}

@keyframes templateSaveSpin {
  to {
    transform: rotate(360deg);
  }
}

body[data-active-view="templateDetail"] .template-video-replace {
  margin-top: 10px !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

body[data-active-view="templateDetail"] .template-video-replace .text-button {
  min-height: 34px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  gap: 7px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 11px !important;
  color: rgba(24, 24, 24, 0.78) !important;
  background: rgba(246, 246, 244, 0.92) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body[data-active-view="templateDetail"] .template-sync-pill,
body[data-active-view="templateDetail"] .template-video-replace > .template-sync-pill {
  min-height: 34px !important;
  min-width: 0 !important;
  padding: 5px 10px !important;
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  border: 1px solid rgba(24, 24, 24, 0.07) !important;
  border-radius: 999px !important;
  color: rgba(24, 24, 24, 0.68) !important;
  background: rgba(246, 246, 244, 0.92) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

body[data-active-view="templateDetail"] .template-sync-pill > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 1px !important;
}

body[data-active-view="templateDetail"] .template-sync-pill b {
  color: rgba(24, 24, 24, 0.84) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

body[data-active-view="templateDetail"] .template-sync-pill em {
  color: rgba(24, 24, 24, 0.48) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 650 !important;
}

body[data-active-view="templateDetail"] .template-sync-pill.is-uploading {
  color: rgba(24, 24, 24, 0.72) !important;
  border-color: rgba(24, 24, 24, 0.12) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

body[data-active-view="templateDetail"] .template-sync-pill.is-uploading svg {
  animation: templateSaveSpin 0.85s linear infinite !important;
}

body[data-active-view="templateDetail"] .template-sync-pill.is-synced {
  color: rgba(31, 122, 76, 0.86) !important;
  border-color: rgba(31, 122, 76, 0.14) !important;
  background: rgba(236, 248, 241, 0.94) !important;
}

body[data-active-view="templateDetail"] .template-sync-pill.is-synced b {
  color: rgba(24, 95, 58, 0.9) !important;
}

body[data-active-view="templateDetail"] .template-sync-pill.is-error {
  color: rgba(189, 54, 49, 0.88) !important;
  border-color: rgba(219, 76, 70, 0.16) !important;
  background: rgba(255, 243, 241, 0.95) !important;
}

body[data-active-view="templateDetail"] .template-sync-pill.is-error b {
  color: rgba(148, 33, 29, 0.95) !important;
}

body[data-theme="dark"] .top-upload-button,
body[data-theme="dark"][data-active-view="templateDetail"] #saveTemplateDraft {
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #0d0d0d !important;
  background: #f5f5f2 !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="templateDetail"] .template-actions .text-button,
body[data-theme="dark"][data-active-view="templateDetail"] .template-video-replace .text-button,
body[data-theme="dark"][data-active-view="templateDetail"] .template-sync-pill {
  color: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

body[data-theme="dark"][data-active-view="templateDetail"] .template-sync-pill b {
  color: rgba(255, 255, 255, 0.88) !important;
}

body[data-theme="dark"][data-active-view="templateDetail"] .template-sync-pill em {
  color: rgba(255, 255, 255, 0.48) !important;
}

body[data-theme="dark"][data-active-view="templateDetail"] .template-actions .text-button.danger,
body[data-theme="dark"][data-active-view="templateDetail"] .template-sync-pill.is-error {
  color: rgba(255, 142, 132, 0.92) !important;
  border-color: rgba(255, 142, 132, 0.18) !important;
  background: rgba(255, 142, 132, 0.08) !important;
}

@media (max-width: 720px) {
  body[data-active-view="templateDetail"] .template-detail-heading .template-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  body[data-active-view="templateDetail"] .template-actions .text-button,
  body[data-active-view="templateDetail"] #saveTemplateDraft {
    flex: 1 1 auto !important;
  }
}

/* v1.8.302 Template detail top actions share the return-button neutral style. */
body[data-active-view="templateDetail"] .template-actions #saveTemplateDraft,
body[data-active-view="templateDetail"] .template-actions #saveTemplateDraft.is-saved,
body[data-active-view="templateDetail"] .template-actions .text-button,
body[data-active-view="templateDetail"] .template-actions .text-button.danger {
  min-height: 38px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  gap: 7px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(24, 24, 24, 0.08) !important;
  border-radius: 12px !important;
  color: rgba(24, 24, 24, 0.72) !important;
  background: rgba(246, 246, 244, 0.9) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body[data-active-view="templateDetail"] .template-actions #saveTemplateDraft:hover,
body[data-active-view="templateDetail"] .template-actions #saveTemplateDraft.is-saved:hover,
body[data-active-view="templateDetail"] .template-actions .text-button:hover,
body[data-active-view="templateDetail"] .template-actions .text-button.danger:hover {
  color: rgba(24, 24, 24, 0.92) !important;
  border-color: rgba(24, 24, 24, 0.14) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: none !important;
}

body[data-active-view="templateDetail"] .template-actions #saveTemplateDraft.is-saving {
  opacity: 0.84 !important;
  cursor: wait !important;
}

body[data-theme="dark"][data-active-view="templateDetail"] .template-actions #saveTemplateDraft,
body[data-theme="dark"][data-active-view="templateDetail"] .template-actions #saveTemplateDraft.is-saved,
body[data-theme="dark"][data-active-view="templateDetail"] .template-actions .text-button,
body[data-theme="dark"][data-active-view="templateDetail"] .template-actions .text-button.danger {
  color: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-active-view="templateDetail"] .template-actions #saveTemplateDraft:hover,
body[data-theme="dark"][data-active-view="templateDetail"] .template-actions #saveTemplateDraft.is-saved:hover,
body[data-theme="dark"][data-active-view="templateDetail"] .template-actions .text-button:hover,
body[data-theme="dark"][data-active-view="templateDetail"] .template-actions .text-button.danger:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}