:root {
  --director-lime: #c8ff00;
  --director-cyan: #15e6ff;
  --director-pink: #ff39bc;
  --director-ink: #050607;
  --director-panel: rgba(7, 10, 11, 0.9);
  --director-line: rgba(255, 255, 255, 0.16);
}

.director-body [hidden] {
  display: none !important;
}

.director-body {
  min-width: 0;
  overflow-x: hidden;
  background: #030506;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
  overscroll-behavior: none;
}

.director-page {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  background: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

.director-canvas-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(200, 255, 0, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 230, 255, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, #020405 0%, #06090b 52%, #020405 100%);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, auto;
}

.director-canvas-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 49.94%, rgba(200, 255, 0, 0.16) 50%, transparent 50.06% 100%),
    linear-gradient(180deg, transparent 0 49.94%, rgba(21, 230, 255, 0.12) 50%, transparent 50.06% 100%);
  opacity: 0.2;
}

.director-page > * {
  position: relative;
  z-index: 1;
}

.director-page > .director-canvas-backdrop,
.director-page > .director-page-ink-canvas {
  position: fixed;
}

.director-page-ink-canvas {
  inset: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  touch-action: none;
}

.director-page-ink-canvas.is-active {
  z-index: 900;
  pointer-events: auto;
  cursor: crosshair;
}

.director-page-ink-canvas.is-eraser {
  cursor: cell;
}

.director-page-ink-canvas.is-select {
  cursor: crosshair;
}

.director-ink-text-editor {
  position: fixed;
  z-index: 960;
  display: grid;
  grid-template-rows: 30px 1fr;
  width: 230px;
  height: 82px;
  min-width: 150px;
  min-height: 64px;
  color: var(--ink-text-color, #c8ff00);
  font: 900 20px/1.35 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid currentColor;
  border-radius: 6px;
  outline: 2px solid rgba(0, 0, 0, 0.52);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  caret-color: currentColor;
}

.director-ink-text-handle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 9px;
  color: #050607;
  background: currentColor;
  cursor: move;
}

.director-ink-text-handle span {
  flex: 1;
  color: #050607;
  font-size: 12px;
  font-weight: 950;
}

.director-ink-text-handle button {
  display: inline-grid;
  width: 22px;
  height: 22px;
  padding: 0;
  place-items: center;
  color: #050607;
  font-weight: 950;
  background: rgba(255, 255, 255, 0.78);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.director-ink-text-editor textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 8px 10px;
  color: currentColor;
  font: 900 20px/1.35 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
}

.director-ink-text-resize {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  cursor: nwse-resize;
  opacity: 0.88;
}

.director-canvas-world {
  position: fixed;
  left: var(--canvas-x, 0px);
  top: var(--canvas-y, 0px);
  width: 100vw;
  height: 100vh;
  z-index: 120;
  transform: scale(var(--canvas-scale, 1));
  transform-origin: 0 0;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.director-canvas-world .director-floating-window,
.director-canvas-world .director-media-node {
  position: absolute;
  pointer-events: auto;
  transform-origin: 0 0;
  touch-action: none;
}

body.director-canvas-presentation,
body.director-canvas-presentation .director-page {
  overflow: hidden;
  background: #030506;
}

body.director-canvas-presentation .director-page > :not(.director-canvas-backdrop):not(.director-page-ink-canvas):not(.director-canvas-world):not(.director-ink-controls),
body.director-canvas-presentation .director-canvas-context-menu,
body.director-canvas-presentation .director-agent-context-menu,
body.director-canvas-presentation .director-image-context-menu,
body.director-canvas-presentation .director-media-context-menu,
body.director-canvas-presentation .director-workspace-notice,
body.director-canvas-presentation .director-fullscreen-overlay,
body.director-canvas-presentation dialog {
  display: none !important;
}

body.director-canvas-presentation .director-canvas-backdrop {
  background-color: #030506;
}

body.director-canvas-presentation .director-canvas-world {
  z-index: 120;
}

body.director-canvas-presentation .director-page-ink-canvas {
  z-index: 121;
  pointer-events: none;
}

body.director-canvas-presentation .director-page-ink-canvas.is-active {
  pointer-events: auto;
  cursor: crosshair;
}

body.director-canvas-presentation .director-ink-controls,
body.director-canvas-presentation .director-ink-context-menu,
body.director-canvas-presentation .director-color-palette {
  z-index: 1300;
}

body.director-canvas-presentation .director-floating-window.is-window-selected,
body.director-canvas-presentation .director-media-node.is-window-selected {
  outline: 0;
}

.director-page input,
.director-page textarea,
.director-page select,
.director-page option,
.director-page [contenteditable="true"] {
  touch-action: manipulation;
  user-select: text;
  -webkit-user-select: text;
}

.director-ink-controls {
  position: fixed;
  left: 28px;
  bottom: 28px;
  z-index: 940;
  display: flex;
  align-items: center;
  gap: 10px;
}

.director-ink-mode-toggle,
.director-ink-tool {
  min-height: 42px;
  color: rgba(255, 255, 255, 0.84);
  font-weight: 950;
  background: rgba(5, 8, 9, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
  cursor: pointer;
}

.director-ink-mode-toggle {
  min-width: 74px;
  padding: 0 16px;
  border-radius: 999px;
}

.director-ink-tool-group {
  display: flex;
  gap: 7px;
  padding: 5px;
  background: rgba(5, 8, 9, 0.82);
  border: 1px solid rgba(200, 255, 0, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(14px);
}

.director-ink-tool-group[hidden] {
  display: none !important;
}

.director-ink-utility-group {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 940;
}

.director-ink-tool {
  position: relative;
  display: inline-grid;
  width: 42px;
  min-width: 42px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  line-height: 1;
  transition:
    color 0.14s ease,
    background-color 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.14s ease;
}

.director-ink-tool-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.96;
  pointer-events: none;
}

.director-ink-tool::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: max-content;
  max-width: 160px;
  padding: 6px 9px;
  color: #050607;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  background: var(--director-lime);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.48);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.director-ink-tool::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: var(--director-lime);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.12s ease;
}

.director-ink-tool:hover::after,
.director-ink-tool:focus-visible::after,
.director-ink-tool:hover::before,
.director-ink-tool:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.director-ink-tool:hover::before,
.director-ink-tool:focus-visible::before {
  transform: translateX(-50%);
}

.director-ink-mode-toggle[aria-pressed="true"],
.director-ink-tool.is-active,
.director-layer-tool[aria-expanded="true"] {
  color: #050607;
  background: var(--director-lime);
  border-color: var(--director-lime);
  box-shadow:
    0 15px 34px rgba(0, 0, 0, 0.44),
    0 0 0 3px rgba(200, 255, 0, 0.16);
}

.director-ink-tool:hover,
.director-ink-tool:focus-visible {
  color: #f7fff2;
  border-color: rgba(200, 255, 0, 0.46);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.director-ink-tool.is-active:hover,
.director-ink-tool.is-active:focus-visible,
.director-layer-tool[aria-expanded="true"]:hover,
.director-layer-tool[aria-expanded="true"]:focus-visible {
  color: #050607;
  background: var(--director-lime);
}

.director-layer-panel {
  position: fixed;
  top: 84px;
  right: 18px;
  bottom: 24px;
  z-index: 1260;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(360px, calc(100vw - 28px));
  color: #fff;
  font: 900 14px/1.35 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(5, 8, 9, 0.94);
  border: 1px solid rgba(200, 255, 0, 0.34);
  border-radius: 8px;
  box-shadow:
    0 24px 78px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.director-layer-panel.is-resizing {
  user-select: none;
  -webkit-user-select: none;
}

.director-layer-resize-handle {
  position: absolute;
  z-index: 8;
  pointer-events: auto;
  touch-action: none;
}

.director-layer-resize-handle.is-n,
.director-layer-resize-handle.is-s {
  left: 14px;
  right: 14px;
  height: 12px;
  cursor: ns-resize;
}

.director-layer-resize-handle.is-n {
  top: -4px;
}

.director-layer-resize-handle.is-s {
  bottom: -4px;
}

.director-layer-resize-handle.is-e,
.director-layer-resize-handle.is-w {
  top: 14px;
  bottom: 14px;
  width: 12px;
  cursor: ew-resize;
}

.director-layer-resize-handle.is-e {
  right: -4px;
}

.director-layer-resize-handle.is-w {
  left: -4px;
}

.director-layer-resize-handle.is-ne,
.director-layer-resize-handle.is-nw,
.director-layer-resize-handle.is-se,
.director-layer-resize-handle.is-sw {
  width: 20px;
  height: 20px;
}

.director-layer-resize-handle.is-ne,
.director-layer-resize-handle.is-sw {
  cursor: nesw-resize;
}

.director-layer-resize-handle.is-nw,
.director-layer-resize-handle.is-se {
  cursor: nwse-resize;
}

.director-layer-resize-handle.is-ne {
  top: -5px;
  right: -5px;
}

.director-layer-resize-handle.is-nw {
  top: -5px;
  left: -5px;
}

.director-layer-resize-handle.is-se {
  right: -5px;
  bottom: -5px;
}

.director-layer-resize-handle.is-sw {
  left: -5px;
  bottom: -5px;
}

.director-layer-tool-icon,
.director-layer-tool-icon::before,
.director-layer-tool-icon::after {
  position: absolute;
  width: 18px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 4px;
  content: "";
}

.director-layer-tool-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
  pointer-events: none;
}

.director-layer-tool-icon::before {
  left: -5px;
  top: -5px;
  opacity: 0.72;
}

.director-layer-tool-icon::after {
  right: -5px;
  bottom: -5px;
  opacity: 0.5;
}

.director-layer-panel[hidden] {
  display: none !important;
}

.director-layer-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
}

.director-layer-panel-head strong {
  display: block;
  font-size: 20px;
  line-height: 1.1;
}

.director-layer-panel-head small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.director-layer-icon-btn,
.director-layer-toolbar button,
.director-layer-row button,
.director-layer-group-row button {
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
}

.director-layer-icon-btn {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}

.director-layer-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.director-layer-toolbar button {
  min-height: 32px;
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
}

.director-layer-icon-btn:hover,
.director-layer-toolbar button:hover,
.director-layer-row button:hover,
.director-layer-group-row button:hover,
.director-layer-icon-btn:focus-visible,
.director-layer-toolbar button:focus-visible,
.director-layer-row button:focus-visible,
.director-layer-group-row button:focus-visible {
  color: #050607;
  background: var(--director-lime);
  border-color: var(--director-lime);
  outline: none;
}

.director-layer-list {
  min-height: 0;
  padding: 8px;
  overflow: auto;
  scrollbar-color: rgba(200, 255, 0, 0.46) rgba(255, 255, 255, 0.08);
}

.director-layer-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  color: rgba(255, 255, 255, 0.56);
  text-align: center;
}

.director-layer-row,
.director-layer-group-row {
  display: grid;
  grid-template-columns: 30px 30px 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 42px;
  margin-bottom: 6px;
  padding: 6px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 7px;
  cursor: pointer;
}

.director-layer-row {
  position: relative;
}

.director-layer-row.is-in-group {
  margin-left: 16px;
  grid-template-columns: 28px 28px 28px minmax(0, 1fr);
}

.director-layer-row.is-in-group::before {
  content: "";
  position: absolute;
  left: -9px;
  top: -7px;
  bottom: -7px;
  width: 1px;
  background: rgba(200, 255, 0, 0.22);
}

.director-layer-group-row {
  grid-template-columns: 30px 30px 30px 30px minmax(0, 1fr);
  color: rgba(255, 255, 255, 0.92);
  background: rgba(21, 230, 255, 0.09);
  border-color: rgba(21, 230, 255, 0.24);
}

.director-layer-row.is-selected,
.director-layer-group-row.is-selected {
  color: #fff;
  background: rgba(200, 255, 0, 0.13);
  border-color: rgba(200, 255, 0, 0.68);
  box-shadow:
    0 0 0 1px rgba(200, 255, 0, 0.16),
    0 10px 30px rgba(0, 0, 0, 0.28);
}

.director-layer-row.is-hidden,
.director-layer-group-row.is-hidden {
  opacity: 0.48;
}

.director-layer-row.is-locked,
.director-layer-group-row.is-locked {
  border-style: dashed;
}

.director-layer-row.is-drag-over,
.director-layer-group-row.is-drag-over {
  border-color: var(--director-cyan);
  box-shadow: inset 0 0 0 1px rgba(21, 230, 255, 0.45);
}

.director-layer-row button,
.director-layer-group-row button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  font-size: 14px;
  line-height: 1;
}

.director-layer-row.is-in-group button {
  width: 28px;
  height: 28px;
}

.director-layer-name,
.director-layer-group-name {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-layer-meta {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-floating-window.is-layer-hidden,
.director-media-node.is-layer-hidden,
.director-page-ink-canvas.is-layer-hidden {
  visibility: hidden !important;
  pointer-events: none !important;
}

.director-floating-window.is-layer-locked,
.director-media-node.is-layer-locked {
  outline: 1px dashed rgba(255, 255, 255, 0.34);
  outline-offset: 2px;
}

.director-floating-window.is-layer-locked .director-floating-resize-handle,
.director-media-node.is-layer-locked .director-floating-resize-handle {
  pointer-events: none;
}

.director-floating-window,
.director-media-node {
  position: fixed;
  z-index: 180;
  color: #fff;
  font: 900 16px/1.55 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
  border: 1px solid rgba(190, 255, 0, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(7, 10, 11, 0.98);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.director-floating-window {
  resize: both;
  overflow: hidden;
}

.director-image-studio,
.director-script-agent {
  resize: none;
}

.director-floating-window.is-floating-resizing {
  user-select: none;
  -webkit-user-select: none;
}

.director-floating-resize-handle {
  position: absolute;
  z-index: 12;
  display: block;
  pointer-events: auto;
  touch-action: none;
}

.director-floating-resize-handle::after {
  position: absolute;
  content: "";
  background: rgba(200, 255, 0, 0.72);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.director-floating-resize-handle:hover::after,
.director-floating-window.is-floating-resizing .director-floating-resize-handle::after {
  opacity: 1;
}

.director-floating-resize-handle.is-n,
.director-floating-resize-handle.is-s {
  left: 16px;
  right: 16px;
  height: 12px;
  cursor: ns-resize;
}

.director-floating-resize-handle.is-n {
  top: -6px;
}

.director-floating-resize-handle.is-s {
  bottom: -6px;
}

.director-floating-resize-handle.is-n::after,
.director-floating-resize-handle.is-s::after {
  left: 0;
  right: 0;
  height: 2px;
}

.director-floating-resize-handle.is-n::after {
  top: 5px;
}

.director-floating-resize-handle.is-s::after {
  bottom: 5px;
}

.director-floating-resize-handle.is-e,
.director-floating-resize-handle.is-w {
  top: 16px;
  bottom: 16px;
  width: 12px;
  cursor: ew-resize;
}

.director-floating-resize-handle.is-e {
  right: -6px;
}

.director-floating-resize-handle.is-w {
  left: -6px;
}

.director-floating-resize-handle.is-e::after,
.director-floating-resize-handle.is-w::after {
  top: 0;
  bottom: 0;
  width: 2px;
}

.director-floating-resize-handle.is-e::after {
  right: 5px;
}

.director-floating-resize-handle.is-w::after {
  left: 5px;
}

.director-floating-resize-handle.is-ne,
.director-floating-resize-handle.is-nw,
.director-floating-resize-handle.is-se,
.director-floating-resize-handle.is-sw {
  width: 22px;
  height: 22px;
}

.director-floating-resize-handle.is-ne,
.director-floating-resize-handle.is-sw {
  cursor: nesw-resize;
}

.director-floating-resize-handle.is-nw,
.director-floating-resize-handle.is-se {
  cursor: nwse-resize;
}

.director-floating-resize-handle.is-ne {
  top: -8px;
  right: -8px;
}

.director-floating-resize-handle.is-nw {
  top: -8px;
  left: -8px;
}

.director-floating-resize-handle.is-se {
  right: -8px;
  bottom: -8px;
}

.director-floating-resize-handle.is-sw {
  left: -8px;
  bottom: -8px;
}

.director-floating-resize-handle.is-ne::after,
.director-floating-resize-handle.is-nw::after,
.director-floating-resize-handle.is-se::after,
.director-floating-resize-handle.is-sw::after {
  inset: 7px;
  border: 2px solid rgba(200, 255, 0, 0.72);
  background: transparent;
  border-radius: 5px;
}

.director-floating-window.is-window-selected,
.director-media-node.is-window-selected {
  outline: 2px solid rgba(200, 255, 0, 0.92);
  outline-offset: 4px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(200, 255, 0, 0.42),
    0 0 36px rgba(200, 255, 0, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

.director-window-select-marquee {
  position: fixed;
  z-index: 1400;
  pointer-events: none;
  background: rgba(200, 255, 0, 0.08);
  border: 1px solid rgba(200, 255, 0, 0.86);
  box-shadow:
    0 0 24px rgba(200, 255, 0, 0.18),
    inset 0 0 20px rgba(21, 230, 255, 0.08);
}

.workflow-preview-head,
.director-media-head,
.director-video-head,
.director-media-node-head,
.director-color-palette-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  cursor: grab;
  touch-action: none;
}

.workflow-preview-head:active,
.director-media-head:active,
.director-video-head:active,
.director-media-node-head:active,
.director-color-palette-head:active {
  cursor: grabbing;
}

.workflow-preview-head strong,
.director-media-head strong,
.director-video-head strong,
.director-media-node-head strong,
.director-color-palette-head strong {
  display: block;
  color: #fff;
  font-size: 21px;
  line-height: 1.1;
}

.workflow-preview-head small,
.director-video-head span,
.director-media-status,
.director-media-node-head span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  font-weight: 800;
}

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

.director-window-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.director-window-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.director-window-controls button {
  display: inline-grid;
  width: 32px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  font: 950 18px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  cursor: pointer;
}

.director-window-controls button:hover {
  color: #050607;
  background: var(--director-lime);
  border-color: var(--director-lime);
}

.director-window-controls .director-window-close-btn:hover {
  color: #fff;
  background: #e43d4f;
  border-color: #e43d4f;
}

.workflow-preview-actions button,
.director-media-head > button,
.director-video-head > button,
.director-color-palette-head button,
.director-media-node-head > button,
.director-dialog-actions button,
.dialog-head button {
  min-height: 34px;
  padding: 0 13px;
  color: #050607;
  font-size: 14px;
  font-weight: 950;
  background: var(--director-lime);
  border: 1px solid var(--director-lime);
  border-radius: 6px;
  cursor: pointer;
}

.director-script-generate-btn {
  position: relative;
  overflow: hidden;
}

.director-script-generate-btn.is-loading {
  color: #071008;
  cursor: wait;
  background:
    linear-gradient(90deg, var(--director-lime), #eaff61, var(--director-lime));
  background-size: 220% 100%;
  animation: directorScriptButtonPulse 1.05s linear infinite;
}

.director-script-generate-btn.is-loading::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.55) 45%, transparent 62% 100%);
  transform: translateX(-120%);
  animation: directorScriptButtonSweep 1.2s ease-in-out infinite;
}

.director-media-head .director-window-controls button,
.director-media-node-head .director-window-controls button {
  display: inline-grid;
  width: 32px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  font: 950 18px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
}

.director-media-head .director-window-controls button:hover,
.director-media-node-head .director-window-controls button:hover {
  color: #050607;
  background: var(--director-lime);
  border-color: var(--director-lime);
}

.director-media-head .director-window-controls .director-window-close-btn:hover,
.director-media-node-head .director-window-controls .director-window-close-btn:hover {
  color: #fff;
  background: #e43d4f;
  border-color: #e43d4f;
}

.director-frame-generator,
.director-media-body,
.director-video-body,
.director-script-agent-body {
  padding: 16px;
}

.director-script-agent-body {
  display: grid;
  grid-template-rows: auto auto minmax(180px, 1fr) auto;
  min-height: 0;
  height: 100%;
  overflow: auto;
}

.director-field {
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 14px;
  font-weight: 900;
}

.director-field-label {
  display: block;
}

.director-field-wide {
  grid-column: 1 / -1;
}

.director-field textarea,
.director-field select,
.director-field input {
  width: 100%;
  min-height: 42px;
  color: #fff;
  font: inherit;
  font-size: 17px;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  outline: none;
}

.director-field textarea {
  min-height: 190px;
  padding: 14px;
  resize: vertical;
  line-height: 1.6;
}

.director-field select,
.director-field input {
  padding: 0 12px;
}

.director-frame-settings,
.director-media-settings,
.director-video-settings {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

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

.director-video-settings {
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
}

.director-video-studio {
  min-width: min(560px, calc(100vw - 32px));
  min-height: 520px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.director-video-studio[hidden] {
  display: none !important;
}

.director-video-body {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, auto);
  gap: 14px;
  min-height: 0;
  overflow: auto;
}

.director-video-body .director-field textarea {
  min-height: 150px;
  max-height: 240px;
}

.director-video-bottom-grid {
  display: grid;
  grid-template-columns: minmax(270px, 0.9fr) minmax(292px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.director-video-reference-panel,
.director-video-control-panel {
  min-width: 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
}

.director-video-reference-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
}

.director-video-reference-copy strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 950;
}

.director-video-reference-copy small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 850;
}

.director-video-quota {
  margin-top: 10px;
  color: rgba(220, 255, 185, 0.88);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
}

.director-video-quota.is-exhausted {
  color: #ffb4a8;
}

.director-script-library-panel {
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(200, 255, 0, 0.2);
  border-radius: 8px;
}

.director-script-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.92);
}

.director-script-library-head strong {
  font-size: 15px;
  font-weight: 950;
}

.director-script-library-stat {
  color: rgba(200, 255, 0, 0.76);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

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

.director-script-generate-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.director-script-main-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.director-script-main-actions .director-script-generate-btn {
  min-width: 190px;
  min-height: 54px;
  padding: 0 30px;
  color: #050607;
  font-size: 18px;
  font-weight: 950;
  background:
    linear-gradient(135deg, #f0ff9b 0%, var(--director-lime) 48%, #76f8ff 118%);
  border: 1px solid rgba(244, 255, 178, 0.98);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(244, 255, 178, 0.26),
    0 14px 30px rgba(200, 255, 0, 0.24),
    inset 0 -10px 24px rgba(7, 26, 9, 0.16);
  cursor: pointer;
}

.director-script-main-actions .director-script-generate-btn:hover {
  background:
    linear-gradient(135deg, #fbffd8 0%, #d8ff28 52%, #92fbff 118%);
  box-shadow:
    0 0 0 1px rgba(244, 255, 178, 0.34),
    0 16px 34px rgba(200, 255, 0, 0.28),
    0 0 30px rgba(21, 230, 255, 0.16);
}

.director-script-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 950;
}

.director-script-copy-btn {
  min-height: 32px;
  padding: 0 12px;
  color: #050607;
  font-size: 13px;
  font-weight: 950;
  background: var(--director-lime);
  border: 1px solid var(--director-lime);
  border-radius: 6px;
  cursor: pointer;
}

.director-script-copy-btn:hover {
  background: #e8ff4d;
  box-shadow: 0 0 18px rgba(200, 255, 0, 0.22);
}

.director-script-agent {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 720px;
  min-height: min(620px, max(420px, calc(100vh - 108px)));
}

.director-image-studio {
  display: grid;
  grid-template-rows: auto auto minmax(300px, 1fr) auto;
}

.director-image-studio .director-frame-generator {
  position: relative;
  z-index: 4;
  min-height: 0;
}

.director-image-studio .director-frame-prompt-input {
  height: 230px;
  min-height: 170px;
  max-height: min(620px, calc(100vh - 260px));
  resize: none;
}

.director-frame-prompt-field {
  position: relative;
}

.director-frame-prompt-resize-handle {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: 14px;
  margin-top: 0;
  margin-bottom: 6px;
  cursor: ns-resize;
  pointer-events: auto;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(200, 255, 0, 0.6), transparent),
    rgba(255, 255, 255, 0.045);
}

.director-frame-prompt-resize-handle::before {
  display: block;
  width: 48px;
  height: 3px;
  margin: 5px auto 0;
  content: "";
  background: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
}

.director-script-agent-output {
  width: 100%;
  min-height: 0;
  height: 100%;
  margin-top: 12px;
  padding: 14px;
  color: #fff;
  font: 850 16px/1.72 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: rgba(0, 0, 0, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  resize: none;
  overflow: auto;
}

.director-script-agent.is-script-generating .director-script-agent-output {
  color: rgba(236, 255, 179, 0.96);
  background:
    linear-gradient(90deg, rgba(200, 255, 0, 0.03), rgba(200, 255, 0, 0.16), rgba(21, 230, 255, 0.07), rgba(200, 255, 0, 0.03)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 18px),
    rgba(0, 0, 0, 0.58);
  background-size: 260% 100%, auto, auto;
  border-color: rgba(200, 255, 0, 0.72);
  box-shadow:
    0 0 0 1px rgba(200, 255, 0, 0.2),
    0 0 24px rgba(200, 255, 0, 0.14),
    inset 0 0 26px rgba(21, 230, 255, 0.08);
  animation: directorScriptOutputScan 1.55s linear infinite, directorScriptOutputGlow 1.15s ease-in-out infinite alternate;
}

.director-script-agent-status {
  min-height: 40px;
  margin-top: 12px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 850;
  background: rgba(0, 0, 0, 0.34);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 7px;
}

.director-image-preview {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 260px;
  margin: 0 16px 16px;
  place-items: center;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(0, 0, 0, 0.48);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  overflow: hidden;
  pointer-events: none;
}

.director-image-preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.director-image-preview.is-generating {
  color: var(--director-lime);
  background:
    linear-gradient(135deg, rgba(200, 255, 0, 0.08), transparent 38%, rgba(21, 230, 255, 0.08)),
    rgba(0, 0, 0, 0.58);
  border-color: rgba(200, 255, 0, 0.54);
  box-shadow:
    inset 0 0 0 1px rgba(200, 255, 0, 0.16),
    0 0 38px rgba(200, 255, 0, 0.12);
}

.director-image-preview.has-image {
  cursor: zoom-in;
  pointer-events: auto;
}

.director-image-preview.has-image img {
  cursor: grab;
  pointer-events: auto;
  -webkit-user-drag: element;
}

.director-image-preview.has-image img:active {
  cursor: grabbing;
}

.director-image-bottom-actions {
  display: grid;
  grid-template-columns: minmax(340px, max-content) minmax(0, 1fr) max-content;
  align-items: center;
  gap: 14px;
  padding: 2px 16px 16px;
  border-top: 0;
}

.director-image-action-primary,
.director-image-action-secondary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.director-image-action-primary {
  flex: 0 0 auto;
  justify-content: flex-start;
  min-width: min(100%, 392px);
}

.director-image-action-secondary {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  justify-self: end;
}

.director-image-bottom-actions button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 6px;
}

.director-image-action-primary button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 198px;
  min-width: 172px;
  min-height: 50px;
  padding: 0 22px 0 54px;
  overflow: hidden;
  font-size: 16px;
  letter-spacing: 0;
  border-radius: 8px;
  text-align: center;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.director-image-action-primary button::before,
.director-image-action-primary button::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.director-image-action-primary button::before {
  left: 18px;
  top: 50%;
  z-index: -1;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  transform: translateY(-50%);
}

.director-image-action-primary button::after {
  inset: -40% auto -40% -70%;
  z-index: -1;
  width: 58%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: skewX(-18deg);
  transition: left 240ms ease;
}

.director-image-action-primary button:hover {
  transform: translateY(-1px);
}

.director-image-action-primary button:hover::after {
  left: 112%;
}

.director-image-action-primary .director-image-prompt-tool-btn {
  flex-basis: 214px;
  min-width: 204px;
  color: #f8ffe6;
  background:
    linear-gradient(135deg, rgba(200, 255, 0, 0.2), rgba(21, 230, 255, 0.08) 52%, rgba(0, 0, 0, 0.78)),
    rgba(3, 10, 10, 0.94);
  border-color: rgba(200, 255, 0, 0.82);
  box-shadow:
    0 0 0 1px rgba(200, 255, 0, 0.12),
    0 12px 26px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(200, 255, 0, 0.2),
    inset 0 0 24px rgba(200, 255, 0, 0.08);
}

.director-image-action-primary .director-image-prompt-tool-btn::before {
  background:
    linear-gradient(rgba(248, 255, 230, 0.95), rgba(248, 255, 230, 0.95)) 50% 50% / 11px 2px no-repeat,
    linear-gradient(rgba(248, 255, 230, 0.95), rgba(248, 255, 230, 0.95)) 50% 50% / 2px 11px no-repeat,
    linear-gradient(135deg, rgba(200, 255, 0, 0.92), rgba(21, 230, 255, 0.42)),
    rgba(200, 255, 0, 0.16);
  box-shadow:
    0 0 18px rgba(200, 255, 0, 0.5),
    inset 0 0 0 5px rgba(5, 6, 7, 0.68),
    inset 0 0 0 1px rgba(248, 255, 230, 0.24);
}

.director-image-action-primary .director-image-generate-btn {
  flex-basis: 176px;
  min-width: 154px;
  color: #061006;
  background:
    linear-gradient(135deg, #f0ff9b 0%, var(--director-lime) 46%, #74f7ff 118%);
  border-color: rgba(244, 255, 178, 0.98);
  box-shadow:
    0 0 0 1px rgba(244, 255, 178, 0.28),
    0 14px 30px rgba(200, 255, 0, 0.22),
    0 0 32px rgba(21, 230, 255, 0.18),
    inset 0 -10px 24px rgba(7, 26, 9, 0.16);
}

.director-image-action-primary .director-image-generate-btn::before {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 10%, rgba(200, 255, 0, 0.96) 11% 23%, rgba(5, 6, 7, 0.9) 24% 45%, transparent 46%),
    conic-gradient(from 30deg, rgba(5, 6, 7, 0.92), rgba(21, 230, 255, 0.78), rgba(200, 255, 0, 0.96), rgba(5, 6, 7, 0.92));
  box-shadow:
    0 0 18px rgba(5, 6, 7, 0.24),
    0 0 20px rgba(200, 255, 0, 0.36),
    inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.director-image-action-secondary button {
  min-height: 38px;
  padding: 0 14px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.director-image-action-secondary button:hover {
  color: #050607;
  background: rgba(200, 255, 0, 0.92);
  border-color: rgba(200, 255, 0, 0.94);
}

.director-floating-window.is-minimized {
  height: auto !important;
  min-height: 0 !important;
  resize: none;
  grid-template-rows: auto !important;
}

.director-floating-window.is-minimized > :not(.workflow-preview-head) {
  display: none !important;
}

.director-floating-window.is-minimized > .director-media-node-head,
.director-floating-window.is-minimized > .director-window-controls {
  display: flex !important;
}

.director-floating-window.is-maximized {
  resize: none;
}

.director-floating-window.is-arranged-compact {
  min-height: 0 !important;
}

.director-image-studio.is-arranged-compact {
  grid-template-rows: auto auto minmax(96px, 1fr) auto;
}

.director-image-studio.is-arranged-compact .director-frame-generator,
.director-script-agent.is-arranged-compact .director-script-agent-body {
  padding: 10px 12px;
}

.director-image-studio.is-arranged-compact .director-frame-prompt-input {
  height: 104px;
  min-height: 82px;
}

.director-image-studio.is-arranged-compact .director-frame-prompt-resize-handle {
  display: none;
}

.director-image-studio.is-arranged-compact .director-frame-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
}

.director-script-agent.is-arranged-compact .director-script-library-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.director-script-agent.is-arranged-compact .director-script-library-panel {
  padding: 10px;
}

.director-script-agent.is-arranged-compact .director-script-library-head {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.director-script-agent.is-arranged-compact .director-script-library-stat {
  text-align: left;
}

.director-script-agent.is-arranged-compact .director-script-generate-settings {
  grid-template-columns: 1fr;
}

.director-image-studio.is-arranged-compact .director-image-preview {
  min-height: 96px;
  margin: 0 12px 10px;
}

.director-image-studio.is-arranged-compact .director-image-bottom-actions {
  grid-template-columns: 1fr;
  padding: 0 12px 10px;
  gap: 8px;
}

.director-image-studio.is-arranged-compact .director-image-action-primary {
  flex-basis: 100%;
  min-width: 100%;
}

.director-image-studio.is-arranged-compact .director-image-action-primary button {
  flex: 1 1 0;
  min-width: 148px;
  min-height: 40px;
  padding: 0 14px 0 42px;
  font-size: 14px;
}

.director-image-studio.is-arranged-compact .director-image-action-primary button::before {
  left: 14px;
  width: 17px;
  height: 17px;
  border-radius: 5px;
}

.director-image-studio.is-arranged-compact .director-image-action-secondary {
  justify-content: flex-start;
  justify-self: stretch;
  margin-left: 0;
}

.director-image-studio.is-arranged-compact .director-image-action-secondary button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.director-script-agent.is-arranged-compact .director-script-main-actions {
  justify-content: stretch;
}

.director-script-agent.is-arranged-compact .director-script-main-actions .director-script-generate-btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  font-size: 16px;
}

.director-image-preview.is-generating::before,
.director-image-preview.is-generating::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.director-image-preview.is-generating::before {
  background:
    linear-gradient(90deg, transparent, rgba(200, 255, 0, 0.38), transparent),
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(21, 230, 255, 0.12) 17px 18px);
  opacity: 0.7;
  transform: translateX(-100%);
  animation: directorImageScan 1.45s linear infinite;
}

.director-image-preview.is-generating::after {
  border: 1px solid rgba(200, 255, 0, 0.28);
  box-shadow:
    inset 0 0 32px rgba(21, 230, 255, 0.12),
    inset 0 0 74px rgba(200, 255, 0, 0.1);
  animation: directorImagePulse 1.2s ease-in-out infinite alternate;
}

.director-image-preview.is-generating span {
  position: relative;
  z-index: 1;
  padding: 10px 14px;
  color: var(--director-lime);
  font-weight: 950;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(200, 255, 0, 0.34);
  border-radius: 8px;
}

@keyframes directorImageScan {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes directorImagePulse {
  from { opacity: 0.42; }
  to { opacity: 1; }
}

.director-image-reference-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  align-self: end;
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
  max-height: 54px;
  overflow: hidden;
  gap: 8px;
  padding: 4px 6px 0;
}

.director-image-reference-list:empty {
  display: none;
}

.director-image-reference-card {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  min-width: 0;
  max-height: 50px;
  padding: 8px 8px 0 0;
  color: rgba(255, 255, 255, 0.86);
  line-height: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.director-image-reference-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 68px;
  max-height: 42px;
  object-fit: contain;
  border-radius: 5px;
}

.director-image-reference-card button {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  place-items: center;
  color: #050607;
  font-size: 13px;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
  cursor: pointer;
}

.director-image-studio.is-arranged-compact .director-image-reference-list {
  max-height: 46px;
  padding: 0;
}

.director-image-studio.is-arranged-compact .director-image-reference-card {
  max-height: 42px;
  padding: 7px 7px 0 0;
}

.director-image-studio.is-arranged-compact .director-image-reference-card img {
  max-width: 58px;
  max-height: 35px;
}

.director-image-gallery {
  position: fixed;
  z-index: 980;
  width: min(1180px, calc(100vw - 96px));
  height: min(780px, calc(100vh - 132px));
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 96px);
  min-width: 760px;
  min-height: 540px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  resize: none;
  border-color: rgba(200, 255, 0, 0.58);
  background:
    linear-gradient(180deg, rgba(24, 30, 29, 0.96), rgba(7, 10, 11, 0.99)),
    rgba(7, 10, 11, 0.99);
  box-shadow:
    0 32px 110px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(200, 255, 0, 0.18),
    0 0 42px rgba(200, 255, 0, 0.12);
}

.director-image-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-content: start;
  gap: 16px;
  min-height: 0;
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
}

