/* SD Captain canvas addon.  The addon is intentionally namespaced so it can
   coexist with the shipped React/Tailwind application without selector drift. */
:root {
  --sdc-canvas-bg: #f7f5ff;
  --sdc-canvas-panel: #ffffff;
  --sdc-canvas-panel-soft: #fbfaff;
  --sdc-canvas-line: #e8e4fb;
  --sdc-canvas-line-strong: #d7d0f6;
  --sdc-canvas-ink: #222139;
  --sdc-canvas-muted: #74708f;
  --sdc-canvas-brand: #6c4cff;
  --sdc-canvas-brand-deep: #5435e8;
  --sdc-canvas-brand-soft: #f0edff;
  --sdc-canvas-cyan: #0a9cc5;
  --sdc-canvas-green: #1a9b67;
  --sdc-canvas-amber: #d88915;
  --sdc-canvas-red: #d64a63;
  --sdc-canvas-shadow: 0 12px 32px rgba(52, 42, 114, .10);
}

/* Navigation item injected into the target sidebar. */
#sdc-canvas-nav {
  position: relative;
}
#sdc-canvas-nav::after {
  content: "NEW";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 4px;
  padding: 1px 4px;
  color: var(--sdc-canvas-brand);
  background: var(--sdc-canvas-brand-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}

body.sdc-canvas-body {
  overflow: hidden;
  background: var(--sdc-canvas-bg);
}
body.sdc-canvas-body > #root {
  display: none;
}
#sdc-canvas-host {
  position: fixed;
  inset: 0;
  z-index: 20;
}

#sdc-canvas-app,
#sdc-canvas-app * {
  box-sizing: border-box;
}
#sdc-canvas-app {
  --sdc-topbar-h: 64px;
  --sdc-sidebar-w: 226px;
  display: grid;
  grid-template: var(--sdc-topbar-h) minmax(0, 1fr) / var(--sdc-sidebar-w) minmax(0, 1fr);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: var(--sdc-canvas-ink);
  background: var(--sdc-canvas-bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
#sdc-canvas-app button,
#sdc-canvas-app input,
#sdc-canvas-app select,
#sdc-canvas-app textarea {
  font: inherit;
}
#sdc-canvas-app button {
  cursor: pointer;
}
#sdc-canvas-app button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
#sdc-canvas-app a {
  color: inherit;
  text-decoration: none;
}
#sdc-canvas-app :focus-visible {
  outline: 2px solid var(--sdc-canvas-brand);
  outline-offset: 2px;
}

.sdc-canvas-sidebar {
  grid-row: 1 / span 2;
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--sdc-canvas-line);
  background: var(--sdc-canvas-panel);
}
.sdc-canvas-brand {
  display: flex;
  height: var(--sdc-topbar-h);
  align-items: center;
  gap: 10px;
  padding: 0 17px;
  border-bottom: 1px solid var(--sdc-canvas-line);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.sdc-canvas-brand img {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  object-fit: cover;
}
.sdc-canvas-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdc-canvas-side-scroll {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 14px 10px;
}
.sdc-canvas-side-label {
  margin: 12px 10px 7px;
  color: #aaa6c3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.sdc-canvas-side-link {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  border-radius: 9px;
  padding: 0 11px;
  color: #68647e;
  font-size: 12px;
  transition: background .16s ease, color .16s ease;
}
.sdc-canvas-side-link:hover {
  color: var(--sdc-canvas-brand);
  background: var(--sdc-canvas-brand-soft);
}
.sdc-canvas-side-link.is-active {
  color: var(--sdc-canvas-brand);
  background: #eae5ff;
  font-weight: 700;
}
.sdc-canvas-side-link svg {
  width: 17px;
  height: 17px;
  flex: none;
  stroke-width: 1.8;
}
.sdc-canvas-side-foot {
  border-top: 1px solid var(--sdc-canvas-line);
  padding: 11px 15px;
  color: #a39fbd;
  font-size: 10px;
}

.sdc-canvas-topbar {
  grid-column: 2;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--sdc-canvas-line);
  background: rgba(255, 255, 255, .88);
  padding: 0 16px;
  backdrop-filter: blur(14px);
}
.sdc-canvas-topbar-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-right: 6px;
}
.sdc-canvas-topbar-title strong {
  overflow: hidden;
  max-width: 260px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.sdc-canvas-project-name {
  width: 180px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  color: var(--sdc-canvas-ink);
  font-size: 14px;
  font-weight: 650;
  background: transparent;
}
.sdc-canvas-project-name:hover,
.sdc-canvas-project-name:focus {
  border-color: var(--sdc-canvas-line-strong);
  background: var(--sdc-canvas-panel-soft);
  outline: none;
}
.sdc-canvas-topbar-spacer {
  min-width: 12px;
  flex: 1;
}
.sdc-canvas-credit {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--sdc-canvas-line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--sdc-canvas-muted);
  white-space: nowrap;
  font-size: 11px;
}
.sdc-canvas-credit strong {
  color: var(--sdc-canvas-brand);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.sdc-canvas-btn {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--sdc-canvas-line-strong);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--sdc-canvas-muted);
  background: var(--sdc-canvas-panel);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.sdc-canvas-btn:hover {
  border-color: var(--sdc-canvas-brand);
  color: var(--sdc-canvas-brand);
  background: var(--sdc-canvas-brand-soft);
}
.sdc-canvas-btn:active {
  transform: translateY(1px);
}
.sdc-canvas-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke-width: 1.8;
}
.sdc-canvas-btn.is-primary {
  border-color: var(--sdc-canvas-brand);
  color: #fff;
  background: var(--sdc-canvas-brand);
}
.sdc-canvas-btn.is-primary:hover {
  border-color: var(--sdc-canvas-brand-deep);
  color: #fff;
  background: var(--sdc-canvas-brand-deep);
}
.sdc-canvas-btn.is-danger {
  color: var(--sdc-canvas-red);
}
.sdc-canvas-btn.is-icon {
  width: 32px;
  padding: 0;
}
.sdc-canvas-btn.is-quiet {
  border-color: transparent;
  background: transparent;
}

.sdc-canvas-main {
  grid-column: 2;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}
.sdc-canvas-toolbar {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--sdc-canvas-line);
  padding: 7px 12px;
  background: var(--sdc-canvas-panel);
}
.sdc-canvas-toolbar-divider {
  width: 1px;
  height: 23px;
  margin: 0 4px;
  background: var(--sdc-canvas-line);
}
.sdc-canvas-toolbar-hint {
  overflow: hidden;
  margin-left: 5px;
  color: #9691ae;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.sdc-canvas-zoom {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--sdc-canvas-line);
  border-radius: 8px;
  padding: 0 6px;
  color: var(--sdc-canvas-muted);
  background: var(--sdc-canvas-panel-soft);
  font-size: 11px;
}
.sdc-canvas-zoom button {
  display: inline-flex;
  width: 20px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 0;
  color: inherit;
  background: transparent;
}
.sdc-canvas-zoom button:hover {
  color: var(--sdc-canvas-brand);
}
.sdc-canvas-zoom output {
  min-width: 37px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.sdc-canvas-workbench {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 196px minmax(0, 1fr) 286px;
}
.sdc-canvas-palette {
  z-index: 2;
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--sdc-canvas-line);
  background: var(--sdc-canvas-panel);
  padding: 14px 11px;
}
.sdc-canvas-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 5px 10px;
  color: var(--sdc-canvas-ink);
  font-size: 11px;
  font-weight: 700;
}
.sdc-canvas-panel-title small {
  color: #aaa6c3;
  font-size: 9px;
  font-weight: 500;
}
.sdc-canvas-palette-group {
  margin-bottom: 17px;
}
.sdc-canvas-palette-group-label {
  margin: 0 5px 6px;
  color: #aaa6c3;
  font-size: 10px;
}
.sdc-canvas-palette-item {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  margin: 5px 0;
  border: 1px solid var(--sdc-canvas-line);
  border-radius: 9px;
  padding: 7px 8px;
  color: var(--sdc-canvas-ink);
  text-align: left;
  background: var(--sdc-canvas-panel-soft);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.sdc-canvas-palette-item:hover {
  border-color: var(--sdc-canvas-brand);
  background: var(--sdc-canvas-brand-soft);
  transform: translateX(2px);
}
.sdc-canvas-palette-item .sdc-node-icon {
  width: 29px;
  height: 29px;
}
.sdc-node-icon {
  display: inline-flex;
  width: 27px;
  height: 27px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.sdc-node-icon svg {
  width: 15px;
  height: 15px;
}
.node-icon-violet {
  color: #6650e8;
  background: #eeeaff;
}
.node-icon-cyan {
  color: #078eaf;
  background: #e5f8fc;
}
.node-icon-blue {
  color: #3c67d8;
  background: #eaf0ff;
}
.node-icon-amber {
  color: #b26a0a;
  background: #fff3de;
}
.node-icon-green {
  color: #18885d;
  background: #e7f7ef;
}
.sdc-canvas-palette-item strong {
  display: block;
  font-size: 11px;
  font-weight: 650;
}
.sdc-canvas-palette-item span:last-child {
  display: block;
  margin-top: 2px;
  color: var(--sdc-canvas-muted);
  font-size: 9px;
}
.sdc-canvas-shortcuts {
  margin: 9px 4px 0;
  border-top: 1px solid var(--sdc-canvas-line);
  padding-top: 11px;
  color: #9a96b2;
  font-size: 10px;
  line-height: 1.7;
}
.sdc-canvas-shortcuts kbd {
  display: inline-block;
  min-width: 19px;
  border: 1px solid var(--sdc-canvas-line-strong);
  border-radius: 4px;
  padding: 0 3px;
  color: var(--sdc-canvas-muted);
  background: var(--sdc-canvas-panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  line-height: 17px;
  text-align: center;
}

.sdc-canvas-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background-color: #f9f8ff;
  background-image: radial-gradient(circle, #d9d3f2 1px, transparent 1.1px);
  background-position: 0 0;
  background-size: 24px 24px;
  cursor: grab;
  touch-action: none;
}
.sdc-canvas-stage.is-panning {
  cursor: grabbing;
}
.sdc-canvas-stage.is-connecting {
  cursor: crosshair;
}
.sdc-canvas-stage.is-dragover {
  background-color: #f2efff;
  box-shadow: inset 0 0 0 2px rgba(108, 76, 255, .38);
}
.sdc-canvas-stage-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(350px, calc(100% - 40px));
  transform: translate(-50%, -50%);
  border: 1px dashed var(--sdc-canvas-line-strong);
  border-radius: 12px;
  padding: 20px;
  color: var(--sdc-canvas-muted);
  text-align: center;
  pointer-events: none;
}
.sdc-canvas-stage-empty strong {
  display: block;
  margin-bottom: 6px;
  color: var(--sdc-canvas-ink);
  font-size: 13px;
}
.sdc-canvas-stage-empty p {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
}
.sdc-canvas-world {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
}
.sdc-canvas-edges {
  position: absolute;
  top: 0;
  left: 0;
  /* Keep a stable world-sized viewport.  A 1px SVG viewport clips paths
     outside its tiny viewBox in Chromium even when overflow is visible. */
  width: 5000px;
  height: 5000px;
  overflow: visible;
  pointer-events: none;
  transform-origin: 0 0;
}
.sdc-canvas-edges path {
  fill: none;
  stroke: #a69bdf;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.sdc-canvas-edges path.is-active {
  stroke: var(--sdc-canvas-brand);
  stroke-dasharray: 6 5;
  animation: sdc-canvas-dash 1.1s linear infinite;
}
@keyframes sdc-canvas-dash {
  to { stroke-dashoffset: -22; }
}
.sdc-canvas-node {
  position: absolute;
  width: 252px;
  min-height: 126px;
  border: 1px solid var(--sdc-canvas-line-strong);
  border-radius: 11px;
  color: var(--sdc-canvas-ink);
  background: var(--sdc-canvas-panel);
  box-shadow: 0 7px 18px rgba(52, 42, 114, .10);
  user-select: none;
}
.sdc-canvas-node.node-violet { border-top: 2px solid #8b79ee; }
.sdc-canvas-node.node-cyan { border-top: 2px solid #53bfd4; }
.sdc-canvas-node.node-blue { border-top: 2px solid #6d8ee8; }
.sdc-canvas-node.node-amber { border-top: 2px solid #e2a64c; }
.sdc-canvas-node.node-green { border-top: 2px solid #62bd91; }
.sdc-canvas-node:hover {
  box-shadow: 0 9px 23px rgba(52, 42, 114, .15);
}
.sdc-canvas-node.is-selected {
  border-color: var(--sdc-canvas-brand);
  box-shadow: 0 0 0 2px rgba(108, 76, 255, .16), 0 9px 23px rgba(52, 42, 114, .14);
}
.sdc-canvas-node-header {
  display: flex;
  min-height: 39px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--sdc-canvas-line);
  padding: 7px 10px;
  cursor: grab;
}
.sdc-canvas-node-header:active {
  cursor: grabbing;
}
.sdc-canvas-node-title {
  min-width: 0;
  flex: 1;
}
.sdc-canvas-node-title strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}
.sdc-canvas-node-title small {
  display: block;
  margin-top: 1px;
  color: var(--sdc-canvas-muted);
  font-size: 9px;
}
.sdc-canvas-node-actions {
  display: inline-flex;
  gap: 2px;
}
.sdc-canvas-node-actions button {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  color: #9a96b2;
  background: transparent;
}
.sdc-canvas-node-actions button:hover {
  color: var(--sdc-canvas-brand);
  background: var(--sdc-canvas-brand-soft);
}
.sdc-canvas-node-actions svg {
  width: 13px;
  height: 13px;
}
.sdc-canvas-node-body {
  position: relative;
  padding: 9px 12px 11px;
  font-size: 10px;
}
.sdc-canvas-node-body p {
  margin: 0;
  color: var(--sdc-canvas-muted);
  line-height: 1.55;
}
.sdc-canvas-node-body .sdc-node-preview {
  width: 100%;
  height: 88px;
  margin-bottom: 7px;
  overflow: hidden;
  border: 1px solid var(--sdc-canvas-line);
  border-radius: 7px;
  background: #f5f3ff;
}
.sdc-node-preview img,
.sdc-node-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sdc-node-preview audio {
  width: calc(100% - 18px);
  margin: 9px;
}
.sdc-node-audio-preview {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: #b26a0a;
  background: #fffaf1;
}
.sdc-node-audio-preview audio {
  width: calc(100% - 18px);
  height: 26px;
  margin: 0;
}
.sdc-node-placeholder {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #aaa6c3;
  font-size: 10px;
}
.sdc-node-prompt {
  display: -webkit-box;
  max-height: 53px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #5e5a78;
  line-height: 1.55;
  word-break: break-word;
}
.sdc-node-statline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--sdc-canvas-muted);
  font-size: 9px;
}
.sdc-node-statline strong {
  color: var(--sdc-canvas-brand);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}
.sdc-node-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 2px 5px;
  color: var(--sdc-canvas-muted);
  background: #f1effa;
  font-size: 9px;
}
.sdc-node-badge.is-success {
  color: var(--sdc-canvas-green);
  background: #e9f7f0;
}
.sdc-node-badge.is-running {
  color: var(--sdc-canvas-brand);
  background: var(--sdc-canvas-brand-soft);
}
.sdc-canvas-port {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 2px solid var(--sdc-canvas-panel);
  border-radius: 50%;
  background: var(--sdc-canvas-line-strong);
  box-shadow: 0 0 0 1px #aaa0dc;
  transform: translateY(-50%);
  cursor: crosshair;
}
.sdc-canvas-port:hover,
.sdc-canvas-port.is-connectable {
  background: var(--sdc-canvas-brand);
  box-shadow: 0 0 0 3px rgba(108, 76, 255, .16);
}
.sdc-canvas-port.port-in {
  left: -7px;
}
.sdc-canvas-port.port-out {
  right: -7px;
}
.sdc-canvas-port-label {
  position: absolute;
  top: 50%;
  color: #aaa6c3;
  font-size: 8px;
  pointer-events: none;
  transform: translateY(-50%);
}
.port-in + .sdc-canvas-port-label { left: 7px; }
.port-out + .sdc-canvas-port-label { right: 7px; }
.sdc-canvas-node-upload {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--sdc-canvas-line-strong);
  border-radius: 7px;
  color: var(--sdc-canvas-muted);
  background: var(--sdc-canvas-panel-soft);
  font-size: 10px;
  cursor: pointer;
}
.sdc-canvas-node-upload:hover {
  border-color: var(--sdc-canvas-brand);
  color: var(--sdc-canvas-brand);
  background: var(--sdc-canvas-brand-soft);
}
.sdc-canvas-node-upload input { display: none; }

.sdc-canvas-inspector {
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--sdc-canvas-line);
  background: var(--sdc-canvas-panel);
}
.sdc-canvas-inspector-head {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sdc-canvas-line);
  padding: 0 13px;
}
.sdc-canvas-inspector-head strong {
  font-size: 12px;
}
.sdc-canvas-inspector-body {
  padding: 14px 13px 24px;
}
.sdc-canvas-inspector-empty {
  padding: 31px 17px;
  color: #9994b0;
  text-align: center;
  font-size: 11px;
  line-height: 1.7;
}
.sdc-canvas-inspector-empty svg {
  display: block;
  width: 29px;
  height: 29px;
  margin: 0 auto 10px;
  color: #b7b1d2;
}
.sdc-canvas-field {
  margin-bottom: 13px;
}
.sdc-canvas-field > label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: 6px;
  color: #5f5a78;
  font-size: 10px;
  font-weight: 650;
}
.sdc-canvas-field > label small {
  color: #aaa6c3;
  font-size: 9px;
  font-weight: 500;
}
.sdc-canvas-control {
  width: 100%;
  min-height: 33px;
  border: 1px solid var(--sdc-canvas-line);
  border-radius: 7px;
  padding: 7px 8px;
  color: var(--sdc-canvas-ink);
  background: var(--sdc-canvas-panel-soft);
  outline: none;
  font-size: 11px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.sdc-canvas-control:focus {
  border-color: var(--sdc-canvas-brand);
  box-shadow: 0 0 0 3px rgba(108, 76, 255, .12);
}
textarea.sdc-canvas-control {
  min-height: 82px;
  resize: vertical;
  line-height: 1.55;
}
.sdc-canvas-control-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.sdc-canvas-help {
  margin-top: 5px;
  color: #aaa6c3;
  font-size: 9px;
  line-height: 1.55;
}
.sdc-canvas-estimate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 15px 0;
  border: 1px solid #ddd6ff;
  border-radius: 8px;
  padding: 10px;
  color: #6a6490;
  background: #f8f6ff;
  font-size: 10px;
}
.sdc-canvas-estimate strong {
  color: var(--sdc-canvas-brand);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.sdc-canvas-inspector-actions {
  display: flex;
  gap: 7px;
}
.sdc-canvas-inspector-actions .sdc-canvas-btn {
  flex: 1;
}
.sdc-canvas-run-card {
  margin: 0 0 15px;
  border: 1px solid var(--sdc-canvas-line);
  border-radius: 8px;
  padding: 10px;
  background: var(--sdc-canvas-panel-soft);
}
.sdc-canvas-asset-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.sdc-canvas-asset-row {
  display: flex;
  min-width: 0;
  min-height: 37px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--sdc-canvas-line);
  border-radius: 7px;
  padding: 4px 5px;
  background: var(--sdc-canvas-panel-soft);
}
.sdc-canvas-asset-row img {
  width: 29px;
  height: 29px;
  flex: none;
  border-radius: 5px;
  object-fit: cover;
  background: #f0eef9;
}
.sdc-canvas-asset-thumb {
  display: inline-flex;
  width: 29px;
  height: 29px;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 5px;
  color: var(--sdc-canvas-muted);
  background: #f0eef9;
}
.sdc-canvas-asset-row > .sdc-canvas-asset-thumb {
  min-width: 29px;
  flex: 0 0 29px;
  overflow: hidden;
}
.sdc-canvas-asset-thumb img,
.sdc-canvas-asset-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sdc-canvas-asset-thumb audio {
  display: none;
}
.sdc-canvas-asset-audio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b26a0a;
}
.sdc-canvas-asset-meta {
  flex: none !important;
  color: #aaa6c3 !important;
  font-size: 9px !important;
}
.sdc-canvas-asset-row span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--sdc-canvas-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.sdc-canvas-asset-row .sdc-canvas-btn {
  min-height: 25px;
  width: 25px;
}
.sdc-canvas-dialog-backdrop {
  position: fixed;
  z-index: 2147483500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(32, 26, 76, .22);
  backdrop-filter: blur(4px);
}
.sdc-canvas-dialog {
  width: min(460px, 100%);
  max-height: min(620px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid var(--sdc-canvas-line-strong);
  border-radius: 12px;
  background: var(--sdc-canvas-panel);
  box-shadow: 0 22px 60px rgba(45, 35, 103, .22);
}
.sdc-canvas-dialog > header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sdc-canvas-line);
  padding: 0 14px 0 17px;
  color: var(--sdc-canvas-ink);
  font-size: 13px;
}
.sdc-canvas-dialog-body {
  max-height: 510px;
  overflow: auto;
  padding: 10px;
}
.sdc-canvas-project-row {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 9px;
  color: var(--sdc-canvas-ink);
  text-align: left;
  background: transparent;
}
.sdc-canvas-project-row:hover {
  border-color: var(--sdc-canvas-line);
  background: var(--sdc-canvas-brand-soft);
}
.sdc-canvas-project-row > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.sdc-canvas-project-row strong,
.sdc-canvas-project-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdc-canvas-project-row strong { font-size: 11px; }
.sdc-canvas-project-row small {
  margin-top: 3px;
  color: #aaa6c3;
  font-size: 9px;
}
.sdc-canvas-project-row > svg {
  flex: none;
  color: #9992bf;
}
.sdc-canvas-dialog-empty {
  padding: 35px 10px;
  color: var(--sdc-canvas-muted);
  text-align: center;
  font-size: 11px;
}
.sdc-canvas-run-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 650;
}
.sdc-canvas-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: #eae6f8;
}
.sdc-canvas-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sdc-canvas-brand), #8b71ff);
  transition: width .25s ease;
}