.director-image-gallery-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 900;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 8px;
}

.director-image-gallery-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 255, 0, 0.26);
  border-radius: 8px;
}

.director-image-gallery-thumb {
  display: grid;
  aspect-ratio: 4 / 3;
  place-items: center;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(0, 0, 0, 0.52);
  border-radius: 6px;
  overflow: hidden;
  cursor: zoom-in;
}

.director-image-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.director-image-gallery-card strong,
.director-image-gallery-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-image-gallery-card small {
  color: rgba(255, 255, 255, 0.58);
}

.director-image-gallery-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.director-image-gallery-actions button,
.director-image-gallery-remove {
  min-height: 30px;
  color: #050607;
  font-size: 13px;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.director-image-gallery-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  padding: 0;
}

@media (max-width: 860px) {
  .director-image-gallery {
    min-width: calc(100vw - 32px);
    min-height: min(540px, calc(100vh - 72px));
    width: calc(100vw - 32px);
    height: calc(100vh - 72px);
  }

  .director-image-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    padding: 12px;
  }
}

.director-agent-image-search {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-width: 620px;
  min-height: 480px;
  border-color: rgba(167, 255, 0, 0.34);
  background:
    linear-gradient(180deg, rgba(42, 54, 47, 0.9), rgba(8, 11, 12, 0.98)),
    rgba(8, 10, 10, 0.98);
  box-shadow:
    0 28px 86px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.director-agent-image-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 88px 112px;
  gap: 10px;
  padding: 14px 16px 10px;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.director-agent-image-search-input {
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  color: #f5fff2;
  font: 900 14px/1.4 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: rgba(2, 4, 5, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  outline: none;
}

.director-agent-image-search-input:focus {
  border-color: rgba(167, 255, 0, 0.68);
  box-shadow: 0 0 0 3px rgba(167, 255, 0, 0.12);
}

.director-agent-image-search-engine {
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  color: #f5fff2;
  font: 900 13px/1.4 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: rgba(2, 4, 5, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  outline: none;
}

.director-agent-image-search-engine:focus {
  border-color: rgba(167, 255, 0, 0.68);
  box-shadow: 0 0 0 3px rgba(167, 255, 0, 0.12);
}

.director-agent-image-search-form button,
.director-agent-image-search-actions button {
  min-height: 34px;
  color: #050607;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.director-agent-image-search-status {
  padding: 0 16px 12px;
  color: rgba(239, 247, 238, 0.7);
  font-size: 13px;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.035);
}

.director-agent-image-search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  min-height: 0;
  padding: 16px;
  overflow: auto;
  scrollbar-color: rgba(167, 255, 0, 0.62) rgba(255, 255, 255, 0.06);
}

.director-agent-image-search-grid::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.director-agent-image-search-grid::-webkit-scrollbar-track {
  margin: 8px 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.director-agent-image-search-grid::-webkit-scrollbar-thumb {
  min-height: 72px;
  background: linear-gradient(180deg, rgba(205, 255, 76, 0.94), rgba(112, 210, 0, 0.78));
  border: 4px solid rgba(10, 14, 13, 0.9);
  border-radius: 999px;
}

.director-agent-image-search-empty {
  display: grid;
  min-height: 240px;
  grid-column: 1 / -1;
  gap: 10px;
  place-items: center;
  color: rgba(255, 255, 255, 0.64);
  font-weight: 900;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 10px;
}

.director-agent-image-search-empty button {
  min-height: 34px;
  padding: 0 14px;
  color: #050607;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.director-agent-image-search-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(167, 255, 0, 0.22);
  border-radius: 8px;
}

.director-agent-image-search-thumb {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  place-items: center;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(0, 0, 0, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  overflow: hidden;
  cursor: copy;
}

.director-agent-image-search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.director-agent-image-search-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.director-agent-image-search-meta strong,
.director-agent-image-search-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-agent-image-search-meta strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

.director-agent-image-search-meta small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
}

.director-agent-image-search-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.director-agent-image-search-actions button {
  min-width: 0;
  padding: 0 6px;
  font-size: 12px;
}

.director-agent-image-search-more {
  grid-column: 1 / -1;
  min-height: 40px;
  color: #050607;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.director-agent-image-search-more:disabled {
  color: rgba(255, 255, 255, 0.56);
  background: rgba(255, 255, 255, 0.1);
  cursor: default;
}

.director-prompt-tool-window {
  min-width: 760px;
  min-height: 560px;
}

.director-prompt-tool-frame {
  display: block;
  width: 100%;
  height: calc(100% - 68px);
  min-height: 490px;
  background: #050607;
  border: 0;
}

.director-canvas-help-window {
  z-index: 970;
  width: min(620px, calc(100vw - 56px));
  min-width: 430px;
  min-height: 520px;
  max-height: calc(100vh - 104px);
}

.director-canvas-help-body {
  height: calc(100% - 68px);
  min-height: 440px;
  padding: 18px;
  overflow: auto;
}

.director-canvas-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.director-canvas-help-card {
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

.director-canvas-help-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--director-lime);
  font-size: 13px;
}

.director-canvas-help-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.7;
}

.director-canvas-help-shortcuts {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.director-canvas-help-shortcuts div {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
}

.director-canvas-help-shortcuts kbd {
  display: inline-grid;
  min-height: 26px;
  padding: 0 8px;
  place-items: center;
  color: #050607;
  font: 950 12px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: var(--director-lime);
  border-radius: 5px;
}

.director-canvas-help-shortcuts span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.director-video-tool-window {
  z-index: 975;
  min-width: 680px;
  min-height: 520px;
}

.director-video-tool-body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  height: calc(100% - 68px);
  padding: 16px;
  overflow: auto;
}

.director-video-replica-window {
  min-width: min(900px, calc(100vw - 32px));
  min-height: 660px;
  font-size: 15px;
}

.director-video-replica-body {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto minmax(260px, 1fr);
  gap: 14px;
  height: calc(100% - 68px);
  padding: 18px;
  overflow: auto;
}

.director-video-replica-model-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 104px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

.director-video-replica-model-mark {
  position: relative;
  width: 70px;
  height: 70px;
  background: #24282e;
  border-radius: 8px;
}

.director-video-replica-model-mark::before,
.director-video-replica-model-mark::after {
  content: "";
  position: absolute;
  inset: 16px;
  background:
    linear-gradient(90deg, #ffe05a 0 26%, #1ee0ff 44% 58%, #ff5f83 76% 100%);
  clip-path: polygon(50% 0, 62% 34%, 100% 50%, 62% 66%, 50% 100%, 38% 66%, 0 50%, 38% 34%);
}

.director-video-replica-model-mark::after {
  inset: 20px;
  background: #3b61ff;
  filter: blur(10px);
  opacity: 0.72;
}

.director-video-replica-model-card strong {
  display: block;
  color: #fff;
  font-size: 20px;
}

.director-video-replica-model-card p,
.director-video-replica-file,
.director-video-replica-status {
  margin: 5px 0 0;
  color: rgba(237, 245, 233, 0.72);
  font-size: 14px;
  line-height: 1.65;
}

.director-video-replica-upload {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.director-video-replica-preview {
  min-height: 230px;
  background: #07090b;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  overflow: hidden;
}

.director-video-replica-preview video {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: contain;
}

.director-video-replica-upload-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.director-video-replica-upload-copy strong {
  color: #fff;
}

.director-video-replica-upload-copy button {
  justify-self: start;
  min-height: 40px;
  padding: 0 14px;
  color: #050607;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 6px;
}

.director-video-replica-config {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: rgba(255, 154, 154, 0.075);
  border: 1px solid rgba(255, 154, 154, 0.36);
  border-radius: 8px;
}

.director-video-replica-config[hidden] {
  display: none;
}

.director-video-replica-config strong {
  color: #fff;
}

.director-video-replica-config-status {
  margin: 5px 0 0;
  color: rgba(237, 245, 233, 0.72);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.director-video-replica-config-status.is-ok {
  color: var(--director-lime);
}

.director-video-replica-config-status.is-error {
  color: #ff9a9a;
}

.director-video-replica-config-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) max-content;
  gap: 10px;
  align-items: center;
}

.director-video-replica-config-row input {
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  color: #edf5e9;
  font: 850 14px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
}

.director-video-replica-config-row button {
  min-height: 40px;
  padding: 0 14px;
  color: #050607;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 6px;
}

.director-video-replica-output {
  min-height: 260px;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  line-height: 1.65;
}

.director-video-replica-status.is-ok {
  color: var(--director-lime);
}

.director-video-replica-status.is-error {
  color: #ff9a9a;
}

@media (max-width: 760px) {
  .director-video-replica-body {
    grid-template-rows: auto;
  }

  .director-video-replica-model-card,
  .director-video-replica-upload {
    grid-template-columns: 1fr;
  }

  .director-video-replica-model-mark {
    width: 58px;
    height: 58px;
  }
}

.director-video-tool-body textarea,
.director-video-field textarea,
.director-video-replica-output {
  width: 100%;
  min-height: 116px;
  resize: vertical;
  color: #edf5e9;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
}

.director-video-tool-actions,
.director-video-tool-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.director-video-tool-actions button,
.director-video-tool-settings select {
  min-height: 38px;
  padding: 0 12px;
  color: #050607;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 6px;
  font-size: 14px;
}

.director-video-tool-settings label,
.director-video-field {
  display: grid;
  gap: 6px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 900;
}

.director-video-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px;
  background: rgba(200, 255, 0, 0.1);
  border: 1px solid rgba(200, 255, 0, 0.24);
  border-radius: 8px;
}

.director-video-score strong {
  color: var(--director-lime);
  font-size: 42px;
  line-height: 1;
}

.director-video-check-columns,
.director-platform-matrix-grid,
.director-video-segment-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.director-video-check-columns section,
.director-platform-matrix-grid article,
.director-video-segment-cards article {
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.director-video-check-columns h3,
.director-video-check-columns p,
.director-video-segment-cards p,
.director-platform-matrix-grid p {
  margin: 0;
}

.director-video-suggestions {
  display: grid;
  gap: 8px;
  padding-left: 20px;
}

.director-video-suggestions li span,
.director-platform-matrix-grid small,
.director-video-segment-cards span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
}

.director-video-pack-output,
.director-platform-matrix-output {
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  line-height: 1.55;
}

.director-painting-board {
  z-index: 1320;
  width: min(1320px, calc(100vw - 64px));
  min-width: 860px;
  min-height: min(560px, calc(100dvh - 96px));
  overflow: hidden;
  color: rgba(255, 255, 255, 0.88);
  background: #0c1015;
  border-color: rgba(114, 163, 226, 0.28);
  box-shadow:
    0 26px 90px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

body.director-painting-board-open .director-edge-nav,
body.director-painting-board-open .site-edge-nav,
body.director-painting-board-open .director-canvas-action-dialog,
body.director-painting-board-open .director-canvas-context-menu,
body.director-painting-board-open .director-agent-context-menu,
body.director-painting-board-open .director-image-context-menu,
body.director-painting-board-open .director-media-context-menu {
  display: none !important;
  pointer-events: none !important;
}

body.director-painting-board-open .reference-header {
  display: none !important;
}

body.director-painting-board-open {
  background: #000403;
}

body.director-painting-board-open .director-ink-controls,
body.director-painting-board-open .director-agent-dock {
  opacity: 0;
  pointer-events: none !important;
  visibility: hidden;
}

body.director-painting-board-open .director-canvas-world {
  z-index: 1300;
}

body.director-painting-board-open .director-canvas-backdrop {
  opacity: 0;
}

body.director-painting-board-open .director-canvas-backdrop::after {
  display: none;
}

body.director-painting-board-open .director-page-ink-canvas {
  opacity: 0;
  pointer-events: none !important;
}

body.director-painting-board-open .director-painting-board.is-window-selected {
  outline: 1px solid rgba(96, 145, 218, 0.62);
  outline-offset: 2px;
  box-shadow:
    0 28px 110px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(96, 145, 218, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.director-painting-topbar {
  display: grid;
  grid-template-columns: 40px minmax(160px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  height: 54px;
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(16, 20, 26, 0.98), rgba(10, 13, 18, 0.98));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
}

.director-painting-topbar button,
.director-painting-toolbar button,
.director-painting-layer-panel header button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: rgba(255, 255, 255, 0.76);
  font: inherit;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  cursor: pointer;
}

.director-painting-topbar button:hover,
.director-painting-topbar button:focus-visible,
.director-painting-toolbar button:hover,
.director-painting-toolbar button:focus-visible,
.director-painting-toolbar button.is-active {
  color: #f7fbff;
  background: rgba(56, 126, 226, 0.44);
  border-color: rgba(113, 174, 255, 0.58);
  outline: none;
}

.director-painting-title {
  min-width: 0;
  height: 34px;
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-weight: 900;
  background: transparent;
  border: 0;
  outline: none;
}

.director-painting-save-state {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  white-space: nowrap;
}

.director-painting-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.director-painting-top-actions > span {
  min-width: 48px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  text-align: center;
}

.director-painting-command-menu {
  position: absolute;
  top: 60px;
  left: 14px;
  z-index: 9;
  display: grid;
  gap: 6px;
  width: 188px;
  padding: 8px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(8, 12, 17, 0.96);
  border: 1px solid rgba(113, 174, 255, 0.22);
  border-radius: 8px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(18px);
}

.director-painting-command-menu[hidden] {
  display: none !important;
}

.director-painting-command-menu button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  padding: 0 10px 0 0;
  color: inherit;
  font: 900 12px/1.2 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.director-painting-command-menu button span {
  display: inline-grid;
  place-items: center;
  color: rgba(130, 185, 255, 0.92);
  font-size: 12px;
}

.director-painting-command-menu button:hover,
.director-painting-command-menu button:focus-visible {
  color: #fff;
  background: rgba(56, 126, 226, 0.28);
  border-color: rgba(113, 174, 255, 0.36);
  outline: none;
}

.director-painting-shell {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 256px;
  grid-template-rows: minmax(0, 1fr);
  height: calc(100% - 54px);
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(27, 34, 43, 0.2), rgba(5, 7, 10, 0.58)),
    #121820;
}

.director-painting-board.is-painting-side-collapsed .director-painting-shell {
  grid-template-columns: 76px minmax(0, 1fr);
}

.director-painting-board.is-painting-side-collapsed .director-painting-side {
  display: none;
}

.director-painting-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 22px 0;
  background: rgba(8, 12, 17, 0.76);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow: auto;
}

.director-painting-toolbar button {
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  letter-spacing: 0;
  background: rgba(255, 255, 255, 0.055);
}

.director-painting-toolbar button.is-active {
  box-shadow: 0 0 0 4px rgba(53, 126, 236, 0.16);
}

.director-painting-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  height: 100%;
  place-items: center;
  overflow: auto;
  background:
    radial-gradient(circle at 48% 20%, rgba(110, 142, 178, 0.12), transparent 28%),
    linear-gradient(135deg, #202936 0%, #111820 44%, #0c1117 100%);
}

.director-painting-canvas {
  display: block;
  width: calc(var(--painting-canvas-width, 1600px) * var(--painting-zoom, 1));
  height: calc(var(--painting-canvas-height, 940px) * var(--painting-zoom, 1));
  max-width: none;
  max-height: none;
  background: #f3f0e8;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(0, 0, 0, 0.62);
  cursor: crosshair;
  rotate: var(--painting-rotation, 0deg);
  transform-origin: center;
  touch-action: none;
}

.director-painting-canvas:focus-visible {
  outline: 2px solid rgba(113, 174, 255, 0.74);
  outline-offset: 4px;
}

.director-painting-canvas[data-painting-tool="eraser"] {
  cursor: cell;
}

.director-painting-canvas[data-painting-tool="hand"] {
  cursor: grab;
}

.director-painting-canvas[data-painting-tool="hand"].is-panning {
  cursor: grabbing;
}

.director-painting-canvas[data-painting-tool="picker"] {
  cursor: copy;
}

.director-painting-canvas[data-painting-tool="zoom"] {
  cursor: zoom-in;
}

.director-painting-canvas[data-painting-tool="select"] {
  cursor: crosshair;
}

.director-painting-canvas[data-painting-tool="rotate"] {
  cursor: grab;
}

.director-painting-canvas[data-painting-tool="rotate"].is-rotating {
  cursor: grabbing;
}

.director-painting-selection {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border: 1px dashed rgba(95, 174, 255, 0.98);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(69, 143, 242, 0.2), rgba(69, 143, 242, 0.04));
  box-shadow:
    0 0 0 1px rgba(7, 12, 18, 0.72),
    0 0 24px rgba(72, 154, 255, 0.28);
}

.director-painting-selection[hidden] {
  display: none !important;
}

.director-painting-brush-popover {
  position: absolute;
  left: 50%;
  bottom: 24px;
  display: grid;
  grid-template-columns: 104px 190px;
  gap: 10px 16px;
  width: min(360px, calc(100% - 48px));
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(13, 18, 24, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
  transform: translateX(calc(-50% - 28px));
  backdrop-filter: blur(18px);
}

.director-painting-brush-popover,
.director-painting-brush-popover * {
  box-sizing: border-box;
}

.director-painting-brush-size {
  grid-row: span 3;
  display: grid;
  place-items: center;
  align-content: center;
  width: 88px;
  height: 88px;
  border: 5px solid rgba(70, 137, 238, 0.86);
  border-radius: 50%;
}

.director-painting-brush-size b {
  color: #fff;
  font-size: 24px;
}

.director-painting-brush-size span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}

.director-painting-brush-popover label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
}

.director-painting-brush-popover input {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  margin: 0;
  accent-color: #4d8dff;
}

.director-painting-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 10px;
  min-height: 0;
  height: 100%;
  padding: 12px;
  background: rgba(8, 12, 17, 0.72);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.director-painting-panel {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  background: rgba(17, 23, 31, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

.director-painting-panel header,
.director-painting-blend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.director-painting-panel header strong {
  color: #fff;
  font-size: 14px;
}

.director-painting-color-panel header input {
  width: 34px;
  height: 34px;
  padding: 2px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
}

.director-painting-color-wheel {
  position: relative;
  width: min(112px, calc(100% - 12px));
  aspect-ratio: 1;
  margin: 8px auto;
  border-radius: 50%;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  box-shadow: 0 0 0 18px rgba(255, 255, 255, 0.035) inset;
}

.director-painting-color-wheel span {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #2f65b0 58%, #050607 100%);
  clip-path: polygon(50% 0, 100% 82%, 0 82%);
}

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

.director-painting-swatches button {
  height: 20px;
  background: var(--swatch);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  cursor: pointer;
}

.director-painting-blend-row {
  margin: 12px 0 10px;
  padding-bottom: 10px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.director-painting-layer-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.director-painting-layers {
  display: grid;
  gap: 6px;
  min-height: 0;
  padding-right: 2px;
  overflow: auto;
}

.director-painting-layer {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-areas:
    "eye main"
    "actions actions";
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 66px;
  padding: 6px;
  color: rgba(255, 255, 255, 0.76);
  text-align: left;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid transparent;
  border-radius: 7px;
}

.director-painting-layer.is-active {
  color: #fff;
  background: rgba(54, 105, 174, 0.38);
  border-color: rgba(103, 163, 255, 0.42);
}

.director-painting-layer-eye {
  grid-area: eye;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 30px;
  padding: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.director-painting-layer-eye.is-off {
  color: rgba(255, 255, 255, 0.34);
}

.director-painting-layer-select {
  grid-area: main;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  outline: none;
  cursor: pointer;
}

.director-painting-layer-select:focus-visible {
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(103, 163, 255, 0.52);
}

.director-painting-layer-thumb {
  display: block;
  width: 38px;
  height: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(213, 223, 234, 0.5)),
    #f3f0e8;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 4px;
}

.director-painting-layer-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.director-painting-layer strong,
.director-painting-layer small,
.director-painting-layer [data-painting-layer-name],
.director-painting-layer-name-input {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-painting-layer strong {
  font-size: 12px;
}

.director-painting-layer small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
}

.director-painting-layer [data-painting-layer-name],
.director-painting-layer-name-input {
  width: 100%;
  height: 24px;
  padding: 0 7px;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(103, 163, 255, 0.45);
  border-radius: 5px;
  outline: none;
}

.director-painting-layer-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}

.director-painting-layer-actions button {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 24px;
  padding: 0;
  color: rgba(255, 255, 255, 0.62);
  font: 900 12px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  cursor: pointer;
}

.director-painting-layer-actions button:hover,
.director-painting-layer-actions button:focus-visible {
  color: #fff;
  background: rgba(56, 126, 226, 0.38);
  border-color: rgba(113, 174, 255, 0.48);
  outline: none;
}

.director-painting-layer-actions button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.director-painting-layer-actions [data-painting-layer-delete][aria-label="确认删除图层"] {
  width: 42px;
  color: #fff;
  background: rgba(255, 74, 120, 0.3);
  border-color: rgba(255, 110, 144, 0.64);
}

@media (max-width: 980px) {
  .director-painting-board {
    min-width: 720px;
    min-height: min(520px, calc(100dvh - 96px));
  }

  .director-painting-topbar {
    grid-template-columns: 38px minmax(104px, 1fr) auto auto;
    gap: 8px;
    padding: 0 10px;
  }

  .director-painting-top-actions {
    gap: 6px;
  }

  .director-painting-topbar button {
    width: 32px;
    height: 32px;
  }

  .director-painting-shell {
    grid-template-columns: 64px minmax(0, 1fr) 220px;
  }

  .director-painting-board.is-painting-side-collapsed .director-painting-shell {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .director-painting-brush-popover {
    left: 16px;
    transform: none;
  }
}

@media (max-width: 820px) {
  .director-painting-board {
    width: calc(100vw - 48px);
    min-width: min(360px, calc(100vw - 48px));
    min-height: min(520px, calc(100dvh - 72px));
  }

  .director-painting-topbar {
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, auto);
    gap: 8px;
    height: 48px;
    padding: 0 8px;
  }

  .director-painting-title {
    height: 30px;
    font-size: 13px;
  }

  .director-painting-save-state {
    display: none;
  }

  .director-painting-top-actions {
    gap: 4px;
    max-width: min(228px, 52vw);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .director-painting-top-actions::-webkit-scrollbar {
    display: none;
  }

  .director-painting-top-actions > span {
    min-width: 38px;
    font-size: 11px;
  }

  .director-painting-topbar button {
    width: 30px;
    height: 30px;
  }

  .director-painting-command-menu {
    top: 52px;
    left: 8px;
  }

  .director-painting-shell {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 220px;
    height: calc(100% - 48px);
  }

  .director-painting-board.is-painting-side-collapsed .director-painting-shell {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .director-painting-toolbar {
    gap: 6px;
    padding: 10px 0;
  }

  .director-painting-toolbar button {
    width: 38px;
    height: 38px;
  }

  .director-painting-side {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: auto;
    padding: 8px;
    overflow: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 0;
  }

  .director-painting-panel {
    padding: 10px;
  }

  .director-painting-color-wheel {
    width: min(78px, calc(100% - 12px));
    margin: 4px auto;
  }

  .director-painting-color-wheel span {
    inset: 16px;
  }

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

  .director-painting-layer {
    min-height: 58px;
  }

  .director-painting-brush-popover {
    left: 8px;
    bottom: 10px;
    grid-template-columns: 78px minmax(0, 1fr);
    width: min(320px, calc(100% - 16px));
    padding: 10px;
    transform: none;
  }

  .director-painting-brush-size {
    width: 70px;
    height: 70px;
    border-width: 4px;
  }

  .director-painting-brush-size b {
    font-size: 20px;
  }
}

@media (max-width: 520px) {
  body.director-painting-board-open .director-page .reference-header .nav-actions {
    gap: 8px;
    max-width: 100%;
    overflow: visible;
    padding-bottom: 0;
  }

  body.director-painting-board-open #directorOpenImageStudioBtn,
  body.director-painting-board-open #directorOpenScriptStudioBtn,
  body.director-painting-board-open #directorOpenGalleryBtn {
    display: none;
  }

  body.director-painting-board-open .director-current-canvas-name {
    max-width: min(188px, calc(100vw - 154px));
  }

  body.director-painting-board-open .director-current-canvas-name-display {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .director-painting-board {
    width: calc(100vw - 24px);
    min-width: min(320px, calc(100vw - 24px));
  }

  .director-painting-topbar {
    grid-template-columns: 32px minmax(0, 1fr) minmax(0, auto);
    padding: 0 6px;
  }

  .director-painting-top-actions {
    max-width: 190px;
    overflow: visible;
  }

  .director-painting-top-actions [data-painting-export],
  .director-painting-top-actions [data-painting-clear],
  .director-painting-top-actions .director-window-minimize-btn,
  .director-painting-top-actions .director-window-maximize-btn {
    display: none;
  }

  .director-painting-shell {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 206px;
  }

  .director-painting-board.is-painting-side-collapsed .director-painting-shell {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .director-painting-toolbar button {
    width: 34px;
    height: 34px;
  }

  .director-painting-side {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .director-painting-panel {
    flex: 0 0 210px;
  }

  .director-painting-layer-panel {
    flex-basis: 242px;
  }

  .director-painting-brush-popover {
    grid-template-columns: 1fr;
    width: min(260px, calc(100% - 16px));
  }

  .director-painting-brush-size {
    grid-row: auto;
    width: 62px;
    height: 62px;
  }
}

/* Immersive CG painting board refresh. Scoped to the in-canvas painting board only. */
.director-painting-board {
  --painting-hud: #c8ff2b;
  --painting-hud-soft: rgba(200, 255, 43, 0.46);
  --painting-hud-faint: rgba(200, 255, 43, 0.14);
  --painting-plate: rgba(4, 10, 9, 0.94);
  --painting-plate-deep: rgba(0, 4, 4, 0.98);
  --painting-line: rgba(198, 255, 50, 0.28);
  --painting-scene: none;
  --painting-brush-frame: none;
  --painting-topbar-frame: none;
  --painting-toolbar-frame: none;
  --painting-side-frame: none;
  width: min(1680px, calc(100vw - 20px));
  min-width: min(1160px, calc(100vw - 20px));
  min-height: min(850px, calc(100dvh - 22px));
  color: rgba(232, 241, 222, 0.94);
  background:
    linear-gradient(135deg, transparent 0 16px, rgba(18, 26, 24, 0.96) 16px calc(100% - 16px), transparent calc(100% - 16px)),
    linear-gradient(180deg, #0d1211, #020504 56%, #000);
  border: 1px solid rgba(189, 255, 33, 0.2);
  border-radius: 0;
  box-shadow:
    0 36px 130px rgba(0, 0, 0, 0.82),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 42px rgba(171, 255, 0, 0.12);
  isolation: isolate;
}

.director-painting-board::before,
.director-painting-board::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.director-painting-board::before {
  background:
    linear-gradient(90deg, transparent 0 18px, var(--painting-line) 18px 20px, transparent 20px calc(100% - 20px), var(--painting-line) calc(100% - 20px) calc(100% - 18px), transparent calc(100% - 18px)),
    linear-gradient(180deg, transparent 0 18px, rgba(198, 255, 50, 0.24) 18px 20px, transparent 20px calc(100% - 20px), rgba(198, 255, 50, 0.2) calc(100% - 20px) calc(100% - 18px), transparent calc(100% - 18px)),
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(190, 255, 42, 0.12) 62px 68px, transparent 68px 210px);
  opacity: 0.72;
}

.director-painting-board::after {
  inset: 52px 8px 8px;
  background:
    radial-gradient(circle at 47% 4%, rgba(202, 255, 66, 0.12), transparent 26%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.56), transparent 14% 78%, rgba(0, 0, 0, 0.68)),
    linear-gradient(180deg, transparent 0 70%, rgba(0, 0, 0, 0.42));
  mix-blend-mode: screen;
}

body.director-painting-board-open .director-painting-board.is-window-selected {
  outline: 1px solid rgba(200, 255, 43, 0.76);
  outline-offset: 2px;
}

.director-painting-topbar,
.director-painting-command-menu,
.director-painting-shell {
  position: relative;
  z-index: 1;
}

.director-painting-topbar {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(220px, 380px) minmax(420px, 1.1fr);
  gap: 14px;
  align-items: center;
  height: 58px;
  padding: 0 18px 0 26px;
  background:
    linear-gradient(135deg, transparent 0 14px, rgba(8, 13, 12, 0.98) 14px calc(100% - 14px), transparent calc(100% - 14px)),
    linear-gradient(180deg, rgba(19, 25, 24, 0.98), rgba(2, 6, 6, 0.98));
  border-bottom: 1px solid rgba(192, 255, 44, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 16px 36px rgba(0, 0, 0, 0.36);
  cursor: grab;
}

.director-painting-menu-bar,
.director-painting-top-actions,
.director-painting-title-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
}

.director-painting-menu-bar {
  gap: 22px;
}

.director-painting-menu-bar button {
  width: auto;
  height: 36px;
  padding: 0 8px;
  color: rgba(218, 226, 213, 0.82);
  font: 800 14px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.director-painting-title-wrap {
  position: relative;
  justify-content: center;
  height: 100%;
}

.director-painting-title {
  width: min(300px, 100%);
  height: 38px;
  color: rgba(240, 247, 229, 0.96);
  font: 950 17px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  text-align: center;
  background: transparent;
  border: 0;
  outline: none;
}

.director-painting-title-underline {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: min(190px, 82%);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--painting-hud), transparent);
  box-shadow: 0 0 14px rgba(200, 255, 43, 0.66);
  transform: translateX(-50%);
}

.director-painting-top-actions {
  justify-content: flex-end;
  gap: 8px;
  overflow: hidden;
}

.director-painting-top-actions .director-window-controls {
  display: none;
}

.director-painting-top-actions > span[data-painting-zoom-value] {
  display: inline-grid;
  place-items: center;
  height: 32px;
  padding: 0 10px;
  color: rgba(200, 255, 43, 0.78);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.22);
  border-inline: 1px solid rgba(200, 255, 43, 0.18);
}

.director-painting-mode {
  min-width: 82px;
}

.director-painting-save-state,
.director-painting-mode,
.director-painting-top-actions > span[data-painting-zoom-value],
.director-painting-top-actions > button[data-painting-zoom-out],
.director-painting-top-actions > button[data-painting-zoom-in],
.director-painting-top-actions > button[data-painting-clear] {
  display: none;
}

.director-painting-topbar button,
.director-painting-layer-panel header button,
.director-painting-layer-footer button,
.director-painting-brush-type button {
  display: inline-grid;
  place-items: center;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  color: rgba(225, 232, 219, 0.82);
  font: 850 12px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background:
    linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.04) 6px calc(100% - 6px), transparent calc(100% - 6px)),
    rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(200, 255, 43, 0.16);
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.72) inset;
}

.director-painting-topbar button span {
  margin-left: 4px;
  color: rgba(225, 232, 219, 0.74);
  font-size: 11px;
}

.director-painting-top-actions > button[data-painting-undo],
.director-painting-top-actions > button[data-painting-redo],
.director-painting-top-actions > button[data-painting-export] {
  min-width: 62px;
}

.director-painting-topbar button:hover,
.director-painting-topbar button:focus-visible,
.director-painting-layer-panel header button:hover,
.director-painting-layer-panel header button:focus-visible,
.director-painting-layer-footer button:hover,
.director-painting-layer-footer button:focus-visible,
.director-painting-brush-type button:hover,
.director-painting-brush-type button:focus-visible {
  color: #081008;
  background: var(--painting-hud);
  border-color: var(--painting-hud);
  box-shadow: 0 0 22px rgba(200, 255, 43, 0.42);
  outline: none;
}

.director-painting-command-menu {
  top: 60px;
  left: 24px;
  width: 236px;
  padding: 10px;
  color: rgba(232, 241, 222, 0.92);
  background: rgba(2, 7, 6, 0.96);
  border: 1px solid rgba(200, 255, 43, 0.3);
  border-radius: 0;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.62),
    0 0 36px rgba(200, 255, 43, 0.12);
}

.director-painting-command-menu button {
  justify-content: start;
  width: 100%;
  min-height: 36px;
  color: inherit;
  text-align: left;
  background: transparent;
}

.director-painting-command-menu button span {
  width: 28px;
  color: var(--painting-hud);
}

.director-painting-shell {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr) 322px;
  height: calc(100% - 58px);
  min-height: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.76), transparent 12% 78%, rgba(0, 0, 0, 0.66)),
    #020605;
}

.director-painting-board.is-painting-side-collapsed .director-painting-shell {
  grid-template-columns: 142px minmax(0, 1fr);
}

.director-painting-board.is-painting-side-collapsed .director-painting-side {
  display: none;
}

.director-painting-toolbar {
  gap: 0;
  align-items: stretch;
  padding: 42px 12px 26px 24px;
  background:
    linear-gradient(135deg, transparent 0 16px, rgba(5, 10, 9, 0.96) 16px calc(100% - 18px), transparent calc(100% - 18px)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(9, 17, 13, 0.74));
  border-right: 1px solid rgba(200, 255, 43, 0.18);
  box-shadow: 18px 0 38px rgba(0, 0, 0, 0.3);
  overflow: auto;
  scrollbar-width: thin;
}

.director-painting-toolbar button {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 43px;
  padding: 0 8px 0 0;
  color: rgba(223, 232, 217, 0.74);
  font: 900 13px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(200, 255, 43, 0.08);
  border-radius: 0;
  box-shadow: none;
}

.director-painting-toolbar button b {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: rgba(232, 241, 222, 0.86);
  font: 950 19px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid transparent;
  border-radius: 0;
}

.director-painting-toolbar button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-painting-toolbar button:hover,
.director-painting-toolbar button:focus-visible {
  color: var(--painting-hud);
  background: rgba(200, 255, 43, 0.055);
  outline: none;
}

.director-painting-toolbar button.is-active {
  color: var(--painting-hud);
  background:
    linear-gradient(90deg, rgba(200, 255, 43, 0.22), rgba(200, 255, 43, 0.055) 70%, transparent);
}

.director-painting-toolbar button.is-active::before {
  position: absolute;
  inset: 7px auto 7px -1px;
  width: 4px;
  background: var(--painting-hud);
  box-shadow: 0 0 18px var(--painting-hud);
  content: "";
}

.director-painting-toolbar button.is-active b {
  color: #071006;
  background: linear-gradient(135deg, #f4ffb1, var(--painting-hud) 52%, #8be800);
  border-color: rgba(238, 255, 123, 0.9);
  box-shadow:
    0 0 22px rgba(200, 255, 43, 0.66),
    0 0 48px rgba(200, 255, 43, 0.22);
}

.director-painting-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 16px 16px 164px;
  place-items: center;
  overflow: auto;
  background:
    radial-gradient(circle at 50% 10%, rgba(205, 255, 93, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(8, 18, 13, 0.24), rgba(0, 0, 0, 0.34)),
    #050807;
}

.director-painting-stage::before,
.director-painting-stage::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.director-painting-stage::before {
  z-index: 0;
  background:
    linear-gradient(rgba(200, 255, 43, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 255, 43, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
}

.director-painting-stage::after {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.48), transparent 18% 82%, rgba(0, 0, 0, 0.5)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 16% 74%, rgba(0, 0, 0, 0.36));
}

.director-painting-canvas {
  position: relative;
  z-index: 1;
  background: #101912;
  border: 1px solid rgba(200, 255, 43, 0.2);
  border-radius: 0;
  box-shadow:
    0 34px 95px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 36px rgba(200, 255, 43, 0.08);
}

.director-painting-canvas:focus-visible {
  outline: 1px solid rgba(200, 255, 43, 0.84);
  outline-offset: 5px;
}

.director-painting-selection {
  z-index: 5;
  border: 1px solid rgba(213, 255, 74, 0.98);
  background: rgba(200, 255, 43, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 28px rgba(200, 255, 43, 0.34);
}

.director-painting-brush-popover {
  left: 50%;
  bottom: 26px;
  z-index: 6;
  display: grid;
  grid-template-columns: 168px 492px 236px;
  align-items: center;
  gap: 0;
  width: min(964px, calc(100% - 72px));
  height: 154px;
  min-height: 154px;
  padding: 0 30px 0 34px;
  color: rgba(211, 219, 207, 0.9);
  background: var(--painting-brush-frame) center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.46);
  transform: translateX(calc(-50% - 28px));
}

.director-painting-brush-size {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: start;
  width: 122px;
  height: 122px;
  margin-left: -6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.director-painting-brush-size b {
  position: absolute;
  right: 7px;
  bottom: 13px;
  color: rgba(210, 232, 193, 0.58);
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(185, 255, 29, 0.22);
}

.director-painting-brush-core {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(245, 248, 244, 0.74) 0 14%, rgba(232, 236, 230, 0.62) 24%, rgba(207, 216, 208, 0.36) 43%, rgba(255, 255, 255, 0.1) 66%, transparent 76%);
  filter: blur(3.4px);
  opacity: 0.82;
}

.director-painting-slider-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-self: start;
  gap: 19px 38px;
  margin-top: 34px;
  padding-right: 4px;
}

.director-painting-brush-popover label {
  display: grid;
  grid-template-columns: minmax(84px, 1fr) auto;
  gap: 9px 12px;
  align-items: center;
  min-width: 0;
  color: rgba(196, 205, 195, 0.66);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.director-painting-brush-popover label span {
  color: rgba(200, 210, 199, 0.62);
  font-size: 12px;
  font-weight: 500;
}

.director-painting-brush-popover input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 12px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  --range-fill: 50%;
}

.director-painting-brush-popover input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background:
    linear-gradient(90deg, rgba(194, 255, 55, 0.88) 0 var(--range-fill), rgba(178, 185, 177, 0.4) var(--range-fill) 100%);
  border: 0;
  border-radius: 10px;
  box-shadow:
    0 0 8px rgba(180, 255, 39, 0.14),
    0 1px 0 rgba(0, 0, 0, 0.9);
}

.director-painting-brush-popover input[type="range"]::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  appearance: none;
  background:
    radial-gradient(circle, #edf9bc 0 24%, #c9ff36 45%, rgba(177, 255, 30, 0.58) 70%, rgba(177, 255, 30, 0.12) 100%);
  border: 0;
  border-radius: 50%;
  box-shadow:
    0 0 8px rgba(201, 255, 43, 0.52),
    0 0 0 1px rgba(0, 0, 0, 0.38);
}

.director-painting-brush-popover input[type="range"]::-moz-range-track {
  height: 3px;
  background: rgba(180, 187, 179, 0.52);
  border: 1px solid rgba(210, 218, 207, 0.22);
  border-radius: 10px;
}

.director-painting-brush-popover input[type="range"]::-moz-range-progress {
  height: 3px;
  background: rgba(195, 255, 42, 0.96);
  border-radius: 10px;
}

.director-painting-brush-popover input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #c8ff2b;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(201, 255, 43, 0.78);
}

.director-painting-brush-type {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  grid-template-rows: 27px 1fr;
  align-self: start;
  gap: 5px 8px;
  min-width: 0;
  height: 109px;
  margin-top: 18px;
  margin-left: 0;
  padding: 8px 11px 10px 12px;
  background: transparent;
  border: 0;
}

.director-painting-brush-type strong {
  color: rgba(205, 213, 201, 0.72);
  font-size: 13px;
  font-weight: 560;
  line-height: 27px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.director-painting-brush-type > span {
  grid-column: 1 / -1;
  display: block;
  height: 63px;
  margin-top: -3px;
  background: none;
  filter: none;
}

.director-painting-brush-type button {
  grid-column: 2;
  grid-row: 1;
  width: 24px;
  min-width: 24px;
  height: 22px;
  padding: 0;
  color: rgba(207, 216, 205, 0.76);
  background: rgba(0, 0, 0, 0.18);
  border: 0;
  box-shadow: none;
}

.director-painting-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  padding: 18px 18px 14px 10px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(5, 12, 10, 0.88)),
    rgba(0, 0, 0, 0.18);
  border-left: 1px solid rgba(200, 255, 43, 0.18);
  overflow: hidden;
}

.director-painting-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 14px;
  color: rgba(232, 241, 222, 0.9);
  background:
    linear-gradient(135deg, transparent 0 18px, rgba(7, 12, 11, 0.92) 18px calc(100% - 18px), transparent calc(100% - 18px)),
    linear-gradient(180deg, rgba(18, 25, 23, 0.94), rgba(0, 5, 5, 0.96));
  border: 1px solid rgba(200, 255, 43, 0.24);
  border-radius: 0;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(200, 255, 43, 0.08);
  overflow: hidden;
}

.director-painting-panel::before,
.director-painting-panel::after {
  position: absolute;
  width: 23px;
  height: 23px;
  pointer-events: none;
  content: "";
}

.director-painting-panel::before {
  top: 5px;
  left: 5px;
  border-top: 1px solid var(--painting-hud);
  border-left: 1px solid var(--painting-hud);
}

.director-painting-panel::after {
  right: 5px;
  bottom: 5px;
  border-right: 1px solid var(--painting-hud);
  border-bottom: 1px solid var(--painting-hud);
}

.director-painting-panel header,
.director-painting-blend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.director-painting-panel header strong {
  color: rgba(232, 241, 222, 0.9);
  font-size: 15px;
  font-weight: 900;
}

.director-painting-color-panel {
  min-height: 244px;
}

.director-painting-color-panel header input {
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(200, 255, 43, 0.28);
  border-radius: 0;
}

.director-painting-color-wheel {
  position: relative;
  width: min(154px, calc(100% - 10px));
  aspect-ratio: 1;
  margin: 5px auto 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.84) 56% 64%, transparent 65%),
    conic-gradient(#ff2f3b, #f7ed2f, #35f250, #22e3d4, #2449ff, #d628ff, #ff2f3b);
  box-shadow:
    0 0 0 14px rgba(0, 0, 0, 0.32) inset,
    0 0 42px rgba(200, 255, 43, 0.2);
}

.director-painting-color-wheel::before,
.director-painting-color-wheel::after {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 255, 255, 0.25);
  content: "";
}

.director-painting-color-wheel::before {
  right: 7px;
  top: 45%;
}

.director-painting-color-wheel::after {
  left: 38px;
  bottom: 14px;
}

.director-painting-color-wheel span {
  position: absolute;
  inset: 34px;
  background: linear-gradient(135deg, #f9ffe8, var(--painting-accent, var(--painting-hud)) 58%, #050806 100%);
  clip-path: polygon(50% 0, 100% 82%, 0 82%);
  filter: drop-shadow(0 0 14px rgba(200, 255, 43, 0.22));
}

.director-painting-color-panel p {
  margin: 0 0 6px;
  color: rgba(229, 236, 222, 0.74);
  font-size: 12px;
  font-weight: 850;
}

.director-painting-swatches {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.director-painting-swatches button {
  height: 24px;
  background: var(--swatch);
  border: 1px solid rgba(200, 255, 43, 0.26);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.72) inset,
    0 0 12px color-mix(in srgb, var(--swatch) 48%, transparent);
}

.director-painting-swatches button:hover,
.director-painting-swatches button:focus-visible {
  outline: 1px solid var(--painting-hud);
  outline-offset: 2px;
}

.director-painting-layer-panel {
  display: flex;
  flex-direction: column;
}

.director-painting-layer-panel header button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
}

.director-painting-blend-row {
  margin: 7px 0 7px;
  padding-bottom: 7px;
  color: rgba(229, 236, 222, 0.72);
  font-size: 11px;
  font-weight: 850;
  border-bottom: 1px solid rgba(200, 255, 43, 0.12);
}

.director-painting-blend-row select {
  min-width: 104px;
  height: 28px;
  padding: 0 10px;
  color: rgba(232, 241, 222, 0.88);
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(200, 255, 43, 0.16);
  border-radius: 3px;
}

.director-painting-blend-row b {
  color: rgba(232, 241, 222, 0.86);
}

.director-painting-layers {
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px 3px 2px 0;
  overflow: auto;
  scrollbar-color: rgba(200, 255, 43, 0.44) rgba(0, 0, 0, 0.24);
}

.director-painting-layer {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 20px;
  grid-template-areas: "eye main actions";
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 2px 6px;
  color: rgba(232, 241, 222, 0.78);
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(200, 255, 43, 0.1);
  border-radius: 2px;
}

.director-painting-layer.is-active {
  color: #f8ffe8;
  background:
    linear-gradient(90deg, rgba(200, 255, 43, 0.18), rgba(200, 255, 43, 0.07) 72%, rgba(0, 0, 0, 0.22));
  border-color: rgba(200, 255, 43, 0.66);
  box-shadow:
    0 0 0 1px rgba(200, 255, 43, 0.12) inset,
    0 0 18px rgba(200, 255, 43, 0.16);
}

.director-painting-layer-eye {
  grid-area: eye;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 24px;
  padding: 0;
  color: rgba(215, 255, 93, 0.78);
  background: transparent;
  border: 0;
}

.director-painting-layer-eye.is-off {
  color: rgba(215, 255, 93, 0.28);
}

.director-painting-layer-select {
  grid-area: main;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.director-painting-layer-thumb {
  width: 36px;
  height: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.18)),
    var(--painting-scene);
  background-position: var(--painting-thumb-x, 50%) var(--painting-thumb-y, 50%);
  background-size: 220px auto;
  border: 1px solid rgba(200, 255, 43, 0.22);
  border-radius: 2px;
}

.director-painting-layer-info {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.director-painting-layer strong,
.director-painting-layer small,
.director-painting-layer [data-painting-layer-name],
.director-painting-layer-name-input {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-painting-layer strong {
  color: rgba(232, 241, 222, 0.92);
  font-size: 11px;
  font-weight: 850;
}

.director-painting-layer small {
  color: rgba(200, 255, 43, 0.52);
  font-size: 8px;
}

.director-painting-layer [data-painting-layer-name],
.director-painting-layer-name-input {
  height: 24px;
  color: #f5ffe0;
  background: rgba(0, 0, 0, 0.44);
  border: 1px solid rgba(200, 255, 43, 0.5);
  border-radius: 0;
}

.director-painting-layer-actions {
  grid-area: actions;
  display: grid;
  gap: 2px;
}

.director-painting-layer-actions button {
  width: 20px;
  height: 24px;
  padding: 0;
  color: rgba(232, 241, 222, 0.55);
  font-size: 13px;
  background: transparent;
  border: 0;
}

.director-painting-layer-actions button:hover,
.director-painting-layer-actions button:focus-visible {
  color: var(--painting-hud);
  outline: none;
}

.director-painting-layer-actions button:disabled {
  opacity: 0.24;
}

.director-painting-layer-actions [data-painting-layer-delete][aria-label="确认删除图层"] {
  width: 30px;
  color: #fff;
  background: rgba(255, 53, 93, 0.34);
  border: 1px solid rgba(255, 106, 139, 0.62);
}

.director-painting-layer-footer {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(200, 255, 43, 0.12);
}

.director-painting-layer-footer button {
  min-width: 0;
  height: 26px;
  padding: 0 3px;
  overflow: hidden;
  color: rgba(229, 236, 222, 0.62);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v66: source-asset fidelity pass for the three remaining coarse chrome regions. */
.director-painting-topbar {
  grid-template-columns: 402px minmax(260px, 1fr) 402px;
  height: 68px;
  padding: 0 28px;
  background: var(--painting-topbar-frame) center top / 100% 89px no-repeat;
  border-bottom: 0;
  box-shadow: none;
}

.director-painting-shell {
  grid-template-columns: 157px minmax(0, 1fr) 337px;
  height: calc(100% - 68px);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent 12% 78%, rgba(0, 0, 0, 0.64)),
    #020605;
}

.director-painting-board.is-painting-side-collapsed .director-painting-shell {
  grid-template-columns: 157px minmax(0, 1fr);
}

.director-painting-menu-bar {
  gap: 20px;
}

.director-painting-menu-bar button {
  width: 58px;
  height: 52px;
  padding: 0;
}

.director-painting-title {
  height: 58px;
}

.director-painting-title-underline {
  display: none;
}

.director-painting-top-actions {
  gap: 4px;
}

.director-painting-top-actions > button[data-painting-undo],
.director-painting-top-actions > button[data-painting-redo],
.director-painting-top-actions > button[data-painting-export],
.director-painting-top-actions > button[data-painting-command] {
  min-width: 56px;
  height: 52px;
}

.director-painting-topbar button,
.director-painting-topbar button span,
.director-painting-title {
  color: transparent !important;
  text-shadow: none !important;
}

.director-painting-topbar button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.director-painting-toolbar {
  position: relative;
  display: grid;
  grid-template-rows: repeat(16, 43px);
  gap: 0;
  padding: 90px 20px 70px 28px;
  background: var(--painting-toolbar-frame) center top / 100% 100% no-repeat;
  border-right: 0;
  box-shadow: none;
  overflow: hidden;
}

.director-painting-toolbar button {
  min-height: 43px;
  padding: 0;
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
}

.director-painting-toolbar button b,
.director-painting-toolbar button span {
  opacity: 0;
}

.director-painting-toolbar button.is-active::before,
.director-painting-toolbar button.is-active b {
  opacity: 0;
}

.director-painting-toolbar button:hover,
.director-painting-toolbar button:focus-visible {
  background: rgba(190, 255, 43, 0.05) !important;
  outline: 1px solid rgba(200, 255, 43, 0.12);
  outline-offset: -2px;
}

.director-painting-stage {
  padding: 0;
  place-items: start center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 12% 86%, rgba(0, 0, 0, 0.2)),
    var(--painting-scene) center center / cover no-repeat,
    #020605;
}

.director-painting-stage::before {
  display: none;
}

.director-painting-stage::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.36), transparent 12% 86%, rgba(0, 0, 0, 0.42)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 18% 76%, rgba(0, 0, 0, 0.32));
}

.director-painting-canvas {
  border: 0;
  border-color: rgba(200, 255, 43, 0.18);
  box-shadow:
    0 34px 95px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.director-painting-side {
  position: relative;
  display: grid;
  grid-template-rows: 347px minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  padding: 0;
  background: var(--painting-side-frame) center top / 100% 100% no-repeat;
  border-left: 0;
  overflow: hidden;
}

.director-painting-panel {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.director-painting-panel::before,
.director-painting-panel::after {
  display: none;
}

.director-painting-color-panel {
  min-height: 347px;
}

.director-painting-color-panel header,
.director-painting-color-wheel,
.director-painting-color-panel p,
.director-painting-swatches,
.director-painting-layer-panel header,
.director-painting-blend-row,
.director-painting-layers,
.director-painting-layer-footer {
  opacity: 0.001;
}

.director-painting-color-panel header,
.director-painting-color-wheel,
.director-painting-color-panel p,
.director-painting-swatches {
  pointer-events: auto;
}

.director-painting-color-panel header {
  height: 54px;
  padding: 24px 20px 0;
}

.director-painting-color-panel header input {
  margin-left: auto;
}

.director-painting-color-wheel {
  width: 236px;
  height: 236px;
  margin: 30px auto 0;
}

.director-painting-color-panel p {
  margin: 16px 0 0 34px;
}

.director-painting-swatches {
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin: 9px 32px 0;
}

.director-painting-swatches button {
  height: 31px;
}

.director-painting-layer-panel {
  min-height: 0;
  padding: 0;
}

.director-painting-layer-panel header {
  height: 55px;
  padding: 20px 28px 0;
}

.director-painting-blend-row {
  height: 46px;
  margin: 0;
  padding: 10px 28px 0;
  border: 0;
}

.director-painting-layers {
  gap: 3px;
  padding: 0 28px;
  overflow: hidden;
}

.director-painting-layer {
  min-height: 42px;
  padding: 2px 0;
}

.director-painting-layer-footer {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 12px 24px 0;
  padding: 0;
  border: 0;
}

.director-painting-layer-footer button {
  height: 42px;
}

@media (max-width: 1180px) {
  .director-painting-board {
    min-width: min(920px, calc(100vw - 20px));
  }

  .director-painting-topbar {
    grid-template-columns: minmax(230px, 0.7fr) minmax(180px, 260px) minmax(340px, 1fr);
    gap: 8px;
    padding-inline: 16px;
  }

  .director-painting-menu-bar {
    gap: 12px;
  }

  .director-painting-top-actions {
    gap: 5px;
  }

  .director-painting-save-state,
  .director-painting-mode {
    display: none;
  }

  .director-painting-shell {
    grid-template-columns: 118px minmax(0, 1fr) 292px;
  }

  .director-painting-board.is-painting-side-collapsed .director-painting-shell {
    grid-template-columns: 118px minmax(0, 1fr);
  }

  .director-painting-toolbar {
    padding-left: 14px;
  }

  .director-painting-toolbar button {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 40px;
    font-size: 12px;
  }

  .director-painting-toolbar button b {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .director-painting-brush-popover {
    grid-template-columns: 112px minmax(280px, 1fr) 190px;
    width: min(760px, calc(100% - 48px));
  }

  .director-painting-brush-size {
    width: 86px;
    height: 86px;
  }
}

@media (max-width: 860px) {
  .director-painting-board {
    width: calc(100vw - 20px);
    min-width: min(360px, calc(100vw - 20px));
    min-height: min(720px, calc(100dvh - 20px));
  }

  .director-painting-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    height: 56px;
  }

  .director-painting-menu-bar {
    display: none;
  }

  .director-painting-title-wrap {
    justify-content: flex-start;
  }

  .director-painting-title {
    text-align: left;
  }

  .director-painting-top-actions {
    max-width: 46vw;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .director-painting-top-actions::-webkit-scrollbar {
    display: none;
  }

  .director-painting-shell {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 250px;
  }

  .director-painting-board.is-painting-side-collapsed .director-painting-shell {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .director-painting-toolbar {
    padding: 12px 6px;
  }

  .director-painting-toolbar button {
    grid-template-columns: 1fr;
    min-height: 38px;
    padding: 0;
  }

  .director-painting-toolbar button span {
    display: none;
  }

  .director-painting-side {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(210px, 0.9fr) minmax(260px, 1.1fr);
    grid-template-rows: minmax(0, 1fr);
    overflow-x: auto;
    border-top: 1px solid rgba(200, 255, 43, 0.18);
    border-left: 0;
  }

  .director-painting-stage {
    padding-bottom: 132px;
  }

  .director-painting-brush-popover {
    grid-template-columns: 72px minmax(0, 1fr);
    width: min(520px, calc(100% - 24px));
    min-height: 106px;
    padding: 12px;
  }

  .director-painting-brush-size {
    width: 64px;
    height: 64px;
  }

  .director-painting-slider-grid {
    gap: 8px 12px;
  }

  .director-painting-brush-type {
    display: none;
  }
}

/* v68: real floating painting palettes, not screenshot-backed panels. */
.director-painting-board {
  background:
    linear-gradient(135deg, transparent 0 16px, rgba(16, 22, 20, 0.98) 16px calc(100% - 16px), transparent calc(100% - 16px)),
    linear-gradient(180deg, #0b100f, #010303 62%, #000);
}

.director-painting-topbar {
  background:
    linear-gradient(135deg, transparent 0 16px, rgba(10, 15, 14, 0.98) 16px calc(100% - 16px), transparent calc(100% - 16px)),
    linear-gradient(180deg, rgba(19, 26, 24, 0.98), rgba(3, 7, 6, 0.98));
  border-bottom: 1px solid rgba(196, 255, 45, 0.2);
}

.director-painting-topbar button,
.director-painting-topbar button span,
.director-painting-title {
  color: rgba(224, 232, 218, 0.86) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82) !important;
}

.director-painting-topbar button {
  background: rgba(0, 0, 0, 0.18) !important;
  border: 1px solid rgba(200, 255, 43, 0.12) !important;
  box-shadow: none !important;
}

.director-painting-shell {
  position: relative;
  display: block;
  height: calc(100% - 68px);
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 12%, rgba(180, 255, 70, 0.08), transparent 34%),
    linear-gradient(180deg, #07100d, #020504 62%, #000);
}

.director-painting-board.is-painting-side-collapsed .director-painting-shell {
  display: block;
}

.director-painting-stage {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 72px 28px 190px;
  place-items: center;
  overflow: auto;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 16% 84%, rgba(0, 0, 0, 0.42)),
    radial-gradient(circle at 52% 22%, rgba(184, 255, 82, 0.09), transparent 32%),
    linear-gradient(180deg, #08110f, #030605 60%, #000);
}

.director-painting-stage::before {
  display: block;
  z-index: 0;
  background:
    linear-gradient(rgba(200, 255, 43, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 255, 43, 0.026) 1px, transparent 1px);
  background-size: 72px 72px;
}

.director-painting-stage::after {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.26), transparent 14% 86%, rgba(0, 0, 0, 0.28)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 20% 78%, rgba(0, 0, 0, 0.24));
}

.director-painting-canvas {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(18, 25, 22, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(18, 25, 22, 0.035) 1px, transparent 1px),
    #f5f2e8;
  background-size: 80px 80px;
  border: 1px solid rgba(200, 255, 43, 0.18);
  box-shadow:
    0 30px 88px rgba(0, 0, 0, 0.54),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.director-painting-side {
  position: static;
  display: block;
  min-height: 0;
  height: 0;
  padding: 0;
  background: transparent !important;
  border: 0;
  overflow: visible;
}

.director-painting-board.is-painting-side-collapsed .director-painting-side {
  display: none;
}

.director-painting-palette {
  position: absolute;
  z-index: 8;
  color: rgba(225, 233, 219, 0.88);
  background:
    linear-gradient(135deg, transparent 0 13px, rgba(9, 15, 14, 0.95) 13px calc(100% - 13px), transparent calc(100% - 13px)),
    linear-gradient(180deg, rgba(19, 26, 24, 0.96), rgba(4, 8, 7, 0.96));
  border: 1px solid rgba(200, 255, 43, 0.2);
  border-radius: 0;
  box-shadow:
    0 28px 88px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 28px rgba(175, 255, 32, 0.07);
  backdrop-filter: blur(16px);
}

.director-painting-palette.is-dragging {
  z-index: 12;
  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(200, 255, 43, 0.42) inset,
    0 0 36px rgba(190, 255, 43, 0.16);
}

.director-painting-palette-head,
.director-painting-panel > header[data-painting-floating-handle] {
  min-height: 38px;
  cursor: grab;
  user-select: none;
}

.director-painting-palette-head:active,
.director-painting-panel > header[data-painting-floating-handle]:active {
  cursor: grabbing;
}

.director-painting-palette-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(200, 255, 43, 0.12);
}

.director-painting-palette-head strong,
.director-painting-panel header strong {
  color: rgba(231, 239, 224, 0.9);
  font-size: 14px;
  font-weight: 850;
}

.director-painting-drag-label,
.director-painting-palette-head span {
  margin-left: auto;
  color: rgba(200, 255, 43, 0.38);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.director-painting-tool-window {
  left: 24px;
  top: 88px;
  width: 152px;
  max-height: calc(100% - 118px);
  padding: 0 10px 12px;
}

.director-painting-toolbar {
  position: relative;
  display: grid;
  grid-auto-rows: 42px;
  gap: 0;
  padding: 9px 0 0;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  overflow: auto;
  scrollbar-width: none;
}

.director-painting-toolbar::-webkit-scrollbar {
  display: none;
}

.director-painting-toolbar button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 6px 0 0;
  color: rgba(220, 229, 214, 0.7);
  background: transparent !important;
  border: 0;
  border-bottom: 1px solid rgba(200, 255, 43, 0.07);
  box-shadow: none !important;
}

.director-painting-toolbar button b,
.director-painting-toolbar button span {
  opacity: 1;
}

.director-painting-toolbar button b {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: rgba(232, 241, 222, 0.84);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid transparent;
}

.director-painting-toolbar button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-painting-toolbar button.is-active {
  color: var(--painting-hud);
  background: rgba(200, 255, 43, 0.13) !important;
  outline: 1px solid rgba(200, 255, 43, 0.45);
  outline-offset: -1px;
}

.director-painting-toolbar button.is-active::before {
  display: none;
}

.director-painting-toolbar button.is-active b {
  opacity: 1;
  color: #071006;
  background: linear-gradient(135deg, #f4ffb1, var(--painting-hud) 54%, #8fe900);
}

.director-painting-toolbar button:hover,
.director-painting-toolbar button:focus-visible {
  background: rgba(200, 255, 43, 0.07) !important;
  outline: 1px solid rgba(200, 255, 43, 0.2);
  outline-offset: -1px;
}

.director-painting-color-window {
  top: 88px;
  right: 24px;
  width: 306px;
  min-height: 332px;
}

.director-painting-layer-window {
  top: 456px;
  right: 24px;
  bottom: 24px;
  width: 306px;
  display: flex;
  flex-direction: column;
}

.director-painting-panel {
  min-width: 0;
  padding: 0 14px 14px;
  background:
    linear-gradient(180deg, rgba(18, 25, 23, 0.88), rgba(5, 10, 9, 0.9)) !important;
  border: 1px solid rgba(200, 255, 43, 0.2);
  box-shadow:
    0 28px 88px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}

.director-painting-panel::before,
.director-painting-panel::after {
  display: none;
}

.director-painting-color-panel header,
.director-painting-color-wheel,
.director-painting-color-panel p,
.director-painting-swatches,
.director-painting-layer-panel header,
.director-painting-blend-row,
.director-painting-layers,
.director-painting-layer-footer {
  opacity: 1;
  pointer-events: auto;
}

.director-painting-panel header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0;
}

.director-painting-color-panel header input {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-left: 0;
  padding: 1px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(200, 255, 43, 0.18);
}

.director-painting-color-wheel {
  width: 212px;
  height: 212px;
  margin: 10px auto 0;
  background: conic-gradient(#f43, #ffeb3b, #36f261, #26dbff, #2347ff, #c12cff, #f43);
  box-shadow:
    0 0 0 18px rgba(0, 0, 0, 0.28) inset,
    0 0 30px rgba(0, 0, 0, 0.28);
}

.director-painting-color-wheel span {
  inset: 34px;
  background: linear-gradient(135deg, #ffffff, #60c7b9 54%, #06100e 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.director-painting-color-panel p {
  margin: 12px 0 0;
  color: rgba(221, 231, 215, 0.66);
  font-size: 12px;
}

.director-painting-swatches {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
}

.director-painting-swatches button {
  height: 31px;
  border: 1px solid rgba(200, 255, 43, 0.14);
  border-radius: 3px;
}

.director-painting-blend-row {
  height: 38px;
  margin: 0;
  padding: 0 0 8px;
  color: rgba(221, 231, 215, 0.66);
  border-bottom: 1px solid rgba(200, 255, 43, 0.12);
}

.director-painting-blend-row select,
.director-painting-blend-row b {
  color: rgba(234, 240, 226, 0.88);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(200, 255, 43, 0.12);
  border-radius: 3px;
}

.director-painting-layers {
  flex: 1 1 auto;
  gap: 5px;
  padding: 8px 0 0;
  overflow: auto;
}

.director-painting-layer {
  grid-template-columns: 22px minmax(0, 1fr) 24px;
  grid-template-areas: "eye main actions";
  min-height: 45px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(200, 255, 43, 0.06);
  border-radius: 2px;
}

.director-painting-layer.is-active {
  background: linear-gradient(90deg, rgba(200, 255, 43, 0.22), rgba(200, 255, 43, 0.07));
  border-color: rgba(200, 255, 43, 0.46);
}

.director-painting-layer-select {
  grid-template-columns: 42px minmax(0, 1fr);
}

.director-painting-layer-thumb {
  width: 42px;
  height: 30px;
  background:
    linear-gradient(90deg, rgba(18, 25, 22, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(18, 25, 22, 0.08) 1px, transparent 1px),
    #f5f2e8;
  background-size: 10px 10px;
}

.director-painting-layer-actions {
  grid-area: actions;
}

.director-painting-layer-footer {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(200, 255, 43, 0.12);
}

.director-painting-layer-footer button {
  height: 34px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: rgba(226, 234, 219, 0.68);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(200, 255, 43, 0.12);
}

.director-painting-brush-popover {
  background:
    linear-gradient(135deg, transparent 0 14px, rgba(10, 15, 14, 0.93) 14px calc(100% - 14px), transparent calc(100% - 14px)),
    linear-gradient(180deg, rgba(22, 30, 27, 0.94), rgba(4, 8, 7, 0.94));
  border: 1px solid rgba(200, 255, 43, 0.2);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

/* v68 detail pass: CSS-built mechanical frames for the real function windows. */
.director-painting-topbar::before,
.director-painting-topbar::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.director-painting-topbar::before {
  inset: 6px 10px auto;
  height: 15px;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(200, 255, 43, 0.28) 8% 10%, transparent 10% 42%, rgba(200, 255, 43, 0.18) 42% 44%, transparent 44% 56%, rgba(200, 255, 43, 0.18) 56% 58%, transparent 58% 90%, rgba(200, 255, 43, 0.28) 90% 92%, transparent 92%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 16% 84%, rgba(255, 255, 255, 0.08));
  opacity: 0.56;
}

.director-painting-topbar::after {
  left: 50%;
  bottom: 0;
  width: min(310px, 28vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 255, 43, 0.74), transparent);
  box-shadow: 0 0 18px rgba(200, 255, 43, 0.56);
  transform: translateX(-50%);
}

.director-painting-menu-bar button {
  position: relative;
}

.director-painting-menu-bar button::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  height: 1px;
  background: rgba(200, 255, 43, 0.32);
  opacity: 0;
  transition: opacity 0.14s ease;
}

.director-painting-menu-bar button:hover::after,
.director-painting-menu-bar button:focus-visible::after {
  opacity: 1;
}

.director-painting-palette,
.director-painting-brush-popover {
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  isolation: isolate;
}

.director-painting-palette::before,
.director-painting-palette::after,
.director-painting-brush-popover::before,
.director-painting-brush-popover::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.director-painting-palette::before,
.director-painting-brush-popover::before {
  inset: 5px;
  z-index: 0;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  border: 1px solid rgba(200, 255, 43, 0.16);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 0 22px rgba(200, 255, 43, 0.05) inset;
}

.director-painting-palette::after,
.director-painting-brush-popover::after {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(200, 255, 43, 0.58) 0 16px, transparent 16px calc(100% - 16px), rgba(200, 255, 43, 0.5) calc(100% - 16px) 100%) top / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(200, 255, 43, 0.42) 0 22px, transparent 22px calc(100% - 22px), rgba(200, 255, 43, 0.42) calc(100% - 22px) 100%) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(200, 255, 43, 0.48) 0 18px, transparent 18px calc(100% - 18px), rgba(200, 255, 43, 0.48) calc(100% - 18px) 100%) left / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(200, 255, 43, 0.48) 0 18px, transparent 18px calc(100% - 18px), rgba(200, 255, 43, 0.48) calc(100% - 18px) 100%) right / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(200, 255, 43, 0.035) 10px 11px);
  opacity: 0.78;
}