.sdc-canvas-toast {
  position: fixed;
  z-index: 2147483600;
  right: 21px;
  bottom: 21px;
  max-width: min(360px, calc(100vw - 42px));
  border: 1px solid var(--sdc-canvas-line-strong);
  border-radius: 8px;
  padding: 10px 13px;
  color: var(--sdc-canvas-ink);
  background: var(--sdc-canvas-panel);
  box-shadow: var(--sdc-canvas-shadow);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(7px);
  transition: opacity .18s ease, transform .18s ease;
}
.sdc-canvas-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sdc-canvas-toast.is-error {
  border-color: #f1b8c3;
  color: var(--sdc-canvas-red);
}

.sdc-canvas-overlay-control {
  position: absolute;
  z-index: 7;
  border: 1px solid rgba(220, 216, 240, .95);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 28px rgba(47, 39, 105, .12);
  backdrop-filter: blur(14px);
}
.sdc-canvas-composer {
  top: 18px;
  left: 50%;
  width: min(680px, calc(100% - 44px));
  overflow: hidden;
  border-radius: 14px;
  transform: translateX(-50%);
}
.sdc-canvas-composer > header {
  display: flex;
  min-height: 39px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--sdc-canvas-line);
  padding: 0 12px;
  color: var(--sdc-canvas-ink);
}
.sdc-canvas-composer > header strong { font-size: 11px; }
.sdc-canvas-composer > header > span:nth-of-type(2) {
  margin-left: auto;
  color: #9892ae;
  font-size: 9px;
}
.sdc-canvas-composer > header button {
  display: inline-flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  color: #9690aa;
  background: transparent;
}
.sdc-canvas-composer > header button:hover { color: var(--sdc-canvas-brand); background: var(--sdc-canvas-brand-soft); }
.sdc-canvas-composer-body { padding: 10px; }
.sdc-canvas-composer textarea {
  display: block;
  width: 100%;
  min-height: 65px;
  max-height: 150px;
  resize: vertical;
  border: 0;
  outline: none;
  padding: 2px 3px 7px;
  color: var(--sdc-canvas-ink);
  background: transparent;
  font-size: 12px;
  line-height: 1.6;
}
.sdc-canvas-composer textarea::placeholder { color: #aaa6b9; }
.sdc-canvas-composer-actions { display: flex; min-width: 0; align-items: center; gap: 6px; }
.sdc-canvas-composer-tool,
.sdc-canvas-mode,
.sdc-canvas-composer-submit {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 8px;
  color: #77718e;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.sdc-canvas-composer-tool { width: 29px; padding: 0; border-color: var(--sdc-canvas-line); background: var(--sdc-canvas-panel-soft); cursor: pointer; }
.sdc-canvas-composer-tool input { display: none; }
.sdc-canvas-mode:hover,
.sdc-canvas-mode.is-active { color: var(--sdc-canvas-brand); border-color: #dcd5ff; background: var(--sdc-canvas-brand-soft); }
.sdc-canvas-composer-submit { min-width: 68px; margin-left: auto; color: #fff; border-color: var(--sdc-canvas-brand); background: var(--sdc-canvas-brand); }
.sdc-canvas-composer-submit:hover { background: var(--sdc-canvas-brand-deep); }
.sdc-canvas-composer.is-collapsed .sdc-canvas-composer-body { display: none; }
.sdc-canvas-composer.is-collapsed { width: 230px; }
.sdc-canvas-composer.is-collapsed > header > span:nth-of-type(2) { display: none; }

.sdc-canvas-quick-start {
  top: 172px;
  left: 50%;
  width: min(680px, calc(100% - 44px));
  padding: 10px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -5px);
  transition: opacity .18s ease, transform .18s ease;
}
.sdc-canvas-quick-start.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.sdc-canvas-quick-head { display: flex; align-items: baseline; gap: 8px; margin: 1px 3px 8px; }
.sdc-canvas-quick-head strong { color: var(--sdc-canvas-ink); font-size: 11px; }
.sdc-canvas-quick-head span { color: #aaa6b9; font-size: 9px; }
.sdc-canvas-template-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.sdc-canvas-template {
  display: flex;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--sdc-canvas-line);
  border-radius: 8px;
  padding: 6px 7px;
  color: var(--sdc-canvas-ink);
  text-align: left;
  background: var(--sdc-canvas-panel-soft);
}
.sdc-canvas-template:hover { border-color: var(--sdc-canvas-brand); background: var(--sdc-canvas-brand-soft); }
.sdc-canvas-template > span:nth-child(2) { min-width: 0; flex: 1; }
.sdc-canvas-template strong, .sdc-canvas-template small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdc-canvas-template strong { font-size: 10px; }
.sdc-canvas-template small { margin-top: 3px; color: #a09ab4; font-size: 9px; }
.sdc-canvas-template > svg { flex: none; color: #a29bbd; }

.sdc-canvas-palette-search {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  margin: 0 2px 12px;
  border: 1px solid var(--sdc-canvas-line);
  border-radius: 7px;
  padding: 0 8px;
  color: #aaa6bd;
  background: var(--sdc-canvas-panel-soft);
}
.sdc-canvas-palette-search:focus-within { border-color: var(--sdc-canvas-brand); color: var(--sdc-canvas-brand); }
.sdc-canvas-palette-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--sdc-canvas-ink); background: transparent; font-size: 10px; }
.sdc-canvas-palette-search input::placeholder { color: #aaa6bd; }

.sdc-canvas-minimap {
  right: 16px;
  bottom: 16px;
  width: 170px;
  overflow: hidden;
  border-radius: 9px;
}
.sdc-canvas-minimap > header { display: flex; height: 27px; align-items: center; gap: 5px; border-bottom: 1px solid var(--sdc-canvas-line); padding: 0 8px; color: #817b97; font-size: 9px; font-weight: 650; }
.sdc-canvas-minimap-map { position: relative; height: 100px; overflow: hidden; background: #f8f7fc; cursor: crosshair; }
.sdc-canvas-minimap-node { position: absolute; display: block; min-width: 3px; min-height: 3px; border: 1px solid #b7b0d7; border-radius: 2px; opacity: .8; }
.sdc-canvas-minimap-node.node-violet { background: #c8c0fa; }
.sdc-canvas-minimap-node.node-cyan { background: #a5e2ec; }
.sdc-canvas-minimap-node.node-blue { background: #b1c2f4; }
.sdc-canvas-minimap-node.node-amber { background: #f5d395; }
.sdc-canvas-minimap-node.node-green { background: #b6e6cb; }
.sdc-canvas-minimap-node.is-selected { border-color: var(--sdc-canvas-brand); box-shadow: 0 0 0 1px var(--sdc-canvas-brand); }
.sdc-canvas-minimap-viewport { position: absolute; border: 1px solid var(--sdc-canvas-brand); border-radius: 2px; background: rgba(108, 76, 255, .08); pointer-events: none; }
.sdc-canvas-minimap-empty { display: grid; height: 100%; place-items: center; color: #aaa6bd; font-size: 9px; }

.sdc-canvas-selection-toolbar {
  position: absolute;
  z-index: 12;
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 3px;
  border: 1px solid #d9d2f7;
  border-radius: 8px;
  padding: 3px 4px 3px 8px;
  color: #706a89;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 20px rgba(49, 40, 109, .14);
  transform: translateY(-100%);
}
.sdc-canvas-selection-toolbar > span { margin-right: 4px; font-size: 9px; font-weight: 650; white-space: nowrap; }
.sdc-canvas-selection-toolbar button { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border: 0; border-radius: 5px; color: #8b85a2; background: transparent; }
.sdc-canvas-selection-toolbar button:hover { color: var(--sdc-canvas-brand); background: var(--sdc-canvas-brand-soft); }
.sdc-canvas-selection-toolbar button.is-danger:hover { color: var(--sdc-canvas-red); background: #fff0f3; }
.sdc-canvas-batch-summary { margin-bottom: 14px; }
.sdc-canvas-batch-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sdc-canvas-batch-actions .sdc-canvas-btn:last-child { grid-column: 1 / -1; }
.sdc-canvas-run-row { display: flex; width: 100%; min-height: 55px; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 7px 8px; color: var(--sdc-canvas-ink); text-align: left; background: transparent; }
.sdc-canvas-run-row:hover { border-color: var(--sdc-canvas-line); background: var(--sdc-canvas-brand-soft); }
.sdc-canvas-run-row > span:nth-child(2) { min-width: 0; flex: 1; }
.sdc-canvas-run-row strong, .sdc-canvas-run-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdc-canvas-run-row strong { font-size: 10px; }
.sdc-canvas-run-row small { margin-top: 3px; color: #aaa6bd; font-size: 9px; }
.sdc-canvas-run-row > svg { flex: none; color: #aaa2be; }
.sdc-canvas-run-row-icon { display: inline-flex; width: 27px; height: 27px; align-items: center; justify-content: center; border-radius: 7px; color: #77709c; background: #f0edff; }
.sdc-canvas-run-row-icon.is-success { color: var(--sdc-canvas-green); background: #e8f7ef; }
.sdc-canvas-run-row-icon.is-error { color: var(--sdc-canvas-red); background: #fff0f3; }

.sdc-canvas-mobile-toggle {
  display: none;
}

.sdc-canvas-mobile-backdrop {
  display: none;
}

@media (max-width: 1180px) {
  #sdc-canvas-app { --sdc-sidebar-w: 206px; }
  .sdc-canvas-workbench { grid-template-columns: 170px minmax(0, 1fr) 260px; }
  .sdc-canvas-toolbar-hint { display: none; }
  .sdc-canvas-project-name { width: 145px; }
}
@media (max-width: 900px) {
  #sdc-canvas-app {
    --sdc-sidebar-w: 0px;
    grid-template-columns: 0 minmax(0, 1fr);
  }
  .sdc-canvas-sidebar {
    position: fixed;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: 0;
    width: 228px;
    box-shadow: 12px 0 30px rgba(42, 33, 91, .16);
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sdc-canvas-topbar { position: relative; z-index: 30; }
  .sdc-canvas-sidebar.is-open { transform: translateX(0); }
  .sdc-canvas-mobile-backdrop {
    position: fixed;
    z-index: 19;
    inset: 0;
    display: block;
    background: rgba(28, 22, 70, .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .sdc-canvas-mobile-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .sdc-canvas-mobile-toggle { display: inline-flex; }
  .sdc-canvas-workbench { grid-template-columns: 178px minmax(0, 1fr) 252px; }
}
@media (max-width: 700px) {
  #sdc-canvas-app { --sdc-topbar-h: 56px; }
  .sdc-canvas-topbar { gap: 6px; padding: 0 9px; }
  .sdc-canvas-topbar-title strong { display: none; }
  .sdc-canvas-topbar-title { min-width: 0; flex: 1 1 auto; margin-right: 0; }
  .sdc-canvas-project-name { width: 100%; min-width: 0; max-width: 132px; }
  .sdc-canvas-topbar-spacer { display: none; }
  .sdc-canvas-topbar .sdc-canvas-btn {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    flex: 0 0 36px;
    padding: 0;
  }
  .sdc-canvas-topbar .sdc-canvas-btn span { display: none; }
  .sdc-canvas-credit { display: none; }
  .sdc-canvas-toolbar { min-height: 44px; overflow-x: auto; padding: 6px 8px; }
  .sdc-canvas-toolbar > * { flex: 0 0 auto; }
  .sdc-canvas-toolbar .sdc-canvas-btn:not(.is-icon) span { display: none; }
  .sdc-canvas-toolbar .sdc-canvas-btn { flex: 0 0 32px; }
  .sdc-canvas-toolbar .sdc-canvas-btn:not(.is-icon) { width: 32px; padding: 0; }
  .sdc-canvas-workbench { position: relative; display: block; }
  .sdc-canvas-palette {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    width: 185px;
    box-shadow: 8px 0 20px rgba(42, 33, 91, .10);
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sdc-canvas-palette.is-open { transform: translateX(0); }
  .sdc-canvas-stage { width: 100%; height: 100%; }
  .sdc-canvas-inspector {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(292px, 92vw);
    box-shadow: -8px 0 20px rgba(42, 33, 91, .10);
    transform: translateX(100%);
    transition: transform .2s ease;
  }
  .sdc-canvas-inspector.is-open { transform: translateX(0); }
  .sdc-canvas-composer { top: 10px; width: calc(100% - 20px); }
  .sdc-canvas-composer-actions { overflow-x: auto; padding-bottom: 1px; }
  .sdc-canvas-composer-actions > * { flex: 0 0 auto; }
  .sdc-canvas-composer-submit { margin-left: 0; }
  .sdc-canvas-quick-start { top: 163px; width: calc(100% - 20px); }
  .sdc-canvas-template-track { grid-template-columns: 1fr 1fr; max-height: 210px; overflow: auto; }
  .sdc-canvas-minimap { right: 10px; bottom: 10px; width: 142px; }
  .sdc-canvas-minimap-map { height: 80px; }
  .sdc-canvas-selection-toolbar { max-width: calc(100vw - 32px); overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #sdc-canvas-app *,
  #sdc-canvas-app *::before,
  #sdc-canvas-app *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}