.director-painting-palette > *,
.director-painting-brush-popover > * {
  position: relative;
  z-index: 1;
}

.director-painting-palette-head,
.director-painting-panel > header[data-painting-floating-handle] {
  border-bottom: 1px solid rgba(200, 255, 43, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;
}

.director-painting-palette-head::before,
.director-painting-panel > header[data-painting-floating-handle]::before {
  content: "";
  width: 20px;
  height: 2px;
  margin-right: 2px;
  background: rgba(200, 255, 43, 0.72);
  box-shadow: 0 0 10px rgba(200, 255, 43, 0.65);
}

.director-painting-toolbar button b {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 8px 16px rgba(0, 0, 0, 0.22);
}

.director-painting-toolbar button.is-active {
  box-shadow:
    0 0 22px rgba(200, 255, 43, 0.18) inset,
    0 0 18px rgba(200, 255, 43, 0.18) !important;
}

.director-painting-color-panel,
.director-painting-layer-panel {
  background:
    radial-gradient(circle at 82% 10%, rgba(200, 255, 43, 0.06), transparent 27%),
    linear-gradient(180deg, rgba(20, 28, 25, 0.94), rgba(5, 10, 9, 0.94)) !important;
}

.director-painting-color-wheel {
  filter: saturate(1.08) contrast(1.04);
}

.director-painting-color-wheel::after {
  content: "";
  position: absolute;
  left: 38px;
  bottom: 14px;
  width: 15px;
  height: 15px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 50%;
  clip-path: none;
  pointer-events: none;
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 255, 255, 0.25);
  filter: none;
}

.director-painting-layer {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 -1px 0 rgba(0, 0, 0, 0.32) inset;
}

.director-painting-layer-footer button {
  font-size: 10px;
  font-weight: 800;
}

.director-painting-brush-type > span {
  position: relative;
  height: 63px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 26% 58%, rgba(255, 255, 255, 0.94) 0 6%, rgba(255, 255, 255, 0.68) 16%, transparent 36%),
    radial-gradient(ellipse at 52% 48%, rgba(255, 255, 255, 0.85) 0 7%, rgba(255, 255, 255, 0.44) 20%, transparent 44%),
    radial-gradient(ellipse at 73% 42%, rgba(255, 255, 255, 0.58) 0 5%, rgba(255, 255, 255, 0.26) 18%, transparent 38%);
  filter: none;
}

.director-painting-brush-type > span::before,
.director-painting-brush-type > span::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 8%;
  top: 25px;
  height: 23px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 22% 48%, rgba(255, 255, 255, 0.98) 0 10%, rgba(255, 255, 255, 0.44) 33%, transparent 58%),
    radial-gradient(ellipse at 56% 46%, rgba(255, 255, 255, 0.78) 0 9%, rgba(255, 255, 255, 0.32) 31%, transparent 62%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.44) 18%, rgba(255, 255, 255, 0.74) 44%, rgba(255, 255, 255, 0.32) 74%, transparent);
  filter: blur(0.8px);
  transform: rotate(-8deg);
}

.director-painting-brush-type > span::after {
  left: 19%;
  right: 18%;
  top: 17px;
  height: 12px;
  opacity: 0.5;
  transform: rotate(-10deg);
}

/* v69: stricter reference-HUD proportions while keeping every panel functional DOM. */
.director-painting-board {
  --painting-metal-0: #020505;
  --painting-metal-1: #090f0e;
  --painting-metal-2: #121917;
  --painting-metal-line: rgba(91, 110, 93, 0.36);
  --painting-lime-hot: #c8ff2b;
  --painting-lime-dim: rgba(136, 222, 23, 0.54);
  background:
    linear-gradient(135deg, transparent 0 16px, rgba(18, 24, 22, 0.98) 16px calc(100% - 16px), transparent calc(100% - 16px)),
    linear-gradient(90deg, rgba(166, 255, 26, 0.22), transparent 8% 92%, rgba(166, 255, 26, 0.24)),
    linear-gradient(180deg, #0b100f, #010303 62%, #000);
  box-shadow:
    0 44px 130px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(196, 255, 42, 0.34) inset,
    0 0 0 5px rgba(0, 0, 0, 0.68) inset;
}

.director-painting-board::before {
  opacity: 0.92;
  background:
    linear-gradient(90deg, rgba(200, 255, 43, 0.8) 0 26px, transparent 26px calc(100% - 26px), rgba(200, 255, 43, 0.7) calc(100% - 26px) 100%) top / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(200, 255, 43, 0.58) 0 34px, transparent 34px calc(100% - 34px), rgba(200, 255, 43, 0.58) calc(100% - 34px) 100%) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(200, 255, 43, 0.64) 0 34px, transparent 34px calc(100% - 34px), rgba(200, 255, 43, 0.64) calc(100% - 34px) 100%) left / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(200, 255, 43, 0.64) 0 34px, transparent 34px calc(100% - 34px), rgba(200, 255, 43, 0.64) calc(100% - 34px) 100%) right / 2px 100% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 255, 255, 0.025) 42px 43px);
}

.director-painting-topbar {
  grid-template-columns: 438px minmax(260px, 1fr) 440px;
  height: 68px;
  padding: 0 18px 0 52px;
  background:
    linear-gradient(135deg, transparent 0 17px, rgba(10, 14, 13, 0.98) 17px calc(100% - 17px), transparent calc(100% - 17px)),
    linear-gradient(180deg, rgba(18, 24, 22, 0.98), rgba(3, 7, 7, 0.98));
  border-bottom-color: rgba(185, 255, 39, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(0, 0, 0, 0.72) inset,
    0 18px 38px rgba(0, 0, 0, 0.46);
}

.director-painting-topbar::before {
  inset: 4px 24px auto;
  height: 22px;
  background:
    linear-gradient(90deg, rgba(200, 255, 43, 0.58) 0 14px, transparent 14px 23%, rgba(200, 255, 43, 0.2) 23% 24%, transparent 24% 47%, rgba(200, 255, 43, 0.16) 47% 53%, transparent 53% 76%, rgba(200, 255, 43, 0.2) 76% 77%, transparent 77% calc(100% - 14px), rgba(200, 255, 43, 0.58) calc(100% - 14px)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 58px);
  opacity: 0.42;
}

.director-painting-title-wrap {
  justify-self: center;
  width: min(390px, 100%);
  height: 100%;
  background:
    linear-gradient(135deg, transparent 0 20px, rgba(6, 10, 10, 0.4) 20px calc(100% - 20px), transparent calc(100% - 20px));
}

.director-painting-title {
  height: 44px;
  font-size: 18px;
  font-weight: 900;
}

.director-painting-title-underline {
  bottom: 10px;
  width: 156px;
  height: 2px;
}

.director-painting-menu-bar {
  gap: 34px;
}

.director-painting-menu-bar button {
  height: 42px;
  padding: 0;
  color: rgba(220, 229, 215, 0.78) !important;
  font-size: 15px;
  font-weight: 780;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.director-painting-top-actions {
  gap: 0;
  justify-content: flex-end;
}

.director-painting-save-state,
.director-painting-mode,
.director-painting-top-actions > span[data-painting-zoom-value],
.director-painting-top-actions > button[data-painting-zoom-out],
.director-painting-top-actions > button[data-painting-zoom-in],
.director-painting-top-actions > button[data-painting-clear] {
  display: none !important;
}

.director-painting-top-actions > button[data-painting-undo],
.director-painting-top-actions > button[data-painting-redo],
.director-painting-top-actions > button[data-painting-export],
.director-painting-top-actions > button[data-painting-command],
.director-painting-top-actions > button[data-painting-top-close] {
  position: relative;
  width: auto;
  min-width: 70px;
  height: 48px;
  padding: 0 16px;
  color: rgba(225, 233, 222, 0.78) !important;
  font-size: 15px;
  font-weight: 820;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid rgba(90, 102, 96, 0.25) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.director-painting-top-actions > button[data-painting-undo] {
  border-left: 0 !important;
}

.director-painting-top-actions > button[data-painting-command],
.director-painting-top-actions > button[data-painting-top-close] {
  min-width: 48px;
  padding: 0;
  font-size: 21px;
}

.director-painting-top-actions > button[data-painting-top-close] {
  color: rgba(229, 238, 226, 0.92) !important;
  border-right: 1px solid rgba(90, 102, 96, 0.25) !important;
}

.director-painting-top-actions > button:hover,
.director-painting-top-actions > button:focus-visible {
  color: var(--painting-lime-hot) !important;
  background: rgba(200, 255, 43, 0.065) !important;
  outline: 1px solid rgba(200, 255, 43, 0.22);
  outline-offset: -1px;
}

.director-painting-shell {
  height: calc(100% - 68px);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent 12% 88%, rgba(0, 0, 0, 0.78)),
    radial-gradient(circle at 50% 7%, rgba(200, 255, 43, 0.07), transparent 28%),
    linear-gradient(180deg, #07100d, #020504 66%, #000);
}

.director-painting-stage {
  padding: 72px 96px 190px 96px;
}

.director-painting-canvas {
  box-shadow:
    0 30px 92px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(200, 255, 43, 0.12),
    0 0 0 22px rgba(0, 0, 0, 0.12);
}

.director-painting-tool-window {
  left: 28px;
  top: 16px;
  width: 150px;
  height: calc(100% - 34px);
  max-height: none;
  padding: 0 10px 14px;
}

.director-painting-tool-window::after {
  background:
    linear-gradient(90deg, transparent 0 32%, rgba(200, 255, 43, 0.72) 32% 68%, transparent 68%) top 12px center / 80px 2px no-repeat,
    linear-gradient(90deg, transparent 0 35%, rgba(200, 255, 43, 0.65) 35% 65%, transparent 65%) bottom 14px center / 72px 2px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 12px, rgba(200, 255, 43, 0.04) 12px 13px);
  opacity: 0.95;
}

.director-painting-palette-head {
  min-height: 30px;
  padding: 0 10px;
}

.director-painting-palette-head strong,
.director-painting-panel header strong {
  font-size: 15px;
}

.director-painting-tool-window .director-painting-palette-head strong {
  opacity: 0.82;
}

.director-painting-drag-label,
.director-painting-palette-head span {
  font-size: 10px;
  color: rgba(200, 255, 43, 0.55);
}

.director-painting-toolbar {
  grid-auto-rows: 42px;
  padding-top: 1px;
}

.director-painting-toolbar button {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 42px;
  padding-right: 7px;
  color: rgba(215, 223, 213, 0.72);
  font-size: 13px;
  font-weight: 760;
}

.director-painting-toolbar button b {
  width: 30px;
  height: 30px;
  font-size: 18px;
  color: rgba(232, 239, 230, 0.82);
  background: rgba(0, 0, 0, 0.18);
}

.director-painting-toolbar button.is-active {
  color: var(--painting-lime-hot);
  background:
    linear-gradient(90deg, rgba(200, 255, 43, 0.24), rgba(200, 255, 43, 0.08)) !important;
}

.director-painting-color-window {
  top: 16px;
  right: 24px;
  width: 304px;
  min-height: 348px;
  padding-bottom: 16px;
}

.director-painting-layer-window {
  top: 374px;
  right: 24px;
  bottom: 24px;
  width: 304px;
}

.director-painting-color-panel,
.director-painting-layer-panel {
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.035), transparent 18%),
    radial-gradient(circle at 86% 8%, rgba(200, 255, 43, 0.075), transparent 26%),
    linear-gradient(180deg, rgba(18, 25, 23, 0.97), rgba(4, 8, 7, 0.96)) !important;
  box-shadow:
    0 28px 82px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 26px rgba(200, 255, 43, 0.09);
}

.director-painting-color-panel header,
.director-painting-layer-panel header {
  height: 48px;
  padding-inline: 4px;
}

.director-painting-color-panel header input {
  width: 28px;
  height: 28px;
  box-shadow: 0 0 14px rgba(200, 255, 43, 0.16);
}

.director-painting-color-wheel {
  width: 220px;
  height: 220px;
  margin-top: 10px;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.78) 53% 63%, transparent 64%),
    conic-gradient(#ff243a, #ffed32, #39f75b, #22e8d6, #2448ff, #c927ff, #ff243a);
  box-shadow:
    0 0 0 18px rgba(0, 0, 0, 0.32) inset,
    0 0 34px rgba(0, 0, 0, 0.42);
}

.director-painting-color-wheel span {
  inset: 42px;
  clip-path: polygon(50% 0, 100% 82%, 0 82%);
  background: linear-gradient(135deg, #f7fff4, #78d5cd 50%, #0a8b75 72%, #06100d 100%);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.38));
}

.director-painting-color-wheel::before {
  right: 8px;
  top: 44%;
}

.director-painting-color-wheel::after {
  left: 45px;
  bottom: 18px;
}

.director-painting-swatches {
  gap: 8px;
  margin-top: 9px;
}

.director-painting-swatches button {
  height: 32px;
  border-color: rgba(200, 255, 43, 0.18);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.24) inset;
}

.director-painting-blend-row {
  height: 44px;
  align-items: center;
}

.director-painting-layers {
  gap: 6px;
  padding-top: 9px;
}

.director-painting-layer {
  min-height: 47px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.026);
  border-color: rgba(160, 178, 158, 0.09);
}

.director-painting-layer.is-active {
  background: linear-gradient(90deg, rgba(200, 255, 43, 0.21), rgba(200, 255, 43, 0.065));
  border-color: rgba(200, 255, 43, 0.54);
  box-shadow:
    0 0 20px rgba(200, 255, 43, 0.16) inset,
    0 0 18px rgba(200, 255, 43, 0.1);
}

.director-painting-layer-select {
  grid-template-columns: 48px minmax(0, 1fr);
}

.director-painting-layer-thumb {
  width: 48px;
  height: 32px;
  border-color: rgba(200, 255, 43, 0.14);
}

.director-painting-layer strong {
  font-size: 12px;
  font-weight: 760;
}

.director-painting-layer small {
  font-size: 9px;
  color: rgba(200, 255, 43, 0.72);
}

.director-painting-layer-footer {
  gap: 7px;
  padding-top: 11px;
}

.director-painting-layer-footer button {
  height: 38px;
  color: rgba(219, 227, 215, 0.72);
  font-size: 10px;
}

.director-painting-brush-popover {
  width: min(964px, calc(100% - 76px));
  height: 156px;
  min-height: 156px;
  bottom: 26px;
  padding: 0 28px 0 34px;
  transform: translateX(calc(-50% - 118px));
  background:
    linear-gradient(135deg, transparent 0 17px, rgba(10, 15, 14, 0.96) 17px calc(100% - 17px), transparent calc(100% - 17px)),
    radial-gradient(circle at 12% 50%, rgba(200, 255, 43, 0.1), transparent 16%),
    linear-gradient(180deg, rgba(22, 30, 28, 0.96), rgba(3, 7, 7, 0.96));
  border-color: rgba(200, 255, 43, 0.24);
}

.director-painting-brush-size {
  width: 116px;
  height: 116px;
  box-shadow:
    0 0 0 2px rgba(200, 255, 43, 0.22),
    0 0 26px rgba(200, 255, 43, 0.2),
    0 18px 34px rgba(0, 0, 0, 0.38) inset;
}

.director-painting-brush-size::before {
  inset: 15px;
}

.director-painting-brush-size::after {
  inset: 29px;
}

.director-painting-slider-grid {
  gap: 19px 32px;
}

.director-painting-slider-grid label {
  font-size: 12px;
}

.director-painting-brush-type {
  height: 110px;
  margin-top: 17px;
  padding: 8px 12px 10px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(200, 255, 43, 0.1);
  border-radius: 5px;
}

.director-painting-brush-type > span::before {
  top: 26px;
  height: 21px;
}

.director-painting-brush-type > span::after {
  top: 19px;
}

@media (max-width: 1180px) {
  .director-painting-topbar {
    grid-template-columns: minmax(260px, 0.8fr) minmax(200px, 1fr) minmax(260px, 0.8fr);
    padding-left: 24px;
  }

  .director-painting-stage {
    padding-inline: 72px;
  }

  .director-painting-brush-popover {
    transform: translateX(-50%);
  }
}

/* v70 shell pass: reference-like top HUD, title plate, close corner, and blank-canvas frame. */
body.director-painting-board-open {
  overflow: hidden;
}

.director-painting-board {
  --painting-metal-edge: rgba(83, 96, 88, 0.46);
  --painting-metal-glint: rgba(235, 255, 215, 0.1);
  --painting-shell-shadow: rgba(0, 0, 0, 0.88);
  width: min(1684px, calc(100vw - 4px));
  min-width: min(1160px, calc(100vw - 4px));
  min-height: min(850px, calc(100dvh - 4px));
  background:
    linear-gradient(135deg, transparent 0 18px, rgba(19, 25, 23, 0.96) 18px calc(100% - 18px), transparent calc(100% - 18px)),
    linear-gradient(90deg, rgba(192, 255, 40, 0.2), transparent 5% 95%, rgba(192, 255, 40, 0.2)),
    linear-gradient(180deg, #111715 0, #050908 55%, #000 100%);
  border-color: rgba(189, 255, 33, 0.34);
  box-shadow:
    0 42px 150px rgba(0, 0, 0, 0.86),
    0 0 0 1px rgba(215, 255, 74, 0.28) inset,
    0 0 0 7px rgba(0, 0, 0, 0.52) inset,
    0 0 64px rgba(148, 255, 0, 0.1);
}

.director-painting-board::before {
  opacity: 1;
  background:
    linear-gradient(90deg, transparent 0 34px, var(--painting-lime-hot) 34px 62px, transparent 62px calc(100% - 62px), var(--painting-lime-hot) calc(100% - 62px) calc(100% - 34px), transparent calc(100% - 34px)) top / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 86px, rgba(200, 255, 43, 0.7) 86px 116px, transparent 116px calc(100% - 116px), rgba(200, 255, 43, 0.7) calc(100% - 116px) calc(100% - 86px), transparent calc(100% - 86px)) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, transparent 0 34px, rgba(200, 255, 43, 0.66) 34px 62px, transparent 62px calc(100% - 62px), rgba(200, 255, 43, 0.66) calc(100% - 62px) calc(100% - 34px), transparent calc(100% - 34px)) left / 2px 100% no-repeat,
    linear-gradient(180deg, transparent 0 34px, rgba(200, 255, 43, 0.66) 34px 62px, transparent 62px calc(100% - 62px), rgba(200, 255, 43, 0.66) calc(100% - 62px) calc(100% - 34px), transparent calc(100% - 34px)) right / 2px 100% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(255, 255, 255, 0.028) 58px 59px, transparent 59px 188px);
}

.director-painting-board::after {
  inset: 69px 9px 9px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62), transparent 11% 88%, rgba(0, 0, 0, 0.68)),
    linear-gradient(180deg, rgba(215, 255, 80, 0.05), transparent 18% 72%, rgba(0, 0, 0, 0.58));
  mix-blend-mode: normal;
}

.director-painting-topbar {
  grid-template-columns: 470px minmax(360px, 1fr) 470px;
  gap: 0;
  height: 70px;
  padding: 0 18px 0 52px;
  background:
    linear-gradient(135deg, transparent 0 18px, rgba(14, 18, 17, 0.98) 18px calc(100% - 18px), transparent calc(100% - 18px)),
    linear-gradient(90deg, rgba(200, 255, 43, 0.08), transparent 18% 82%, rgba(200, 255, 43, 0.08)),
    linear-gradient(180deg, #151a18 0, #070b0a 52%, #020303 100%);
  border-bottom: 1px solid rgba(163, 255, 24, 0.28);
  box-shadow:
    0 1px 0 var(--painting-metal-glint) inset,
    0 -1px 0 rgba(0, 0, 0, 0.88) inset,
    0 21px 40px rgba(0, 0, 0, 0.62);
}

.director-painting-topbar::before {
  inset: 4px 26px auto;
  z-index: 0;
  height: 28px;
  background:
    linear-gradient(90deg, rgba(200, 255, 43, 0.72) 0 13px, transparent 13px 29%, rgba(72, 83, 74, 0.42) 29% 30%, transparent 30% 45%, rgba(200, 255, 43, 0.2) 45% 47%, transparent 47% 53%, rgba(200, 255, 43, 0.2) 53% 55%, transparent 55% 70%, rgba(72, 83, 74, 0.42) 70% 71%, transparent 71% calc(100% - 13px), rgba(200, 255, 43, 0.72) calc(100% - 13px)),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(255, 255, 255, 0.05) 52px 53px, transparent 53px 128px);
  opacity: 0.6;
}

.director-painting-topbar::after {
  bottom: 9px;
  z-index: 0;
  width: min(520px, 31vw);
  height: 1px;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(84, 94, 86, 0.7) 9% 27%, transparent 27% 38%, rgba(200, 255, 43, 0.88) 38% 62%, transparent 62% 73%, rgba(84, 94, 86, 0.7) 73% 91%, transparent 91%);
  box-shadow: 0 0 18px rgba(200, 255, 43, 0.46);
}

.director-painting-menu-bar,
.director-painting-title-wrap,
.director-painting-top-actions {
  position: relative;
  z-index: 1;
  height: 100%;
}

.director-painting-menu-bar::before,
.director-painting-title-wrap::before,
.director-painting-top-actions::before {
  position: absolute;
  inset: 9px 0 8px;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 48%, rgba(0, 0, 0, 0.38)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 18% 82%, rgba(255, 255, 255, 0.025)),
    rgba(3, 7, 7, 0.42);
  border-top: 1px solid rgba(91, 103, 94, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.88);
}

.director-painting-menu-bar::before {
  right: 24px;
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 100%, 0 100%);
}

.director-painting-title-wrap::before {
  inset-inline: 34px;
  clip-path: polygon(44px 0, calc(100% - 44px) 0, 100% 50%, calc(100% - 44px) 100%, 44px 100%, 0 50%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%, rgba(0, 0, 0, 0.48)),
    linear-gradient(90deg, transparent 0 15%, rgba(200, 255, 43, 0.08) 48% 52%, transparent 85%),
    rgba(4, 8, 8, 0.62);
  border-inline: 1px solid rgba(91, 103, 94, 0.36);
}

.director-painting-top-actions::before {
  left: 22px;
  clip-path: polygon(34px 0, 100% 0, 100% 100%, 0 100%, 0 55%);
}

.director-painting-menu-bar {
  gap: 37px;
  justify-content: flex-start;
  padding-right: 32px;
}

.director-painting-menu-bar button {
  height: 44px;
  min-width: 54px;
  padding: 0;
  color: rgba(225, 233, 220, 0.82) !important;
  font-size: 15px;
  font-weight: 820;
  letter-spacing: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.director-painting-menu-bar button::after {
  bottom: 5px;
  left: 50%;
  width: 22px;
  height: 1px;
  background: rgba(200, 255, 43, 0.32);
  opacity: 0;
  transform: translateX(-50%);
}

.director-painting-menu-bar button:hover::after,
.director-painting-menu-bar button:focus-visible::after {
  opacity: 1;
}

.director-painting-title-wrap {
  width: 100%;
  justify-content: center;
}

.director-painting-title {
  position: relative;
  z-index: 1;
  width: min(300px, 68%);
  height: 46px;
  color: rgba(238, 246, 229, 0.98) !important;
  font-size: 18px;
  font-weight: 950;
  line-height: 46px;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.94),
    0 0 12px rgba(221, 255, 160, 0.1) !important;
}

.director-painting-title-underline {
  bottom: 10px;
  z-index: 1;
  width: 164px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200, 255, 43, 0.98) 18% 82%, transparent);
  box-shadow:
    0 0 12px rgba(200, 255, 43, 0.72),
    0 4px 0 rgba(68, 84, 52, 0.55);
}

.director-painting-top-actions {
  justify-content: flex-end;
  gap: 0;
  padding-left: 28px;
  overflow: visible;
}

.director-painting-top-actions > button[data-painting-undo],
.director-painting-top-actions > button[data-painting-redo],
.director-painting-top-actions > button[data-painting-export],
.director-painting-top-actions > button[data-painting-command],
.director-painting-top-actions > button[data-painting-top-close] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 76px;
  height: 52px;
  padding: 0 17px;
  color: rgba(224, 232, 219, 0.78) !important;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 50%, rgba(0, 0, 0, 0.34)),
    transparent !important;
  border: 0 !important;
  border-left: 1px solid rgba(82, 94, 87, 0.38) !important;
  box-shadow: none !important;
}

.director-painting-top-actions > button[data-painting-undo] {
  border-left: 0 !important;
}

.director-painting-top-actions > button[data-painting-export] {
  min-width: 88px;
}

.director-painting-top-actions > button[data-painting-command] {
  min-width: 58px;
  padding: 0;
  font-size: 21px;
}

.director-painting-top-actions > button[data-painting-top-close] {
  min-width: 60px;
  margin-left: 5px;
  padding: 0;
  color: rgba(246, 255, 238, 0.98) !important;
  font-size: 30px;
  border-right: 1px solid rgba(91, 103, 94, 0.42) !important;
  background:
    linear-gradient(135deg, transparent 0 12px, rgba(20, 25, 22, 0.98) 12px calc(100% - 12px), transparent calc(100% - 12px)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.38)) !important;
  text-shadow: 0 0 12px rgba(200, 255, 43, 0.22);
}

.director-painting-top-actions > button[data-painting-top-close]::before,
.director-painting-top-actions > button[data-painting-top-close]::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.director-painting-top-actions > button[data-painting-top-close]::before {
  inset: 4px 5px;
  border-top: 1px solid rgba(200, 255, 43, 0.58);
  border-right: 1px solid rgba(200, 255, 43, 0.5);
  opacity: 0.78;
}

.director-painting-top-actions > button[data-painting-top-close]::after {
  right: 6px;
  bottom: 6px;
  width: 18px;
  height: 2px;
  background: var(--painting-lime-hot);
  box-shadow: 0 0 12px rgba(200, 255, 43, 0.78);
}

.director-painting-topbar button span {
  color: rgba(210, 219, 207, 0.74) !important;
  font-size: 13px;
  font-weight: 820;
}

.director-painting-top-actions > button:hover,
.director-painting-top-actions > button:focus-visible,
.director-painting-menu-bar button:hover,
.director-painting-menu-bar button:focus-visible {
  color: var(--painting-lime-hot) !important;
  background:
    linear-gradient(180deg, rgba(200, 255, 43, 0.1), rgba(200, 255, 43, 0.028)),
    transparent !important;
  outline: 1px solid rgba(200, 255, 43, 0.24);
  outline-offset: -2px;
}

.director-painting-top-actions > button:hover span,
.director-painting-top-actions > button:focus-visible span {
  color: rgba(235, 255, 210, 0.96) !important;
}

.director-painting-shell {
  height: calc(100% - 70px);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.74), transparent 12% 88%, rgba(0, 0, 0, 0.78)),
    radial-gradient(circle at 50% 7%, rgba(200, 255, 43, 0.07), transparent 28%),
    linear-gradient(180deg, #07100d, #020504 66%, #000);
}

.director-painting-stage {
  padding: 60px 94px 178px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.74), transparent 16% 84%, rgba(0, 0, 0, 0.82)),
    linear-gradient(180deg, rgba(200, 255, 43, 0.05), transparent 21% 76%, rgba(0, 0, 0, 0.62)),
    repeating-linear-gradient(90deg, rgba(200, 255, 43, 0.025) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(200, 255, 43, 0.02) 0 1px, transparent 1px 84px),
    #030706;
}

.director-painting-stage::before {
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 30px, rgba(200, 255, 43, 0.76) 30px 62px, transparent 62px calc(100% - 62px), rgba(200, 255, 43, 0.76) calc(100% - 62px) calc(100% - 30px), transparent calc(100% - 30px)) top / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 92px, rgba(200, 255, 43, 0.56) 92px 124px, transparent 124px calc(100% - 124px), rgba(200, 255, 43, 0.56) calc(100% - 124px) calc(100% - 92px), transparent calc(100% - 92px)) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, transparent 0 34px, rgba(200, 255, 43, 0.58) 34px 66px, transparent 66px calc(100% - 66px), rgba(200, 255, 43, 0.58) calc(100% - 66px) calc(100% - 34px), transparent calc(100% - 34px)) left / 2px 100% no-repeat,
    linear-gradient(180deg, transparent 0 34px, rgba(200, 255, 43, 0.58) 34px 66px, transparent 66px calc(100% - 66px), rgba(200, 255, 43, 0.58) calc(100% - 66px) calc(100% - 34px), transparent calc(100% - 34px)) right / 2px 100% no-repeat,
    linear-gradient(135deg, rgba(0, 0, 0, 0.52) 0 34px, transparent 34px calc(100% - 34px), rgba(0, 0, 0, 0.5) calc(100% - 34px));
}

.director-painting-stage::after {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 14% 86%, rgba(0, 0, 0, 0.48)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent 12% 76%, rgba(0, 0, 0, 0.44));
}

.director-painting-canvas {
  box-shadow:
    0 34px 96px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(214, 255, 82, 0.16),
    0 0 0 10px rgba(9, 12, 11, 0.7),
    0 0 0 17px rgba(55, 65, 56, 0.28),
    0 0 0 24px rgba(0, 0, 0, 0.62);
}

@media (max-width: 1180px) {
  .director-painting-topbar {
    grid-template-columns: minmax(270px, 0.82fr) minmax(250px, 1fr) minmax(300px, 0.82fr);
    padding-left: 28px;
  }

  .director-painting-menu-bar {
    gap: 18px;
  }

  .director-painting-top-actions > button[data-painting-undo],
  .director-painting-top-actions > button[data-painting-redo],
  .director-painting-top-actions > button[data-painting-export] {
    min-width: 64px;
    padding-inline: 10px;
  }

  .director-painting-stage {
    padding-inline: 66px;
  }
}

/* v70 Thread B: left floating tool window, individual icon assets, and active state. */
.director-painting-tool-window {
  left: 26px;
  top: 16px;
  box-sizing: border-box;
  width: 157px;
  height: min(877px, calc(100% - 34px));
  max-height: calc(100% - 34px);
  padding: 0 10px 18px;
  color: rgba(215, 224, 214, 0.78);
  background:
    linear-gradient(135deg, transparent 0 17px, rgba(7, 11, 11, 0.98) 17px calc(100% - 17px), transparent calc(100% - 17px)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(14, 20, 19, 0.96) 48%, rgba(0, 0, 0, 0.9)),
    #030606;
  border: 1px solid rgba(112, 138, 107, 0.34);
  box-shadow:
    14px 0 34px rgba(0, 0, 0, 0.42),
    0 0 0 3px rgba(0, 0, 0, 0.72) inset,
    0 0 0 1px rgba(210, 255, 83, 0.18) inset,
    0 0 24px rgba(169, 255, 31, 0.08);
}

.director-painting-tool-window::before {
  inset: 9px 8px;
  z-index: 0;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  background:
    linear-gradient(90deg, rgba(200, 255, 43, 0.62) 0 24px, transparent 24px calc(100% - 24px), rgba(200, 255, 43, 0.5) calc(100% - 24px)) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(200, 255, 43, 0.42) 0 24px, transparent 24px calc(100% - 24px), rgba(200, 255, 43, 0.42) calc(100% - 24px)) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(200, 255, 43, 0.56) 0 18px, transparent 18px calc(100% - 18px), rgba(200, 255, 43, 0.56) calc(100% - 18px)) left / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(200, 255, 43, 0.56) 0 18px, transparent 18px calc(100% - 18px), rgba(200, 255, 43, 0.56) calc(100% - 18px)) right / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.025));
  border: 0;
  opacity: 1;
  box-shadow: none;
}

.director-painting-tool-window::after {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 29%, rgba(200, 255, 43, 0.76) 29% 71%, transparent 71%) top 16px center / 76px 2px no-repeat,
    linear-gradient(90deg, transparent 0 32%, rgba(200, 255, 43, 0.72) 32% 68%, transparent 68%) bottom 17px center / 78px 2px no-repeat,
    linear-gradient(180deg, rgba(200, 255, 43, 0.76) 0 15px, transparent 15px 85%, rgba(200, 255, 43, 0.65) 85% 100%) left 13px top 82px / 2px 115px no-repeat,
    repeating-linear-gradient(0deg, rgba(200, 255, 43, 0.78) 0 4px, transparent 4px 10px) right 15px bottom 126px / 3px 66px no-repeat,
    repeating-linear-gradient(0deg, rgba(200, 255, 43, 0.22) 0 2px, transparent 2px 8px) left 36px bottom 118px / 34px 62px no-repeat,
    repeating-linear-gradient(90deg, rgba(200, 255, 43, 0.12) 0 3px, transparent 3px 8px) left 35px bottom 104px / 58px 28px no-repeat,
    radial-gradient(circle at 46px calc(100% - 172px), rgba(200, 255, 43, 0.62) 0 1px, transparent 2px),
    radial-gradient(circle at 68px calc(100% - 136px), rgba(200, 255, 43, 0.42) 0 1px, transparent 2px),
    repeating-linear-gradient(180deg, transparent 0 11px, rgba(200, 255, 43, 0.026) 11px 12px);
  opacity: 0.96;
}

.director-painting-tool-window .director-painting-palette-head {
  min-height: 34px;
  padding: 0 10px 0 12px;
  color: rgba(219, 229, 216, 0.76);
  border-bottom: 1px solid rgba(200, 255, 43, 0.09);
  box-shadow: none;
}

.director-painting-tool-window .director-painting-palette-head::before {
  width: 18px;
  height: 2px;
  margin-right: 2px;
  background: rgba(200, 255, 43, 0.8);
  box-shadow: 0 0 11px rgba(200, 255, 43, 0.68);
}

.director-painting-tool-window .director-painting-palette-head strong {
  color: rgba(223, 232, 219, 0.82);
  font-size: 13px;
  font-weight: 820;
}

.director-painting-tool-window .director-painting-palette-head span {
  color: rgba(200, 255, 43, 0.52);
  font-size: 10px;
}

.director-painting-tool-window .director-painting-toolbar {
  position: relative;
  display: grid;
  grid-auto-rows: 40px;
  gap: 0;
  height: auto;
  max-height: none;
  padding: 8px 0 0;
  overflow: visible;
}

.director-painting-tool-window .director-painting-toolbar button {
  position: relative;
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 7px 0 6px;
  color: rgba(210, 218, 209, 0.69);
  font: 760 13px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  text-align: left;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.018) 34% 68%, transparent) !important;
  border: 0;
  border-bottom: 1px solid rgba(133, 151, 130, 0.14);
  box-shadow: none !important;
  outline: 0;
}

.director-painting-tool-window .director-painting-toolbar button::after {
  position: absolute;
  left: 8px;
  right: 6px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 255, 43, 0.12), transparent);
  content: "";
  opacity: 0.8;
}

.director-painting-tool-window .director-painting-toolbar button span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
}

.director-painting-tool-window .director-painting-tool-icon {
  display: inline-grid;
  width: 31px;
  height: 31px;
  place-items: center;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid transparent;
  box-shadow: none;
}

.director-painting-tool-window .director-painting-tool-icon img {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  opacity: 0.74;
  filter: grayscale(1) saturate(0.2) brightness(1.32) contrast(0.98);
  pointer-events: none;
}

.director-painting-tool-window .director-painting-toolbar button:hover,
.director-painting-tool-window .director-painting-toolbar button:focus-visible {
  color: rgba(236, 245, 228, 0.9);
  background: rgba(200, 255, 43, 0.055) !important;
  outline: 1px solid rgba(200, 255, 43, 0.18);
  outline-offset: -1px;
}

.director-painting-tool-window .director-painting-toolbar button:hover .director-painting-tool-icon img,
.director-painting-tool-window .director-painting-toolbar button:focus-visible .director-painting-tool-icon img {
  opacity: 0.96;
  filter: grayscale(0.4) saturate(0.7) brightness(1.5);
}

.director-painting-tool-window .director-painting-toolbar button.is-active {
  color: var(--painting-lime-hot);
  background:
    linear-gradient(90deg, rgba(200, 255, 43, 0.26), rgba(200, 255, 43, 0.12) 72%, rgba(200, 255, 43, 0.02)) !important;
  border-bottom-color: rgba(200, 255, 43, 0.28);
  box-shadow:
    0 0 0 1px rgba(200, 255, 43, 0.6) inset,
    0 0 18px rgba(200, 255, 43, 0.22) inset,
    0 0 18px rgba(200, 255, 43, 0.22) !important;
  text-shadow: 0 0 8px rgba(200, 255, 43, 0.52);
}

.director-painting-tool-window .director-painting-toolbar button.is-active .director-painting-tool-icon {
  background:
    linear-gradient(135deg, rgba(232, 255, 128, 0.92), rgba(200, 255, 43, 0.96) 58%, rgba(93, 177, 14, 0.92));
  border-color: rgba(232, 255, 121, 0.84);
  box-shadow:
    0 0 16px rgba(200, 255, 43, 0.62),
    0 0 0 1px rgba(0, 0, 0, 0.3) inset;
}

.director-painting-tool-window .director-painting-toolbar button.is-active .director-painting-tool-icon img {
  opacity: 1;
  filter: saturate(1.35) brightness(1.12) drop-shadow(0 0 6px rgba(236, 255, 137, 0.66));
}

.director-painting-tool-window.is-dragging {
  box-shadow:
    18px 0 40px rgba(0, 0, 0, 0.54),
    0 0 0 1px rgba(200, 255, 43, 0.46) inset,
    0 0 34px rgba(200, 255, 43, 0.16);
}

@media (max-width: 1180px) {
  .director-painting-tool-window {
    width: 142px;
  }

  .director-painting-tool-window .director-painting-toolbar button {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
    font-size: 12px;
  }

  .director-painting-tool-window .director-painting-tool-icon {
    width: 28px;
    height: 28px;
  }

  .director-painting-tool-window .director-painting-tool-icon img {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 860px) {
  .director-painting-tool-window {
    left: 10px;
    top: 10px;
    width: 58px;
    height: calc(100% - 20px);
    padding: 0 7px 12px;
  }

  .director-painting-tool-window .director-painting-palette-head {
    min-height: 28px;
    padding-inline: 6px;
  }

  .director-painting-tool-window .director-painting-palette-head strong,
  .director-painting-tool-window .director-painting-palette-head span,
  .director-painting-tool-window .director-painting-toolbar button span {
    display: none;
  }

  .director-painting-tool-window .director-painting-toolbar {
    grid-auto-rows: 36px;
    padding-top: 6px;
  }

  .director-painting-tool-window .director-painting-toolbar button {
    grid-template-columns: 1fr;
    min-height: 36px;
    padding: 0;
    place-items: center;
  }
}

/* Thread B detail lock: tighten the left rail against the reference crop. */
.director-painting-tool-window .director-painting-palette-head {
  min-height: 43px;
  padding: 0 12px;
  border-bottom: 0;
}

.director-painting-tool-window .director-painting-palette-head strong,
.director-painting-tool-window .director-painting-palette-head span {
  opacity: 0;
}

.director-painting-tool-window .director-painting-palette-head::before {
  position: absolute;
  left: 38px;
  top: 16px;
  width: 46px;
  margin: 0;
}

.director-painting-tool-window .director-painting-toolbar {
  grid-auto-rows: 40px;
  padding-top: 0;
}

.director-painting-tool-window .director-painting-toolbar button {
  width: calc(100% - 18px);
  min-height: 40px;
  margin-left: 2px;
  padding: 0 5px 0 7px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  color: rgba(207, 216, 207, 0.72);
  border-bottom-color: rgba(105, 123, 105, 0.16);
}

.director-painting-tool-window .director-painting-tool-icon {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
}

.director-painting-tool-window .director-painting-tool-icon img {
  width: 25px;
  height: 25px;
  opacity: 0.76;
  filter: grayscale(1) saturate(0.1) brightness(1.42) contrast(0.95);
}

.director-painting-tool-window .director-painting-toolbar button.is-active {
  color: #d8ff61;
  background:
    linear-gradient(90deg, rgba(200, 255, 43, 0.34), rgba(200, 255, 43, 0.17) 61%, rgba(200, 255, 43, 0.035)) !important;
  border: 1px solid rgba(200, 255, 43, 0.74);
  box-shadow:
    0 0 0 1px rgba(200, 255, 43, 0.2) inset,
    0 0 18px rgba(200, 255, 43, 0.24),
    0 0 28px rgba(200, 255, 43, 0.12) inset !important;
}

.director-painting-tool-window .director-painting-toolbar button.is-active::before {
  display: block;
  position: absolute;
  left: -2px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: rgba(200, 255, 43, 0.98);
  box-shadow: 0 0 12px rgba(200, 255, 43, 0.88);
  content: "";
}

.director-painting-tool-window .director-painting-toolbar button.is-active .director-painting-tool-icon {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.director-painting-tool-window .director-painting-toolbar button.is-active .director-painting-tool-icon img {
  opacity: 1;
  filter: saturate(1.15) brightness(1.35) drop-shadow(0 0 8px rgba(215, 255, 87, 0.82));
}

.director-painting-tool-window::after {
  background:
    linear-gradient(90deg, transparent 0 29%, rgba(200, 255, 43, 0.8) 29% 71%, transparent 71%) top 16px center / 76px 2px no-repeat,
    linear-gradient(90deg, transparent 0 32%, rgba(200, 255, 43, 0.72) 32% 68%, transparent 68%) bottom 17px center / 78px 2px no-repeat,
    linear-gradient(180deg, rgba(200, 255, 43, 0.75) 0 13px, transparent 13px 86%, rgba(200, 255, 43, 0.65) 86% 100%) left 13px top 82px / 2px 116px no-repeat,
    repeating-linear-gradient(0deg, rgba(200, 255, 43, 0.8) 0 3px, transparent 3px 9px) right 16px bottom 128px / 3px 66px no-repeat,
    repeating-linear-gradient(0deg, rgba(200, 255, 43, 0.2) 0 2px, transparent 2px 7px) left 36px bottom 123px / 28px 56px no-repeat,
    repeating-linear-gradient(90deg, rgba(200, 255, 43, 0.16) 0 3px, transparent 3px 7px) left 36px bottom 107px / 52px 25px no-repeat,
    linear-gradient(90deg, rgba(200, 255, 43, 0.48), transparent 62%) left 35px bottom 99px / 50px 1px no-repeat,
    radial-gradient(circle at 46px calc(100% - 171px), rgba(200, 255, 43, 0.62) 0 1px, transparent 2px),
    radial-gradient(circle at 69px calc(100% - 137px), rgba(200, 255, 43, 0.42) 0 1px, transparent 2px),
    repeating-linear-gradient(180deg, transparent 0 11px, rgba(200, 255, 43, 0.026) 11px 12px);
}

.director-primary,
.director-media-actions button,
.director-video-actions button,
.director-video-reference-row > button {
  min-height: 42px;
  padding: 0 18px;
  color: #050607;
  font-weight: 950;
  background: var(--director-lime);
  border: 1px solid var(--director-lime);
  border-radius: 7px;
  cursor: pointer;
}

.director-media-actions {
  margin-top: 14px;
}

.director-video-reference-row {
  display: grid;
  grid-template-columns: minmax(136px, auto) minmax(82px, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 72px;
  margin-top: 10px;
}

.director-video-reference-row > button {
  min-width: 146px;
  white-space: nowrap;
}

.director-video-studio .director-image-reference-list {
  align-self: start;
  max-height: 86px;
  min-height: 58px;
  padding: 0;
  overflow: auto hidden;
  gap: 9px;
}

.director-video-studio .director-image-reference-list[hidden],
.director-video-studio .director-image-reference-list:empty {
  display: none;
}

.director-video-studio .director-image-reference-card {
  max-height: 78px;
  padding: 10px 10px 0 0;
}

.director-video-studio .director-image-reference-card img {
  max-width: 108px;
  max-height: 64px;
  border-radius: 6px;
}

.director-video-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

.director-video-actions button {
  width: 100%;
  min-height: 54px;
}

.director-video-actions #directorVideoGenerateBtn {
  position: relative;
  isolation: isolate;
  flex: 1 1 180px;
  width: auto;
  overflow: hidden;
}

.director-video-actions #directorVideoGenerateBtn.is-generating {
  color: #061006;
  background:
    linear-gradient(135deg, #f7ffd0 0%, var(--director-lime) 44%, #7ef7ff 118%);
  border-color: rgba(244, 255, 178, 0.98);
  box-shadow:
    0 0 0 1px rgba(244, 255, 178, 0.28),
    0 0 28px rgba(200, 255, 0, 0.38),
    0 0 42px rgba(21, 230, 255, 0.2),
    inset 0 -10px 24px rgba(7, 26, 9, 0.16);
  cursor: progress;
}

.director-video-actions #directorVideoGenerateBtn.is-generating::before,
.director-video-actions #directorVideoGenerateBtn.is-generating::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.director-video-actions #directorVideoGenerateBtn.is-generating::before {
  inset: -45% auto -45% -70%;
  z-index: -1;
  width: 62%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  transform: skewX(-18deg);
  animation: directorVideoButtonScan 1.1s linear infinite;
}

.director-video-actions #directorVideoGenerateBtn.is-generating::after {
  inset: 7px;
  border: 1px solid rgba(5, 6, 7, 0.2);
  border-radius: 5px;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.22),
    0 0 18px rgba(200, 255, 0, 0.28);
  animation: directorVideoButtonPulse 0.9s ease-in-out infinite alternate;
}

.director-video-actions #directorVideoDownloadBtn {
  flex: 0 0 142px;
  width: auto;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.director-video-actions #directorVideoDownloadBtn:not(:disabled):hover {
  border-color: rgba(200, 255, 0, 0.72);
}

.director-video-actions #directorVideoDownloadBtn:disabled {
  color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
}

@keyframes directorVideoButtonScan {
  from {
    left: -72%;
  }

  to {
    left: 126%;
  }
}

@keyframes directorVideoButtonPulse {
  from {
    opacity: 0.42;
  }

  to {
    opacity: 0.9;
  }
}

.director-media-status,
.director-video-status {
  margin-top: 10px;
  padding: 12px;
  color: rgba(255, 255, 255, 0.74);
  background: rgba(0, 0, 0, 0.36);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 7px;
}

.director-video-status {
  display: flex;
  align-items: flex-start;
  min-height: 72px;
  line-height: 1.58;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.director-media-body audio,
.director-video-body video {
  width: 100%;
  margin-top: 0;
}

.director-video-body video {
  display: block;
  aspect-ratio: 16 / 9;
  max-height: 320px;
  object-fit: contain;
  background: #050607;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
}

@media (max-width: 780px) {
  .director-video-settings,
  .director-video-bottom-grid,
  .director-video-reference-row {
    grid-template-columns: 1fr;
  }

  .director-video-reference-row > button {
    width: 100%;
  }

  .director-video-studio .director-image-reference-list {
    justify-content: flex-start;
    width: 100%;
  }
}

.director-media-node {
  width: 360px;
  min-height: 160px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  resize: both;
}

.director-media-node-head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 4;
  justify-content: flex-end;
  min-height: 42px;
  padding: 8px 10px;
  border-bottom: 0;
  background: transparent;
}

.director-media-node-head > div {
  display: none;
}

.director-media-node > .director-window-controls {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 8;
}

.director-media-node-head .director-window-controls,
.director-media-node > .director-window-controls {
  padding: 2px;
  border-radius: 5px;
  background: rgba(5, 7, 8, 0.58);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
}

.director-media-node-body {
  display: grid;
  height: 100%;
  min-height: 160px;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
}

.director-media-node.is-arranged-compact .director-media-node-body {
  min-height: 0;
}

.director-media-node img,
.director-media-node video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.director-agent-dock {
  position: fixed;
  right: 24px;
  bottom: calc(24px + var(--agent-os-safe-bottom, 0px));
  z-index: 2147483000;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.director-agent-dock.is-dragging {
  z-index: 2147483200;
}

.director-agent-toggle {
  display: grid;
  width: 74px;
  height: 74px;
  padding: 0;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.14s ease, opacity 0.14s ease, visibility 0.14s ease;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.director-agent-dock.is-dragging .director-agent-toggle {
  cursor: grabbing;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.42));
  transform: translateY(-2px) scale(1.03);
}

.director-agent-dock.is-open .director-agent-toggle {
  display: none;
}

.director-agent-toggle[aria-expanded="true"] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.88);
}

.agent-bot-icon {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 20px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.agent-bot-icon::before,
.agent-bot-icon::after {
  content: "";
  position: absolute;
}

.agent-bot-icon::before {
  inset: 0;
  z-index: 2;
  border-radius: 17px;
  box-shadow: none;
  pointer-events: none;
}

.agent-bot-icon::after {
  display: none;
}

.agent-bot-icon img,
.agent-mini-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.director-agent-panel {
  position: fixed;
  --agent-panel-x: clamp(10px, 1.25vw, 24px);
  --agent-panel-top: max(32px, calc(env(safe-area-inset-top) + clamp(14px, 2.4vh, 28px)));
  --agent-panel-bottom: max(10px, calc(env(safe-area-inset-bottom) + var(--agent-os-safe-bottom, 0px) + clamp(8px, 1.4vh, 18px)));
  --agent-dock-layout-width: 624px;
  --agent-dock-layout-height: calc(100dvh - var(--agent-panel-top) - var(--agent-panel-bottom));
  --agent-dock-scale: 1;
  top: var(--agent-panel-top);
  right: var(--agent-panel-x);
  bottom: var(--agent-panel-bottom);
  z-index: 212;
  display: grid;
  width: min(624px, calc(100vw - (var(--agent-panel-x) * 2)));
  min-width: min(380px, calc(100vw - (var(--agent-panel-x) * 2)));
  height: auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  max-width: calc(100vw - (var(--agent-panel-x) * 2));
  max-height: calc(100dvh - var(--agent-panel-top) - var(--agent-panel-bottom));
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    rgba(8, 11, 12, 0.96);
  border: 1px solid rgba(200, 255, 0, 0.42);
  border-radius: 12px;
  box-shadow: -26px 0 70px rgba(0, 0, 0, 0.46);
}

.director-agent-panel.is-detached {
  bottom: auto;
  right: auto;
  min-width: min(340px, calc(100vw - 24px));
  min-height: min(360px, calc(100dvh - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  resize: none;
  overflow: hidden;
  border: 1px solid rgba(200, 255, 0, 0.42);
}

.director-agent-panel.is-agent-resizing {
  user-select: none;
  -webkit-user-select: none;
}

.director-agent-resize-handle {
  position: absolute;
  z-index: 8;
  display: block;
  pointer-events: auto;
  touch-action: none;
}

.director-agent-resize-handle::after {
  position: absolute;
  content: "";
  opacity: 0;
  transition: opacity 0.14s ease;
}

.director-agent-resize-handle:hover::after,
.director-agent-panel.is-agent-resizing .director-agent-resize-handle::after {
  opacity: 1;
}

.director-agent-resize-handle.is-n,
.director-agent-resize-handle.is-s {
  left: 14px;
  right: 14px;
  height: 10px;
  cursor: ns-resize;
}

.director-agent-resize-handle.is-n {
  top: 0;
}

.director-agent-resize-handle.is-s {
  bottom: 0;
}

.director-agent-resize-handle.is-n::after,
.director-agent-resize-handle.is-s::after {
  left: 22px;
  right: 22px;
  height: 2px;
  background: rgba(200, 255, 0, 0.72);
}

.director-agent-resize-handle.is-n::after {
  top: 2px;
}

.director-agent-resize-handle.is-s::after {
  bottom: 2px;
}

.director-agent-resize-handle.is-e,
.director-agent-resize-handle.is-w {
  top: 14px;
  bottom: 14px;
  width: 3px;
  cursor: ew-resize;
}

.director-agent-resize-handle.is-e {
  right: 0;
}

.director-agent-resize-handle.is-w {
  left: 0;
}

.director-agent-resize-handle.is-e::after,
.director-agent-resize-handle.is-w::after {
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: rgba(200, 255, 0, 0.72);
}

.director-agent-resize-handle.is-e::after {
  right: 0;
}

.director-agent-resize-handle.is-w::after {
  left: 0;
}

.director-agent-resize-handle.is-ne,
.director-agent-resize-handle.is-nw,
.director-agent-resize-handle.is-se,
.director-agent-resize-handle.is-sw {
  width: 18px;
  height: 18px;
}

.director-agent-resize-handle.is-ne,
.director-agent-resize-handle.is-sw {
  cursor: nesw-resize;
}

.director-agent-resize-handle.is-nw,
.director-agent-resize-handle.is-se {
  cursor: nwse-resize;
}

.director-agent-resize-handle.is-ne {
  top: 0;
  right: 0;
}

.director-agent-resize-handle.is-nw {
  top: 0;
  left: 0;
}

.director-agent-resize-handle.is-se {
  right: 0;
  bottom: 0;
}

.director-agent-resize-handle.is-sw {
  bottom: 0;
  left: 0;
}

.director-agent-resize-handle.is-ne::after,
.director-agent-resize-handle.is-nw::after,
.director-agent-resize-handle.is-se::after,
.director-agent-resize-handle.is-sw::after {
  inset: 4px;
  border-color: rgba(200, 255, 0, 0.78);
  border-style: solid;
}

.director-agent-resize-handle.is-ne::after {
  border-width: 2px 2px 0 0;
}

.director-agent-resize-handle.is-nw::after {
  border-width: 2px 0 0 2px;
}

.director-agent-resize-handle.is-se::after {
  border-width: 0 2px 2px 0;
}

.director-agent-resize-handle.is-sw::after {
  border-width: 0 0 2px 2px;
}

.director-agent-head {
  position: sticky;
  top: 0;
  z-index: 4;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 70px;
  padding: 10px 14px;
  background: rgba(8, 11, 12, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  cursor: grab;
}

.director-agent-visual {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.director-agent-session-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  flex-shrink: 0;
}

.director-agent-mode-toggle {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(200, 255, 0, 0.34);
  border-radius: 8px;
}

.director-agent-mode-toggle button {
  min-height: 26px;
  padding: 0 9px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 950;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.director-agent-mode-toggle button.is-active {
  color: #050607;
  background: var(--director-lime);
}

.director-agent-head-btn {
  min-height: 32px;
  padding: 0 10px;
  color: #050607;
  font-size: 12px;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.director-agent-head-btn.is-connected {
  color: var(--director-lime);
  background: rgba(200, 255, 0, 0.12);
  border: 1px solid rgba(200, 255, 0, 0.5);
}

.agent-mini-icon {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 14px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.director-agent-visual > span:last-child {
  color: #f6fbf5;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.director-agent-icon-btn {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  background: var(--director-lime);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.director-agent-icon-btn span {
  width: 18px;
  height: 3px;
  background: #050607;
}

.director-agent-archive-list {
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: min(168px, 22vh);
  padding: 10px 14px;
  overflow: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.director-agent-archive-list:empty {
  display: none;
}

.director-agent-feature-bar {
  grid-row: 4;
  display: flex;
  gap: 7px;
  padding: 8px 12px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  background: rgba(8, 11, 12, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.director-agent-feature-bar button {
  min-height: 30px;
  flex: 0 0 auto;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(200, 255, 0, 0.36);
  border-radius: 7px;
  cursor: pointer;
}

.director-agent-feature-bar button:hover,
.director-agent-feature-bar button:focus-visible {
  color: #050607;
  background: var(--director-lime);
  outline: none;
}

.director-agent-archive-item {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 8px 10px;
  text-align: left;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(200, 255, 0, 0.26);
  border-radius: 7px;
  cursor: pointer;
}

.director-agent-archive-item strong,
.director-agent-archive-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-agent-archive-item strong {
  font-size: 12px;
}

.director-agent-archive-item small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
}

.director-agent-messages {
  grid-row: 3;
  height: 100%;
  min-height: 0;
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
}

.director-agent-message {
  max-width: 88%;
  margin-bottom: 12px;
  padding: 12px 14px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.65;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.director-agent-message p,
.director-agent-message h4,
.director-agent-message ul {
  margin: 0;
}

.director-agent-message p + p,
.director-agent-message p + h4,
.director-agent-message h4 + p,
.director-agent-message ul + p,
.director-agent-message p + ul,
.director-agent-message .director-agent-md-table-wrap + p,
.director-agent-message p + .director-agent-md-table-wrap {
  margin-top: 10px;
}

.director-agent-message h4 {
  color: #fff;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.5;
}

.director-agent-message h4 + h4 {
  margin-top: 8px;
}

.director-agent-message strong {
  color: #f1ff96;
  font-weight: 950;
}

.director-agent-message code {
  padding: 1px 5px;
  color: #d7ff00;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(200, 255, 0, 0.18);
  border-radius: 4px;
}

.director-agent-message ul {
  display: grid;
  gap: 6px;
  padding-left: 20px;
}

.director-agent-md-field {
  padding-left: 10px;
  border-left: 2px solid rgba(200, 255, 0, 0.5);
}

.director-agent-md-table-wrap {
  max-width: 100%;
  margin-top: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
}

.director-agent-md-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  table-layout: auto;
}

.director-agent-md-table th,
.director-agent-md-table td {
  min-width: 132px;
  max-width: 380px;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.director-agent-md-table th {
  color: #050607;
  background: var(--director-lime);
}

.director-agent-md-table tr:last-child td {
  border-bottom: 0;
}

.director-agent-table-viewer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 620px;
  min-height: 420px;
}

.director-agent-table-viewer-head {
  min-width: 0;
}

.director-agent-table-viewer-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.director-agent-table-download-btn {
  min-height: 34px;
  padding: 0 14px;
  color: #050607;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.director-agent-table-viewer-body {
  min-width: 0;
  min-height: 0;
  padding: 16px;
  overflow: auto;
  user-select: text;
  -webkit-user-select: text;
}

.director-agent-table-viewer-table {
  width: max-content;
  min-width: 100%;
  font-size: 15px;
}

.director-agent-table-viewer-table th,
.director-agent-table-viewer-table td {
  min-width: 160px;
  max-width: 520px;
}

.director-agent-message.user {
  margin-left: auto;
  color: #050607;
  background: var(--director-lime);
  border-color: var(--director-lime);
}

.director-agent-message.user p + p {
  margin-top: 8px;
}

.director-agent-message.user strong,
.director-agent-message.user code {
  color: #050607;
}

.director-agent-message.loading {
  color: var(--director-lime);
}

.director-agent-thinking-live,
.director-agent-thinking-summary {
  display: grid;
  gap: 10px;
  color: rgba(255, 255, 255, 0.86);
}

.director-agent-thinking-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.director-agent-thinking-live-head strong {
  color: var(--director-lime);
  font-size: 15px;
}

.director-agent-thinking-live-head span,
.director-agent-thinking-summary summary small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 850;
}

.director-agent-thinking-progress {
  height: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(200, 255, 0, 0.18);
  border-radius: 999px;
}

.director-agent-thinking-progress i {
  display: block;
  height: 100%;
  width: 10%;
  background: linear-gradient(90deg, var(--director-lime), #15e6ff);
  box-shadow: 0 0 18px rgba(200, 255, 0, 0.42);
  transition: width 0.45s ease;
}

.director-agent-thinking-live details,
.director-agent-thinking-summary {
  padding: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(200, 255, 0, 0.16);
  border-radius: 7px;
}

.director-agent-thinking-live summary,
.director-agent-thinking-summary summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--director-lime);
  font-weight: 950;
  cursor: pointer;
}

.director-agent-thinking-live ol,
.director-agent-thinking-meta ol {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 20px;
}

.director-agent-thinking-live li,
.director-agent-thinking-meta li {
  color: rgba(255, 255, 255, 0.62);
}

.director-agent-thinking-live li.is-active {
  color: #fff;
}

.director-agent-thinking-live li.is-done {
  color: rgba(200, 255, 0, 0.82);
}

.director-agent-thinking-live li strong {
  display: block;
  color: inherit;
}

.director-agent-thinking-live li span {
  display: block;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.5;
}

.director-agent-thinking-live p,
.director-agent-thinking-meta p {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
}

.director-agent-thinking-summary {
  margin-bottom: 12px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.director-agent-thinking-meta {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.director-agent-thinking-raw {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: 420px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(200, 255, 0, 0.14);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.director-agent-thinking-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.director-agent-thinking-tags strong {
  flex: 0 0 100%;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.director-agent-thinking-tags span {
  padding: 4px 8px;
  color: #050607;
  font-size: 12px;
  font-weight: 950;
  background: var(--director-lime);
  border-radius: 999px;
}

.director-agent-thinking-note {
  padding-left: 10px;
  border-left: 2px solid rgba(21, 230, 255, 0.58);
}

.director-agent-thinking-warnings {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(255, 185, 56, 0.08);
  border: 1px solid rgba(255, 185, 56, 0.18);
  border-radius: 6px;
}

.director-agent-form {
  position: relative;
  bottom: auto;
  z-index: 4;
  grid-row: 6;
  display: grid;
  grid-template-columns: 1fr 82px;
  gap: 10px;
  align-items: stretch;
  min-height: 0;
  padding: 14px;
  background: rgba(8, 11, 12, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.director-agent-compose {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 8px;
  min-height: 0;
}

.director-agent-upload-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.director-agent-upload-actions button {
  flex: 0 0 auto;
  height: 32px;
  min-height: 32px;
  padding: 0 11px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(200, 255, 0, 0.32);
  border-radius: 7px;
  cursor: pointer;
}

.director-agent-form textarea {
  box-sizing: border-box;
  height: 96px;
  min-height: 96px;
  max-height: 180px;
  padding: 12px;
  color: #fff;
  font: inherit;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid var(--director-lime);
  border-radius: 8px;
  resize: vertical;
}

.director-agent-form button {
  color: #050607;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.director-agent-form > button {
  align-self: stretch;
  min-height: 96px;
  max-height: 136px;
}

.director-agent-form .director-agent-upload-actions button {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(200, 255, 0, 0.32);
}

.director-agent-attachment-list {
  grid-row: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  max-height: min(160px, 20vh);
  padding: 10px 14px 0;
  overflow: auto;
}

/* Modern creator assistant shell */
.director-agent-panel {
  width: min(624px, calc(100vw - (var(--agent-panel-x) * 2)));
  min-width: min(380px, calc(100vw - (var(--agent-panel-x) * 2)));
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  container-type: inline-size;
  color: #f7fbf8;
  background:
    radial-gradient(circle at 92% 24%, rgba(167, 255, 0, 0.16), transparent 32%),
    linear-gradient(145deg, rgba(35, 39, 42, 0.88), rgba(8, 11, 13, 0.9) 58%, rgba(8, 11, 13, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  box-shadow: -24px 24px 90px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}

.director-agent-panel:not(.is-detached) {
  bottom: auto;
  width: var(--agent-dock-layout-width);
  min-width: 0;
  max-width: none;
  height: var(--agent-dock-layout-height);
  max-height: none;
  transform: scale(var(--agent-dock-scale));
  transform-origin: top right;
}

.director-agent-panel::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 72px);
  opacity: 0.72;
}

.director-agent-panel.is-detached {
  border-color: rgba(255, 255, 255, 0.18);
  transform: none;
  transform-origin: center;
}

.director-agent-head {
  gap: 14px;
  min-height: 88px;
  padding: 16px 18px;
  background: rgba(10, 13, 15, 0.58);
  border-bottom-color: rgba(255, 255, 255, 0.11);
}

.director-agent-identity {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.director-agent-title {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.director-agent-title strong {
  overflow: hidden;
  color: #f8fff7;
  font-size: 21px;
  font-weight: 950;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-agent-title small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(232, 244, 235, 0.72);
  font-size: 14px;
  font-weight: 850;
}

.director-agent-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #9dff00;
  box-shadow: 0 0 16px rgba(157, 255, 0, 0.76);
}

.director-agent-session-actions {
  position: relative;
  gap: 9px;
}

.director-agent-mode-toggle {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
}

.director-agent-mode-toggle button {
  padding: 0 11px;
  color: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
}

.director-agent-mode-toggle button.is-active {
  background: #a7ff00;
  box-shadow: 0 0 18px rgba(167, 255, 0, 0.34);
}

.agent-mini-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 0 28px rgba(166, 255, 0, 0.12);
}

.agent-mini-icon::after {
  display: none;
}

.director-agent-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.director-agent-icon-btn span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  background: transparent;
}

.director-agent-icon-btn.is-collapse span {
  width: 13px;
  height: 13px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.director-agent-icon-btn.is-more span {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 999px;
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

.director-agent-icon-btn.is-close span::before,
.director-agent-icon-btn.is-close span::after {
  position: absolute;
  top: 8px;
  left: 1px;
  width: 17px;
  height: 2px;
  content: "";
  background: currentColor;
  border-radius: 999px;
}

.director-agent-icon-btn.is-close span::before {
  transform: rotate(45deg);
}

.director-agent-icon-btn.is-close span::after {
  transform: rotate(-45deg);
}

.director-agent-icon-btn:hover,
.director-agent-icon-btn:focus-visible {
  color: #050607;
  background: #a7ff00;
  border-color: rgba(167, 255, 0, 0.72);
  outline: none;
}

.director-agent-more-menu {
  position: absolute;
  top: calc(100% - 8px);
  right: 54px;
  z-index: 12;
  display: grid;
  width: min(260px, calc(100vw - 56px));
  gap: 8px;
  padding: 10px;
  background: rgba(17, 20, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.director-agent-more-menu[hidden] {
  display: none;
}

.director-agent-more-label {
  padding: 4px 2px 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 900;
}

.director-agent-head-btn,
.director-agent-more-menu button[data-agent-feature] {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
}

.director-agent-head-btn.is-connected {
  color: #b6ff16;
  background: rgba(166, 255, 0, 0.1);
  border-color: rgba(166, 255, 0, 0.38);
}

.director-agent-more-menu button:hover,
.director-agent-more-menu button:focus-visible {
  color: #050607;
  background: #a7ff00;
  border-color: rgba(167, 255, 0, 0.72);
  outline: none;
}

.director-agent-archive-list {
  padding: 10px 18px;
  background: rgba(7, 10, 11, 0.42);
}

.director-agent-archive-item {
  border-radius: 8px;
}

.director-agent-home,
.director-agent-messages {
  grid-row: 3;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
}

.director-agent-panel:not(.is-home) .director-agent-home {
  display: none;
}

.director-agent-panel.is-home .director-agent-messages {
  display: none;
}

.director-agent-home {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 24px;
  padding: 24px 20px 22px;
}

.director-agent-welcome-card {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 168px;
  padding: 28px 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(167, 255, 0, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-right-color: rgba(167, 255, 0, 0.55);
  border-bottom-color: rgba(167, 255, 0, 0.32);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 20px 40px rgba(0, 0, 0, 0.2);
}

.director-agent-welcome-mark {
  color: #a7ff00;
  font-size: 45px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(167, 255, 0, 0.5);
}

.director-agent-welcome-card h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 4.3cqw, 34px);
  font-weight: 950;
  line-height: 1.18;
}

.director-agent-welcome-card p {
  max-width: 500px;
  margin: 0;
  color: rgba(239, 245, 240, 0.68);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.65;
}

.director-agent-home-section {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.director-agent-section-fold {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  color: rgba(241, 247, 242, 0.78);
  font-size: 15px;
  font-weight: 950;
  text-align: left;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  cursor: pointer;
}

.director-agent-section-fold span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-agent-section-fold i {
  width: 9px;
  height: 9px;
  justify-self: end;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.16s ease;
}

.director-agent-section-fold[aria-expanded="true"] i {
  transform: rotate(225deg) translate(-1px, -1px);
}

.director-agent-section-fold:hover,
.director-agent-section-fold:focus-visible {
  color: #050607;
  background: #a7ff00;
  border-color: rgba(167, 255, 0, 0.72);
  outline: none;
}

.director-agent-home-section h3 {
  margin: 0;
  color: rgba(241, 247, 242, 0.72);
  font-size: 15px;
  font-weight: 950;
}

.director-agent-capability-list {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.director-agent-capability-section.is-collapsed .director-agent-capability-list {
  display: none;
}

.director-agent-capability-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  cursor: pointer;
}

.director-agent-capability-card:hover,
.director-agent-capability-card:focus-visible {
  background: linear-gradient(135deg, rgba(167, 255, 0, 0.12), rgba(255, 255, 255, 0.04));
  border-color: rgba(167, 255, 0, 0.42);
  outline: none;
  transform: translateY(-1px);
}

.director-agent-capability-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #a7ff00;
  font-size: 20px;
  font-weight: 950;
  background: rgba(167, 255, 0, 0.1);
  border: 1px solid rgba(167, 255, 0, 0.58);
  border-radius: 999px;
  box-shadow: inset 0 0 18px rgba(167, 255, 0, 0.12), 0 0 22px rgba(167, 255, 0, 0.12);
}

.director-agent-capability-card strong,
.director-agent-capability-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-agent-capability-card strong {
  color: #fff;
  font-size: 17px;
  font-weight: 950;
}

.director-agent-capability-card small {
  margin-top: 5px;
  color: rgba(239, 245, 240, 0.62);
  font-size: 14px;
  font-weight: 800;
}

.director-agent-capability-card i {
  width: 12px;
  height: 12px;
  border-top: 2px solid rgba(255, 255, 255, 0.76);
  border-right: 2px solid rgba(255, 255, 255, 0.76);
  transform: rotate(45deg);
}

.director-agent-feature-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-top: 0;
}

.director-agent-feature-bar button {
  min-height: 34px;
  flex: 0 1 auto;
  padding: 0 13px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.director-agent-feature-bar button::after {
  margin-left: 8px;
  content: "›";
  color: rgba(255, 255, 255, 0.62);
}

.director-agent-feature-bar button:hover,
.director-agent-feature-bar button:focus-visible {
  color: #050607;
  background: #a7ff00;
  border-color: rgba(167, 255, 0, 0.72);
}

.director-agent-feature-bar button:hover::after,
.director-agent-feature-bar button:focus-visible::after {
  color: #050607;
}

.director-agent-platform-launcher {
  position: sticky;
  bottom: 0;
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-self: start;
  justify-self: center;
  justify-content: center;
  align-content: center;
  gap: 9px;
  width: min(100%, 554px);
  margin: clamp(12px, 2vh, 24px) auto 0;
  padding: 10px 12px;
  background:
    radial-gradient(circle at 20% 0%, rgba(41, 231, 255, 0.13), transparent 34%),
    rgba(8, 12, 13, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(167, 255, 0, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.director-agent-platform-launcher button {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.26);
}

.director-agent-platform-launcher button:hover,
.director-agent-platform-launcher button:focus-visible {
  background: rgba(167, 255, 0, 0.14);
  border-color: rgba(167, 255, 0, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 26px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(167, 255, 0, 0.26);
  outline: none;
  transform: translateY(-4px) scale(1.06);
}

.director-agent-platform-launcher button span:last-child {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.director-agent-platform-launcher button::after {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  z-index: 4;
  max-width: 112px;
  padding: 5px 8px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  content: attr(title);
  background: rgba(8, 11, 12, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.director-agent-platform-launcher button:hover::after,
.director-agent-platform-launcher button:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.director-agent-platform-icon {
  width: 29px;
  height: 29px;
  object-fit: cover;
  border-radius: 10px;
  background: transparent;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

.director-agent-panel.is-readable-compact:not(.is-detached) .director-agent-home {
  gap: 12px;
  padding: 14px 16px 12px;
}

.director-agent-panel.is-readable-compact:not(.is-detached) .director-agent-welcome-card {
  min-height: 110px;
  gap: 8px;
  padding: 16px 18px;
}

.director-agent-panel.is-readable-compact:not(.is-detached) .director-agent-welcome-mark {
  font-size: 24px;
}

.director-agent-panel.is-readable-compact:not(.is-detached) .director-agent-welcome-card h2 {
  font-size: 24px;
}

.director-agent-panel.is-readable-compact:not(.is-detached) .director-agent-welcome-card p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.director-agent-panel.is-readable-compact:not(.is-detached) .director-agent-feature-bar {
  gap: 7px;
  max-height: 70px;
  overflow: hidden;
}

.director-agent-panel.is-readable-compact:not(.is-detached) .director-agent-feature-bar button {
  min-height: 30px;
  padding: 0 11px;
  font-size: 13px;
}

.director-agent-panel.is-readable-compact:not(.is-detached) .director-agent-platform-launcher {
  gap: 7px;
  width: min(100%, 520px);
  margin-top: 10px;
  padding: 8px 10px;
}

.director-agent-panel.is-readable-compact:not(.is-detached) .director-agent-platform-launcher button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}

.director-agent-panel.is-readable-compact:not(.is-detached) .director-agent-platform-icon {
  width: 26px;
  height: 26px;
}

.director-agent-panel.is-readable-tiny:not(.is-detached) .director-agent-home {
  gap: 10px;
  padding: 12px 14px 10px;
}

.director-agent-panel.is-readable-tiny:not(.is-detached) .director-agent-welcome-card {
  min-height: 92px;
  padding: 12px 14px;
}

.director-agent-panel.is-readable-tiny:not(.is-detached) .director-agent-welcome-card h2 {
  font-size: 21px;
}

.director-agent-panel.is-readable-tiny:not(.is-detached) .director-agent-welcome-card p {
  font-size: 13px;
  line-height: 1.35;
}

.director-agent-panel.is-readable-tiny:not(.is-detached) .director-agent-section-fold {
  min-height: 32px;
  font-size: 14px;
}

.director-agent-messages {
  height: auto;
  padding: 18px 20px;
}

.director-agent-message {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.13);
}

.director-agent-message.user {
  background: #a7ff00;
  border-color: #a7ff00;
}

.director-agent-message.loading {
  color: #a7ff00;
}

.director-agent-form {
  grid-row: 5;
  display: block;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 14px 16px;
  background: rgba(10, 13, 15, 0.62);
  border-top-color: rgba(255, 255, 255, 0.1);
}

.director-agent-compose {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.director-agent-mode-fold {
  position: relative;
  flex: 0 0 auto;
  margin-right: 0;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 900;
}

.director-agent-mode-fold summary {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, 1vw, 7px);
  min-height: clamp(28px, 3vw, 30px);
  padding: 0 clamp(7px, 1.2vw, 9px);
  list-style: none;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.director-agent-mode-fold summary::-webkit-details-marker {
  display: none;
}

.director-agent-mode-fold summary::after {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.72;
}

.director-agent-mode-fold[open] summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.director-agent-mode-fold strong {
  color: #a7ff00;
  font: inherit;
}

.director-agent-prompt-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(28px, 3vw, 30px);
  flex: 0 0 auto;
  gap: 6px;
  padding: 0 clamp(8px, 1.3vw, 10px);
  color: rgba(238, 245, 234, 0.78) !important;
  font-size: clamp(11px, 1.35vw, 12px);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px;
  cursor: pointer;
}

.director-agent-video-replica-btn {
  color: rgba(244, 255, 232, 0.92) !important;
  background:
    linear-gradient(135deg, rgba(167, 255, 0, 0.12), rgba(21, 230, 255, 0.09)),
    rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(167, 255, 0, 0.32) !important;
}

.director-agent-prompt-mode-btn .director-agent-tool-icon {
  width: 16px;
  height: 16px;
}

.director-agent-video-replica-btn .director-agent-tool-icon {
  color: #a7ff00;
}

.director-agent-prompt-mode-btn[data-active="true"] {
  color: #050607 !important;
  background: #a7ff00 !important;
  border-color: rgba(167, 255, 0, 0.72) !important;
  outline: none;
}

.director-agent-prompt-mode-btn:not([data-active="true"]):hover,
.director-agent-prompt-mode-btn:not([data-active="true"]):focus-visible {
  color: rgba(244, 255, 232, 0.9) !important;
  background: rgba(255, 255, 255, 0.105) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  outline: none;
}

.director-agent-video-replica-btn:not([data-active="true"]):hover,
.director-agent-video-replica-btn:not([data-active="true"]):focus-visible {
  color: #050607 !important;
  background: #a7ff00 !important;
  border-color: rgba(167, 255, 0, 0.72) !important;
  box-shadow: 0 0 18px rgba(167, 255, 0, 0.28);
}

.director-agent-video-replica-btn:hover .director-agent-tool-icon,
.director-agent-video-replica-btn:focus-visible .director-agent-tool-icon {
  color: currentColor;
}

.director-agent-prompt-mode-btn:disabled,
.director-agent-prompt-mode-btn[data-active="false"]:disabled {
  color: rgba(255, 255, 255, 0.46) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  cursor: not-allowed;
  opacity: 0.82;
}

.director-agent-form .director-agent-mode-toggle {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 9;
  display: grid;
  width: 92px;
  height: auto;
  min-height: 0;
  padding: 4px;
  gap: 3px;
  margin-top: 0;
  background: rgba(8, 11, 12, 0.94);
  border-color: rgba(200, 255, 0, 0.24);
  border-radius: 10px;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
}

.director-agent-form .director-agent-mode-toggle button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 7px;
}

.director-agent-form .director-agent-mode-toggle button.is-active {
  color: #050607;
  background: var(--director-lime);
}

.director-agent-form textarea {
  width: 100%;
  height: 74px;
  min-height: 74px;
  max-height: 160px;
  padding: 0;
  line-height: 1.55;
  background: transparent;
  border: 0;
  resize: vertical;
}

.director-agent-form textarea:focus {
  outline: none;
}

.director-agent-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.director-agent-compose-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(6px, 1.2vw, 10px);
  flex-wrap: nowrap;
}

.director-agent-upload-actions {
  gap: clamp(6px, 1vw, 10px);
  min-height: clamp(30px, 4vw, 38px);
}

.director-agent-attachment-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 20;
  display: grid;
  width: min(292px, calc(100vw - 36px));
  gap: 6px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(33, 43, 37, 0.98), rgba(6, 8, 9, 0.98)),
    rgba(8, 10, 10, 0.98);
  border: 1px solid rgba(167, 255, 0, 0.28);
  border-radius: 8px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.48);
}

.director-agent-attachment-menu[hidden] {
  display: none;
}

.director-agent-upload-actions .director-agent-attachment-menu button,
.director-agent-form .director-agent-upload-actions .director-agent-attachment-menu button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  width: 100%;
  height: auto;
  min-height: 54px;
  flex: none;
  gap: 10px;
  place-items: center start;
  padding: 9px 10px;
  color: rgba(255, 255, 255, 0.86);
  text-align: left;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.director-agent-upload-actions .director-agent-attachment-menu button:hover,
.director-agent-upload-actions .director-agent-attachment-menu button:focus-visible {
  color: #a7ff00;
  background: rgba(167, 255, 0, 0.1);
  border-color: rgba(167, 255, 0, 0.28);
}

.director-agent-upload-actions .director-agent-attachment-menu span,
.director-agent-form .director-agent-upload-actions .director-agent-attachment-menu span {
  position: static;
  display: grid;
  width: auto;
  height: auto;
  gap: 2px;
  min-width: 0;
  font-size: inherit;
}

.director-agent-upload-actions .director-agent-attachment-menu span::before,
.director-agent-upload-actions .director-agent-attachment-menu span::after,
.director-agent-form .director-agent-upload-actions .director-agent-attachment-menu span::before,
.director-agent-form .director-agent-upload-actions .director-agent-attachment-menu span::after {
  content: none;
}

.director-agent-attachment-menu strong,
.director-agent-attachment-menu small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-agent-attachment-menu strong {
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  font-weight: 950;
}

.director-agent-attachment-menu small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 800;
}

.director-agent-upload-actions button,
.director-agent-form .director-agent-upload-actions button {
  display: grid;
  width: 34px;
  height: 34px;
  min-height: 34px;
  flex: 0 0 34px;
  place-items: center;
  padding: 0;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.director-agent-upload-actions button:hover,
.director-agent-upload-actions button:focus-visible {
  color: #a7ff00;
  background: rgba(167, 255, 0, 0.1);
  outline: none;
}

.director-agent-tool-icon {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.94;
  filter: drop-shadow(0 0 5px rgba(167, 255, 0, 0));
}

.director-agent-upload-actions button:hover .director-agent-tool-icon,
.director-agent-upload-actions button:focus-visible .director-agent-tool-icon {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(167, 255, 0, 0.32));
}

.director-agent-upload-actions span {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  font-size: 0;
}

.director-agent-upload-actions span::before,
.director-agent-upload-actions span::after {
  position: absolute;
  box-sizing: border-box;
  content: "";
}

#directorAgentAttachAnyBtn span::before {
  top: 2px;
  left: 6px;
  width: 9px;
  height: 16px;
  border: 2px solid currentColor;
  border-left-width: 0;
  border-radius: 0 8px 8px 0;
  transform: rotate(36deg);
}

#directorAgentAttachAnyBtn span::after {
  top: 6px;
  left: 8px;
  width: 6px;
  height: 10px;
  border: 2px solid currentColor;
  border-left-width: 0;
  border-radius: 0 7px 7px 0;
  transform: rotate(36deg);
}

#directorAgentAttachImageBtn span::before {
  inset: 3px 2px;
  border: 1.8px solid currentColor;
  border-radius: 3px;
}

#directorAgentAttachImageBtn span::after {
  right: 4px;
  bottom: 5px;
  width: 12px;
  height: 8px;
  background:
    linear-gradient(135deg, transparent 0 44%, currentColor 45% 54%, transparent 55%),
    linear-gradient(45deg, transparent 0 45%, currentColor 46% 55%, transparent 56%);
}

#directorAgentAttachImageBtn {
  --agent-dot-x: 6px;
}

#directorAgentAttachImageBtn span {
  background:
    radial-gradient(circle at 70% 35%, currentColor 0 1.6px, transparent 1.8px);
}

#directorAgentAttachVideoBtn span::before {
  left: 2px;
  top: 5px;
  width: 11px;
  height: 10px;
  border: 1.8px solid currentColor;
  border-radius: 3px;
}

#directorAgentAttachVideoBtn span::after {
  right: 2px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

#directorAgentAttachFileBtn span::before {
  top: 2px;
  left: 4px;
  width: 12px;
  height: 16px;
  border: 1.8px solid currentColor;
  border-radius: 3px;
}

#directorAgentAttachFileBtn span::after {
  top: 3px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-left: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  background: rgba(255, 255, 255, 0.08);
  transform: skew(-10deg);
}

.director-agent-home,
.director-agent-messages,
.director-agent-attachment-list,
.director-agent-archive-list,
.director-agent-more-menu,
.director-agent-form textarea {
  scrollbar-color: rgba(167, 255, 0, 0.58) rgba(255, 255, 255, 0.055);
  scrollbar-width: auto;
}

.director-agent-home::-webkit-scrollbar,
.director-agent-messages::-webkit-scrollbar,
.director-agent-attachment-list::-webkit-scrollbar,
.director-agent-archive-list::-webkit-scrollbar,
.director-agent-more-menu::-webkit-scrollbar,
.director-agent-form textarea::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.director-agent-home::-webkit-scrollbar-track,
.director-agent-messages::-webkit-scrollbar-track,
.director-agent-attachment-list::-webkit-scrollbar-track,
.director-agent-archive-list::-webkit-scrollbar-track,
.director-agent-more-menu::-webkit-scrollbar-track,
.director-agent-form textarea::-webkit-scrollbar-track {
  margin: 10px 2px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.director-agent-home::-webkit-scrollbar-thumb,
.director-agent-messages::-webkit-scrollbar-thumb,
.director-agent-attachment-list::-webkit-scrollbar-thumb,
.director-agent-archive-list::-webkit-scrollbar-thumb,
.director-agent-more-menu::-webkit-scrollbar-thumb,
.director-agent-form textarea::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(205, 255, 76, 0.92), rgba(123, 215, 0, 0.76));
  min-height: 72px;
  border: 4px solid rgba(15, 18, 18, 0.84);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(167, 255, 0, 0.34);
}

.director-agent-home::-webkit-scrollbar-thumb:hover,
.director-agent-messages::-webkit-scrollbar-thumb:hover,
.director-agent-attachment-list::-webkit-scrollbar-thumb:hover,
.director-agent-archive-list::-webkit-scrollbar-thumb:hover,
.director-agent-more-menu::-webkit-scrollbar-thumb:hover,
.director-agent-form textarea::-webkit-scrollbar-thumb:hover {
  background: #a7ff00;
}

.director-agent-home::-webkit-scrollbar-button,
.director-agent-messages::-webkit-scrollbar-button,
.director-agent-attachment-list::-webkit-scrollbar-button,
.director-agent-archive-list::-webkit-scrollbar-button,
.director-agent-more-menu::-webkit-scrollbar-button,
.director-agent-form textarea::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.director-agent-home,
.director-agent-messages {
  scrollbar-width: none;
}

.director-agent-home::-webkit-scrollbar,
.director-agent-messages::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.director-agent-scroll-rail {
  position: absolute;
  right: 5px;
  z-index: 10;
  width: 18px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28), 0 0 18px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.director-agent-scroll-rail[hidden] {
  display: none;
}

.director-agent-scroll-thumb {
  position: absolute;
  left: 3px;
  right: 3px;
  top: var(--agent-scroll-thumb-top, 0);
  height: var(--agent-scroll-thumb-height, 86px);
  min-height: 72px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #d4ff4b, #93e500 58%, #69bd00);
  border: 1px solid rgba(229, 255, 148, 0.52);
  box-shadow:
    0 0 18px rgba(167, 255, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -10px 18px rgba(38, 79, 0, 0.24);
  cursor: grab;
}

.director-agent-scroll-thumb::before {
  position: absolute;
  inset: 8px 3px;
  content: "";
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.director-agent-scroll-thumb:active,
.director-agent-panel.is-agent-scroll-dragging .director-agent-scroll-thumb {
  cursor: grabbing;
  background: linear-gradient(180deg, #e7ff87, #a7ff00 62%, #7ddb00);
  box-shadow:
    0 0 26px rgba(167, 255, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.director-agent-compose-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  gap: 0;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  font-weight: 850;
}

#directorAgentCharCount {
  min-width: 54px;
  text-align: right;
}

#directorAgentSendBtn {
  position: relative;
  display: grid;
  width: clamp(40px, 5vw, 44px);
  height: clamp(40px, 5vw, 44px);
  flex: 0 0 clamp(40px, 5vw, 44px);
  place-items: center;
  color: #050607;
  background: #a7ff00;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(167, 255, 0, 0.24);
  cursor: pointer;
}

#directorAgentSendBtn span {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 16px solid #050607;
  transform: rotate(-38deg) translate(1px, -1px);
}

#directorAgentSendBtn:disabled {
  cursor: wait;
  filter: grayscale(0.8);
  opacity: 0.58;
}

.director-agent-attachment-list {
  grid-row: 4;
  padding: 10px 16px 0;
}

.director-agent-home {
  gap: 14px;
  padding: 18px 20px 16px;
}

.director-agent-welcome-card {
  box-sizing: border-box;
  min-height: 156px;
  gap: 6px;
  padding: 18px 22px;
  min-width: 0;
  height: auto;
  overflow: visible;
  align-content: start;
}

.director-agent-welcome-mark {
  font-size: 28px;
}

.director-agent-welcome-card h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: keep-all;
  font-size: clamp(23px, 6.2cqw, 30px);
}

.director-agent-welcome-card p {
  max-width: 100%;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.director-agent-home-section {
  gap: 8px;
}

.director-agent-capability-list {
  gap: 8px;
}

.director-agent-capability-card {
  min-height: 68px;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  gap: 12px;
  padding: 10px 14px;
}

.director-agent-capability-icon {
  width: 46px;
  height: 46px;
  font-size: 18px;
}

.director-agent-capability-card strong {
  font-size: 16px;
}

.director-agent-capability-card small {
  margin-top: 3px;
  font-size: 13px;
}

@container (max-width: 540px) {
  .director-agent-home {
    gap: 12px;
    padding: 16px 14px 14px;
  }

  .director-agent-welcome-card {
    min-height: 142px;
    gap: 7px;
    padding: 16px;
  }

  .director-agent-welcome-mark {
    font-size: 24px;
  }

  .director-agent-welcome-card h2 {
    font-size: clamp(22px, 7cqw, 28px);
    line-height: 1.18;
  }

  .director-agent-welcome-card p {
    font-size: 14px;
    line-height: 1.42;
  }

  .director-agent-capability-card {
    min-height: 0;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 10px 12px;
  }

  .director-agent-capability-icon {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .director-agent-capability-card strong,
  .director-agent-capability-card small {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
  }

  .director-agent-capability-card strong {
    font-size: 15px;
    line-height: 1.25;
  }

  .director-agent-capability-card small {
    font-size: 12px;
    line-height: 1.35;
  }

  .director-agent-platform-launcher {
    gap: 8px;
    padding: 9px 10px;
    border-radius: 22px;
  }

  .director-agent-platform-launcher button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .director-agent-platform-icon {
    width: 27px;
    height: 27px;
  }
}

.director-agent-feature-bar {
  gap: 7px;
}

.director-agent-feature-bar button {
  min-height: 30px;
  padding: 0 11px;
  font-size: 13px;
}

.director-agent-form {
  padding: 10px 14px 14px;
}

.director-agent-compose {
  padding: 14px;
}

.director-agent-form textarea {
  height: 58px;
  min-height: 58px;
}

@media (max-height: 820px) and (min-width: 521px) {
  .director-agent-panel {
    --agent-panel-top: max(28px, calc(env(safe-area-inset-top) + 10px));
    --agent-panel-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .director-agent-head {
    min-height: 72px;
    padding: 10px 14px;
  }

  .agent-mini-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .director-agent-home {
    gap: 8px;
    padding: 10px 16px 8px;
  }

  .director-agent-welcome-card {
    min-height: 96px;
    padding: 10px 16px;
  }

  .director-agent-welcome-mark {
    font-size: 20px;
  }

  .director-agent-welcome-card h2 {
    font-size: 22px;
  }

  .director-agent-welcome-card p {
    font-size: 13px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
  }

  .director-agent-capability-list {
    gap: 5px;
  }

  .director-agent-capability-card {
    min-height: 50px;
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    gap: 9px;
    padding: 6px 10px;
  }

  .director-agent-capability-icon {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .director-agent-capability-card strong {
    font-size: 15px;
  }

  .director-agent-capability-card small {
    margin-top: 2px;
    font-size: 12px;
  }

  .director-agent-feature-bar {
    max-height: 64px;
    overflow: hidden;
  }

  .director-agent-feature-bar button {
    min-height: 28px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .director-agent-platform-launcher {
    bottom: 0;
    gap: 7px;
    margin-top: 8px;
    padding: 7px 9px;
    border-radius: 999px;
  }

  .director-agent-platform-launcher button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  .director-agent-platform-icon {
    width: 25px;
    height: 25px;
  }

  .director-agent-form {
    padding: 7px 12px 9px;
  }

  .director-agent-compose {
    gap: 8px;
    padding: 10px;
  }

  .director-agent-form textarea {
    height: 46px;
    min-height: 46px;
  }
}

@media (max-width: 520px) {
  .director-agent-panel {
    --agent-panel-x: 8px;
    --agent-panel-top: max(24px, calc(env(safe-area-inset-top) + 10px));
    --agent-panel-bottom: max(8px, env(safe-area-inset-bottom));
    top: var(--agent-panel-top);
    right: var(--agent-panel-x);
    bottom: var(--agent-panel-bottom);
    width: calc(100vw - 16px);
    min-width: 0;
    height: auto;
    max-height: calc(100dvh - var(--agent-panel-top) - var(--agent-panel-bottom));
    border-radius: 12px;
  }

  .director-agent-head {
    min-height: 76px;
    gap: 8px;
    padding: 10px 12px;
  }

  .agent-mini-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .director-agent-title strong {
    max-width: 88px;
    font-size: 18px;
  }

  .director-agent-title small {
    font-size: 12px;
  }

  .director-agent-session-actions {
    gap: 6px;
  }

  .director-agent-mode-toggle {
    height: 30px;
  }

  .director-agent-mode-toggle button {
    min-height: 24px;
    padding: 0 9px;
    font-size: 12px;
  }

  .director-agent-icon-btn {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .director-agent-more-menu {
    right: 42px;
    width: min(248px, calc(100vw - 48px));
  }

  .director-agent-home {
    gap: 12px;
    padding: 18px 14px 14px;
  }

  .director-agent-welcome-card {
    min-height: auto;
    padding: 18px;
  }

  .director-agent-welcome-card h2 {
    font-size: 25px;
  }

  .director-agent-welcome-card p {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
  }

  .director-agent-capability-card {
    min-height: 68px;
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 10px 12px;
  }

  .director-agent-capability-icon {
    width: 42px;
    height: 42px;
  }

  .director-agent-feature-bar button {
    max-width: 100%;
    white-space: normal;
  }

  .director-agent-form {
    padding: 8px 10px 10px;
  }

  .director-agent-compose {
    padding: 12px;
    border-radius: 12px;
  }

  .director-agent-compose-footer {
    align-items: center;
  }

  .director-agent-compose-meta {
    gap: 8px;
  }

  .director-agent-compose-meta span:nth-child(2) {
    display: none;
  }

  .director-agent-prompt-mode-btn span {
    display: none;
  }

  .director-agent-prompt-mode-btn {
    width: 34px;
    padding: 0;
  }

  #directorAgentSendBtn {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}

.director-agent-attachment-list:empty {
  display: none;
}

.director-agent-attachment {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  grid-template-areas: "preview meta remove";
  align-items: center;
  width: min(100%, 420px);
  box-sizing: border-box;
  gap: 8px;
  padding: 8px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.director-agent-attachment.is-media {
  grid-template-columns: auto 28px;
  grid-template-areas:
    "preview remove"
    "meta meta";
  align-items: start;
  width: max-content;
  max-width: min(100%, 176px);
  gap: 7px 8px;
  padding: 7px;
}

.director-agent-attachment-preview,
.director-agent-sent-file-icon {
  display: grid;
  grid-area: preview;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #050607;
  font-size: 12px;
  font-weight: 950;
  background: var(--director-lime);
  border-radius: 7px;
  overflow: hidden;
}

.director-agent-attachment.is-media .director-agent-attachment-preview {
  width: 80px;
  min-width: 80px;
  height: 60px;
  justify-self: start;
  align-self: start;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(200, 255, 0, 0.28);
}

.director-agent-attachment.is-media .director-agent-attachment-preview.has-media {
  position: relative;
  display: block;
  width: auto;
  min-width: 0;
  height: auto;
  line-height: 0;
  max-width: 144px;
  max-height: 108px;
  background: rgba(0, 0, 0, 0.48);
}

.director-agent-attachment.is-media .director-agent-attachment-preview.has-video::after,
.director-agent-sent-preview.has-video::after {
  content: "视频";
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 2px 5px;
  color: #050607;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  background: var(--director-lime);
  border-radius: 4px;
}

.director-agent-attachment.is-media .director-agent-attachment-preview.is-error {
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 59, 59, 0.16);
  border-color: rgba(255, 95, 95, 0.45);
}

.director-agent-attachment-preview img,
.director-agent-attachment-preview video,
.director-agent-sent-preview video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 144px;
  max-height: 108px;
  object-fit: contain;
}

.director-agent-attachment-meta {
  grid-area: meta;
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 2px;
}

.director-agent-attachment.is-media .director-agent-attachment-meta {
  width: min(var(--agent-media-preview-width, 96px), 144px);
  max-width: 144px;
}

.director-agent-attachment-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-agent-attachment small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  white-space: nowrap;
}

.director-agent-attachment button {
  grid-area: remove;
  width: 28px;
  min-height: 28px;
  color: #050607;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.director-agent-sent-attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.director-agent-sent-attachment {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: min(100%, 360px);
  max-width: 100%;
  padding: 6px;
  color: #050607;
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(5, 6, 7, 0.16);
  border-radius: 7px;
}

.director-agent-sent-attachment.is-media {
  grid-template-columns: minmax(0, 1fr);
  width: max-content;
  max-width: min(100%, 160px);
}

.director-agent-sent-preview {
  position: relative;
  display: block;
  width: 80px;
  height: 60px;
  max-width: 144px;
  max-height: 108px;
  overflow: hidden;
  line-height: 0;
  background: rgba(0, 0, 0, 0.48);
  border-radius: 6px;
  border: 1px solid rgba(5, 6, 7, 0.18);
}

.director-agent-sent-attachment img {
  display: block;
  width: auto;
  height: auto;
  max-width: 144px;
  max-height: 108px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid rgba(5, 6, 7, 0.18);
}

.director-agent-sent-attachment span:last-child {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-agent-sent-attachment.is-media span:last-child {
  max-width: 144px;
}

.director-workspace-notice {
  position: fixed;
  right: 24px;
  bottom: 112px;
  z-index: 1200;
  max-width: min(420px, calc(100vw - 48px));
  padding: 12px 14px;
  color: #050607;
  font-weight: 950;
  line-height: 1.45;
  background: var(--director-lime);
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
}

.director-canvas-action-dialog {
  width: min(680px, calc(100vw - 40px));
  padding: 0;
  color: #fff;
  background: rgba(8, 11, 12, 0.98);
  border: 1px solid rgba(200, 255, 0, 0.45);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.56);
  overflow: visible;
}

.director-canvas-action-dialog::backdrop {
  background: rgba(0, 0, 0, 0.2);
}

.director-canvas-action-dialog form {
  position: relative;
  overflow: visible;
}

.canvas-action-head,
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.canvas-action-head h2,
.dialog-head h2 {
  margin: 0;
  font-size: 20px;
}

.canvas-action-head > div {
  display: grid;
  gap: 5px;
}

.canvas-action-version {
  color: rgba(200, 255, 0, 0.86);
  font-size: 12px;
  font-weight: 900;
}

.director-canvas-action-dialog[data-canvas-version="stable"] [data-canvas-version-panel="extended"],
.director-canvas-action-dialog[data-canvas-version="extended"] [data-canvas-version-panel="stable"] {
  display: none;
}

.canvas-version-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 54px;
  height: 94px;
  padding: 0;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(200, 255, 0, 0.22), rgba(21, 230, 255, 0.12)),
    rgba(5, 7, 8, 0.9);
  border: 1px solid rgba(200, 255, 0, 0.78);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(21, 230, 255, 0.12),
    0 0 28px rgba(200, 255, 0, 0.38),
    inset 0 0 24px rgba(21, 230, 255, 0.18);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.canvas-version-arrow-left {
  left: -74px;
}

.canvas-version-arrow-right {
  right: -74px;
}

.canvas-version-arrow::before {
  content: "";
  width: 20px;
  height: 20px;
  border-top: 4px solid currentColor;
  border-right: 4px solid currentColor;
  filter: drop-shadow(0 0 8px rgba(200, 255, 0, 0.78));
}

.canvas-version-arrow-left::before {
  transform: rotate(225deg);
}

.canvas-version-arrow-right::before {
  transform: rotate(45deg);
}

.canvas-version-arrow:hover {
  color: #050607;
  background:
    linear-gradient(135deg, rgba(200, 255, 0, 0.95), rgba(21, 230, 255, 0.72));
  border-color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 0 36px rgba(200, 255, 0, 0.64),
    inset 0 0 24px rgba(255, 255, 255, 0.28);
}

.canvas-version-arrow-left:hover {
  transform: translate(-4px, -50%);
}

.canvas-version-arrow-right:hover {
  transform: translate(4px, -50%);
}

.canvas-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.canvas-action-card {
  display: grid;
  min-height: 134px;
  padding: 14px;
  text-align: left;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  cursor: pointer;
}

.canvas-action-card:hover {
  color: #050607;
  background: var(--director-lime);
  border-color: var(--director-lime);
}

.canvas-action-card strong {
  align-self: end;
  font-size: 16px;
}

.canvas-action-card small {
  color: currentColor;
  opacity: 0.7;
  font-weight: 850;
}

.canvas-action-icon {
  width: 38px;
  height: 38px;
  border: 2px solid currentColor;
  border-radius: 10px;
}

.canvas-action-icon.image,
.canvas-action-icon.upload-image {
  border-radius: 8px;
  box-shadow: inset 0 -10px 0 rgba(21, 230, 255, 0.45);
}

.canvas-action-icon.script {
  border-radius: 6px;
  box-shadow: inset 0 0 0 8px rgba(200, 255, 0, 0.22);
}

.canvas-action-icon.video-check {
  border-radius: 50%;
  box-shadow: inset 0 0 0 7px rgba(21, 230, 255, 0.28), inset 12px 0 0 rgba(200, 255, 0, 0.2);
}

.canvas-action-icon.video-replica {
  position: relative;
  border-radius: 9px;
  background:
    linear-gradient(90deg, transparent 0 20%, currentColor 20% 25%, transparent 25% 75%, currentColor 75% 80%, transparent 80%),
    linear-gradient(135deg, transparent 32%, rgba(21, 230, 255, 0.42) 33% 54%, transparent 55%);
}

.canvas-action-icon.video-replica::after {
  content: "";
  position: absolute;
  inset: 12px 10px;
  border: 2px solid currentColor;
  transform: rotate(45deg);
}

.canvas-action-icon.video-prompt-pack {
  border-radius: 6px;
  background:
    linear-gradient(90deg, currentColor 0 2px, transparent 2px 11px) 0 0 / 13px 100%,
    linear-gradient(currentColor 0 2px, transparent 2px 11px) 0 0 / 100% 13px;
}

.canvas-action-icon.generate-video {
  position: relative;
  border-radius: 7px;
  box-shadow: inset 0 0 0 3px currentColor, inset 0 -11px 0 rgba(21, 230, 255, 0.26);
}

.canvas-action-icon.generate-video::after {
  position: absolute;
  left: 15px;
  top: 10px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
  content: "";
}

.canvas-action-icon.painting-board {
  position: relative;
  border-radius: 7px;
  background:
    radial-gradient(circle at 26px 26px, rgba(21, 230, 255, 0.34) 0 6px, transparent 7px),
    linear-gradient(135deg, transparent 42%, currentColor 43% 48%, transparent 49%),
    linear-gradient(90deg, currentColor 0 2px, transparent 2px 12px) 6px 8px / 16px 12px;
}

.canvas-action-icon.painting-board::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 6px;
  width: 18px;
  height: 4px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: rgba(114, 163, 226, 0.32);
}

.canvas-action-icon.platform-matrix {
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 31%, currentColor 31% 36%, transparent 36% 64%, currentColor 64% 69%, transparent 69%),
    linear-gradient(transparent 31%, currentColor 31% 36%, transparent 36% 64%, currentColor 64% 69%, transparent 69%);
}

.canvas-action-icon.upload-video {
  border-radius: 50%;
  box-shadow: inset 12px 0 0 rgba(255, 57, 188, 0.35);
}

.canvas-action-icon.audio,
.canvas-action-icon.music {
  border-radius: 50% 50% 12px 12px;
}

.canvas-action-icon.draw {
  width: 18px;
  transform: rotate(24deg);
  border-radius: 999px;
}

.canvas-action-icon.palette {
  border-radius: 50%;
  background:
    conic-gradient(var(--director-lime), var(--director-cyan), var(--director-pink), #fff, var(--director-lime));
}

@media (max-width: 860px) {
  .canvas-version-arrow {
    width: 44px;
    height: 70px;
  }

  .canvas-version-arrow-left {
    left: 8px;
  }

  .canvas-version-arrow-right {
    right: 8px;
  }

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

.director-draw-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(1, 3, 4, 0.98);
}

.director-draw-overlay canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.director-draw-toolbar {
  position: fixed;
  left: 50%;
  top: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: #fff;
  background: rgba(8, 11, 12, 0.92);
  border: 1px solid rgba(200, 255, 0, 0.32);
  border-radius: 10px;
  transform: translateX(-50%);
}

.director-draw-toolbar input,
.director-draw-toolbar button {
  accent-color: var(--director-lime);
}

.director-color-palette {
  z-index: 940;
  width: 300px;
  padding-bottom: 14px;
}

.director-color-current {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.director-color-current span {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: var(--director-lime);
  box-shadow: 0 0 34px rgba(200, 255, 0, 0.28);
}

.director-color-current small {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 850;
}

.director-color-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 0 16px 14px;
}

.director-color-swatches button {
  width: 34px;
  height: 34px;
  background: var(--swatch);
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  cursor: pointer;
}

.director-color-swatches button.is-active {
  outline: 3px solid var(--director-lime);
  outline-offset: 3px;
}

.director-color-palette label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 900;
}

.director-canvas-context-menu {
  position: fixed;
  z-index: 950;
  display: grid;
  gap: 8px;
  width: 190px;
  padding: 8px;
  background: rgba(8, 11, 12, 0.98);
  border: 1px solid rgba(200, 255, 0, 0.42);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.director-canvas-context-menu button {
  width: 100%;
  min-height: 40px;
  color: #050607;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.director-agent-context-menu {
  z-index: 2147483400;
  width: 210px;
}

.director-agent-kimi-dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  color: #edf5e9;
  background: #111513;
  border: 1px solid rgba(200, 255, 0, 0.72);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.68), 0 0 28px rgba(200, 255, 0, 0.18);
}

.director-agent-kimi-dialog::backdrop {
  background: rgba(0, 0, 0, 0.54);
  backdrop-filter: blur(3px);
}

.director-agent-kimi-dialog form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.director-agent-kimi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(200, 255, 0, 0.2);
}

.director-agent-kimi-head h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.director-agent-kimi-head p,
.director-agent-kimi-result {
  margin: 6px 0 0;
  color: rgba(237, 245, 233, 0.78);
  font-size: 13px;
  line-height: 1.55;
}

.director-agent-kimi-head button,
.director-agent-kimi-actions button {
  color: #eaffbf;
  font-weight: 900;
  background: rgba(200, 255, 0, 0.08);
  border: 1px solid rgba(200, 255, 0, 0.72);
  border-radius: 10px;
  cursor: pointer;
}

.director-agent-kimi-head button {
  min-height: 34px;
  padding: 0 12px;
}

.director-agent-kimi-field {
  display: grid;
  gap: 7px;
}

.director-agent-kimi-field span {
  color: rgba(237, 245, 233, 0.86);
  font-size: 13px;
  font-weight: 900;
}

.director-agent-kimi-field input,
.director-agent-kimi-field select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: #f4ffe8;
  font: inherit;
  background: #070a08;
  border: 1px solid rgba(200, 255, 0, 0.36);
  border-radius: 10px;
  outline: none;
}

.director-agent-kimi-field input:focus,
.director-agent-kimi-field select:focus {
  border-color: var(--director-lime);
  box-shadow: 0 0 0 3px rgba(200, 255, 0, 0.14);
}

.director-agent-kimi-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.director-agent-kimi-actions button {
  min-height: 42px;
  padding: 0 16px;
}

.director-agent-kimi-actions button[type="submit"] {
  color: #071006;
  background: var(--director-lime);
}

.director-agent-kimi-result.is-ok {
  color: var(--director-lime);
}

.director-agent-kimi-result.is-error {
  color: #ff9a9a;
}

.director-ink-context-menu {
  position: fixed;
  z-index: 960;
  width: 260px;
  padding: 10px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(8, 11, 12, 0.98);
  border: 1px solid rgba(200, 255, 0, 0.48);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.58);
}

.ink-context-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.director-ink-context-menu button {
  min-height: 38px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 950;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  cursor: pointer;
}

.director-ink-context-menu button:hover,
.director-ink-context-menu button.is-active {
  color: #050607;
  background: var(--director-lime);
  border-color: var(--director-lime);
}

.ink-context-size {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  font-weight: 900;
}

.ink-context-size input {
  width: 100%;
  accent-color: var(--director-lime);
}

.director-copy-dialog {
  width: min(620px, calc(100vw - 40px));
  color: #fff;
  background: rgba(8, 11, 12, 0.98);
  border: 1px solid rgba(200, 255, 0, 0.42);
}

.director-copy-dialog textarea {
  width: calc(100% - 28px);
  min-height: 220px;
  margin: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.56);
}

.director-copy-dialog p {
  margin: 14px;
}

.director-layer-rename-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  color: #f6fff0;
  background: rgba(8, 11, 12, 0.98);
  border: 1px solid rgba(200, 255, 0, 0.42);
  border-radius: 8px;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.56);
}

.director-layer-rename-dialog::backdrop {
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(3px);
}

.director-layer-rename-dialog form {
  display: grid;
  gap: 14px;
}

.director-layer-rename-dialog .dialog-head {
  align-items: flex-start;
}

.director-layer-rename-dialog .dialog-head p {
  margin: 5px 0 0;
  color: rgba(246, 255, 240, 0.68);
  font-size: 12px;
}

.director-layer-rename-field {
  display: grid;
  gap: 7px;
  padding: 0 16px;
}

.director-layer-rename-field span {
  color: rgba(246, 255, 240, 0.82);
  font-size: 12px;
  font-weight: 950;
}

.director-layer-rename-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: #f6fff0;
  font: 900 14px/1.2 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  outline: none;
}

.director-layer-rename-field input:focus {
  border-color: rgba(200, 255, 0, 0.78);
  box-shadow: 0 0 0 3px rgba(200, 255, 0, 0.13);
}

.director-layer-rename-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 16px 16px;
}

.director-layer-rename-dialog button,
.director-layer-rename-actions button {
  min-height: 36px;
  padding: 0 13px;
  color: #eaffbf;
  font-weight: 950;
  background: rgba(200, 255, 0, 0.08);
  border: 1px solid rgba(200, 255, 0, 0.42);
  border-radius: 7px;
  cursor: pointer;
}

.director-layer-rename-actions button[type="submit"] {
  color: #071006;
  background: var(--director-lime);
  border-color: var(--director-lime);
}

.director-layer-rename-dialog button:hover,
.director-layer-rename-dialog button:focus-visible {
  outline: none;
  filter: brightness(1.08);
}

.director-script-result-dialog {
  width: min(980px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 56px));
  padding: 0;
  color: #fff;
  background: rgba(7, 10, 11, 0.98);
  border: 1px solid rgba(200, 255, 0, 0.6);
  border-radius: 10px;
  box-shadow:
    0 0 0 2px rgba(200, 255, 0, 0.12),
    0 24px 80px rgba(0, 0, 0, 0.68);
}

.director-script-result-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(200, 255, 0, 0.13), transparent 34%),
    rgba(0, 0, 0, 0.72);
}

.director-script-result-head,
.director-script-result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.director-script-result-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 0;
}

.director-script-result-button-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.director-script-result-head strong {
  display: block;
  font-size: 20px;
  font-weight: 950;
}

.director-script-result-head span,
.director-script-result-status {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 850;
}

.director-script-result-textarea {
  display: block;
  width: calc(100% - 32px);
  height: calc(100% - 132px);
  min-height: 420px;
  margin: 16px;
  padding: 16px;
  color: rgba(255, 255, 255, 0.96);
  font: 850 16px/1.78 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(200, 255, 0, 0.28);
  border-radius: 8px;
  resize: none;
  outline: none;
  white-space: pre-wrap;
}

.director-script-result-export-btn,
.director-script-result-copy-btn,
.director-script-result-close-btn {
  min-height: 34px;
  padding: 0 14px;
  color: #050607;
  font-size: 14px;
  font-weight: 950;
  background: var(--director-lime);
  border: 1px solid var(--director-lime);
  border-radius: 6px;
  cursor: pointer;
}

.director-script-result-close-btn {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.director-script-result-export-btn {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(200, 255, 0, 0.42);
}

.director-script-result-export-btn:hover {
  color: var(--director-lime);
  background: rgba(200, 255, 0, 0.1);
  box-shadow: 0 0 20px rgba(200, 255, 0, 0.18);
}

.director-script-result-copy-btn:hover {
  background: #e8ff4d;
  box-shadow: 0 0 20px rgba(200, 255, 0, 0.24);
}

.director-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.94);
}

.director-fullscreen-overlay button {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 2;
  min-height: 30px;
  padding: 0 10px;
  color: #050607;
  font-size: 13px;
  font-weight: 950;
  background: var(--director-lime);
  border: 0;
  border-radius: 7px;
}

.director-fullscreen-overlay img {
  max-width: 94vw;
  max-height: 92vh;
  object-fit: contain;
}

@keyframes directorScriptButtonPulse {
  from { background-position: 0% 50%; }
  to { background-position: 220% 50%; }
}

@keyframes directorScriptButtonSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes directorScriptOutputScan {
  from { background-position: 0% 50%, 0 0, 0 0; }
  to { background-position: 260% 50%, 0 0, 0 0; }
}

@keyframes directorScriptOutputGlow {
  from {
    box-shadow:
      0 0 0 1px rgba(200, 255, 0, 0.18),
      0 0 18px rgba(200, 255, 0, 0.12),
      inset 0 0 18px rgba(21, 230, 255, 0.06);
  }
  to {
    box-shadow:
      0 0 0 1px rgba(200, 255, 0, 0.4),
      0 0 34px rgba(200, 255, 0, 0.2),
      inset 0 0 30px rgba(21, 230, 255, 0.1);
  }
}

@media (max-width: 760px) {
  .director-script-agent {
    min-width: min(520px, calc(100vw - 32px));
  }

  .director-script-library-grid,
  .director-script-generate-settings {
    grid-template-columns: 1fr;
  }

  .director-script-library-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .director-script-library-stat {
    text-align: left;
  }
}
.director-current-canvas-name {
  max-width: min(220px, 18vw);
  min-height: clamp(26px, 2.2vw, 32px);
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(200, 255, 0, 0.42);
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(200, 255, 0, 0.12);
}

.director-current-canvas-name:focus-within {
  border-color: rgba(21, 230, 255, 0.82);
  box-shadow:
    0 0 0 3px rgba(21, 230, 255, 0.14),
    0 0 20px rgba(21, 230, 255, 0.18);
}

.director-current-canvas-name-display,
.director-current-canvas-name input {
  width: 100%;
  min-width: 0;
  min-height: clamp(26px, 2.2vw, 32px);
  padding: 0 clamp(10px, 1vw, 14px);
  color: #c8ff00;
  font: 950 clamp(12px, 0.78vw, 14px)/1 "Microsoft YaHei", system-ui, sans-serif;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  border: 0;
  border-radius: 6px;
  outline: none;
}

.director-current-canvas-name-display {
  cursor: default;
}

.director-current-canvas-name-display[hidden],
.director-current-canvas-name input[hidden] {
  display: none;
}

.director-current-canvas-name-display:hover,
.director-current-canvas-name-display:focus-visible {
  color: #e5ff67;
}

.director-page .reference-header .nav-actions {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.director-page .reference-header .nav-actions .nav-link-button {
  flex: 0 0 auto;
}

.director-page .reference-header .nav-shell {
  width: min(100% - 24px, 1680px);
  grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 8px;
}

.director-page .reference-header .brand {
  grid-column: 1;
  grid-row: 1;
}

.director-page .reference-header .nav-actions {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

.director-page .reference-header .nav-links {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: flex-start;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.director-page .reference-header .nav-links::-webkit-scrollbar,
.director-page .reference-header .nav-actions::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1380px) {
  .director-page .reference-header .nav-shell {
    width: min(100% - 24px, 1280px);
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 8px;
  }

  .director-page .reference-header .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .director-page .reference-header .nav-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    max-width: 100%;
    overflow-x: auto;
  }

  .director-page .reference-header .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 100%;
  }

  .director-page .reference-header .nav-links {
    justify-content: flex-start;
    gap: clamp(10px, 1.2vw, 20px);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .director-page .reference-header .login-button,
  .director-page .reference-header .nav-cta {
    padding-inline: clamp(8px, 0.8vw, 12px);
  }

  .director-current-canvas-name {
    max-width: clamp(78px, 11vw, 160px);
  }
}

@media (max-width: 1120px) {
  .director-page .reference-header .nav-shell {
    grid-template-columns: 1fr;
    padding-right: clamp(12px, 1.4vw, 28px);
    row-gap: 8px;
  }

  .director-page .reference-header .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .director-page .reference-header .nav-links {
    grid-column: 1;
    grid-row: 3;
    max-width: 100%;
  }

  .director-page .reference-header .nav-actions {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .director-current-canvas-name {
    max-width: 180px;
    flex: 0 0 auto;
  }
}

@media (max-width: 680px) {
  .director-page .reference-header .nav-shell {
    width: calc(100% - 18px);
    gap: 7px;
  }

  .director-current-canvas-name {
    max-width: 150px;
  }
}

.director-page .reference-header .nav-links {
  display: none;
}

.director-edge-nav {
  position: fixed;
  top: 72px;
  bottom: 0;
  z-index: 1450;
  width: 78px;
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.director-edge-nav-left {
  left: 0;
  justify-content: flex-start;
}

.director-edge-nav-right {
  right: 0;
  justify-content: flex-end;
}

.director-edge-nav-button {
  min-width: 48px;
  min-height: 86px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(191, 255, 0, 0.48);
  border-radius: 0 10px 10px 0;
  background: rgba(4, 8, 8, 0.9);
  box-shadow: 0 0 26px rgba(191, 255, 0, 0.16);
  color: #bfff00;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-18px);
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.director-edge-nav-right .director-edge-nav-button {
  border-radius: 10px 0 0 10px;
  transform: translateX(18px);
}

.director-edge-nav-button span {
  font-size: 34px;
  line-height: 1;
}

.director-edge-nav:hover .director-edge-nav-button,
.director-edge-nav:focus-within .director-edge-nav-button,
.director-edge-nav.is-edge-nav-active .director-edge-nav-button {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.director-edge-nav-button:hover,
.director-edge-nav-button:focus-visible {
  border-color: rgba(191, 255, 0, 0.85);
  background: rgba(10, 18, 14, 0.96);
  outline: none;
}

@media (max-width: 1120px) {
  .director-edge-nav {
    top: 118px;
    width: 64px;
  }

  .director-edge-nav-button {
    min-height: 74px;
    padding: 0 12px;
  }

  .director-edge-nav-button strong {
    display: none;
  }
}

@media (max-width: 680px) {
  .director-edge-nav {
    top: 112px;
    width: 54px;
  }

  .director-edge-nav-button {
    min-width: 42px;
    min-height: 66px;
    padding: 0 10px;
  }
}

/* v71 Thread C: right panels and bottom brush console as real DOM HUD controls. */
.director-painting-color-window,
.director-painting-layer-window {
  right: 26px;
  width: 304px;
}

.director-painting-color-window {
  top: 18px;
  min-height: 346px;
  padding: 13px 14px 16px;
}

.director-painting-layer-window {
  top: 392px;
  bottom: 18px;
  padding: 13px 14px 14px;
}

.director-painting-color-panel,
.director-painting-layer-panel {
  color: rgba(230, 237, 225, 0.9);
  background:
    linear-gradient(135deg, transparent 0 18px, rgba(13, 18, 17, 0.98) 18px calc(100% - 18px), transparent calc(100% - 18px)),
    radial-gradient(circle at 88% 8%, rgba(196, 255, 44, 0.09), transparent 24%),
    linear-gradient(180deg, rgba(20, 25, 23, 0.96), rgba(3, 7, 7, 0.97)) !important;
  border-color: rgba(182, 255, 34, 0.26);
  box-shadow:
    0 30px 88px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 30px rgba(170, 255, 25, 0.08);
}

.director-painting-color-panel::before,
.director-painting-layer-panel::before {
  inset: 6px;
  width: auto;
  height: auto;
  border: 1px solid rgba(171, 255, 32, 0.14);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}

.director-painting-color-panel::after,
.director-painting-layer-panel::after {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  background:
    linear-gradient(90deg, rgba(197, 255, 45, 0.76) 0 18px, transparent 18px calc(100% - 18px), rgba(197, 255, 45, 0.66) calc(100% - 18px)) top / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(197, 255, 45, 0.42) 0 24px, transparent 24px calc(100% - 24px), rgba(197, 255, 45, 0.42) calc(100% - 24px)) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(197, 255, 45, 0.5) 0 24px, transparent 24px calc(100% - 24px), rgba(197, 255, 45, 0.5) calc(100% - 24px)) left / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(197, 255, 45, 0.5) 0 24px, transparent 24px calc(100% - 24px), rgba(197, 255, 45, 0.5) calc(100% - 24px)) right / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 12px, rgba(197, 255, 45, 0.025) 12px 13px);
  opacity: 0.82;
}

.director-painting-color-panel header,
.director-painting-layer-panel header {
  height: 44px;
  min-height: 44px;
  padding: 0 2px 0 0;
  border-bottom-color: rgba(197, 255, 45, 0.12);
}

.director-painting-color-panel header strong,
.director-painting-layer-panel header strong {
  font-size: 16px;
  font-weight: 820;
  color: rgba(238, 245, 232, 0.92);
}

.director-painting-color-panel header .director-painting-drag-label {
  width: 25px;
  height: 25px;
  margin-left: auto;
  overflow: hidden;
  color: rgba(222, 235, 217, 0.72);
  font-size: 0;
}

.director-painting-color-panel header .director-painting-drag-label::before {
  display: block;
  width: 21px;
  height: 18px;
  margin: 3px auto 0;
  content: "";
  background:
    radial-gradient(circle at 34% 22%, currentColor 0 2px, transparent 2.5px),
    radial-gradient(circle at 66% 50%, currentColor 0 2px, transparent 2.5px),
    radial-gradient(circle at 42% 78%, currentColor 0 2px, transparent 2.5px),
    linear-gradient(currentColor 0 0) 0 22% / 100% 1px no-repeat,
    linear-gradient(currentColor 0 0) 0 50% / 100% 1px no-repeat,
    linear-gradient(currentColor 0 0) 0 78% / 100% 1px no-repeat;
  opacity: 0.9;
}

.director-painting-color-panel header input[data-painting-color] {
  width: 24px;
  height: 24px;
  padding: 2px;
  background: rgba(0, 0, 0, 0.56);
  border-color: rgba(197, 255, 45, 0.34);
  box-shadow: 0 0 12px color-mix(in srgb, var(--painting-accent, #bbff16) 36%, transparent);
}

.director-painting-color-wheel {
  width: 220px;
  height: 220px;
  margin: 9px auto 9px;
  background:
    radial-gradient(circle, transparent 0 51%, rgba(0, 0, 0, 0.84) 52% 63%, transparent 64%),
    conic-gradient(#ff2638, #ffeb29, #37f75a, #20e5d7, #2449ff, #c22fff, #ff2638);
  box-shadow:
    0 0 0 18px rgba(0, 0, 0, 0.34) inset,
    0 0 30px rgba(0, 0, 0, 0.42),
    0 0 18px rgba(197, 255, 45, 0.08);
}

.director-painting-color-wheel span {
  inset: 41px;
  clip-path: polygon(50% 0, 100% 82%, 0 82%);
  background: linear-gradient(135deg, #f7fff0 0, #83ddd2 42%, #087b67 72%, #040807 100%);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.48));
}

.director-painting-color-wheel::before {
  right: 8px;
  top: 44%;
  width: 18px;
  height: 18px;
}

.director-painting-color-wheel::after {
  left: 43px;
  bottom: 18px;
  width: 18px;
  height: 18px;
}

.director-painting-color-panel p {
  margin: 4px 0 8px;
  color: rgba(223, 232, 216, 0.72);
  font-size: 13px;
  font-weight: 760;
}

.director-painting-swatches {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.director-painting-swatches button {
  height: 31px;
  border-radius: 3px;
  border-color: rgba(197, 255, 45, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.72) inset,
    0 6px 12px rgba(0, 0, 0, 0.26);
}

.director-painting-layer-panel header .director-painting-drag-label {
  margin-left: auto;
  color: rgba(197, 255, 45, 0.48);
  font-size: 0;
}

.director-painting-layer-panel header .director-painting-drag-label::before {
  content: "...";
  color: rgba(220, 228, 216, 0.62);
  font-size: 18px;
  letter-spacing: 1px;
}

.director-painting-layer-panel header button[data-painting-add-layer] {
  width: 27px;
  min-width: 27px;
  height: 27px;
  color: rgba(231, 240, 224, 0.78);
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(197, 255, 45, 0.18);
}

.director-painting-blend-row {
  height: 38px;
  margin: 6px 0 8px;
  padding-bottom: 8px;
  color: rgba(223, 232, 216, 0.7);
  border-bottom-color: rgba(197, 255, 45, 0.12);
}

.director-painting-blend-row select,
.director-painting-blend-row b {
  height: 27px;
  color: rgba(232, 240, 226, 0.88);
  background: rgba(0, 0, 0, 0.34);
  border-color: rgba(197, 255, 45, 0.13);
  border-radius: 3px;
}

.director-painting-layers {
  gap: 5px;
  padding: 3px 2px 3px 0;
}

.director-painting-layer {
  grid-template-columns: 22px minmax(0, 1fr) 24px;
  min-height: 44px;
  padding: 4px 7px;
  color: rgba(228, 236, 222, 0.76);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 62%),
    rgba(0, 0, 0, 0.24);
  border-color: rgba(255, 255, 255, 0.075);
  border-radius: 2px;
}

.director-painting-layer.is-active {
  color: #f8ffe8;
  background:
    linear-gradient(90deg, rgba(197, 255, 45, 0.21), rgba(197, 255, 45, 0.08) 76%, rgba(0, 0, 0, 0.24));
  border-color: rgba(197, 255, 45, 0.62);
  box-shadow:
    0 0 0 1px rgba(197, 255, 45, 0.12) inset,
    0 0 22px rgba(197, 255, 45, 0.13);
}

.director-painting-layer.is-locked:not(.is-active) {
  border-color: rgba(255, 255, 255, 0.11);
}

.director-painting-layer-eye {
  color: rgba(216, 229, 211, 0.74);
  font-size: 12px;
}

.director-painting-layer.is-active .director-painting-layer-eye {
  color: rgba(219, 255, 98, 0.92);
}

.director-painting-layer-select {
  grid-template-columns: 43px minmax(0, 1fr);
  gap: 8px;
}

.director-painting-layer-thumb {
  position: relative;
  width: 43px;
  height: 29px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(12, 18, 16, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(12, 18, 16, 0.07) 1px, transparent 1px),
    #f5f2e8;
  background-size: 9px 9px;
  border-color: rgba(197, 255, 45, 0.16);
}

.director-painting-layer-thumb::after {
  position: absolute;
  inset: 5px 6px;
  content: "";
  opacity: var(--painting-thumb-strokes, 0);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 24% 60%, rgba(25, 36, 31, 0.62) 0 14%, transparent 46%),
    linear-gradient(100deg, transparent 0 12%, rgba(21, 32, 27, 0.48) 25% 70%, transparent 88%);
  filter: blur(0.6px);
  transform: rotate(-8deg);
}

.director-painting-layer strong {
  color: rgba(234, 242, 228, 0.92);
  font-size: 12px;
  font-weight: 760;
}

.director-painting-layer small {
  color: rgba(197, 255, 45, 0.62);
  font-size: 9px;
}

.director-painting-layer-actions {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

.director-painting-layer-lock {
  display: grid;
  width: 18px;
  height: 11px;
  place-items: center;
  color: rgba(222, 232, 217, 0.68);
  font-size: 10px;
  line-height: 1;
}

.director-painting-layer:not(.is-locked) .director-painting-layer-lock {
  display: none;
}

.director-painting-layer-actions button {
  width: 20px;
  height: 20px;
  color: rgba(223, 232, 216, 0.54);
  font-size: 13px;
}

.director-painting-layer-footer {
  gap: 6px;
  margin-top: 9px;
  padding-top: 10px;
  border-top-color: rgba(197, 255, 45, 0.12);
}

.director-painting-layer-footer button {
  display: flex;
  height: 40px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 1px 3px;
  overflow: hidden;
  color: rgba(225, 233, 219, 0.62);
  font-size: 9px;
  line-height: 1.1;
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(197, 255, 45, 0.14);
  border-radius: 2px;
}

.director-painting-layer-footer button::before {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  color: rgba(223, 232, 216, 0.72);
  font-size: 19px;
  line-height: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "" !important;
  filter: drop-shadow(0 0 5px rgba(190, 255, 45, 0.08));
}

.director-painting-layer-footer button[data-painting-add-layer]::before {
  background-image: url("./assets/painting-layer-footer-icons/new-layer.png");
}

.director-painting-layer-footer button[data-painting-delete-active-layer]::before {
  background-image: url("./assets/painting-layer-footer-icons/delete-layer.png");
}

.director-painting-layer-footer button[data-painting-duplicate-active-layer]::before {
  background-image: url("./assets/painting-layer-footer-icons/mask-layer.png");
}

.director-painting-layer-footer button[data-painting-link-layer]::before {
  background-image: url("./assets/painting-layer-footer-icons/link-layer.png");
}

.director-painting-layer-footer button[data-painting-merge-layer]::before {
  background-image: url("./assets/painting-layer-footer-icons/merge-layer.png");
}

.director-painting-brush-popover {
  left: 50%;
  bottom: 27px;
  z-index: 7;
  grid-template-columns: 164px minmax(430px, 1fr) 240px;
  width: min(980px, calc(100% - 90px));
  height: 148px;
  min-height: 148px;
  padding: 0 29px 0 33px;
  background:
    linear-gradient(135deg, transparent 0 18px, rgba(12, 17, 16, 0.97) 18px calc(100% - 18px), transparent calc(100% - 18px)),
    radial-gradient(circle at 11% 50%, rgba(197, 255, 45, 0.11), transparent 13%),
    linear-gradient(180deg, rgba(24, 30, 28, 0.97), rgba(2, 6, 6, 0.98));
  border: 1px solid rgba(197, 255, 45, 0.22);
  box-shadow:
    0 28px 76px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset;
  transform: translateX(calc(-50% - 110px));
}

.director-painting-brush-popover::before {
  inset: 5px;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  border-color: rgba(197, 255, 45, 0.12);
}

.director-painting-brush-popover::after {
  background:
    linear-gradient(90deg, transparent 0 45%, rgba(197, 255, 45, 0.5) 45% 55%, transparent 55%) bottom 5px center / 120px 2px no-repeat,
    linear-gradient(90deg, transparent 0 48%, rgba(197, 255, 45, 0.84) 48% 52%, transparent 52%) bottom 11px center / 84px 2px no-repeat,
    linear-gradient(90deg, rgba(197, 255, 45, 0.44) 0 26px, transparent 26px calc(100% - 26px), rgba(197, 255, 45, 0.44) calc(100% - 26px)) top / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(197, 255, 45, 0.34) 0 34px, transparent 34px calc(100% - 34px), rgba(197, 255, 45, 0.34) calc(100% - 34px)) bottom / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 74px, rgba(255, 255, 255, 0.026) 74px 75px);
}

.director-painting-brush-size {
  width: 120px;
  height: 120px;
  margin-left: -4px;
  box-shadow:
    0 0 0 1px rgba(197, 255, 45, 0.3),
    0 0 0 6px rgba(197, 255, 45, 0.035),
    0 0 26px rgba(197, 255, 45, 0.18),
    inset 0 0 36px rgba(0, 0, 0, 0.58);
}

.director-painting-brush-core {
  width: 70px;
  height: 70px;
}

.director-painting-slider-grid {
  gap: 18px 34px;
  margin-top: 31px;
}

.director-painting-brush-popover label {
  color: rgba(204, 213, 201, 0.68);
  font-size: 12px;
  font-weight: 540;
}

.director-painting-brush-popover label span {
  color: rgba(217, 226, 211, 0.66);
}

.director-painting-brush-type {
  height: 105px;
  margin-top: 17px;
  padding-top: 7px;
}

.director-painting-brush-type > span {
  height: 62px;
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 24% 56%, rgba(255, 255, 255, 0.94) 0 8%, rgba(255, 255, 255, 0.52) 19%, transparent 38%),
    radial-gradient(ellipse at 54% 50%, rgba(255, 255, 255, 0.82) 0 7%, rgba(255, 255, 255, 0.34) 20%, transparent 44%),
    radial-gradient(ellipse at 78% 42%, rgba(255, 255, 255, 0.58) 0 5%, rgba(255, 255, 255, 0.2) 18%, transparent 39%);
}

@media (max-width: 1180px) {
  .director-painting-color-window,
  .director-painting-layer-window {
    right: 18px;
    width: 292px;
  }

  .director-painting-brush-popover {
    grid-template-columns: 140px minmax(320px, 1fr) 210px;
    width: min(880px, calc(100% - 58px));
    transform: translateX(-50%);
  }
}

/* v72 main integration polish: the painting board is a body-level window; hide the old canvas world behind it. */
body.director-painting-board-open .director-canvas-world {
  display: none !important;
}

body.director-painting-board-open .site-app::before,
body.director-painting-board-open .site-app::after {
  display: none !important;
}

/* v72 Thread A correction: closer top-shell proportions after reference comparison. */
.director-painting-board {
  --painting-topbar-h: 64px;
  background:
    linear-gradient(135deg, transparent 0 17px, #151a18 17px calc(100% - 17px), transparent calc(100% - 17px)),
    linear-gradient(90deg, rgba(185, 255, 32, 0.18), transparent 7% 93%, rgba(185, 255, 32, 0.18)),
    linear-gradient(180deg, #0d1311 0, #050807 58%, #000 100%);
}

.director-painting-topbar {
  grid-template-columns: 440px minmax(470px, 1fr) 476px;
  height: var(--painting-topbar-h);
  padding: 0 16px 0 53px;
  background:
    linear-gradient(135deg, transparent 0 15px, rgba(21, 25, 23, 0.98) 15px calc(100% - 15px), transparent calc(100% - 15px)),
    linear-gradient(90deg, transparent 0 7%, rgba(255, 255, 255, 0.035) 7% 8%, transparent 8% 30%, rgba(0, 0, 0, 0.34) 30% 32%, transparent 32% 68%, rgba(0, 0, 0, 0.34) 68% 70%, transparent 70% 92%, rgba(255, 255, 255, 0.035) 92% 93%, transparent 93%),
    linear-gradient(180deg, #171c1a 0, #090d0c 48%, #020403 100%);
  border-bottom-color: rgba(168, 255, 31, 0.38);
  box-shadow:
    0 1px 0 rgba(241, 255, 221, 0.1) inset,
    0 -1px 0 rgba(0, 0, 0, 0.95) inset,
    0 10px 24px rgba(0, 0, 0, 0.72);
}

.director-painting-topbar::before {
  inset: 3px 24px auto;
  height: 24px;
  background:
    linear-gradient(90deg, rgba(200, 255, 43, 0.75) 0 13px, transparent 13px 25%, rgba(62, 72, 65, 0.5) 25% 26%, transparent 26% 38%, rgba(200, 255, 43, 0.26) 38% 40%, transparent 40% 46%, rgba(67, 78, 70, 0.5) 46% 47%, transparent 47% 53%, rgba(67, 78, 70, 0.5) 53% 54%, transparent 54% 60%, rgba(200, 255, 43, 0.26) 60% 62%, transparent 62% 74%, rgba(62, 72, 65, 0.5) 74% 75%, transparent 75% calc(100% - 13px), rgba(200, 255, 43, 0.75) calc(100% - 13px)),
    repeating-linear-gradient(90deg, transparent 0 71px, rgba(255, 255, 255, 0.04) 71px 72px, transparent 72px 145px);
  opacity: 0.68;
}

.director-painting-topbar::after {
  bottom: 7px;
  width: min(560px, 33vw);
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(80, 92, 82, 0.72) 8% 24%, transparent 24% 36%, rgba(200, 255, 43, 0.92) 36% 64%, transparent 64% 76%, rgba(80, 92, 82, 0.72) 76% 92%, transparent 92%);
}

.director-painting-menu-bar {
  gap: 20px;
  padding-right: 18px;
}

.director-painting-menu-bar::before {
  inset: 8px 12px 7px 0;
  background:
    linear-gradient(135deg, transparent 0 12px, rgba(6, 10, 10, 0.64) 12px calc(100% - 38px), transparent calc(100% - 38px)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 45%, rgba(0, 0, 0, 0.42)),
    rgba(3, 6, 6, 0.46);
  border-top-color: rgba(87, 100, 91, 0.42);
  clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 100%, 0 100%);
}

.director-painting-menu-bar::after {
  position: absolute;
  right: 31px;
  bottom: 5px;
  z-index: -1;
  width: 96px;
  height: 2px;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(200, 255, 43, 0.42), transparent);
}

.director-painting-menu-bar button {
  min-width: 54px;
  height: 41px;
  font-size: 14px;
  font-weight: 820;
}

.director-painting-title-wrap::before {
  inset: 6px 46px 6px;
  clip-path: polygon(62px 0, calc(100% - 62px) 0, 100% 50%, calc(100% - 62px) 100%, 62px 100%, 0 50%);
  background:
    linear-gradient(135deg, transparent 0 38px, rgba(13, 18, 17, 0.88) 38px calc(100% - 38px), transparent calc(100% - 38px)),
    linear-gradient(90deg, transparent 0 13%, rgba(66, 78, 68, 0.45) 13% 14%, transparent 14% 38%, rgba(200, 255, 43, 0.06) 47% 53%, transparent 62% 86%, rgba(66, 78, 68, 0.45) 86% 87%, transparent 87%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.54)),
    rgba(4, 7, 7, 0.72);
}

.director-painting-title-wrap::after {
  position: absolute;
  top: 7px;
  left: 50%;
  z-index: 0;
  width: min(440px, calc(100% - 140px));
  height: 8px;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(200, 255, 43, 0.36) 11% 17%, transparent 17% 38%, rgba(200, 255, 43, 0.18) 38% 44%, transparent 44% 56%, rgba(200, 255, 43, 0.18) 56% 62%, transparent 62% 83%, rgba(200, 255, 43, 0.36) 83% 89%, transparent 89%);
  transform: translateX(-50%);
}

.director-painting-title {
  width: min(296px, 60%);
  height: 42px;
  font-size: 17px;
  line-height: 42px;
}

.director-painting-title-underline {
  bottom: 7px;
  width: 176px;
}

.director-painting-top-actions {
  padding-left: 14px;
}

.director-painting-top-actions::before {
  inset: 7px 0 7px 18px;
  background:
    linear-gradient(225deg, transparent 0 12px, rgba(6, 10, 10, 0.68) 12px calc(100% - 12px), transparent calc(100% - 12px)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 45%, rgba(0, 0, 0, 0.5)),
    rgba(3, 6, 6, 0.5);
  border-top-color: rgba(87, 100, 91, 0.42);
  clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%, 0 54%);
}

.director-painting-top-actions::after {
  position: absolute;
  right: 4px;
  bottom: 3px;
  z-index: -1;
  width: 50px;
  height: 2px;
  pointer-events: none;
  content: "";
  background: rgba(200, 255, 43, 0.9);
  box-shadow: 0 0 12px rgba(200, 255, 43, 0.8);
}

.director-painting-top-actions > button[data-painting-undo],
.director-painting-top-actions > button[data-painting-redo],
.director-painting-top-actions > button[data-painting-export],
.director-painting-top-actions > button[data-painting-command],
.director-painting-top-actions > button[data-painting-top-close] {
  min-width: 74px;
  height: 50px;
  padding: 0 14px;
  font-size: 17px;
  border-left-color: rgba(83, 95, 88, 0.42) !important;
}

.director-painting-top-actions > button[data-painting-export] {
  min-width: 88px;
}

.director-painting-top-actions > button[data-painting-command] {
  min-width: 58px;
  font-size: 21px;
}

.director-painting-top-actions > button[data-painting-top-close] {
  min-width: 58px;
  height: 58px;
  margin-left: 3px;
  font-size: 28px;
}

.director-painting-topbar button span {
  font-size: 13px;
}

.director-painting-shell {
  height: calc(100% - var(--painting-topbar-h));
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.48), transparent 11% 89%, rgba(0, 0, 0, 0.54)),
    linear-gradient(180deg, #030706, #010202);
}

.director-painting-stage {
  padding: 0;
  place-items: stretch;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), transparent 10% 90%, rgba(0, 0, 0, 0.36)),
    linear-gradient(180deg, rgba(200, 255, 43, 0.035), transparent 18% 78%, rgba(0, 0, 0, 0.22)),
    #030706;
}

.director-painting-stage::before {
  background:
    linear-gradient(90deg, transparent 0 28px, rgba(200, 255, 43, 0.72) 28px 62px, transparent 62px calc(100% - 62px), rgba(200, 255, 43, 0.72) calc(100% - 62px) calc(100% - 28px), transparent calc(100% - 28px)) top / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 92px, rgba(200, 255, 43, 0.54) 92px 124px, transparent 124px calc(100% - 124px), rgba(200, 255, 43, 0.54) calc(100% - 124px) calc(100% - 92px), transparent calc(100% - 92px)) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, transparent 0 38px, rgba(200, 255, 43, 0.54) 38px 66px, transparent 66px calc(100% - 66px), rgba(200, 255, 43, 0.54) calc(100% - 66px) calc(100% - 38px), transparent calc(100% - 38px)) left / 2px 100% no-repeat,
    linear-gradient(180deg, transparent 0 38px, rgba(200, 255, 43, 0.54) 38px 66px, transparent 66px calc(100% - 66px), rgba(200, 255, 43, 0.54) calc(100% - 66px) calc(100% - 38px), transparent calc(100% - 38px)) right / 2px 100% no-repeat;
}

.director-painting-canvas {
  width: 100%;
  height: 100%;
  box-shadow:
    0 0 0 1px rgba(214, 255, 82, 0.18),
    0 0 0 8px rgba(8, 12, 10, 0.74),
    0 0 0 15px rgba(55, 65, 56, 0.32),
    0 32px 96px rgba(0, 0, 0, 0.62);
}

@media (max-width: 1180px) {
  .director-painting-topbar {
    grid-template-columns: minmax(300px, 0.9fr) minmax(310px, 1fr) minmax(300px, 0.9fr);
  }

  .director-painting-menu-bar {
    gap: 14px;
  }
}

/* v73 main viewport correction: keep the HUD board filling tall desktop captures. */
.director-painting-board {
  height: calc(100dvh - 4px) !important;
  max-height: calc(100dvh - 4px) !important;
}

.director-painting-shell {
  min-height: 0;
}

/* v73 right-panel detail correction: reference color picker triangle points right. */
.director-painting-color-wheel span {
  inset: 39px 30px 39px 55px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background:
    linear-gradient(90deg, rgba(246, 255, 246, 0.96) 0, rgba(127, 219, 211, 0.8) 36%, rgba(12, 130, 104, 0.92) 76%, rgba(3, 7, 7, 0.98) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), transparent 55%, rgba(0, 0, 0, 0.62));
}

/* v74 reference detail pass: tighten the real HUD windows toward the supplied board crop. */
.director-painting-tool-window {
  width: 150px;
  padding: 0 9px 17px;
  background:
    linear-gradient(135deg, transparent 0 18px, rgba(5, 8, 8, 0.99) 18px calc(100% - 18px), transparent calc(100% - 18px)),
    radial-gradient(circle at 50% 1%, rgba(210, 255, 70, 0.07), transparent 16%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.98), rgba(15, 21, 19, 0.96) 48%, rgba(0, 0, 0, 0.94));
  border-color: rgba(153, 190, 112, 0.28);
  box-shadow:
    12px 0 34px rgba(0, 0, 0, 0.48),
    0 0 0 4px rgba(0, 0, 0, 0.78) inset,
    0 0 0 1px rgba(210, 255, 83, 0.2) inset,
    0 0 22px rgba(181, 255, 31, 0.09);
}

.director-painting-tool-window::before {
  inset: 8px 7px;
  background:
    linear-gradient(90deg, rgba(200, 255, 43, 0.66) 0 22px, transparent 22px calc(100% - 22px), rgba(200, 255, 43, 0.5) calc(100% - 22px)) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(200, 255, 43, 0.5) 0 26px, transparent 26px calc(100% - 26px), rgba(200, 255, 43, 0.45) calc(100% - 26px)) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(200, 255, 43, 0.62) 0 16px, transparent 16px calc(100% - 16px), rgba(200, 255, 43, 0.6) calc(100% - 16px)) left / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(200, 255, 43, 0.62) 0 16px, transparent 16px calc(100% - 16px), rgba(200, 255, 43, 0.6) calc(100% - 16px)) right / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 26%, transparent 78%, rgba(255, 255, 255, 0.028));
}

.director-painting-tool-window::after {
  background:
    linear-gradient(90deg, transparent 0 28%, rgba(200, 255, 43, 0.88) 28% 72%, transparent 72%) top 17px center / 68px 2px no-repeat,
    linear-gradient(90deg, transparent 0 31%, rgba(200, 255, 43, 0.76) 31% 69%, transparent 69%) bottom 17px center / 68px 2px no-repeat,
    linear-gradient(180deg, rgba(200, 255, 43, 0.82) 0 14px, transparent 14px 86%, rgba(200, 255, 43, 0.72) 86% 100%) left 13px top 84px / 2px 111px no-repeat,
    linear-gradient(180deg, rgba(200, 255, 43, 0.5), transparent 18% 74%, rgba(200, 255, 43, 0.42)) right 13px top 84px / 1px 128px no-repeat,
    repeating-linear-gradient(0deg, rgba(200, 255, 43, 0.86) 0 3px, transparent 3px 9px) right 15px bottom 126px / 3px 67px no-repeat,
    repeating-linear-gradient(0deg, rgba(200, 255, 43, 0.22) 0 2px, transparent 2px 7px) left 34px bottom 122px / 25px 56px no-repeat,
    repeating-linear-gradient(90deg, rgba(200, 255, 43, 0.16) 0 3px, transparent 3px 7px) left 34px bottom 106px / 50px 24px no-repeat,
    linear-gradient(90deg, rgba(200, 255, 43, 0.45), transparent 64%) left 33px bottom 97px / 48px 1px no-repeat,
    radial-gradient(circle at 43px calc(100% - 171px), rgba(200, 255, 43, 0.66) 0 1px, transparent 2px),
    radial-gradient(circle at 66px calc(100% - 136px), rgba(200, 255, 43, 0.45) 0 1px, transparent 2px),
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(200, 255, 43, 0.025) 10px 11px);
}

.director-painting-tool-window .director-painting-palette-head {
  min-height: 40px;
  padding: 0 10px;
}

.director-painting-tool-window .director-painting-palette-head strong,
.director-painting-tool-window .director-painting-palette-head span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.director-painting-tool-window .director-painting-palette-head::before {
  left: 37px;
  top: 16px;
  width: 42px;
}

.director-painting-tool-window .director-painting-toolbar {
  grid-auto-rows: 40px;
  padding-top: 1px;
}

.director-painting-tool-window .director-painting-toolbar button {
  width: calc(100% - 12px);
  min-height: 40px;
  margin-left: 0;
  grid-template-columns: 33px minmax(0, 1fr);
  gap: 7px;
  padding-left: 6px;
  font-size: 13px;
  letter-spacing: 0;
}

.director-painting-tool-window .director-painting-toolbar button.is-active {
  background:
    linear-gradient(90deg, rgba(205, 255, 54, 0.38), rgba(197, 255, 45, 0.16) 64%, rgba(197, 255, 45, 0.025)) !important;
  border-color: rgba(204, 255, 63, 0.82);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.24) inset,
    0 0 18px rgba(200, 255, 43, 0.32),
    0 0 24px rgba(200, 255, 43, 0.15) inset !important;
}

.director-painting-color-window,
.director-painting-layer-window {
  right: 24px;
  width: 300px;
}

.director-painting-color-window {
  min-height: 345px;
}

.director-painting-color-panel,
.director-painting-layer-panel,
.director-painting-brush-popover {
  background-color: #050909 !important;
}

.director-painting-color-wheel {
  width: 219px;
  height: 219px;
  margin-top: 8px;
  background:
    radial-gradient(circle at 50% 50%, #080d0d 0 54%, rgba(8, 13, 13, 0.98) 55% 60%, transparent 61%),
    conic-gradient(from 18deg, #f62736 0 8%, #ffec26 15%, #46fb3d 31%, #18dfd8 48%, #224eff 64%, #bf2bff 81%, #f62736 100%);
  border-radius: 50%;
  box-shadow:
    0 0 0 12px rgba(0, 0, 0, 0.52) inset,
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 13px 25px rgba(0, 0, 0, 0.44),
    0 0 18px rgba(190, 255, 40, 0.08);
}

.director-painting-color-wheel span {
  inset: 44px 31px 43px 66px;
  z-index: 1;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background:
    linear-gradient(90deg, rgba(250, 255, 247, 0.96) 0, rgba(155, 223, 218, 0.86) 30%, rgba(26, 132, 110, 0.9) 69%, rgba(3, 9, 9, 0.98) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 56%, rgba(0, 0, 0, 0.7));
  filter:
    drop-shadow(0 11px 15px rgba(0, 0, 0, 0.55))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.16));
}

.director-painting-color-wheel::before {
  right: 3px;
  top: 46%;
  z-index: 2;
  width: 19px;
  height: 19px;
  background: rgba(250, 36, 47, 0.96);
}

.director-painting-color-wheel::after {
  left: 44px;
  bottom: 21px;
  z-index: 2;
  width: 19px;
  height: 19px;
  background: rgba(40, 68, 255, 0.96);
}

.director-painting-color-panel p {
  margin-top: 3px;
  margin-bottom: 8px;
}

.director-painting-layer {
  min-height: 42px;
  padding: 4px 7px 4px 6px;
}

.director-painting-layer-thumb {
  width: 42px;
  height: 28px;
  background-color: #ecece0;
  background-size: 8px 8px;
}

.director-painting-layer-footer button {
  height: 36px;
  padding-top: 17px;
}

.director-painting-brush-popover {
  bottom: 25px;
  grid-template-columns: 163px minmax(430px, 1fr) 236px;
  height: 145px;
  min-height: 145px;
  padding: 0 27px 0 31px;
  border-color: rgba(190, 255, 45, 0.25);
  box-shadow:
    0 28px 78px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 28px rgba(190, 255, 45, 0.07);
}

.director-painting-brush-popover::before {
  inset: 6px;
  border-color: rgba(197, 255, 45, 0.13);
}

.director-painting-brush-popover::after {
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(197, 255, 45, 0.58) 44% 56%, transparent 56%) bottom 5px center / 122px 2px no-repeat,
    linear-gradient(90deg, transparent 0 48%, rgba(197, 255, 45, 0.9) 48% 52%, transparent 52%) bottom 11px center / 82px 2px no-repeat,
    linear-gradient(90deg, rgba(197, 255, 45, 0.48) 0 30px, transparent 30px calc(100% - 30px), rgba(197, 255, 45, 0.44) calc(100% - 30px)) top / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(197, 255, 45, 0.38) 0 36px, transparent 36px calc(100% - 36px), rgba(197, 255, 45, 0.34) calc(100% - 36px)) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, transparent 0 18px, rgba(197, 255, 45, 0.24) 18px 46px, transparent 46px calc(100% - 46px), rgba(197, 255, 45, 0.2) calc(100% - 46px) calc(100% - 18px), transparent calc(100% - 18px)) left / 2px 100% no-repeat,
    linear-gradient(180deg, transparent 0 18px, rgba(197, 255, 45, 0.24) 18px 46px, transparent 46px calc(100% - 46px), rgba(197, 255, 45, 0.2) calc(100% - 46px) calc(100% - 18px), transparent calc(100% - 18px)) right / 2px 100% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 74px, rgba(255, 255, 255, 0.026) 74px 75px);
}

.director-painting-brush-size {
  width: 116px;
  height: 116px;
  margin-left: -2px;
  background:
    radial-gradient(circle at 51% 51%, rgba(255, 255, 255, 0.98) 0 18%, rgba(235, 239, 231, 0.76) 23%, rgba(180, 190, 177, 0.32) 34%, transparent 45%),
    radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 59%),
    #060909;
  border: 1px solid rgba(189, 255, 44, 0.78);
  box-shadow:
    0 0 0 7px rgba(197, 255, 45, 0.035),
    0 0 0 13px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(197, 255, 45, 0.22),
    inset 0 0 32px rgba(0, 0, 0, 0.72);
}

.director-painting-brush-core {
  width: 64px;
  height: 64px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 31%, rgba(242, 244, 241, 0.74) 38%, rgba(160, 169, 160, 0.28) 55%, transparent 72%);
  filter: blur(4px);
}

.director-painting-brush-size b {
  right: 11px;
  bottom: 16px;
  font-size: 13px;
  color: rgba(220, 255, 92, 0.94);
}

.director-painting-slider-grid {
  gap: 17px 32px;
  margin-top: 29px;
}

.director-painting-brush-popover input[type="range"] {
  margin-top: 8px;
}

.director-painting-brush-type {
  height: 103px;
  margin-top: 16px;
}

.director-painting-brush-type > span {
  height: 60px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 21% 57%, rgba(255, 255, 255, 0.95) 0 8%, rgba(255, 255, 255, 0.56) 19%, transparent 39%),
    radial-gradient(ellipse at 48% 50%, rgba(255, 255, 255, 0.86) 0 8%, rgba(255, 255, 255, 0.32) 22%, transparent 47%),
    radial-gradient(ellipse at 75% 43%, rgba(255, 255, 255, 0.62) 0 6%, rgba(255, 255, 255, 0.22) 18%, transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.4));
}

.director-painting-brush-type > span::before {
  opacity: 0.82;
  transform: translate(-50%, -50%) rotate(-5deg) scaleX(1.03);
}

.director-painting-brush-type > span::after {
  opacity: 0.5;
  transform: translate(-48%, -40%) rotate(4deg) scaleX(0.78);
}

/* v75 focused correction: use the extracted brush-stroke asset and enlarge the color selector wedge. */
.director-painting-color-wheel span {
  inset: 39px 26px 35px 62px;
  background:
    linear-gradient(90deg, #fafff7 0, #a5e1dc 29%, #1a856f 70%, #030909 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 56%, rgba(0, 0, 0, 0.72));
}

.director-painting-brush-type > span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.42)),
    #050909 url("./assets/painting-brush-stroke-reference.png") center 55% / 88% auto no-repeat;
}

.director-painting-brush-type > span::before,
.director-painting-brush-type > span::after {
  display: none;
}

/* v76 color-wheel hue correction: red selector on the right, yellow/green at the top, blue-violet at the lower arc. */
.director-painting-color-wheel {
  background:
    radial-gradient(circle at 50% 50%, #080d0d 0 54%, rgba(8, 13, 13, 0.98) 55% 60%, transparent 61%),
    conic-gradient(from 90deg, #ff2638 0, #ff2c8b 13%, #bf2fff 26%, #2449ff 40%, #18dfe4 56%, #35f761 72%, #f4ff2a 86%, #ff8e25 94%, #ff2638 100%);
}

/* v77: keep the board empty, but make the empty canvas match the dark sci-fi reference environment. */
.director-painting-canvas {
  box-shadow:
    0 0 0 1px rgba(214, 255, 82, 0.2),
    0 0 0 8px rgba(5, 9, 8, 0.86),
    0 0 0 15px rgba(21, 30, 25, 0.58),
    0 32px 96px rgba(0, 0, 0, 0.76),
    inset 0 0 90px rgba(0, 0, 0, 0.44);
}

.director-painting-stage {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.46), transparent 10% 90%, rgba(0, 0, 0, 0.5)),
    linear-gradient(180deg, rgba(200, 255, 43, 0.045), transparent 18% 78%, rgba(0, 0, 0, 0.32)),
    #020505;
}

.director-painting-layer-thumb {
  background:
    linear-gradient(90deg, rgba(190, 255, 96, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(190, 255, 96, 0.06) 1px, transparent 1px),
    linear-gradient(135deg, #13211d, #06100e);
  background-size: 8px 8px, 8px 8px, auto;
}

/* v78 texture pass: use reference-derived material textures while keeping controls as real DOM. */
.director-painting-board {
  background:
    linear-gradient(135deg, transparent 0 17px, rgba(19, 25, 23, 0.95) 17px calc(100% - 17px), transparent calc(100% - 17px)),
    linear-gradient(90deg, rgba(185, 255, 32, 0.18), transparent 7% 93%, rgba(185, 255, 32, 0.18)),
    url("./assets/painting-texture-hud-metal.png") top center / 720px 184px repeat-x,
    linear-gradient(180deg, #0a0f0e 0, #030605 58%, #000 100%);
}

.director-painting-topbar {
  background:
    linear-gradient(135deg, transparent 0 15px, rgba(17, 22, 20, 0.9) 15px calc(100% - 15px), transparent calc(100% - 15px)),
    linear-gradient(90deg, transparent 0 7%, rgba(255, 255, 255, 0.035) 7% 8%, transparent 8% 30%, rgba(0, 0, 0, 0.34) 30% 32%, transparent 32% 68%, rgba(0, 0, 0, 0.34) 68% 70%, transparent 70% 92%, rgba(255, 255, 255, 0.035) 92% 93%, transparent 93%),
    url("./assets/painting-texture-hud-metal.png") center / cover no-repeat,
    linear-gradient(180deg, #151a18 0, #080c0b 48%, #010302 100%);
}

.director-painting-tool-window {
  background:
    linear-gradient(135deg, transparent 0 18px, rgba(5, 8, 8, 0.92) 18px calc(100% - 18px), transparent calc(100% - 18px)),
    url("./assets/painting-texture-panel-grit.png") center / cover no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, 0.98), rgba(15, 21, 19, 0.96) 48%, rgba(0, 0, 0, 0.94));
}

.director-painting-color-panel,
.director-painting-layer-panel {
  background:
    linear-gradient(135deg, transparent 0 18px, rgba(11, 16, 15, 0.9) 18px calc(100% - 18px), transparent calc(100% - 18px)),
    url("./assets/painting-texture-panel-grit.png") center / cover no-repeat,
    radial-gradient(circle at 88% 8%, rgba(196, 255, 44, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(16, 22, 20, 0.96), rgba(2, 6, 6, 0.98)) !important;
}

.director-painting-brush-popover {
  background:
    linear-gradient(135deg, transparent 0 18px, rgba(11, 16, 15, 0.91) 18px calc(100% - 18px), transparent calc(100% - 18px)),
    url("./assets/painting-texture-hud-metal.png") center / cover no-repeat,
    radial-gradient(circle at 11% 50%, rgba(197, 255, 45, 0.1), transparent 13%),
    linear-gradient(180deg, rgba(22, 29, 26, 0.96), rgba(1, 5, 5, 0.99));
}

.director-painting-stage::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.46), transparent 18% 82%, rgba(0, 0, 0, 0.5)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 16% 74%, rgba(0, 0, 0, 0.36)),
    url("./assets/painting-texture-dark-canvas.png") center / cover no-repeat;
  opacity: 0.58;
}

/* v79: use the cleaned reference HUD frame as the bottom control skin, with real controls above it. */
.director-painting-brush-popover {
  width: min(964px, calc(100% - 90px));
  height: 154px;
  min-height: 154px;
  padding: 0 31px 0 33px;
  background:
    url("./assets/painting-brush-panel-hud-frame-clean.png") center / 100% 100% no-repeat,
    linear-gradient(135deg, transparent 0 18px, rgba(11, 16, 15, 0.91) 18px calc(100% - 18px), transparent calc(100% - 18px)),
    url("./assets/painting-texture-hud-metal.png") center / cover no-repeat,
    linear-gradient(180deg, rgba(22, 29, 26, 0.96), rgba(1, 5, 5, 0.99));
  border-color: transparent;
  box-shadow:
    0 28px 78px rgba(0, 0, 0, 0.58),
    0 0 32px rgba(190, 255, 45, 0.07);
}

.director-painting-brush-popover::before,
.director-painting-brush-popover::after {
  opacity: 0.22;
}

.director-painting-brush-size {
  margin-left: 2px;
}

.director-painting-slider-grid {
  margin-top: 32px;
}

.director-painting-brush-type {
  margin-top: 18px;
}

/* v80: reference-derived panel skins. The PNGs are only material frames; all controls remain live DOM. */
.director-painting-tool-window {
  background:
    url("./assets/painting-skin-left-tool-frame.png") center / 100% 100% no-repeat,
    linear-gradient(135deg, transparent 0 18px, rgba(5, 8, 8, 0.92) 18px calc(100% - 18px), transparent calc(100% - 18px)),
    url("./assets/painting-texture-panel-grit.png") center / cover no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, 0.98), rgba(15, 21, 19, 0.96) 48%, rgba(0, 0, 0, 0.94)) !important;
  border-color: transparent;
  box-shadow:
    16px 0 38px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(169, 255, 31, 0.08);
}

.director-painting-color-panel {
  background:
    url("./assets/painting-skin-right-color-frame.png") center / 100% 100% no-repeat,
    url("./assets/painting-texture-panel-grit.png") center / cover no-repeat,
    linear-gradient(180deg, rgba(16, 22, 20, 0.96), rgba(2, 6, 6, 0.98)) !important;
  border-color: transparent;
}

.director-painting-layer-panel {
  background:
    url("./assets/painting-skin-right-layer-frame.png") center / 100% 100% no-repeat,
    url("./assets/painting-texture-panel-grit.png") center / cover no-repeat,
    linear-gradient(180deg, rgba(16, 22, 20, 0.96), rgba(2, 6, 6, 0.98)) !important;
  border-color: transparent;
}

.director-painting-tool-window::before,
.director-painting-tool-window::after,
.director-painting-color-panel::before,
.director-painting-color-panel::after,
.director-painting-layer-panel::before,
.director-painting-layer-panel::after {
  opacity: 0.18;
}

.director-painting-tool-window > *,
.director-painting-color-panel > *,
.director-painting-layer-panel > * {
  position: relative;
  z-index: 1;
}

.director-painting-color-wheel span {
  inset: 39px 26px 35px 62px !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
  background:
    linear-gradient(90deg, #fafff7 0, #a5e1dc 30%, #1a856f 70%, #030909 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), transparent 56%, rgba(0, 0, 0, 0.72)) !important;
}

/* v81: match the reference layer-list rhythm: one visible label line, status kept in DOM for tests/state. */
.director-painting-layer {
  min-height: 43px;
}

.director-painting-layer-select {
  align-items: center;
}

.director-painting-layer-info {
  display: flex;
  min-width: 0;
  min-height: 29px;
  align-items: center;
}

.director-painting-layer strong {
  font-size: 13px;
  line-height: 1;
}

.director-painting-layer small {
  display: none;
}

/* v83: top shell uses a cleaned reference frame skin; live menu/title/actions stay above it. */
.director-painting-topbar {
  background:
    url("./assets/painting-skin-topbar-frame.png") center top / 100% 66px no-repeat,
    linear-gradient(135deg, transparent 0 15px, rgba(17, 22, 20, 0.88) 15px calc(100% - 15px), transparent calc(100% - 15px)),
    url("./assets/painting-texture-hud-metal.png") center / cover no-repeat,
    linear-gradient(180deg, #151a18 0, #080c0b 48%, #010302 100%) !important;
  border-bottom-color: transparent;
}

.director-painting-topbar::before,
.director-painting-topbar::after {
  opacity: 0.14;
}

.director-painting-menu-bar::before,
.director-painting-menu-bar::after,
.director-painting-title-wrap::before,
.director-painting-title-wrap::after,
.director-painting-top-actions::before,
.director-painting-top-actions::after {
  opacity: 0.12;
}

.director-painting-title {
  text-shadow:
    0 0 8px rgba(230, 255, 205, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.director-painting-topbar button {
  background: transparent !important;
  box-shadow: none !important;
}

/* v84: Photoshop-like default layer stack; rows stay fixed even when only the background exists. */
.director-painting-layers {
  align-content: start;
  grid-auto-rows: max-content;
}

.director-painting-layer {
  height: 43px;
  min-height: 43px;
  max-height: 43px;
}

.director-painting-layer-footer button {
  display: flex;
  height: 40px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 1px 3px;
  overflow: hidden;
  white-space: nowrap;
}

.director-painting-layer-footer button::before {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
}