#page-digital-human {
  --dhx-bg: #f4f7fb;
  --dhx-panel: rgba(255, 255, 255, .95);
  --dhx-ink: #111827;
  --dhx-muted: #667085;
  --dhx-line: rgba(15, 23, 42, .09);
  --dhx-blue: #2563eb;
  --dhx-cyan: #06b6d4;
  --dhx-gold: #d8a540;
  --dhx-shadow: 0 20px 60px rgba(15, 23, 42, .10);
  min-height: calc(100vh - 122px);
}

/* v48 final cascade lock: this block intentionally stays last. */
#page-digital-human .dhx-edit-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

#page-digital-human #dhSubtitleTitleModal.dh-modal-backdrop.active {
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-combo-text-modal {
  width: min(1160px, calc(100vw - 28px)) !important;
  height: min(720px, calc(100dvh - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-combo-text-layout {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(520px, 1.05fr) minmax(330px, .72fr) !important;
  gap: 16px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: rgba(241, 245, 249, .88) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button.active {
  color: #0f172a !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-panel {
  min-height: 0 !important;
  display: none !important;
  grid-template-rows: minmax(190px, 1fr) minmax(190px, auto) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-panel.active {
  display: grid !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-grid {
  min-height: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: auto !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-style-controls-visible {
  min-height: 184px !important;
  height: auto !important;
  display: block !important;
  padding: 10px !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-setting-grid,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-title-setting-grid,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-subtitle-setting-grid {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 52px !important;
  gap: 8px !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-subtitle-setting-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-compact-field {
  min-height: 52px !important;
  height: 52px !important;
  max-height: none !important;
  padding: 8px 10px !important;
  display: block !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
  color: #0f172a !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-title-setting-grid .dh-wide-field:first-child {
  grid-column: 1 / -1 !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-title-setting-grid .dh-wide-field:not(:first-child),
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-subtitle-setting-grid .dh-wide-field {
  grid-column: auto !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field b {
  display: block !important;
  margin: 0 0 5px !important;
  color: #64748b !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field select,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field input {
  display: block !important;
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 28px !important;
  font-weight: 850 !important;
  outline: none !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible {
  min-height: 142px !important;
  height: auto !important;
  display: block !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(248, 250, 252, .94) !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-setting-grid,
#page-digital-human #dhSubtitleTitleModal .dh-title-setting-grid,
#page-digital-human #dhSubtitleTitleModal .dh-subtitle-setting-grid {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-subtitle-setting-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field,
#page-digital-human #dhSubtitleTitleModal .dh-compact-field {
  min-height: 58px !important;
  height: 58px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-title-setting-grid .dh-wide-field:first-child {
  grid-column: 1 / -1 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-title-setting-grid .dh-wide-field:not(:first-child),
#page-digital-human #dhSubtitleTitleModal .dh-subtitle-setting-grid .dh-wide-field {
  grid-column: span 2 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field b {
  display: block !important;
  margin-bottom: 5px !important;
  color: #64748b !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field select,
#page-digital-human #dhSubtitleTitleModal .dh-field input {
  display: block !important;
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 28px !important;
  font-weight: 850 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-preview-side {
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-phone {
  width: min(276px, 78%) !important;
  aspect-ratio: 9 / 16 !important;
  border-width: 8px !important;
  border-radius: 34px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-layer {
  pointer-events: auto !important;
}

#page-digital-human .dh-preview-title[data-dh-draggable-text],
#page-digital-human .dh-preview-subtitle[data-dh-draggable-text] {
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: none !important;
  user-select: none !important;
}

#page-digital-human .dh-preview-title.is-custom {
  left: var(--dh-title-x) !important;
  right: auto !important;
  top: var(--dh-title-y) !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: 84% !important;
  transform: translate(-50%, -50%) !important;
}

#page-digital-human .dh-preview-subtitle.is-custom {
  left: var(--dh-subtitle-x) !important;
  right: auto !important;
  top: var(--dh-subtitle-y) !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: 84% !important;
  transform: translate(-50%, -50%) !important;
}

#page-digital-human .dh-template-typewriter i,
#page-digital-human .dh-preview-subtitle.style-typewriter i {
  display: inline-block !important;
  opacity: .18 !important;
  transform: translateY(8px) scale(.84) !important;
  animation-name: dhTypePopV48 !important;
  animation-duration: 1.45s !important;
  animation-timing-function: cubic-bezier(.2, .85, .2, 1) !important;
  animation-iteration-count: infinite !important;
  animation-delay: calc(var(--i, 0) * 90ms) !important;
}

@media (max-width: 1280px) {
  #page-digital-human .dhx-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(72px, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #page-digital-human #dhSubtitleTitleModal .dh-combo-text-modal {
    height: calc(100dvh - 18px) !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-combo-text-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) minmax(260px, .72fr) !important;
  }
}

@media (max-width: 760px) {
  #page-digital-human .dhx-edit-grid {
    height: 220px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 104px) !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-template-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v42 EOF QA layer: definitive split-editor and narrow-layout fixes. */
#page-digital-human #dhSubtitleModal .dh-style-controls-visible,
#page-digital-human #dhTitleModal .dh-style-controls-visible {
  min-height: 112px !important;
  height: 112px !important;
  overflow: visible !important;
  align-content: stretch !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls-visible .dh-setting-block,
#page-digital-human #dhTitleModal .dh-style-controls-visible .dh-setting-block {
  min-height: 92px !important;
  height: 92px !important;
  display: grid !important;
  grid-template-rows: 14px minmax(0, 1fr) !important;
  gap: 6px !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header,
#page-digital-human #dhTitleModal .dh-setting-block header {
  min-height: 14px !important;
  height: 14px !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header b,
#page-digital-human #dhTitleModal .dh-setting-block header b {
  display: block !important;
  height: 14px !important;
  color: #475467 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 14px !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header span,
#page-digital-human #dhTitleModal .dh-setting-block header span {
  display: none !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-grid,
#page-digital-human #dhTitleModal .dh-setting-grid {
  height: 72px !important;
  min-height: 72px !important;
  align-content: start !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-wide-field:first-child {
  grid-column: span 6 !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-wide-field {
  grid-column: span 3 !important;
}

#page-digital-human #dhSubtitleModal .dh-field,
#page-digital-human #dhTitleModal .dh-field,
#page-digital-human #dhSubtitleModal .dh-compact-field,
#page-digital-human #dhTitleModal .dh-compact-field {
  height: 32px !important;
  min-height: 32px !important;
  display: grid !important;
  grid-template-rows: 10px 22px !important;
  gap: 1px !important;
  padding: 0 !important;
}

#page-digital-human #dhSubtitleModal .dh-field b,
#page-digital-human #dhTitleModal .dh-field b {
  display: block !important;
  height: 10px !important;
  color: #667085 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 10px !important;
}

#page-digital-human #dhSubtitleModal .dh-field select,
#page-digital-human #dhSubtitleModal .dh-field input,
#page-digital-human #dhTitleModal .dh-field select,
#page-digital-human #dhTitleModal .dh-field input,
#page-digital-human #dhTitleModal #dhTitleTextProxy {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 20px 0 8px !important;
  border: 1px solid rgba(15, 23, 42, .13) !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #172033 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 22px !important;
}

#page-digital-human .dhx-phone {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-phone-volume {
  left: 0 !important;
}

#page-digital-human .dhx-phone-power {
  right: 0 !important;
}

@media (max-width: 760px) {
  #page-digital-human .dhx-board {
    height: auto !important;
    min-height: calc(100vh - 76px) !important;
    overflow: visible !important;
  }

  #page-digital-human .dhx-layout {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    overflow: visible !important;
  }

  #page-digital-human .dhx-copy-panel,
  #page-digital-human .dhx-production-panel,
  #page-digital-human .dhx-edit-panel,
  #page-digital-human .dhx-output-panel {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 0 !important;
  }

  #page-digital-human .dhx-edit-panel {
    height: auto !important;
    min-height: 444px !important;
    overflow: visible !important;
  }

  #page-digital-human .dhx-edit-grid {
    flex: 0 0 auto !important;
    height: 326px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, 104px) !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  #page-digital-human .dhx-edit-foot {
    flex: 0 0 auto !important;
    margin-top: 8px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #page-digital-human .dhx-output-panel {
    height: auto !important;
    min-height: 560px !important;
  }
}

/* v48 tail lock: final effective override for the compact title/subtitle editor. */
#page-digital-human .dhx-edit-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

#page-digital-human #dhSubtitleTitleModal.dh-modal-backdrop.active {
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-combo-text-modal {
  width: min(1160px, calc(100vw - 28px)) !important;
  height: min(720px, calc(100dvh - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-combo-text-layout {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(520px, 1.05fr) minmax(330px, .72fr) !important;
  gap: 16px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: rgba(241, 245, 249, .88) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button.active {
  color: #0f172a !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-panel {
  min-height: 0 !important;
  display: none !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-panel.active {
  display: grid !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-grid {
  min-height: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: auto !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-preview-side {
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-phone {
  width: min(276px, 78%) !important;
  aspect-ratio: 9 / 16 !important;
  border-width: 8px !important;
  border-radius: 34px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-layer {
  pointer-events: auto !important;
}

#page-digital-human .dh-preview-title[data-dh-draggable-text],
#page-digital-human .dh-preview-subtitle[data-dh-draggable-text] {
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: none !important;
  user-select: none !important;
}

#page-digital-human .dh-preview-title.is-custom {
  left: var(--dh-title-x) !important;
  right: auto !important;
  top: var(--dh-title-y) !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: 84% !important;
  transform: translate(-50%, -50%) !important;
}

#page-digital-human .dh-preview-subtitle.is-custom {
  left: var(--dh-subtitle-x) !important;
  right: auto !important;
  top: var(--dh-subtitle-y) !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: 84% !important;
  transform: translate(-50%, -50%) !important;
}

#page-digital-human .dh-template-typewriter i,
#page-digital-human .dh-preview-subtitle.style-typewriter i {
  display: inline-block !important;
  opacity: .18 !important;
  transform: translateY(8px) scale(.84) !important;
  animation-name: dhTypePopV48 !important;
  animation-duration: 1.45s !important;
  animation-timing-function: cubic-bezier(.2, .85, .2, 1) !important;
  animation-iteration-count: infinite !important;
  animation-delay: calc(var(--i, 0) * 90ms) !important;
}

@media (max-width: 1280px) {
  #page-digital-human .dhx-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(72px, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #page-digital-human #dhSubtitleTitleModal .dh-combo-text-modal {
    height: calc(100dvh - 18px) !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-combo-text-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) minmax(260px, .72fr) !important;
  }
}

@media (max-width: 760px) {
  #page-digital-human .dhx-edit-grid {
    height: 220px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 104px) !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-template-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v48 final cascade lock: keep this as the last effective override. */
#page-digital-human .dhx-edit-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

#page-digital-human #dhSubtitleTitleModal.dh-modal-backdrop.active {
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-combo-text-modal {
  width: min(1160px, calc(100vw - 28px)) !important;
  height: min(720px, calc(100dvh - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-combo-text-layout {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(520px, 1.05fr) minmax(330px, .72fr) !important;
  gap: 16px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: rgba(241, 245, 249, .88) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button.active {
  color: #0f172a !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-panel {
  min-height: 0 !important;
  display: none !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-panel.active {
  display: grid !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-grid {
  min-height: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: auto !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-preview-side {
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-phone {
  width: min(276px, 78%) !important;
  aspect-ratio: 9 / 16 !important;
  border-width: 8px !important;
  border-radius: 34px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-layer {
  pointer-events: auto !important;
}

#page-digital-human .dh-preview-title[data-dh-draggable-text],
#page-digital-human .dh-preview-subtitle[data-dh-draggable-text] {
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: none !important;
  user-select: none !important;
}

#page-digital-human .dh-preview-title.is-custom {
  left: var(--dh-title-x) !important;
  right: auto !important;
  top: var(--dh-title-y) !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: 84% !important;
  transform: translate(-50%, -50%) !important;
}

#page-digital-human .dh-preview-subtitle.is-custom {
  left: var(--dh-subtitle-x) !important;
  right: auto !important;
  top: var(--dh-subtitle-y) !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: 84% !important;
  transform: translate(-50%, -50%) !important;
}

#page-digital-human .dh-template-typewriter i,
#page-digital-human .dh-preview-subtitle.style-typewriter i {
  display: inline-block !important;
  opacity: .18 !important;
  transform: translateY(8px) scale(.84) !important;
  animation-name: dhTypePopV48 !important;
  animation-duration: 1.45s !important;
  animation-timing-function: cubic-bezier(.2, .85, .2, 1) !important;
  animation-iteration-count: infinite !important;
  animation-delay: calc(var(--i, 0) * 90ms) !important;
}

@media (max-width: 1280px) {
  #page-digital-human .dhx-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(72px, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #page-digital-human #dhSubtitleTitleModal .dh-combo-text-modal {
    height: calc(100dvh - 18px) !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-combo-text-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) minmax(260px, .72fr) !important;
  }
}

@media (max-width: 760px) {
  #page-digital-human .dhx-edit-grid {
    height: 220px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 104px) !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-template-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v48: combined title/subtitle entry, draggable text placement, and visible typewriter effects. */
#page-digital-human .dhx-edit-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

#page-digital-human .dhx-edit-style .dhx-edit-current b {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#page-digital-human #dhSubtitleTitleModal.dh-modal-backdrop.active {
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-combo-text-modal {
  width: min(1160px, calc(100vw - 28px)) !important;
  height: min(720px, calc(100dvh - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, .14), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96)) !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .24) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-combo-text-layout {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(520px, 1.05fr) minmax(330px, .72fr) !important;
  gap: 16px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 4px !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  border-radius: 14px !important;
  background: rgba(241, 245, 249, .88) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button.active {
  color: #0f172a !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-panel {
  min-height: 0 !important;
  display: none !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-panel.active {
  display: grid !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-grid {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: auto !important;
  padding-right: 2px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-card {
  min-height: 132px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-stage {
  min-height: 62px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #101827, #25314a) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-card strong {
  margin-top: 8px !important;
  font-size: 13px !important;
  color: #0f172a !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-card small {
  font-size: 11px !important;
  color: #64748b !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible {
  min-height: 0 !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(248, 250, 252, .94) !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-setting-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-title-setting-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-wide-field {
  grid-column: span 2 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-title-setting-grid .dh-wide-field:first-child {
  grid-column: 1 / -1 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-title-setting-grid .dh-wide-field {
  grid-column: span 2 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field {
  min-height: 58px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field b {
  margin-bottom: 5px !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field select,
#page-digital-human #dhSubtitleTitleModal .dh-field input {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  outline: none !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-preview-side {
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .04), rgba(15, 23, 42, .10)),
    radial-gradient(circle at 50% 18%, rgba(20, 184, 166, .16), transparent 34%) !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-live-style-preview {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-phone {
  width: min(276px, 78%) !important;
  aspect-ratio: 9 / 16 !important;
  border-width: 8px !important;
  border-radius: 34px !important;
  background: #05070c !important;
  box-shadow: 0 26px 56px rgba(15, 23, 42, .30) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-phone::before {
  width: 32% !important;
  height: 18px !important;
  border-radius: 0 0 14px 14px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-layer {
  pointer-events: auto !important;
}

#page-digital-human .dh-preview-title[data-dh-draggable-text],
#page-digital-human .dh-preview-subtitle[data-dh-draggable-text] {
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: none !important;
  user-select: none !important;
  outline: 1px solid transparent !important;
  outline-offset: 4px !important;
  transition: outline-color .16s ease, filter .16s ease, transform .16s ease !important;
}

#page-digital-human .dh-preview-title[data-dh-draggable-text]:hover,
#page-digital-human .dh-preview-subtitle[data-dh-draggable-text]:hover,
#page-digital-human .dh-preview-title.is-dragging,
#page-digital-human .dh-preview-subtitle.is-dragging {
  outline-color: rgba(45, 212, 191, .86) !important;
  filter: drop-shadow(0 0 14px rgba(45, 212, 191, .38)) !important;
}

#page-digital-human .dh-preview-title.is-custom {
  left: var(--dh-title-x) !important;
  right: auto !important;
  top: var(--dh-title-y) !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: 84% !important;
  transform: translate(-50%, -50%) !important;
}

#page-digital-human .dh-preview-subtitle.is-custom {
  left: var(--dh-subtitle-x) !important;
  right: auto !important;
  top: var(--dh-subtitle-y) !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: 84% !important;
  transform: translate(-50%, -50%) !important;
}

#page-digital-human .dh-template-typewriter i,
#page-digital-human .dh-preview-subtitle.style-typewriter i {
  display: inline-block !important;
  opacity: .18 !important;
  transform: translateY(8px) scale(.84) !important;
  animation: dhTypePopV48 1.45s cubic-bezier(.2, .85, .2, 1) infinite !important;
  animation-delay: calc(var(--i, 0) * 90ms) !important;
}

#page-digital-human .dh-template-typewriter .dh-template-stage b,
#page-digital-human .dh-preview-subtitle.style-typewriter {
  color: #fff !important;
  text-shadow: 0 2px 0 #020617, 0 0 14px rgba(20, 184, 166, .46) !important;
}

#page-digital-human .dh-preview-subtitle.style-typewriter::after {
  content: "" !important;
  display: inline-block !important;
  width: .08em !important;
  height: .95em !important;
  margin-left: .16em !important;
  vertical-align: -.12em !important;
  border-radius: 999px !important;
  background: #5eead4 !important;
  animation: dhCursorBlinkV48 .7s steps(1) infinite !important;
}

@keyframes dhTypePopV48 {
  0% { opacity: .14; transform: translateY(8px) scale(.84); }
  24% { opacity: 1; transform: translateY(-2px) scale(1.12); color: #5eead4; }
  52%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dhCursorBlinkV48 {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: .12; }
}

@media (max-width: 1280px) {
  #page-digital-human .dhx-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(72px, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  #page-digital-human #dhSubtitleTitleModal .dh-combo-text-layout {
    grid-template-columns: minmax(470px, 1fr) minmax(300px, .72fr) !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #page-digital-human #dhSubtitleTitleModal .dh-combo-text-modal {
    height: calc(100dvh - 18px) !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-combo-text-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) minmax(260px, .72fr) !important;
    overflow: hidden !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-preview-phone {
    width: min(210px, 48vw) !important;
  }
}

@media (max-width: 760px) {
  #page-digital-human .dhx-edit-grid {
    height: 220px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 104px) !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-combo-text-modal {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-template-grid {
    grid-template-columns: 1fr !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-setting-grid,
  #page-digital-human #dhSubtitleTitleModal .dh-title-setting-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v47: independent subtitle/title template editors, tuned for compact SaaS workflow. */
#page-digital-human #dhSubtitleModal.dh-modal-backdrop.active,
#page-digital-human #dhTitleModal.dh-modal-backdrop.active {
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  background: rgba(15, 23, 42, .46) !important;
  backdrop-filter: blur(16px) !important;
}

#page-digital-human #dhSubtitleModal .dh-style-modal,
#page-digital-human #dhTitleModal .dh-style-modal {
  width: min(1100px, calc(100vw - 28px)) !important;
  height: min(688px, calc(100dvh - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  display: grid !important;
  grid-template-rows: 48px minmax(0, 1fr) 56px !important;
  gap: 12px !important;
  overflow: hidden !important;
  padding: 18px !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(77, 124, 254, .10), transparent 26%),
    linear-gradient(180deg, #fff, #f8fafc 72%, #f3f7fb) !important;
  box-shadow: 0 34px 92px rgba(15, 23, 42, .34) !important;
}

#page-digital-human #dhSubtitleModal .dh-picker-head,
#page-digital-human #dhTitleModal .dh-picker-head {
  min-height: 0 !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
}

#page-digital-human #dhSubtitleModal .dh-picker-head h2,
#page-digital-human #dhTitleModal .dh-picker-head h2 {
  margin: 0 !important;
  color: #101828 !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

#page-digital-human #dhSubtitleModal .dh-style-modal-layout,
#page-digital-human #dhTitleModal .dh-style-modal-layout {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(520px, .98fr) minmax(360px, .64fr) !important;
  gap: 14px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls,
#page-digital-human #dhTitleModal .dh-style-controls {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleModal .dh-template-grid,
#page-digital-human #dhTitleModal .dh-template-grid {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: auto !important;
  padding: 2px 6px 2px 2px !important;
  scrollbar-width: thin !important;
}

#page-digital-human #dhSubtitleModal .dh-template-card,
#page-digital-human #dhTitleModal .dh-template-card {
  min-height: 118px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  overflow: hidden !important;
  padding: 8px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .055) !important;
  text-align: left !important;
}

#page-digital-human #dhSubtitleModal .dh-template-card:hover,
#page-digital-human #dhTitleModal .dh-template-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(37, 99, 235, .30) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .09) !important;
}

#page-digital-human #dhSubtitleModal .dh-template-card.active,
#page-digital-human #dhTitleModal .dh-template-card.active {
  border-color: rgba(37, 99, 235, .64) !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .15), inset 0 0 0 2px rgba(37, 99, 235, .18) !important;
}

#page-digital-human #dhSubtitleModal .dh-template-card strong,
#page-digital-human #dhTitleModal .dh-template-card strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #101828 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human #dhSubtitleModal .dh-template-card small,
#page-digital-human #dhTitleModal .dh-template-card small {
  display: none !important;
}

#page-digital-human #dhSubtitleModal .dh-template-stage,
#page-digital-human #dhTitleModal .dh-template-stage {
  min-height: 72px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 10px !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 80% 14%, rgba(148, 163, 184, .22), transparent 30%),
    linear-gradient(155deg, #111827, #1f2937) !important;
}

#page-digital-human #dhSubtitleModal .dh-template-stage b,
#page-digital-human #dhTitleModal .dh-template-stage b {
  max-width: 100% !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

#page-digital-human #dhSubtitleModal .dh-template-off,
#page-digital-human #dhTitleModal .dh-template-off {
  color: #64748b !important;
  font-size: 14px !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

#page-digital-human #dhSubtitleModal .dh-template-card.dh-template-off .dh-template-stage,
#page-digital-human #dhTitleModal .dh-template-card.dh-template-off .dh-template-stage {
  background: linear-gradient(145deg, #f8fafc, #e2e8f0) !important;
}

#page-digital-human #dhSubtitleModal .dh-template-stroke .dh-template-stage b {
  text-shadow: 0 2px 0 #020617, 0 5px 12px rgba(2, 6, 23, .72) !important;
  -webkit-text-stroke: .65px rgba(2, 6, 23, .88) !important;
}

#page-digital-human #dhSubtitleModal .dh-template-karaoke .dh-template-stage {
  background: linear-gradient(155deg, #082f49, #0f172a) !important;
}

#page-digital-human #dhSubtitleModal .dh-template-karaoke i,
#page-digital-human .dh-preview-subtitle.style-karaoke i {
  display: inline-block !important;
  color: rgba(255, 255, 255, .42) !important;
  font-style: normal !important;
}

#page-digital-human #dhSubtitleModal .dh-template-karaoke i.read,
#page-digital-human .dh-preview-subtitle.style-karaoke i.read {
  color: #fff !important;
}

#page-digital-human #dhSubtitleModal .dh-template-karaoke i.active,
#page-digital-human .dh-preview-subtitle.style-karaoke i.active {
  color: #facc15 !important;
  transform: translateY(-1px) scale(1.12) !important;
  text-shadow: 0 0 14px rgba(250, 204, 21, .42) !important;
}

#page-digital-human #dhSubtitleModal .dh-template-typewriter .dh-template-stage {
  background: linear-gradient(155deg, #0f172a, #312e81) !important;
}

#page-digital-human #dhSubtitleModal .dh-template-typewriter i,
#page-digital-human .dh-preview-subtitle.style-typewriter i {
  display: inline-block !important;
  font-style: normal !important;
  animation: dhTypePop 1.8s ease-in-out infinite !important;
  animation-delay: calc(var(--i, 0) * 72ms) !important;
}

#page-digital-human #dhSubtitleModal .dh-template-keyword .dh-template-stage {
  background: linear-gradient(155deg, #111827, #3b2214) !important;
}

#page-digital-human #dhSubtitleModal .dh-template-keyword i,
#page-digital-human .dh-preview-subtitle.style-keyword i,
#page-digital-human .dh-preview-title.title-keyword i {
  display: inline-block !important;
  margin: 0 .08em !important;
  padding: .03em .18em !important;
  border-radius: .26em !important;
  background: #facc15 !important;
  color: #111827 !important;
  font-style: normal !important;
  text-shadow: none !important;
}

#page-digital-human #dhTitleModal .dh-template-title.dh-template-business .dh-template-stage {
  place-items: center start !important;
  background: linear-gradient(180deg, #f8fafc, #e2e8f0) !important;
}

#page-digital-human #dhTitleModal .dh-template-title.dh-template-business .dh-template-stage b {
  padding: .36em .58em .36em .50em !important;
  border-left: 5px solid #2563eb !important;
  color: #0f172a !important;
  text-align: left !important;
  text-shadow: none !important;
}

#page-digital-human #dhTitleModal .dh-template-title.dh-template-viral .dh-template-stage b {
  font-size: 22px !important;
  text-shadow: 0 3px 0 #020617, 0 0 20px rgba(250, 204, 21, .34) !important;
  -webkit-text-stroke: .8px rgba(2, 6, 23, .9) !important;
}

#page-digital-human #dhTitleModal .dh-template-title.dh-template-keyword .dh-template-stage b {
  font-size: 21px !important;
  color: #fff !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls-visible,
#page-digital-human #dhTitleModal .dh-style-controls-visible {
  flex: none !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
  padding: 10px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .06) !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls-visible .dh-setting-block,
#page-digital-human #dhTitleModal .dh-style-controls-visible .dh-setting-block {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header,
#page-digital-human #dhTitleModal .dh-setting-block header {
  display: none !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-grid,
#page-digital-human #dhTitleModal .dh-setting-grid {
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  gap: 8px !important;
  align-items: end !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#page-digital-human #dhSubtitleModal .dh-subtitle-setting-grid {
  grid-template-columns: 1fr 94px 1.12fr 1.12fr !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid {
  grid-template-columns: minmax(180px, 1.45fr) 104px 104px minmax(130px, 1fr) !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-wide-field,
#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-wide-field:first-child,
#page-digital-human #dhSubtitleModal .dh-subtitle-setting-grid .dh-wide-field,
#page-digital-human #dhSubtitleModal .dh-subtitle-setting-grid .dh-wide-field:first-child {
  grid-column: auto !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid label:has(#dhTitleStyle),
#page-digital-human #dhTitleModal .dh-title-duration-field {
  display: none !important;
}

#page-digital-human #dhSubtitleModal .dh-field,
#page-digital-human #dhTitleModal .dh-field,
#page-digital-human #dhSubtitleModal .dh-compact-field,
#page-digital-human #dhTitleModal .dh-compact-field {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-rows: 13px 32px !important;
  gap: 4px !important;
  padding: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#page-digital-human #dhSubtitleModal .dh-field b,
#page-digital-human #dhTitleModal .dh-field b {
  display: block !important;
  height: 13px !important;
  overflow: hidden !important;
  color: #667085 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 13px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human #dhSubtitleModal .dh-field select,
#page-digital-human #dhSubtitleModal .dh-field input,
#page-digital-human #dhTitleModal .dh-field select,
#page-digital-human #dhTitleModal .dh-field input,
#page-digital-human #dhTitleModal #dhTitleTextProxy {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 26px 0 10px !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  border-radius: 10px !important;
  outline: 0 !important;
  background: #f8fafc !important;
  color: #172033 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 32px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#page-digital-human #dhSubtitleModal .dh-field input,
#page-digital-human #dhTitleModal .dh-field input {
  padding-right: 10px !important;
}

#page-digital-human #dhSubtitleModal .dh-field select:focus,
#page-digital-human #dhSubtitleModal .dh-field input:focus,
#page-digital-human #dhTitleModal .dh-field select:focus,
#page-digital-human #dhTitleModal .dh-field input:focus {
  border-color: rgba(37, 99, 235, .52) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10) !important;
}

#page-digital-human #dhSubtitleModal .dh-style-preview-side,
#page-digital-human #dhTitleModal .dh-style-preview-side {
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleModal .dh-style-preview-side .dh-live-style-preview,
#page-digital-human #dhTitleModal .dh-style-preview-side .dh-live-style-preview {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 12px !important;
  border: 1px solid rgba(15, 23, 42, .06) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .09), transparent 30%),
    linear-gradient(180deg, #fff, #f8fafc) !important;
}

#page-digital-human #dhSubtitleModal .dh-preview-phone,
#page-digital-human #dhTitleModal .dh-preview-phone {
  position: relative !important;
  width: min(300px, 82%) !important;
  max-height: 100% !important;
  aspect-ratio: 9 / 16 !important;
  overflow: hidden !important;
  border: 8px solid #111827 !important;
  border-radius: 34px !important;
  background: #020617 !important;
  box-shadow: 0 28px 60px rgba(15, 23, 42, .28), inset 0 0 0 1px rgba(255, 255, 255, .10) !important;
}

#page-digital-human #dhSubtitleModal .dh-preview-phone::before,
#page-digital-human #dhTitleModal .dh-preview-phone::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  z-index: 16 !important;
  width: 78px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: #020617 !important;
  transform: translateX(-50%) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .10) !important;
}

#page-digital-human .dh-preview-title {
  font-family: var(--dh-title-font, "PingFang SC", "Microsoft YaHei", sans-serif) !important;
}

#page-digital-human .dh-preview-subtitle {
  font-family: var(--dh-subtitle-font, "PingFang SC", "Microsoft YaHei", sans-serif) !important;
}

#page-digital-human .dh-preview-subtitle.style-karaoke {
  padding: .34em .62em !important;
  border-radius: .54em !important;
  background: rgba(2, 6, 23, .50) !important;
  color: rgba(255, 255, 255, .50) !important;
  text-shadow: 0 2px 8px rgba(2, 6, 23, .65) !important;
}

#page-digital-human .dh-preview-subtitle.style-typewriter {
  color: #fff !important;
  text-shadow: 0 2px 0 #020617, 0 4px 10px rgba(2, 6, 23, .72) !important;
  -webkit-text-stroke: .55px rgba(2, 6, 23, .82) !important;
}

#page-digital-human .dh-preview-subtitle.style-keyword {
  padding: .30em .62em !important;
  border-radius: 10px !important;
  background: rgba(2, 6, 23, .48) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(2, 6, 23, .24) !important;
  text-shadow: 0 2px 8px rgba(2, 6, 23, .46) !important;
}

#page-digital-human .dh-preview-title.title-business {
  padding: .28em .62em .28em .5em !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #0f172a !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .16) !important;
  text-shadow: none !important;
}

#page-digital-human .dh-preview-title.title-keyword {
  color: #fff !important;
  font-weight: 1000 !important;
  text-shadow: 0 3px 0 #020617, 0 0 18px rgba(250, 204, 21, .38) !important;
  -webkit-text-stroke: 1px rgba(2, 6, 23, .92) !important;
}

@media (max-width: 1180px) and (max-height: 640px) {
  #page-digital-human #dhSubtitleModal .dh-style-modal,
  #page-digital-human #dhTitleModal .dh-style-modal {
    width: min(1112px, calc(100vw - 16px)) !important;
    height: calc(100dvh - 16px) !important;
    padding: 10px !important;
    gap: 7px !important;
    grid-template-rows: 38px minmax(0, 1fr) 48px !important;
    border-radius: 20px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-style-modal-layout,
  #page-digital-human #dhTitleModal .dh-style-modal-layout {
    grid-template-columns: minmax(640px, 1fr) minmax(300px, .46fr) !important;
    gap: 8px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-template-grid,
  #page-digital-human #dhTitleModal .dh-template-grid {
    gap: 7px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-template-card,
  #page-digital-human #dhTitleModal .dh-template-card {
    min-height: 96px !important;
    padding: 6px !important;
    gap: 5px !important;
    border-radius: 14px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-template-stage,
  #page-digital-human #dhTitleModal .dh-template-stage {
    min-height: 56px !important;
    padding: 8px !important;
    border-radius: 11px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-template-stage b,
  #page-digital-human #dhTitleModal .dh-template-stage b {
    font-size: 14px !important;
  }

  #page-digital-human #dhTitleModal .dh-template-title.dh-template-viral .dh-template-stage b,
  #page-digital-human #dhTitleModal .dh-template-title.dh-template-keyword .dh-template-stage b {
    font-size: 17px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-template-card strong,
  #page-digital-human #dhTitleModal .dh-template-card strong {
    font-size: 12px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-style-controls-visible,
  #page-digital-human #dhTitleModal .dh-style-controls-visible {
    padding: 7px !important;
    border-radius: 14px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-subtitle-setting-grid {
    grid-template-columns: 1fr 82px 1fr 1fr !important;
    gap: 6px !important;
  }

  #page-digital-human #dhTitleModal .dh-title-setting-grid {
    grid-template-columns: minmax(160px, 1.4fr) 82px 78px minmax(116px, 1fr) !important;
    gap: 6px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-field,
  #page-digital-human #dhTitleModal .dh-field,
  #page-digital-human #dhSubtitleModal .dh-compact-field,
  #page-digital-human #dhTitleModal .dh-compact-field {
    grid-template-rows: 10px 26px !important;
    gap: 2px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-field b,
  #page-digital-human #dhTitleModal .dh-field b {
    height: 10px !important;
    font-size: 9px !important;
    line-height: 10px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-field select,
  #page-digital-human #dhSubtitleModal .dh-field input,
  #page-digital-human #dhTitleModal .dh-field select,
  #page-digital-human #dhTitleModal .dh-field input {
    height: 26px !important;
    min-height: 26px !important;
    padding-left: 8px !important;
    padding-right: 20px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    line-height: 26px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-preview-phone,
  #page-digital-human #dhTitleModal .dh-preview-phone {
    width: min(224px, 82%) !important;
    border-width: 6px !important;
    border-radius: 27px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-preview-phone::before,
  #page-digital-human #dhTitleModal .dh-preview-phone::before {
    top: 6px !important;
    width: 62px !important;
    height: 15px !important;
  }
}

@media (max-width: 760px) {
  #page-digital-human #dhSubtitleModal .dh-style-modal,
  #page-digital-human #dhTitleModal .dh-style-modal {
    height: calc(100dvh - 18px) !important;
    grid-template-rows: 42px minmax(0, 1fr) 52px !important;
    padding: 12px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-style-modal-layout,
  #page-digital-human #dhTitleModal .dh-style-modal-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) 240px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-subtitle-setting-grid,
  #page-digital-human #dhTitleModal .dh-title-setting-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v47 final lock: legacy duplicated CSS appears earlier in this file, so keep these last. */
#page-digital-human #dhTitleModal .dh-title-setting-grid {
  grid-template-columns: minmax(220px, 1.55fr) 112px 112px minmax(150px, 1fr) !important;
  align-items: end !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-wide-field,
#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-wide-field:first-child {
  grid-column: auto !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-field:has(#dhTitleTextProxy) {
  grid-column: span 1 !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-field:has(#dhTitleStyle),
#page-digital-human #dhTitleModal .dh-title-duration-field {
  display: none !important;
}

@media (max-width: 1180px) and (max-height: 640px) {
  #page-digital-human #dhTitleModal .dh-title-setting-grid {
    grid-template-columns: minmax(190px, 1.45fr) 88px 82px minmax(126px, 1fr) !important;
  }
}

/* v44 definitive EOF layer: split title/subtitle parameter bars. */
#page-digital-human #dhSubtitleModal .dh-style-modal,
#page-digital-human #dhTitleModal .dh-style-modal {
  height: min(710px, calc(100dvh - 20px)) !important;
}

#page-digital-human #dhSubtitleModal .dh-style-modal-layout,
#page-digital-human #dhTitleModal .dh-style-modal-layout {
  min-height: 0 !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls,
#page-digital-human #dhTitleModal .dh-style-controls {
  grid-template-rows: minmax(0, 1fr) 142px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls-visible,
#page-digital-human #dhTitleModal .dh-style-controls-visible {
  min-height: 130px !important;
  height: 130px !important;
  padding: 10px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls-visible .dh-setting-block,
#page-digital-human #dhTitleModal .dh-style-controls-visible .dh-setting-block {
  width: 100% !important;
  min-height: 110px !important;
  height: 110px !important;
  display: grid !important;
  grid-template-rows: 14px minmax(0, 1fr) !important;
  gap: 7px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header,
#page-digital-human #dhTitleModal .dh-setting-block header {
  min-height: 14px !important;
  height: 14px !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header b,
#page-digital-human #dhTitleModal .dh-setting-block header b {
  display: block !important;
  height: 14px !important;
  color: #475467 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 14px !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header span,
#page-digital-human #dhTitleModal .dh-setting-block header span {
  display: none !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-grid,
#page-digital-human #dhTitleModal .dh-setting-grid {
  height: 88px !important;
  min-height: 88px !important;
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
}

#page-digital-human #dhSubtitleModal .dh-subtitle-setting-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-wide-field:first-child {
  grid-column: span 6 !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-wide-field {
  grid-column: span 3 !important;
}

#page-digital-human #dhSubtitleModal .dh-field,
#page-digital-human #dhTitleModal .dh-field,
#page-digital-human #dhSubtitleModal .dh-compact-field,
#page-digital-human #dhTitleModal .dh-compact-field {
  height: 32px !important;
  min-height: 32px !important;
  display: grid !important;
  grid-template-rows: 10px 22px !important;
  gap: 1px !important;
  padding: 0 !important;
}

#page-digital-human #dhSubtitleModal .dh-field b,
#page-digital-human #dhTitleModal .dh-field b {
  display: block !important;
  height: 10px !important;
  color: #667085 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 10px !important;
}

#page-digital-human #dhSubtitleModal .dh-field select,
#page-digital-human #dhSubtitleModal .dh-field input,
#page-digital-human #dhTitleModal .dh-field select,
#page-digital-human #dhTitleModal .dh-field input,
#page-digital-human #dhTitleModal #dhTitleTextProxy {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 20px 0 8px !important;
  border: 1px solid rgba(15, 23, 42, .13) !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #172033 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 22px !important;
}

/* v43 final EOF layer: keep split-editor parameter bars visible and compact. */
#page-digital-human #dhSubtitleModal .dh-style-modal,
#page-digital-human #dhTitleModal .dh-style-modal {
  height: min(690px, calc(100dvh - 20px)) !important;
}

#page-digital-human #dhSubtitleModal .dh-style-modal-layout,
#page-digital-human #dhTitleModal .dh-style-modal-layout {
  grid-template-rows: minmax(0, 1fr) !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls,
#page-digital-human #dhTitleModal .dh-style-controls {
  grid-template-rows: minmax(0, 1fr) 138px !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls-visible,
#page-digital-human #dhTitleModal .dh-style-controls-visible {
  min-height: 126px !important;
  height: 126px !important;
  padding: 10px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls-visible .dh-setting-block,
#page-digital-human #dhTitleModal .dh-style-controls-visible .dh-setting-block {
  width: 100% !important;
  min-height: 106px !important;
  height: 106px !important;
  display: grid !important;
  grid-template-rows: 14px minmax(0, 1fr) !important;
  gap: 7px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header,
#page-digital-human #dhTitleModal .dh-setting-block header {
  min-height: 14px !important;
  height: 14px !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header b,
#page-digital-human #dhTitleModal .dh-setting-block header b {
  display: block !important;
  height: 14px !important;
  color: #475467 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 14px !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header span,
#page-digital-human #dhTitleModal .dh-setting-block header span {
  display: none !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-grid,
#page-digital-human #dhTitleModal .dh-setting-grid {
  height: 84px !important;
  min-height: 84px !important;
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-wide-field:first-child {
  grid-column: span 6 !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-wide-field {
  grid-column: span 3 !important;
}

#page-digital-human #dhSubtitleModal .dh-subtitle-setting-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#page-digital-human #dhSubtitleModal .dh-field,
#page-digital-human #dhTitleModal .dh-field,
#page-digital-human #dhSubtitleModal .dh-compact-field,
#page-digital-human #dhTitleModal .dh-compact-field {
  height: 32px !important;
  min-height: 32px !important;
  display: grid !important;
  grid-template-rows: 10px 22px !important;
  gap: 1px !important;
  padding: 0 !important;
}

#page-digital-human #dhSubtitleModal .dh-field b,
#page-digital-human #dhTitleModal .dh-field b {
  display: block !important;
  height: 10px !important;
  color: #667085 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 10px !important;
}

#page-digital-human #dhSubtitleModal .dh-field select,
#page-digital-human #dhSubtitleModal .dh-field input,
#page-digital-human #dhTitleModal .dh-field select,
#page-digital-human #dhTitleModal .dh-field input,
#page-digital-human #dhTitleModal #dhTitleTextProxy {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 20px 0 8px !important;
  border: 1px solid rgba(15, 23, 42, .13) !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #172033 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 22px !important;
}

body:has(#page-digital-human.active) .content {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

body:has(#page-digital-human.active) .main {
  min-height: 0 !important;
  height: 100vh !important;
  overflow: hidden !important;
}

body:has(#page-digital-human.active) .content {
  height: calc(100vh - 64px) !important;
  overflow: hidden !important;
}

body:has(#page-digital-human.active) {
  overflow: hidden !important;
}

#page-digital-human .digital-human-console > .digital-human-head,
#page-digital-human .digital-human-console > .dh-saas-board {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#page-digital-human .digital-human-console > .dh-saas-board * {
  visibility: hidden !important;
}

.dhx-board {
  height: calc(100vh - 124px);
  min-height: 700px;
  padding: 12px;
  color: var(--dhx-ink);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .24);
  background:
    radial-gradient(circle at 12% 8%, rgba(37, 99, 235, .13), transparent 28%),
    radial-gradient(circle at 72% 4%, rgba(6, 182, 212, .10), transparent 24%),
    linear-gradient(180deg, #fbfdff 0%, #edf3fa 100%);
  box-shadow: 0 28px 90px rgba(15, 23, 42, .08);
  overflow: hidden;
}

.dhx-top {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

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

.dhx-title > span {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #0f172a, #1d4ed8 70%, #06b6d4);
  box-shadow: 0 14px 30px rgba(37, 99, 235, .25);
}

.dhx-title h1 {
  margin: 0;
  font-size: 23px;
  line-height: 1;
  font-weight: 880;
  letter-spacing: 0;
}

.dhx-top-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dhx-auto-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 820;
  background: linear-gradient(135deg, #0f172a, #2563eb);
  box-shadow: 0 16px 34px rgba(37, 99, 235, .24);
}

.dhx-layout {
  height: calc(100% - 48px);
  display: grid;
  grid-template-columns: minmax(318px, .82fr) minmax(560px, 1.18fr) minmax(336px, .82fr);
  grid-template-rows: minmax(236px, .39fr) minmax(340px, .61fr);
  gap: 10px;
}

.dhx-panel {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border-radius: 14px;
  background: var(--dhx-panel);
  border: 1px solid var(--dhx-line);
  box-shadow: 0 14px 40px rgba(15, 23, 42, .07);
  overflow: hidden;
}

.dhx-copy-panel { grid-column: 1; grid-row: 1 / span 2; }
.dhx-production-panel {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.dhx-edit-panel {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 3;
}
.dhx-output-panel {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}

.dhx-panel-head {
  height: 32px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dhx-panel-head > b {
  font-size: 16px;
  line-height: 1;
  font-weight: 860;
  flex: 0 0 auto;
  white-space: nowrap;
}

.dhx-panel-head > span,
.dhx-edit-state {
  flex: 0 0 auto;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.dhx-tabs,
.dhx-drive-switch,
.dhx-mini-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #eef2f7;
}

.dhx-tabs button,
.dhx-drive-switch button,
.dhx-mini-tabs button {
  height: 28px;
  min-width: 46px;
  padding: 0 10px;
  border-radius: 9px;
  color: #667085;
  background: transparent;
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

.dhx-tabs button.active,
.dhx-drive-switch button.active,
.dhx-mini-tabs button.active {
  color: #111827;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}

.dhx-copy-pane {
  height: calc(100% - 44px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dhx-field {
  display: grid;
  gap: 6px;
}

.dhx-field span,
.dhx-advanced-grid span {
  color: #475467;
  font-size: 12px;
  font-weight: 780;
}

.dhx-field input,
.dhx-field textarea,
.dhx-field select,
.dhx-advanced-grid select {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 12px;
  background: #fff;
  color: #111827;
  outline: none;
  padding: 10px 12px;
  font-size: 14px;
}

.dhx-field input:focus,
.dhx-field textarea:focus,
.dhx-field select:focus,
.dhx-advanced-grid select:focus {
  border-color: rgba(37, 99, 235, .42);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.dhx-topic input {
  height: 44px;
  font-size: 15px;
  font-weight: 760;
}

.dhx-copy-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 10px;
}

.dhx-script {
  flex: 1 1 auto;
  min-height: 0;
}

.dhx-script textarea {
  height: 100%;
  min-height: 244px;
  resize: none;
  line-height: 1.65;
}

.dhx-action-line,
.dhx-run-row,
.dhx-output-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.dhx-action-line { margin-top: auto; }

.dhx-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 820;
  text-decoration: none;
}

.dhx-primary {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  box-shadow: 0 14px 32px rgba(37, 99, 235, .23);
}

.dhx-secondary {
  color: #172033;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
}

.dhx-result-box {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
  border-radius: 14px;
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
}

#page-digital-human .dh-copy-result-title,
#page-digital-human .dh-copy-result-body,
#page-digital-human .dh-copy-result-tags {
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, .07);
}

#page-digital-human .dh-copy-result-title {
  padding: 10px 12px;
  display: grid;
  gap: 5px;
}

#page-digital-human .dh-copy-result-title span,
#page-digital-human .dh-copy-result-tags span {
  color: #667085;
  font-size: 11px;
  font-weight: 820;
}

#page-digital-human .dh-copy-result-title b {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}

#page-digital-human .dh-copy-result-body {
  margin-top: 8px;
  padding: 12px;
  color: #172033;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
}

#page-digital-human .dh-copy-result-tags {
  margin-top: 8px;
  padding: 10px 12px;
}

#page-digital-human .dh-copy-result-tags p {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#page-digital-human .dh-copy-result-tags em {
  padding: 4px 8px;
  border-radius: 999px;
  color: #075985;
  background: #e0f2fe;
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
}

.dhx-production-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dhx-empty-media {
  width: 100%;
  height: 100%;
  min-height: 176px;
  display: grid;
  place-items: center;
  color: #667085;
}

.dhx-empty-media b { font-size: 13px; }

.dhx-production-selects {
  flex: 1 1 auto;
  min-height: 112px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dhx-pick-card {
  width: 100%;
  min-width: 0;
  min-height: 112px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 28px;
  gap: 8px 12px;
  align-items: center;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .05), transparent 46%),
    linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.dhx-pick-card.is-selected {
  border-color: rgba(37, 99, 235, .22);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .08), transparent 52%),
    #fff;
}

.dhx-pick-media {
  position: relative;
  width: 86px;
  height: 96px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #1d4ed8;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.80), transparent 32%),
    linear-gradient(180deg, #eef6ff, #dceafe);
  overflow: hidden;
  align-self: stretch;
}

.dhx-pick-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .54), inset 0 -28px 42px rgba(15, 23, 42, .10);
  pointer-events: none;
}

.dhx-pick-media img,
.dhx-pick-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.dhx-pick-symbol {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
}

.dhx-pick-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 6px;
}

.dhx-pick-card em,
.dhx-pick-card small,
.dhx-pick-card > i {
  color: #667085;
  font-size: 12px;
  font-style: normal;
}

.dhx-pick-card em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 900;
}

.dhx-pick-card em i {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #172033, #2563eb);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.dhx-pick-card > i {
  grid-column: 1 / -1;
  justify-self: stretch;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2f7;
  font-weight: 820;
}

.dhx-pick-card.is-selected > i {
  color: #1d4ed8;
  background: #eaf2ff;
}

.dhx-pick-card b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  line-height: 1.05;
  font-weight: 920;
}

.dhx-flow-row {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dhx-flow-row span {
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #667085;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, .08);
  font-size: 12px;
  font-weight: 820;
}

.dhx-flow-row span.active {
  color: #075985;
  border-color: rgba(14, 165, 233, .22);
  background: #eef8ff;
}

.dhx-flow-row i {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(102, 112, 133, .18);
}

.dhx-flow-row span.active i {
  color: #fff;
  background: #0ea5e9;
}

.dhx-flow-row i svg {
  width: 10px;
  height: 10px;
}

.dhx-production-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dhx-status-strip {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 11px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(64px, .55fr) auto auto;
  align-items: center;
  gap: 8px;
  color: #475467;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, .08);
  font-size: 12px;
  font-weight: 800;
}

.dhx-status-strip b,
.dhx-status-strip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dhx-status-strip small {
  color: #9f1239;
  font-weight: 760;
}

.dhx-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}

.dhx-status-strip.is-loading .dhx-status-dot {
  background: #06b6d4;
  box-shadow: 0 0 0 4px rgba(6, 182, 212, .14);
}

.dhx-status-strip.is-fail .dhx-status-dot {
  background: #f43f5e;
  box-shadow: 0 0 0 4px rgba(244, 63, 94, .12);
}

.dhx-status-strip i {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(37, 99, 235, .12);
}

.dhx-status-strip i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
}

.dhx-status-strip strong {
  color: #0f172a;
  font-size: 12px;
}

.dhx-status-action {
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  box-shadow: 0 8px 16px rgba(37, 99, 235, .16);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.dhx-status-strip.is-fail .dhx-status-action {
  background: linear-gradient(135deg, #e11d48, #fb7185);
  box-shadow: 0 8px 16px rgba(225, 29, 72, .14);
}

.dhx-advanced {
  position: relative;
  z-index: 20;
  flex: 0 0 84px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  background: #f8fafc;
}

.dhx-advanced summary {
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-weight: 820;
  font-size: 13px;
}

.dhx-advanced summary::-webkit-details-marker { display: none; }

.dhx-advanced-grid {
  position: absolute;
  right: 0;
  left: auto;
  bottom: calc(100% + 8px);
  top: auto;
  z-index: 80;
  width: min(430px, calc(100vw - 360px));
  padding: 10px 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .16);
}

.dhx-advanced[open] {
  z-index: 90;
}

.dhx-advanced-grid label {
  display: grid;
  gap: 5px;
}

.dhx-advanced-grid select {
  height: 36px;
  padding: 0 10px;
}

.dhx-run-row > * { flex: 1; }
.dhx-run-row .dhx-advanced { flex: 0 0 84px; }

.dhx-edit-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dhx-edit-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  color: #fff;
  background: #111827;
  isolation: isolate;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .13);
}

.dhx-edit-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
  transform: scale(1.01);
  transition: transform .2s ease;
}

.dhx-edit-tile:hover img { transform: scale(1.07); }

.dhx-edit-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, .12), rgba(2, 6, 23, .34) 45%, rgba(2, 6, 23, .88)),
    linear-gradient(135deg, rgba(37, 99, 235, .34), transparent 50%);
}

.dhx-edit-heading {
  position: absolute;
  top: 13px;
  left: 13px;
  right: 13px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
}

.dhx-edit-icon {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px);
  flex: 0 0 auto;
}

.dhx-edit-heading em {
  min-width: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  font-style: normal;
  font-weight: 920;
  text-shadow: 0 2px 12px rgba(2, 6, 23, .48);
}

.dhx-edit-copy,
.dhx-edit-current {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  gap: 4px;
}

.dhx-edit-copy em,
.dhx-edit-current small,
.dhx-edit-tile > i {
  font-size: 12px;
  font-style: normal;
  color: rgba(255, 255, 255, .82);
}

.dhx-edit-copy b,
.dhx-edit-current b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 880;
}

.dhx-edit-tile > i {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
}

.dhx-edit-tile.is-configured > i {
  color: #06283d;
  background: rgba(125, 211, 252, .90);
}

.dhx-edit-foot {
  flex: 0 0 auto;
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.dhx-edit-panel .dhx-panel-head {
  margin-bottom: 12px;
}

.dhx-edit-summary {
  min-width: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dhx-edit-summary span {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #667085;
  background: #f2f4f7;
  font-size: 12px;
  font-weight: 760;
}

.dhx-edit-summary span.active {
  color: #075985;
  background: #e0f2fe;
}

.dhx-cut-btn {
  min-width: 150px;
  min-height: 44px;
  white-space: nowrap;
}

.dhx-cut-btn.is-disabled {
  opacity: .72;
}

.dhx-phone {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 9 / 19.45;
  margin: 0 auto 8px;
  filter: drop-shadow(0 26px 42px rgba(15, 23, 42, .28));
}

.dhx-phone-inner {
  position: absolute;
  inset: 0;
  padding: 11px;
  border-radius: 48px;
  background:
    linear-gradient(145deg, #fbfdff 0%, #d6dde7 3%, #7e8999 7%, #202633 13%, #05070d 49%, #111827 82%, #7a8492 96%, #ffffff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.36),
    inset 0 0 0 5px rgba(255,255,255,.08),
    inset 0 -14px 24px rgba(0,0,0,.34),
    inset 0 10px 18px rgba(255,255,255,.10);
}

.dhx-phone-inner::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, .18);
  pointer-events: none;
}

.dhx-phone-button {
  position: absolute;
  z-index: 1;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #d1d5db, #111827);
}

.dhx-phone-volume { left: -2px; top: 92px; height: 52px; }
.dhx-phone-power { right: -2px; top: 140px; height: 72px; }

.dhx-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: #05070b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.dhx-phone-screen::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  z-index: 10;
  width: 82px;
  height: 4px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .74);
  mix-blend-mode: screen;
}

.dhx-island {
  position: absolute;
  top: 11px;
  left: 50%;
  z-index: 8;
  width: 84px;
  height: 24px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: #05070b;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05);
}

.dhx-final-mount,
.dhx-final-mount .dh-final-preview,
.dhx-final-mount .dh-output-mock {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.dhx-final-mount video,
.dhx-final-mount img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dhx-result-video {
  display: block;
  background: #05070b;
}

.dhx-output-persona {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05070b;
}

.dhx-output-persona img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: .72;
  filter: saturate(1.04) contrast(1.02);
}

.dhx-output-persona::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, .04), rgba(2, 6, 23, .72));
}

.dhx-output-persona span {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 38px;
  z-index: 2;
  display: grid;
  gap: 6px;
  color: #fff;
  text-align: center;
}

.dhx-output-persona svg {
  width: 24px;
  height: 24px;
  justify-self: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.dhx-output-persona b {
  font-size: 15px;
  font-weight: 900;
}

.dhx-output-persona em {
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.dhx-final-mount video {
  border-radius: 0;
}

.dhx-final-mount .video-preview-extra,
.dhx-final-mount .video-load-state,
.dhx-final-mount .short-preview-overlay,
.dhx-final-mount .avatar-preview-audio-hint {
  display: none !important;
}

.dhx-final-mount .video-preview-extra,
.dhx-final-mount .video-load-state {
  pointer-events: none;
}

.dhx-output-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 20px;
  color: rgba(255,255,255,.78);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(14,165,233,.10), rgba(2,6,23,.40)),
    #05070b;
}

.dhx-output-empty svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.dhx-output-empty b {
  color: #fff;
  font-size: 15px;
}

.dhx-output-empty span {
  font-size: 12px;
}

.dhx-audio-mount {
  margin-top: auto;
  min-height: 90px;
  max-height: 108px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 20%, rgba(14, 165, 233, .24), transparent 34%),
    radial-gradient(circle at 84% 8%, rgba(37, 99, 235, .18), transparent 30%),
    linear-gradient(135deg, #101828, #1d4ed8 58%, #0ea5e9);
  border: 1px solid rgba(125, 211, 252, .30);
  box-shadow: 0 16px 34px rgba(37, 99, 235, .20);
  overflow: hidden;
}

.dhx-audio-mount audio {
  width: 100%;
}

.dhx-audio-state {
  height: 100%;
  min-height: 84px;
  padding: 13px;
  display: grid;
  gap: 7px;
  align-content: center;
}

.dhx-audio-player {
  height: 100%;
  min-height: 88px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: center;
}

.dhx-audio-player > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dhx-audio-player b {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dhx-audio-player span {
  flex: 0 0 auto;
  color: rgba(255,255,255,.74);
  font-size: 11px;
  font-weight: 850;
}

.dhx-audio-player audio {
  height: 34px;
}

.dhx-audio-state b {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.dhx-audio-state span {
  color: rgba(255,255,255,.74);
  font-size: 12px;
  font-weight: 760;
}

.dhx-audio-state.is-fail span {
  color: #9f1239;
}

.dhx-audio-state i {
  height: 7px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .12);
  overflow: hidden;
}

.dhx-audio-state i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
}

.dhx-wave {
  display: inline-flex;
  align-items: end;
  gap: 4px;
  height: 22px;
  padding: 0 2px;
}

.dhx-wave i {
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #7dd3fc);
  box-shadow: 0 0 12px rgba(125, 211, 252, .42);
}

.dhx-wave i:nth-child(1) { height: 9px; }
.dhx-wave i:nth-child(2) { height: 17px; }
.dhx-wave i:nth-child(3) { height: 12px; }
.dhx-wave i:nth-child(4) { height: 20px; }
.dhx-wave i:nth-child(5) { height: 14px; }
.dhx-wave i:nth-child(6) { height: 10px; }

.dhx-output-actions {
  margin-top: 8px;
}

.dhx-output-actions > * {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

.dhx-title svg,
.dhx-auto-btn svg,
.dhx-btn svg,
.dhx-pick-media svg,
.dhx-edit-icon svg,
.dhx-advanced summary svg,
.dhx-empty-media svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#page-digital-human .dh-generation-overlay.active {
  display: grid;
  padding: 24px;
  backdrop-filter: blur(18px);
  background:
    radial-gradient(circle at 50% 36%, rgba(56, 189, 248, .26), transparent 34%),
    radial-gradient(circle at 52% 60%, rgba(16, 185, 129, .15), transparent 30%),
    rgba(2, 6, 23, .68);
}

#page-digital-human .dh-generation-card {
  width: min(520px, calc(100vw - 42px));
  gap: 18px;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid rgba(125, 211, 252, .30);
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, .22), transparent 38%),
    linear-gradient(135deg, rgba(7, 13, 30, .97), rgba(19, 47, 96, .92)),
    #111827;
  box-shadow: 0 34px 110px rgba(2, 6, 23, .55);
}

#page-digital-human .dh-generation-card::before {
  opacity: .78;
}

#page-digital-human .dh-generation-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .10);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

#page-digital-human .dh-generation-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
}

#page-digital-human .dh-generation-mark {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  color: #e0f2fe;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .35), transparent 30%),
    linear-gradient(135deg, #2563eb, #06b6d4);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.24),
    0 18px 38px rgba(14, 165, 233, .28);
}

#page-digital-human .dh-generation-mark svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#page-digital-human .dh-generation-head b {
  color: #fff;
  font-size: 23px;
  line-height: 1.18;
}

#page-digital-human .dh-generation-head small {
  color: rgba(191, 219, 254, .88);
  font-size: 13px;
  letter-spacing: 0;
}

#page-digital-human .dh-generation-bar {
  height: 11px;
  background: rgba(255,255,255,.13);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

#page-digital-human .dh-generation-card p {
  color: rgba(226, 232, 240, .88);
  font-size: 14px;
  line-height: 1.55;
}

#page-digital-human .dh-generation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#page-digital-human .dh-generation-action {
  min-width: 112px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

#page-digital-human .dh-generation-action.primary {
  border: 0;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  box-shadow: 0 16px 34px rgba(37, 99, 235, .26);
}

#page-digital-human .dh-generation-overlay.is-fail .dh-generation-card,
#page-digital-human .dh-generation-overlay.is-warn .dh-generation-card {
  border-color: rgba(251, 113, 133, .34);
  background:
    radial-gradient(circle at 18% 0%, rgba(251, 113, 133, .20), transparent 38%),
    linear-gradient(135deg, rgba(17, 24, 39, .97), rgba(88, 28, 47, .90)),
    #111827;
}

#page-digital-human .dh-generation-overlay.is-fail .dh-generation-mark,
#page-digital-human .dh-generation-overlay.is-warn .dh-generation-mark {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .35), transparent 30%),
    linear-gradient(135deg, #e11d48, #fb7185);
  color: #fff1f2;
}

#page-digital-human .dh-modal-backdrop.active {
  backdrop-filter: blur(16px);
}

#page-digital-human .dh-picker-modal {
  border-radius: 24px;
  box-shadow: 0 34px 110px rgba(15, 23, 42, .26);
}

#page-digital-human .dh-auto-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#page-digital-human .dh-auto-rules button {
  min-height: 78px;
  padding: 14px;
  border-radius: 16px;
  display: grid;
  gap: 8px;
  text-align: left;
  color: #172033;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .07), transparent),
    #fff;
  border: 1px solid rgba(15, 23, 42, .08);
}

#page-digital-human .dh-auto-rules b {
  color: #667085;
  font-size: 12px;
  font-weight: 820;
}

#page-digital-human .dh-auto-rules span {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-digital-human .dh-persona-modal,
#page-digital-human .dh-voice-modal,
#page-digital-human .dh-broll-modal,
#page-digital-human .dh-style-modal,
#page-digital-human .dh-music-modal,
#page-digital-human .dh-audio-source-modal,
#page-digital-human .dh-auto-modal {
  width: min(1120px, calc(100vw - 48px));
}

#page-digital-human .dh-picker-head {
  min-height: 58px;
}

#page-digital-human .dh-picker-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 860;
}

#page-digital-human .dh-picker-toolbar {
  gap: 12px;
}

#page-digital-human .dh-filter-pills button,
#page-digital-human .dh-mini-btn,
#page-digital-human .dh-modal-actions .btn,
#page-digital-human .dh-broll-local-actions .dh-mini-btn,
#page-digital-human .dh-music-card,
#page-digital-human .dh-audio-source-item,
#page-digital-human .dh-picker-search {
  border-radius: 12px;
}

#page-digital-human .dh-persona-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: none !important;
  grid-auto-rows: 276px !important;
  align-content: start !important;
  align-items: stretch !important;
  gap: 12px;
}

#page-digital-human .dh-persona-option {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

#page-digital-human .dh-persona-option-media,
#page-digital-human .dh-persona-option-media.persona-portrait,
#page-digital-human .dh-persona-option-media.is-video-preview {
  height: 250px;
  background: linear-gradient(180deg, #eef2f7, #e2e8f0);
}

#page-digital-human .dh-persona-option-media img,
#page-digital-human .dh-persona-option-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

#page-digital-human .dh-persona-option-media video {
  transform: scale(1.16);
  transform-origin: center 58%;
}

#page-digital-human .dh-picker-fav,
#page-digital-human .dh-voice-fav {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #0f172a;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}

#page-digital-human .dh-picker-fav.active,
#page-digital-human .dh-voice-fav.active {
  color: #f59e0b;
}

#page-digital-human .dh-voice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#page-digital-human .dh-voice-option {
  position: relative;
  padding-left: 48px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
}

#page-digital-human .dh-voice-fav {
  left: 10px;
  right: auto;
}

#page-digital-human .dh-music-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow: auto;
}

#page-digital-human .dh-music-card {
  min-height: 82px;
  padding: 12px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border: 1px solid rgba(15, 23, 42, .08);
}

#page-digital-human .dh-music-card.active {
  border-color: rgba(37, 99, 235, .35);
  box-shadow: 0 12px 28px rgba(37, 99, 235, .12);
}

#page-digital-human .dh-music-play {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
}

#page-digital-human .dh-broll-layout {
  grid-template-columns: minmax(360px, .78fr) minmax(560px, 1fr);
  min-height: 560px;
}

#page-digital-human .dh-broll-source {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#page-digital-human .dh-broll-mode-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#page-digital-human .dh-broll-mode-cards button {
  min-height: 92px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .09);
  background: linear-gradient(180deg, #fff, #f8fafc);
  color: #172033;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

#page-digital-human .dh-broll-mode-cards span {
  display: block;
  margin-top: 6px;
  color: inherit;
  opacity: .72;
  font-size: 12px;
  font-weight: 760;
}

#page-digital-human .dh-broll-mode-cards button.active {
  color: #fff;
  border-color: rgba(37, 99, 235, .45);
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
}

#page-digital-human .dh-broll-mode-cards b { font-size: 14px; }

#page-digital-human .dh-broll-filters {
  margin-top: 10px;
}

#page-digital-human .dh-broll-material-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 280px;
  overflow: auto;
}

#page-digital-human .broll-material-chip {
  border-radius: 16px;
  overflow: hidden;
}

#page-digital-human .broll-plan-preview {
  height: 100%;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .06), transparent 48%),
    #f8fafc;
  border: 1px solid rgba(15, 23, 42, .08);
  overflow: auto;
}

#page-digital-human .broll-plan-empty,
#page-digital-human .broll-material-empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 16px;
  color: #667085;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .08), transparent),
    #fff;
  border: 1px dashed rgba(37, 99, 235, .22);
  text-align: center;
}

#page-digital-human .broll-plan-empty b,
#page-digital-human .broll-material-empty b {
  display: block;
  color: #172033;
  font-size: 15px;
  margin-bottom: 6px;
}

#page-digital-human .broll-plan-row {
  grid-template-columns: 30px minmax(150px, 1fr) minmax(150px, .8fr) 76px 76px 48px;
  align-items: center;
}

#page-digital-human .dh-cover-style-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#page-digital-human .dh-cover-style-grid button {
  min-height: 208px;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #111827;
  color: #fff;
  position: relative;
}

#page-digital-human .dh-cover-style-grid img {
  width: 100%;
  height: 100%;
  min-height: 208px;
  object-fit: cover;
  opacity: .90;
}

#page-digital-human .dh-cover-style-grid b,
#page-digital-human .dh-cover-style-grid span {
  position: absolute;
  left: 12px;
  right: 12px;
  z-index: 2;
  text-align: left;
}

#page-digital-human .dh-cover-style-grid b {
  bottom: 34px;
  font-size: 15px;
}

#page-digital-human .dh-cover-style-grid span {
  bottom: 13px;
  color: rgba(255,255,255,.80);
  font-size: 12px;
}

#page-digital-human .dh-cover-style-grid button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(2, 6, 23, .76));
}

#page-digital-human .dh-featured-style-grid-premium {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#page-digital-human .dh-featured-style-grid-premium button {
  min-height: 174px;
  border-radius: 18px;
}

#page-digital-human .dh-style-card-demo {
  min-height: 132px;
}

#page-digital-human .dh-style-preview-side .dh-live-style-preview {
  min-height: 520px;
}

#page-digital-human .dh-style-advanced-details {
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: #fff;
  overflow: hidden;
}

#page-digital-human .dh-style-advanced-details summary {
  min-height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  color: #475467;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

#page-digital-human .dh-style-advanced-details:not([open]) .dh-setting-block {
  display: none;
}

#page-digital-human .dh-picker-head p {
  display: none;
}

#page-digital-human .dh-picker-modal {
  max-height: min(820px, calc(100vh - 48px));
  overflow: hidden;
}

#page-digital-human .dh-picker-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 14px;
  min-height: 0;
}

#page-digital-human .dh-picker-preview {
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .08), transparent 42%),
    #f8fafc;
  border: 1px solid rgba(15, 23, 42, .08);
}

#page-digital-human .dh-picker-preview-media {
  height: 430px;
  overflow: hidden;
  background: #e5e7eb;
}

#page-digital-human .dh-picker-preview-media img,
#page-digital-human .dh-picker-preview-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

#page-digital-human .dh-picker-preview-info {
  padding: 14px;
  display: grid;
  gap: 5px;
}

#page-digital-human .dh-picker-preview-info b,
#page-digital-human .dh-picker-voice-preview-card b {
  color: #111827;
  font-size: 18px;
  font-weight: 900;
}

#page-digital-human .dh-picker-preview-info span,
#page-digital-human .dh-picker-voice-preview-card span {
  color: #667085;
  font-size: 12px;
  font-weight: 760;
}

#page-digital-human .dh-persona-grid {
  max-height: min(62vh, 610px);
  overflow: auto;
  padding-right: 2px;
}

#page-digital-human .dh-persona-option {
  display: grid;
  grid-template-rows: 224px auto;
}

#page-digital-human .dh-persona-option.active {
  border-color: rgba(37, 99, 235, .42);
  box-shadow: 0 18px 36px rgba(37, 99, 235, .15);
}

#page-digital-human .dh-persona-option-media,
#page-digital-human .dh-persona-option-media.persona-portrait,
#page-digital-human .dh-persona-option-media.is-video-preview {
  height: 224px;
}

#page-digital-human .dh-persona-option-body {
  min-height: 68px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 4px;
}

#page-digital-human .dh-persona-option-body b,
#page-digital-human .dh-persona-option-body em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-digital-human .dh-persona-option-body b {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

#page-digital-human .dh-persona-option-body em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
}

#page-digital-human .dh-persona-option > i {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255, 255, 255, .90);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

#page-digital-human .dh-voice-grid {
  max-height: min(62vh, 610px);
  overflow: auto;
}

#page-digital-human .dh-voice-option {
  min-height: 86px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 50px;
}

#page-digital-human .dh-voice-option.active {
  border-color: rgba(37, 99, 235, .40);
  box-shadow: 0 14px 30px rgba(37, 99, 235, .12);
}

#page-digital-human .dh-voice-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

#page-digital-human .dh-voice-main b,
#page-digital-human .dh-voice-main em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-digital-human .dh-voice-main b {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

#page-digital-human .dh-voice-main em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

#page-digital-human .dh-voice-play,
#page-digital-human .dh-picker-voice-play {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  box-shadow: 0 12px 24px rgba(37, 99, 235, .22);
}

#page-digital-human .dh-voice-play.playing,
#page-digital-human .dh-picker-voice-play.playing {
  background: linear-gradient(135deg, #0f172a, #7c3aed);
}

#page-digital-human .dh-voice-select {
  min-width: 64px;
  height: 34px;
  border-radius: 999px;
  color: #1d4ed8;
  background: #eaf2ff;
  font-size: 12px;
  font-weight: 900;
}

#page-digital-human .dh-picker-voice-preview-card {
  min-height: 100%;
  padding: 22px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

#page-digital-human .dh-picker-voice-wave,
#page-digital-human .dh-mini-wave {
  display: inline-flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
  height: 34px;
}

#page-digital-human .dh-picker-voice-wave i,
#page-digital-human .dh-mini-wave i {
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2563eb, #06b6d4);
}

#page-digital-human .dh-picker-voice-wave i:nth-child(1),
#page-digital-human .dh-mini-wave i:nth-child(1) { height: 12px; }
#page-digital-human .dh-picker-voice-wave i:nth-child(2),
#page-digital-human .dh-mini-wave i:nth-child(2) { height: 24px; }
#page-digital-human .dh-picker-voice-wave i:nth-child(3),
#page-digital-human .dh-mini-wave i:nth-child(3) { height: 18px; }
#page-digital-human .dh-picker-voice-wave i:nth-child(4),
#page-digital-human .dh-mini-wave i:nth-child(4) { height: 30px; }
#page-digital-human .dh-picker-voice-wave i:nth-child(5),
#page-digital-human .dh-mini-wave i:nth-child(5) { height: 16px; }
#page-digital-human .dh-picker-voice-wave i:nth-child(6) { height: 27px; }
#page-digital-human .dh-picker-voice-wave i:nth-child(7) { height: 14px; }

#page-digital-human .dh-broll-layout {
  min-height: min(640px, calc(100vh - 210px));
  max-height: min(640px, calc(100vh - 210px));
}

#page-digital-human .dh-broll-source,
#page-digital-human .dh-broll-plan-side {
  min-height: 0;
}

#page-digital-human .dh-broll-material-grid {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
}

#page-digital-human .dh-broll-plan-preview {
  height: 100%;
  padding: 12px;
}

#page-digital-human .dh-broll-plan-shell {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
}

#page-digital-human .dh-broll-plan-skeleton {
  display: grid;
  align-content: center;
  gap: 10px;
}

#page-digital-human .dh-broll-plan-skeleton span {
  min-height: 72px;
  padding: 12px;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  color: #172033;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
}

#page-digital-human .dh-broll-plan-skeleton i {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  font-style: normal;
  font-weight: 900;
}

#page-digital-human .dh-broll-plan-skeleton b {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-digital-human .dh-broll-plan-skeleton em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

#page-digital-human .dh-broll-empty-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#page-digital-human .dh-broll-empty-actions .btn {
  min-height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#page-digital-human .dh-broll-empty-actions input {
  display: none;
}

/* Commercial delivery overrides for the new digital-human workbench. */
#page-digital-human .dh-picker-create-btn {
  margin-left: auto;
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
}

#page-digital-human .dh-persona-grid {
  grid-auto-rows: 246px !important;
  max-height: min(62vh, 584px);
}

#page-digital-human .dh-persona-option {
  grid-template-rows: 170px minmax(0, 1fr) 34px;
  gap: 8px;
  padding: 8px;
}

#page-digital-human .dh-persona-option-media,
#page-digital-human .dh-persona-option-media.persona-portrait,
#page-digital-human .dh-persona-option-media.is-video-preview {
  height: 170px;
  min-height: 170px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.94), transparent 28%),
    linear-gradient(180deg, #f8fafc, #e8eef8);
}

#page-digital-human .dh-persona-option-media img,
#page-digital-human .dh-persona-option-media video,
#page-digital-human .dh-persona-option-media img[data-video-poster] {
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
  transform: none !important;
}

#page-digital-human .dh-persona-option-body {
  min-height: 0;
  padding: 0 2px;
  align-content: start;
}

#page-digital-human .dh-persona-option-body em {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}

#page-digital-human .dh-persona-select {
  min-height: 32px;
  border-radius: 999px;
  color: #1d4ed8;
  background: #eaf2ff;
  border: 1px solid rgba(37, 99, 235, .20);
  font-size: 12px;
  font-weight: 900;
}

#page-digital-human .dh-persona-option.active .dh-persona-select {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
}

#page-digital-human .dh-persona-video-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 4;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 850;
}

#page-digital-human .dh-picker-preview-media {
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.84), transparent 30%),
    linear-gradient(180deg, #eef4ff, #dfe8f6);
}

#page-digital-human .dh-picker-preview-media img,
#page-digital-human .dh-picker-preview-media video {
  object-fit: contain;
  object-position: center bottom;
}

#page-digital-human .dh-voice-option {
  padding: 12px 12px 12px 54px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

#page-digital-human .dh-voice-wave-mini {
  display: inline-flex;
  align-items: end;
  gap: 3px;
  height: 16px;
}

#page-digital-human .dh-voice-wave-mini i {
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1d4ed8, #0ea5e9);
}

#page-digital-human .dh-voice-wave-mini i:nth-child(1) { height: 7px; }
#page-digital-human .dh-voice-wave-mini i:nth-child(2) { height: 13px; }
#page-digital-human .dh-voice-wave-mini i:nth-child(3) { height: 9px; }
#page-digital-human .dh-voice-wave-mini i:nth-child(4) { height: 15px; }
#page-digital-human .dh-voice-wave-mini i:nth-child(5) { height: 8px; }

#page-digital-human .dh-broll-mode-cards button {
  min-height: 106px;
}

#page-digital-human .dh-broll-mode-demo {
  width: 100%;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 10px;
  display: block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(15,23,42,.16), rgba(37,99,235,.13));
}

#page-digital-human .dh-broll-mode-demo i,
#page-digital-human .dh-broll-mode-demo em {
  position: absolute;
  border-radius: 999px;
  display: block;
}

#page-digital-human .dh-broll-mode-demo i { background: rgba(15, 23, 42, .72); }
#page-digital-human .dh-broll-mode-demo em { background: rgba(14, 165, 233, .82); }
#page-digital-human .dh-broll-mode-light i { inset: 8px 34%; }
#page-digital-human .dh-broll-mode-light em { display: none; }
#page-digital-human .dh-broll-mode-leftTop i { width: 15px; height: 15px; left: 8px; top: 7px; }
#page-digital-human .dh-broll-mode-leftTop em { inset: 7px 10px 7px 30px; border-radius: 8px; }
#page-digital-human .dh-broll-mode-rightBottom i { width: 15px; height: 15px; right: 8px; bottom: 7px; }
#page-digital-human .dh-broll-mode-rightBottom em { inset: 7px 30px 7px 10px; border-radius: 8px; }
#page-digital-human .dh-broll-mode-full i { display: none; }
#page-digital-human .dh-broll-mode-full em { inset: 7px 10px; border-radius: 8px; }

#page-digital-human .broll-plan-row {
  min-height: 64px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
}

#page-digital-human .dh-featured-style-grid-premium button {
  min-height: 156px;
}

#page-digital-human .dh-style-card-demo {
  min-height: 104px;
}

#page-digital-human .broll-plan-row {
  min-height: 62px;
  padding: 8px;
  grid-template-columns: 28px minmax(126px, 1fr) minmax(130px, .9fr) 70px 70px 44px;
  border-radius: 14px;
}

#page-digital-human .broll-plan-row select,
#page-digital-human .broll-plan-row input {
  min-height: 34px;
  border-radius: 10px;
}

#page-digital-human .dh-style-modal-layout {
  grid-template-columns: minmax(360px, .72fr) minmax(420px, 1fr);
  gap: 18px;
}

#page-digital-human .dh-featured-style-grid-premium button {
  min-height: 210px;
  padding: 12px;
  text-align: left;
}

#page-digital-human .dh-style-card-demo {
  min-height: 158px;
  border-radius: 16px;
  overflow: hidden;
  background: #0f172a;
}

#page-digital-human .dh-style-card-demo b,
#page-digital-human .dh-style-card-demo i,
#page-digital-human .dh-style-card-demo em {
  letter-spacing: 0;
}

#page-digital-human .dh-style-card-viral {
  background:
    radial-gradient(circle at 80% 12%, rgba(250, 204, 21, .32), transparent 24%),
    linear-gradient(180deg, #0f172a, #111827 52%, #7f1d1d);
}

#page-digital-human .dh-style-card-viral b {
  color: #fff;
  text-shadow: 0 3px 0 #000, 0 0 16px rgba(250, 204, 21, .55);
}

#page-digital-human .dh-style-card-viral i {
  color: #fde047;
  background: rgba(220, 38, 38, .92);
}

#page-digital-human .dh-style-card-business {
  background:
    linear-gradient(135deg, rgba(216, 165, 64, .18), transparent 42%),
    linear-gradient(180deg, #f8fafc, #e2e8f0);
}

#page-digital-human .dh-style-card-business b {
  color: #111827;
}

#page-digital-human .dh-style-card-business i {
  color: #111827;
  background: rgba(216, 165, 64, .24);
}

#page-digital-human .dh-style-preview-side .dh-live-style-preview {
  min-height: min(560px, calc(100vh - 230px));
}

#page-digital-human .dh-style-advanced-details {
  max-height: 290px;
  overflow: auto;
}

#page-digital-human .dh-cover-style-grid button.active,
#page-digital-human .dh-featured-style-grid-premium button.active {
  outline: 3px solid rgba(37, 99, 235, .28);
  border-color: rgba(37, 99, 235, .55);
}

#page-digital-human .dh-cover-style-grid button {
  min-height: 190px;
}

#page-digital-human .dh-cover-style-grid img {
  min-height: 190px;
}

#page-digital-human .dh-modal-actions {
  gap: 10px;
}

#page-digital-human .dh-modal-actions .btn {
  min-height: 42px;
  font-weight: 850;
}

/* Digital-human SaaS delivery polish: primary workflow cards */
.dhx-layout {
  grid-template-columns: minmax(300px, .78fr) minmax(535px, 1.10fr) minmax(340px, .82fr);
  grid-template-rows: minmax(260px, .44fr) minmax(318px, .56fr);
}

.dhx-production-selects {
  min-height: 150px;
  gap: 12px;
}

.dhx-pick-card {
  position: relative;
  min-height: 150px;
  padding: 14px 14px 14px 12px;
  grid-template-columns: 116px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px 14px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .04), transparent 48%),
    linear-gradient(180deg, #ffffff, #f6f9fc);
}

.dhx-pick-card.is-selected {
  border-color: rgba(37, 99, 235, .32);
  background:
    radial-gradient(circle at 0 0, rgba(37, 99, 235, .15), transparent 38%),
    #fff;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .13);
}

.dhx-pick-step {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  color: #1d4ed8;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
}

.dhx-pick-icon {
  width: 116px;
  height: 104px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #eff6ff, #dbeafe);
}

.dhx-pick-persona .dhx-pick-icon {
  height: 118px;
  align-self: stretch;
  background:
    linear-gradient(180deg, #e0f2fe, #f8fafc);
}

.dhx-pick-icon img {
  object-fit: cover;
  object-position: center 46%;
}

.dhx-pick-persona .dhx-pick-icon img {
  object-fit: contain;
  object-position: center bottom;
  padding: 3px 0 0;
}

.dhx-pick-card em {
  color: #1d4ed8;
  font-size: 15px;
  font-weight: 950;
}

.dhx-pick-card b {
  margin-top: 4px;
  font-size: 19px;
  font-weight: 950;
}

.dhx-pick-card small {
  margin-top: 2px;
  color: #475467;
  font-size: 12px;
  font-weight: 780;
}

.dhx-pick-card > i {
  height: 32px;
  border-radius: 12px;
  color: #0f172a;
  background: #f1f5f9;
}

.dhx-pick-card.is-selected > i {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
}

/* Post-edit module cards */
.dhx-edit-tile {
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 18px 34px rgba(15, 23, 42, .12);
}

.dhx-edit-overlay {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, .14), rgba(2, 6, 23, .72)),
    linear-gradient(135deg, rgba(37, 99, 235, .18), rgba(6, 182, 212, .08) 48%, transparent);
}

.dhx-edit-icon {
  top: 14px;
  left: 14px;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: rgba(15, 23, 42, .42);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}

.dhx-edit-copy {
  left: 14px;
  right: 14px;
  bottom: 14px;
  gap: 6px;
}

.dhx-edit-copy em {
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  color: #08111f;
  background: rgba(255, 255, 255, .92);
  font-size: 14px;
  font-weight: 950;
}

.dhx-edit-copy b {
  font-size: 18px;
  line-height: 1.15;
}

.dhx-edit-copy small {
  color: rgba(255, 255, 255, .86);
  font-size: 12px;
  font-weight: 820;
}

/* Output preview: wider phone and premium audio strip */
.dhx-phone {
  width: min(100%, 286px);
  margin-bottom: 10px;
}

.dhx-phone-inner {
  padding: 11px;
  border-radius: 51px;
  background:
    linear-gradient(135deg, #f8fafc 0%, #94a3b8 3%, #111827 12%, #030712 52%, #334155 89%, #ffffff 100%);
}

.dhx-phone-screen {
  border-radius: 40px;
}

.dhx-audio-mount {
  min-height: 104px;
  max-height: 124px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 10% 20%, rgba(34, 211, 238, .42), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(59, 130, 246, .38), transparent 30%),
    linear-gradient(135deg, #111827, #1d4ed8 58%, #0891b2);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 18px 38px rgba(37, 99, 235, .22);
}

.dhx-audio-state,
.dhx-audio-player {
  min-height: 104px;
  padding: 14px;
}

.dhx-audio-meta,
.dhx-audio-player > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dhx-audio-state b,
.dhx-audio-player b {
  color: #fff;
}

.dhx-audio-state span,
.dhx-audio-player span {
  color: rgba(255, 255, 255, .76);
}

.dhx-wave {
  height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

.dhx-wave i {
  width: 7px;
  background: linear-gradient(180deg, #fff, #67e8f9);
  box-shadow: 0 0 18px rgba(103, 232, 249, .55);
}

.dhx-wave i:nth-child(1) { height: 12px; }
.dhx-wave i:nth-child(2) { height: 24px; }
.dhx-wave i:nth-child(3) { height: 16px; }
.dhx-wave i:nth-child(4) { height: 31px; }
.dhx-wave i:nth-child(5) { height: 20px; }
.dhx-wave i:nth-child(6) { height: 36px; }
.dhx-wave i:nth-child(7) { height: 23px; }
.dhx-wave i:nth-child(8) { height: 15px; }
.dhx-wave i:nth-child(9) { height: 29px; }
.dhx-wave i:nth-child(10) { height: 18px; }

.dhx-output-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dhx-output-actions > * {
  min-height: 40px;
  padding: 0 9px;
  font-size: 12px;
}

/* Picker modals */
#page-digital-human .dh-picker-head {
  min-height: 54px;
  padding-bottom: 10px;
}

#page-digital-human .dh-picker-head > div {
  min-width: 0;
}

#page-digital-human .dh-picker-head h2 {
  color: #111827;
  font-size: 22px;
  font-weight: 920;
  letter-spacing: 0;
}

#page-digital-human .dh-picker-head .dh-mini-btn,
#page-digital-human .dh-music-upload-inline,
#page-digital-human .dh-broll-local-actions .dh-mini-btn {
  border: 1px solid rgba(37, 99, 235, .16);
  color: #1d4ed8;
  background: #eef6ff;
  font-weight: 900;
}

#page-digital-human .dh-music-upload-inline input,
#page-digital-human .dh-music-upload-card input {
  display: none;
}

#page-digital-human .dh-music-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(220px, .42fr);
  gap: 12px;
  align-items: center;
}

#page-digital-human .dh-music-upload-card {
  cursor: pointer;
  border-style: dashed;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .08), transparent 50%),
    #fff;
}

#page-digital-human .dh-persona-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#page-digital-human .dh-persona-option {
  display: grid !important;
  grid-template-rows: 172px 64px 40px !important;
  min-height: 0 !important;
  height: 276px !important;
  padding: 0 !important;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

#page-digital-human .dh-persona-option.active {
  border-color: rgba(37, 99, 235, .48);
  box-shadow: 0 18px 34px rgba(37, 99, 235, .15);
}

#page-digital-human .dh-persona-option-media,
#page-digital-human .dh-persona-option-media.persona-portrait,
#page-digital-human .dh-persona-option-media.is-video-preview {
  position: relative;
  width: 100%;
  height: 172px !important;
  min-height: 0 !important;
  border-radius: 0;
  background:
    linear-gradient(180deg, #eef2f7, #f8fafc);
  overflow: hidden;
}

#page-digital-human .dh-persona-option-media img,
#page-digital-human .dh-persona-option-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  transform: none;
}

#page-digital-human .dh-persona-video-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 23, 42, .72);
  font-size: 11px;
  font-weight: 900;
}

#page-digital-human .dh-picker-fav,
#page-digital-human .dh-voice-fav {
  transition: transform .16s ease, background .16s ease, color .16s ease;
}

#page-digital-human .dh-picker-fav:active,
#page-digital-human .dh-voice-fav:active {
  transform: scale(.9);
}

#page-digital-human .dh-picker-fav.active,
#page-digital-human .dh-voice-fav.active {
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

#page-digital-human .dh-persona-option-body {
  min-height: 0 !important;
  height: 64px;
  padding: 10px 12px 8px;
}

#page-digital-human .dh-persona-select {
  margin: 0 12px 12px;
  border-radius: 12px;
  color: #1d4ed8;
  background: #eaf2ff;
  font-size: 12px;
  font-weight: 900;
}

#page-digital-human .dh-persona-option.active .dh-persona-select {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
}

#page-digital-human .dh-picker-preview-media {
  height: 450px;
  background:
    linear-gradient(180deg, #e0f2fe, #f8fafc);
}

#page-digital-human .dh-picker-preview-info {
  background: #fff;
}

#page-digital-human .dh-picker-preview-media img,
#page-digital-human .dh-picker-preview-media video {
  object-fit: contain;
  object-position: center bottom;
}

#page-digital-human .dh-picker-preview-persona-video {
  background: #020617;
  object-fit: contain !important;
}

/* B-roll modal */
#page-digital-human .dh-broll-layout {
  grid-template-columns: minmax(380px, .78fr) minmax(520px, 1fr);
}

#page-digital-human .dh-broll-mode-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#page-digital-human #dhBrollModeCards.dh-broll-mode-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#page-digital-human .dh-broll-mode-cards button {
  min-height: 118px;
  padding: 12px;
  display: grid;
  grid-template-rows: 50px auto auto;
  gap: 7px;
  text-align: left;
}

#page-digital-human .dh-broll-mode-demo {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(135deg, #dbeafe, #f8fafc);
  border: 1px solid rgba(15, 23, 42, .07);
}

#page-digital-human .dh-broll-mode-demo i {
  position: absolute;
  inset: 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .20), rgba(6, 182, 212, .08));
}

#page-digital-human .dh-broll-mode-cards b {
  color: #172033;
  font-size: 14px;
  font-weight: 950;
}

#page-digital-human .dh-broll-mode-cards button > span:not(.dh-broll-mode-demo) {
  color: #667085;
  font-size: 11px;
  font-weight: 780;
}

#page-digital-human .dh-broll-mode-cards button.active b,
#page-digital-human .dh-broll-mode-cards button.active > span:not(.dh-broll-mode-demo) {
  color: #fff;
}

#page-digital-human .dh-broll-plan-tools-primary {
  margin: 12px 0;
  padding: 10px;
  border-radius: 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

#page-digital-human .dh-broll-plan-tools-primary .btn {
  min-height: 38px;
  border-radius: 12px;
  font-weight: 900;
}

#page-digital-human #dhBrollPlanSummary {
  min-width: 0;
  color: #475467;
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-digital-human .dh-broll-local-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

#page-digital-human .dh-broll-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#page-digital-human .dh-broll-filters button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: #667085;
  background: #eef2f7;
  font-size: 12px;
  font-weight: 820;
}

#page-digital-human .dh-broll-filters button.active {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
}

#page-digital-human .broll-material-empty {
  min-height: 180px;
}

#page-digital-human .broll-plan-head {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#page-digital-human .broll-plan-head b {
  color: #111827;
  font-size: 16px;
  font-weight: 950;
}

#page-digital-human .broll-plan-head span {
  color: #667085;
  font-size: 12px;
  font-weight: 820;
}

#page-digital-human .dh-broll-mode-demo em {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #0f172a;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .88);
}

#page-digital-human .dh-broll-mode-light em {
  display: none;
}

#page-digital-human .dh-broll-mode-leftTop em {
  left: 10px;
  top: 10px;
}

#page-digital-human .dh-broll-mode-rightBottom em {
  right: 10px;
  bottom: 10px;
}

#page-digital-human .dh-broll-mode-full em {
  inset: 8px;
  width: auto;
  height: auto;
  border-radius: 8px;
  background: rgba(15, 23, 42, .26);
}

#page-digital-human .dh-broll-mode-cards button.active .dh-broll-mode-demo {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .18);
}

/* Subtitle/title modal */
#page-digital-human .dh-style-modal-layout {
  grid-template-columns: minmax(500px, .92fr) minmax(420px, 1fr);
  align-items: stretch;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-modal-layout {
  grid-template-columns: minmax(520px, .76fr) minmax(520px, 1fr) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls {
  width: auto !important;
  min-width: 0 !important;
}

#page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: auto !important;
}

#page-digital-human #dhCoverModal .dh-style-modal-layout {
  grid-template-columns: minmax(520px, .76fr) minmax(520px, 1fr) !important;
}

#page-digital-human #dhCoverModal .dh-style-controls {
  width: auto !important;
  min-width: 0 !important;
}

#page-digital-human #dhCoverPresetGrid.dh-cover-style-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: auto !important;
}

#page-digital-human .dh-featured-style-grid-premium {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#page-digital-human .dh-featured-style-grid-premium button {
  min-height: 128px;
  padding: 8px;
}

#page-digital-human .dh-style-card-demo {
  min-height: 78px;
}

#page-digital-human .dh-style-card-sell {
  background:
    radial-gradient(circle at 82% 16%, rgba(245, 158, 11, .32), transparent 28%),
    linear-gradient(180deg, #111827, #312e81 54%, #78350f);
}

#page-digital-human .dh-style-card-sell b { color: #fef3c7; }
#page-digital-human .dh-style-card-sell i {
  color: #111827;
  background: #fbbf24;
}

#page-digital-human .dh-style-card-karaoke {
  background:
    linear-gradient(180deg, #0f172a, #172554 55%, #0e7490);
}

#page-digital-human .dh-style-card-karaoke b { color: #fff; }
#page-digital-human .dh-style-card-karaoke i {
  color: #031827;
  background: #67e8f9;
}

#page-digital-human .dh-style-controls-visible {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: none;
  padding: 8px;
  overflow: visible;
}

#page-digital-human .dh-style-controls-visible .dh-setting-block {
  display: block;
  margin: 0;
  border: 0;
  background: transparent;
}

#page-digital-human .dh-style-advanced-details.dh-style-controls-visible .dh-setting-block {
  display: block;
}

#page-digital-human .dh-setting-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

#page-digital-human .dh-compact-field select,
#page-digital-human .dh-compact-field input {
  min-height: 34px;
  border-radius: 10px;
  font-size: 12px;
}

#page-digital-human #dhSubtitleTitleModal .dh-advanced-style-settings {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  pointer-events: auto !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field,
#page-digital-human #dhSubtitleTitleModal .dh-compact-field {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  pointer-events: auto !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field b {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field select,
#page-digital-human #dhSubtitleTitleModal .dh-field input {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 36px !important;
  pointer-events: auto !important;
}

/* Cover modal */
#page-digital-human .dh-cover-style-grid button {
  min-height: 184px;
  padding: 10px;
  border-radius: 18px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 5px;
  color: #111827;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

#page-digital-human .dh-cover-style-grid button::after {
  display: none;
}

#page-digital-human .dh-cover-style-grid img {
  min-height: 126px;
  height: 126px;
  border-radius: 14px;
  opacity: 1;
  object-fit: cover;
}

#page-digital-human .dh-cover-style-grid b,
#page-digital-human .dh-cover-style-grid span {
  position: static;
  color: inherit;
  text-align: left;
}

#page-digital-human .dh-cover-style-grid b {
  font-size: 14px;
  font-weight: 950;
}

#page-digital-human .dh-cover-style-grid span {
  color: #667085;
  font-size: 12px;
}

/* v18 commercial delivery pass */
.dhx-production-panel {
  overflow: visible;
}

.dhx-production-selects {
  min-height: 162px;
}

.dhx-pick-card {
  min-height: 162px;
  grid-template-columns: 132px minmax(0, 1fr);
  padding: 14px;
  align-items: stretch;
}

.dhx-pick-icon {
  width: 132px;
  height: 132px;
  align-self: stretch;
  border-radius: 20px;
}

.dhx-pick-persona .dhx-pick-icon {
  height: 132px;
}

.dhx-pick-icon video {
  display: block;
  background: #0f172a;
  object-fit: cover;
  object-position: center 42%;
}

.dhx-pick-persona .dhx-pick-icon img {
  object-fit: cover;
  object-position: center 45%;
  padding: 0;
}

.dhx-pick-card em {
  font-size: 16px;
  color: #0f4eea;
}

.dhx-pick-card b {
  white-space: normal;
  line-height: 1.15;
  font-size: 20px;
}

.dhx-pick-card small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dhx-edit-tile {
  min-height: 126px;
}

.dhx-edit-heading {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dhx-edit-heading .dhx-edit-icon {
  position: static;
  flex: 0 0 42px;
}

.dhx-edit-heading em {
  min-width: 0;
  padding: 7px 11px;
  border-radius: 999px;
  color: #06101f;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 26px rgba(2, 6, 23, .16);
  font-size: 16px;
  line-height: 1;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.dhx-edit-current {
  bottom: 14px;
  gap: 5px;
}

.dhx-edit-current b {
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}

.dhx-edit-current small {
  color: rgba(255, 255, 255, .86);
  font-size: 12px;
  font-weight: 820;
}

.dhx-phone {
  width: min(100%, 306px);
}

.dhx-audio-mount {
  min-height: 112px;
  max-height: 130px;
}

#page-digital-human .dh-persona-grid {
  grid-auto-rows: 248px !important;
}

#page-digital-human .dh-persona-option {
  grid-template-rows: 152px 56px 40px !important;
  height: 248px !important;
}

#page-digital-human .dh-persona-option-media,
#page-digital-human .dh-persona-option-media.persona-portrait,
#page-digital-human .dh-persona-option-media.is-video-preview {
  height: 152px !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .72), transparent 45%),
    linear-gradient(180deg, #dbeafe, #f8fafc);
}

#page-digital-human .dh-persona-option-media video,
#page-digital-human .dh-persona-option-media img {
  object-fit: cover;
  object-position: center 42%;
}

#page-digital-human .dh-picker-fav {
  width: 38px;
  height: 38px;
  top: 8px;
  right: 8px;
  font-size: 17px;
}

#page-digital-human .dh-persona-option-body {
  height: 56px;
  padding: 8px 12px 6px;
}

#page-digital-human .dh-picker-create-btn {
  border-color: rgba(37, 99, 235, .24);
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  box-shadow: 0 12px 26px rgba(37, 99, 235, .18);
}

#page-digital-human .dh-broll-layout {
  grid-template-columns: minmax(420px, .86fr) minmax(470px, 1fr);
  gap: 14px;
}

#page-digital-human .dh-broll-mode-cards button {
  min-height: 116px;
  border-radius: 18px;
}

#page-digital-human .dh-broll-plan-preview {
  background: #f8fafc;
}

#page-digital-human .dh-cover-style-grid button {
  min-height: 206px;
}

#page-digital-human .dh-cover-style-grid img {
  height: 142px;
  min-height: 142px;
  object-position: center 24%;
}

@media (max-width: 1500px) {
  .dhx-layout {
    grid-template-columns: minmax(292px, .72fr) minmax(470px, 1.08fr) minmax(320px, .80fr);
    grid-template-rows: minmax(252px, .46fr) minmax(296px, .54fr);
  }
  .dhx-pick-card {
    min-height: 142px;
    padding: 12px;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px 12px;
  }
  .dhx-pick-icon {
    width: 112px;
    height: 112px;
    border-radius: 18px;
  }
  .dhx-pick-persona .dhx-pick-icon {
    height: 112px;
  }
  .dhx-pick-card em { font-size: 14px; }
  .dhx-pick-card b { font-size: 17px; }
  .dhx-pick-card small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .dhx-advanced summary { height: 36px; }
  .dhx-run-row .dhx-btn { min-height: 36px; }
  .dhx-phone { width: min(100%, 292px); }
  .dhx-audio-mount {
    min-height: 100px;
    max-height: 118px;
  }
  .dhx-output-actions .dhx-btn {
    min-height: 40px;
    padding: 0 10px;
  }
  .dhx-copy-meta {
    grid-template-columns: 1fr;
  }
  .dhx-panel-head > b {
    font-size: 15px;
  }
  .dhx-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dhx-edit-tile {
    min-height: 0;
  }
  .dhx-edit-current {
    left: 10px;
    right: 10px;
    bottom: 9px;
    gap: 2px;
  }
  .dhx-edit-heading {
    left: 10px;
    right: 10px;
    top: 10px;
  }
  .dhx-edit-heading em {
    font-size: 13px;
  }
  .dhx-edit-current b {
    font-size: 14px;
  }
  .dhx-edit-current small,
  .dhx-edit-tile > i {
    font-size: 11px;
  }
  .dhx-edit-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
  }
  .dhx-advanced-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 360px;
  }
  .dhx-tabs {
    gap: 3px;
    padding: 3px;
  }
  .dhx-tabs button {
    min-width: 38px;
    padding: 0 8px;
    font-size: 11px;
  }
  .dhx-edit-foot {
    grid-template-columns: 1fr;
  }
  .dhx-cut-btn {
    width: 100%;
  }
}

@media (max-width: 1180px) {
  .dhx-board {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .dhx-layout {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .dhx-copy-panel,
  .dhx-production-panel,
  .dhx-edit-panel,
  .dhx-output-panel {
    grid-column: auto;
    grid-row: auto;
    min-height: 520px;
  }
  .dhx-output-panel {
    min-height: 660px;
  }
}

/* v20 commercial delivery polish: clean SaaS controls, stronger pickers, stable one-page density */
#page-digital-human .dhx-pick-card {
  min-height: 146px;
  grid-template-columns: 118px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 30px;
}

#page-digital-human .dhx-pick-icon {
  width: 118px;
  height: 118px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08);
}

#page-digital-human .dhx-pick-persona .dhx-pick-icon img,
#page-digital-human .dhx-pick-persona .dhx-pick-icon video {
  object-fit: cover;
  object-position: center 18%;
}

#page-digital-human .dhx-pick-copy em {
  font-size: 15px;
  color: #172033;
}

#page-digital-human .dhx-pick-copy b {
  font-size: 22px;
}

#page-digital-human .dhx-pick-copy small {
  font-size: 12px;
  line-height: 1.35;
}

#page-digital-human .dhx-pick-card > i {
  color: #172033;
  background: linear-gradient(180deg, #fff, #eef5ff);
  border: 1px solid rgba(37, 99, 235, .12);
}

#page-digital-human .dhx-pick-card.is-selected > i {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  border-color: transparent;
}

#page-digital-human .dhx-edit-heading em {
  font-size: 21px;
}

#page-digital-human .dhx-edit-current {
  padding: 10px;
  border-radius: 14px;
  background: rgba(2, 6, 23, .36);
  backdrop-filter: blur(12px);
}

#page-digital-human .dhx-edit-current b {
  font-size: 16px;
}

#page-digital-human .dhx-output-panel {
  padding-left: 14px;
  padding-right: 14px;
}

#page-digital-human .dhx-phone {
  width: min(100%, 304px);
}

#page-digital-human .dhx-output-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#page-digital-human .dhx-output-actions > * {
  min-height: 42px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 12px;
}

#page-digital-human .dh-picker-modal {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98)),
    #fff;
  border: 1px solid rgba(15, 23, 42, .08);
}

#page-digital-human .dh-picker-head {
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}

#page-digital-human .dh-picker-head h2 {
  color: #101828;
  font-size: 22px;
  font-weight: 920;
  letter-spacing: 0;
}

#page-digital-human .dh-picker-head .dh-picker-create-btn {
  margin-left: auto;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  border: 0;
  box-shadow: 0 14px 32px rgba(37, 99, 235, .22);
}

#page-digital-human .dh-picker-toolbar {
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}

#page-digital-human .dh-filter-pills {
  background: #eef2f7;
  border-radius: 14px;
  padding: 4px;
}

#page-digital-human .dh-filter-pills button {
  height: 32px;
  border-radius: 10px;
  font-weight: 820;
}

#page-digital-human .dh-filter-pills button.active {
  background: #fff;
  color: #111827;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}

#page-digital-human .dh-picker-search {
  height: 40px;
  border-radius: 13px;
  border-color: rgba(15, 23, 42, .10);
  background: #fff;
}

#page-digital-human .dh-picker-split {
  grid-template-columns: minmax(0, 1fr) minmax(286px, .42fr);
  gap: 16px;
  min-height: 520px;
}

#page-digital-human .dh-persona-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

#page-digital-human .dh-persona-option {
  min-height: 246px;
  padding: 8px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}

#page-digital-human .dh-persona-option-media,
#page-digital-human .dh-persona-option-media.persona-portrait,
#page-digital-human .dh-persona-option-media.is-video-preview {
  height: 160px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.82), transparent 28%),
    linear-gradient(180deg, #eef6ff, #dbeafe);
}

#page-digital-human .dh-persona-option-media img,
#page-digital-human .dh-persona-option-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

#page-digital-human .dh-persona-option-body {
  padding: 9px 3px 6px;
  min-height: 52px;
}

#page-digital-human .dh-persona-option-body b {
  color: #101828;
  font-size: 14px;
  font-weight: 900;
}

#page-digital-human .dh-persona-option-body em {
  color: #667085;
  font-size: 11px;
}

#page-digital-human .dh-picker-fav,
#page-digital-human .dh-voice-fav {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #667085;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

#page-digital-human .dh-picker-fav.active,
#page-digital-human .dh-voice-fav.active {
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

#page-digital-human .dh-persona-select,
#page-digital-human .dh-voice-select {
  height: 32px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 860;
}

#page-digital-human .dh-persona-option.active .dh-persona-select,
#page-digital-human .dh-voice-option.active .dh-voice-select {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
}

#page-digital-human .dh-picker-preview {
  padding: 12px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .12), transparent 34%),
    #f8fafc;
  border: 1px solid rgba(15, 23, 42, .08);
}

#page-digital-human .dh-picker-preview-media {
  min-height: 380px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.88), transparent 28%),
    linear-gradient(180deg, #eef6ff, #dbeafe);
  overflow: hidden;
}

#page-digital-human .dh-picker-preview-media img,
#page-digital-human .dh-picker-preview-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

#page-digital-human .dh-picker-preview-info {
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
}

#page-digital-human .dh-picker-preview-info b {
  color: #101828;
  font-size: 18px;
  font-weight: 920;
}

#page-digital-human .dh-voice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

#page-digital-human .dh-voice-option {
  min-height: 104px;
  padding: 12px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

#page-digital-human .dh-voice-play {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #172033, #2563eb);
  box-shadow: 0 12px 24px rgba(37, 99, 235, .22);
}

#page-digital-human .dh-voice-main {
  gap: 4px;
}

#page-digital-human .dh-voice-main b {
  color: #101828;
  font-size: 15px;
  font-weight: 900;
}

#page-digital-human .dh-voice-main em {
  color: #667085;
  font-size: 11px;
}

#page-digital-human .dh-voice-wave-mini {
  display: inline-flex;
  align-items: end;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}

#page-digital-human .dh-voice-wave-mini i {
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2563eb, #06b6d4);
}

#page-digital-human .dh-voice-wave-mini i:nth-child(1) { height: 6px; }
#page-digital-human .dh-voice-wave-mini i:nth-child(2) { height: 12px; }
#page-digital-human .dh-voice-wave-mini i:nth-child(3) { height: 9px; }
#page-digital-human .dh-voice-wave-mini i:nth-child(4) { height: 15px; }
#page-digital-human .dh-voice-wave-mini i:nth-child(5) { height: 7px; }

#page-digital-human .dh-picker-voice-preview-card {
  min-height: 300px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(125, 211, 252, .32), transparent 36%),
    linear-gradient(145deg, #101828, #1d4ed8 62%, #0ea5e9);
  color: #fff;
  box-shadow: 0 24px 50px rgba(37, 99, 235, .22);
}

#page-digital-human .dh-broll-modal {
  width: min(1180px, calc(100vw - 48px));
}

#page-digital-human .dh-broll-layout {
  grid-template-columns: minmax(420px, .82fr) minmax(0, 1fr);
  gap: 16px;
}

#page-digital-human .dh-broll-source,
#page-digital-human .dh-broll-plan-side {
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, .07);
}

#page-digital-human .dh-broll-mode-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#page-digital-human .dh-broll-mode-cards button {
  min-height: 110px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

#page-digital-human .dh-broll-mode-cards button.active {
  border-color: rgba(37, 99, 235, .35);
  box-shadow: 0 14px 32px rgba(37, 99, 235, .16);
}

#page-digital-human .dh-broll-local-actions {
  display: flex;
  gap: 8px;
}

#page-digital-human .dh-broll-local-actions .dh-mini-btn,
#page-digital-human .dh-music-upload-inline {
  border-radius: 12px;
}

#page-digital-human .dh-broll-material-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 214px;
}

#page-digital-human .broll-material-chip {
  border-radius: 14px;
  background: #fff;
}

#page-digital-human .dh-broll-plan-preview {
  min-height: 100%;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
}

#page-digital-human .broll-plan-row {
  grid-template-columns: 28px minmax(0, 1fr) minmax(128px, .8fr) 72px 72px 44px;
  gap: 8px;
  min-height: 58px;
  padding: 8px;
  border-radius: 14px;
  background: #f8fafc;
}

#page-digital-human .broll-plan-row + .broll-plan-row {
  margin-top: 8px;
}

#page-digital-human .broll-plan-row select,
#page-digital-human .broll-plan-row input {
  height: 34px;
  border-radius: 10px;
}

#page-digital-human .dh-cover-live-preview {
  background: #eef2f7;
}

#page-digital-human .dh-cover-canvas {
  width: min(100%, 378px);
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
}

#page-digital-human .dh-cover-canvas img {
  display: block;
  width: 100%;
  height: auto;
}

#page-digital-human #dhCoverPresetGrid.dh-cover-style-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#page-digital-human .dh-cover-style-grid button {
  min-height: 230px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}

#page-digital-human .dh-cover-style-grid img {
  height: 160px;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 1500px) {
  #page-digital-human .dhx-pick-card {
    min-height: 128px;
    grid-template-columns: 96px minmax(0, 1fr);
  }
  #page-digital-human .dhx-pick-icon {
    width: 96px;
    height: 96px;
  }
  #page-digital-human .dhx-pick-copy b {
    font-size: 18px;
  }
  #page-digital-human .dhx-edit-heading em {
    font-size: 16px;
  }
  #page-digital-human .dhx-phone {
    width: min(100%, 288px);
  }
}

/* Commercial delivery pass: compact SaaS cockpit, clearer action hierarchy. */
body:has(#page-digital-human.active) .content {
  overflow: hidden !important;
}

#page-digital-human .dhx-board {
  height: min(898px, calc(100vh - 108px));
  min-height: 760px;
  padding: 12px;
  border-radius: 24px;
}

#page-digital-human .dhx-layout {
  grid-template-columns: 300px minmax(500px, 1fr) 292px;
  grid-template-rows: 356px minmax(330px, 1fr);
  gap: 10px;
}

#page-digital-human .dhx-panel {
  padding: 12px;
  border-radius: 18px;
}

#page-digital-human .dhx-panel-head {
  height: 30px;
  margin-bottom: 8px;
}

#page-digital-human .dhx-panel-head > b {
  font-size: 17px;
  letter-spacing: 0;
}

#page-digital-human .dhx-copy-pane {
  gap: 9px;
}

#page-digital-human .dhx-script textarea {
  min-height: 0;
  height: 100%;
}

#page-digital-human .dhx-production-panel {
  overflow: hidden;
}

#page-digital-human .dhx-production-body {
  gap: 10px;
}

#page-digital-human .dhx-production-selects {
  min-height: 196px;
  gap: 14px;
}

#page-digital-human .dhx-pick-card {
  min-height: 196px;
  padding: 14px;
  grid-template-columns: 102px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 38px;
  gap: 12px;
  border-radius: 22px;
  border-color: rgba(37, 99, 235, .18);
  background:
    radial-gradient(circle at 20% 10%, rgba(125, 211, 252, .28), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}

#page-digital-human .dhx-pick-card.is-selected {
  border-color: rgba(37, 99, 235, .42);
  box-shadow: 0 18px 40px rgba(37, 99, 235, .13);
}

#page-digital-human .dhx-pick-icon {
  width: 102px;
  height: 132px;
  border-radius: 20px;
  align-self: center;
  background:
    radial-gradient(circle at 50% 6%, rgba(255,255,255,.92), transparent 28%),
    linear-gradient(180deg, #edf6ff 0%, #dceafe 100%);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08);
}

#page-digital-human .dhx-pick-persona .dhx-pick-icon img,
#page-digital-human .dhx-pick-persona .dhx-pick-icon video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.02);
}

#page-digital-human .dhx-pick-voice .dhx-pick-icon,
#page-digital-human .dhx-pick-audio .dhx-pick-icon {
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.80), transparent 34%),
    linear-gradient(145deg, #dbeafe, #e0f2fe 55%, #f8fafc);
}

#page-digital-human .dhx-pick-card em {
  font-size: 15px;
  color: #172033;
}

#page-digital-human .dhx-pick-card em i {
  width: 26px;
  height: 26px;
}

#page-digital-human .dhx-pick-card b {
  font-size: 23px;
  line-height: 1.1;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#page-digital-human .dhx-pick-card small {
  display: -webkit-box;
  line-height: 1.35;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#page-digital-human .dhx-pick-card > i {
  height: 38px;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
}

#page-digital-human .dhx-status-strip {
  min-height: 36px;
}

#page-digital-human .dhx-run-row {
  gap: 9px;
}

#page-digital-human .dhx-advanced-grid {
  left: auto;
  right: 0;
  width: min(430px, calc(100vw - 360px));
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#page-digital-human .dhx-edit-grid {
  gap: 12px;
}

#page-digital-human .dhx-edit-tile {
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}

#page-digital-human .dhx-edit-tile img {
  object-position: center;
  filter: saturate(1.04) contrast(1.04);
}

#page-digital-human .dhx-edit-overlay {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, .08) 0%, rgba(2, 6, 23, .20) 38%, rgba(2, 6, 23, .88) 100%),
    linear-gradient(135deg, rgba(37, 99, 235, .28), transparent 48%);
}

#page-digital-human .dhx-edit-heading {
  top: 12px;
  left: 12px;
  right: 64px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(2, 6, 23, .42);
  backdrop-filter: blur(18px);
}

#page-digital-human .dhx-edit-icon {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .22);
}

#page-digital-human .dhx-edit-heading em {
  font-size: 20px;
  letter-spacing: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

#page-digital-human .dhx-edit-current {
  bottom: 13px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(2, 6, 23, .48);
  backdrop-filter: blur(18px);
}

#page-digital-human .dhx-edit-current b {
  font-size: 16px;
}

#page-digital-human .dhx-edit-current small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-digital-human .dhx-edit-summary span {
  min-height: 27px;
}

#page-digital-human .dhx-output-panel {
  gap: 8px;
}

#page-digital-human .dhx-phone {
  width: min(100%, 272px);
  max-height: 586px;
  margin-bottom: 6px;
}

#page-digital-human .dhx-phone-inner {
  padding: 9px;
  border-radius: 48px;
  background:
    linear-gradient(145deg, #f8fafc 0%, #cbd5e1 3%, #657185 7%, #121722 14%, #05070c 52%, #374151 91%, #f9fafb 100%);
}

#page-digital-human .dhx-phone-screen {
  border-radius: 39px;
}

#page-digital-human .dhx-audio-mount {
  margin-top: 0;
  min-height: 98px;
  max-height: 104px;
  flex: 0 0 98px;
  border-radius: 22px;
  position: relative;
}

#page-digital-human .dhx-audio-mount::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 48%),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.20), transparent 30%);
  mix-blend-mode: screen;
}

#page-digital-human .dhx-audio-state,
#page-digital-human .dhx-audio-player {
  min-height: 0;
  height: 100%;
}

#page-digital-human .dhx-wave {
  justify-content: space-between;
  width: 100%;
  height: 26px;
}

#page-digital-human .dhx-wave i {
  width: 7px;
}

#page-digital-human .dhx-output-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

#page-digital-human .dhx-output-actions .dhx-btn {
  min-height: 38px;
  padding: 0 10px;
}

#page-digital-human .dhx-output-actions .dhx-primary {
  box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
}

#page-digital-human .dh-persona-modal,
#page-digital-human .dh-voice-modal {
  width: min(1160px, calc(100vw - 48px));
}

#page-digital-human .dh-picker-head {
  min-height: 58px;
  gap: 12px;
}

#page-digital-human .dh-picker-head .dh-picker-create-btn {
  margin-left: auto;
  color: #fff;
  background: linear-gradient(135deg, #172033, #2563eb);
  border: 0;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .18);
}

#page-digital-human .dh-persona-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 270px !important;
  gap: 12px !important;
}

#page-digital-human .dh-persona-option {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .09);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}

#page-digital-human .dh-persona-option-media,
#page-digital-human .dh-persona-option-media.persona-portrait,
#page-digital-human .dh-persona-option-media.is-video-preview {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 166px;
  border-radius: 16px;
  margin: 10px 10px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.85), transparent 30%),
    linear-gradient(180deg, #eef6ff 0%, #dbeafe 52%, #f8fafc 100%);
}

#page-digital-human .dh-persona-option-media img,
#page-digital-human .dh-persona-option-media video {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

#page-digital-human .dh-persona-option-body {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 8px 12px 2px;
  background: #fff;
}

#page-digital-human .dh-persona-option-body b {
  color: #101828;
  font-size: 15px;
  font-weight: 920;
}

#page-digital-human .dh-persona-option-body em {
  color: #667085;
  font-size: 11px;
  line-height: 1.25;
}

#page-digital-human .dh-persona-select {
  flex: 0 0 32px;
  margin: 6px 10px 10px;
  border-radius: 999px;
  color: #172033;
  background: #eef2f7;
  font-weight: 860;
}

#page-digital-human .dh-persona-option.active .dh-persona-select {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
}

#page-digital-human .dh-picker-fav,
#page-digital-human .dh-voice-fav {
  width: 36px;
  height: 36px;
  font-size: 17px;
  cursor: pointer;
}

#page-digital-human .dh-picker-preview-media {
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.88), transparent 28%),
    linear-gradient(180deg, #edf6ff, #dbeafe);
  overflow: hidden;
}

#page-digital-human .dh-picker-preview-media img,
#page-digital-human .dh-picker-preview-media video,
#page-digital-human .dh-picker-preview-persona,
#page-digital-human .dh-picker-preview-persona-video {
  object-fit: cover !important;
  object-position: center 18% !important;
  background: transparent !important;
}

#page-digital-human .dh-voice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#page-digital-human .dh-voice-option {
  min-height: 116px;
  padding: 12px 12px 12px 56px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0%, rgba(125, 211, 252, .20), transparent 36%),
    #fff;
}

#page-digital-human .dh-voice-fav {
  left: 12px;
  top: 12px;
}

#page-digital-human .dh-voice-play {
  width: 42px;
  height: 42px;
}

#page-digital-human .dh-voice-select {
  min-width: 76px;
  border-radius: 999px;
  font-weight: 860;
}

#page-digital-human .dh-voice-option.active .dh-voice-select {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
}

#page-digital-human .dh-music-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#page-digital-human .dh-broll-modal {
  width: min(1180px, calc(100vw - 40px));
}

#page-digital-human .dh-broll-layout {
  min-height: 558px;
  grid-template-columns: minmax(430px, .86fr) minmax(0, 1fr) !important;
}

#page-digital-human .dh-broll-mode-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px;
}

#page-digital-human .dh-broll-mode-cards button {
  min-height: 104px;
  padding: 10px;
  border-radius: 18px;
}

#page-digital-human .dh-broll-mode-demo {
  height: 44px;
}

#page-digital-human .dh-broll-plan-tools-primary {
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
}

#page-digital-human .dh-broll-material-grid {
  max-height: 206px !important;
}

#page-digital-human .dh-broll-plan-preview {
  overflow: auto;
}

#page-digital-human .broll-plan-row {
  grid-template-columns: 28px minmax(0, 1fr) minmax(104px, .72fr) 62px 62px 38px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-modal-layout {
  grid-template-columns: minmax(420px, .9fr) minmax(360px, .72fr);
  min-height: 568px;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls {
  min-height: 0;
  overflow: auto;
}

#page-digital-human .dh-featured-style-grid-premium {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#page-digital-human .dh-featured-style-grid-premium button {
  border-radius: 18px;
  min-height: 166px;
}

#page-digital-human .dh-style-controls-visible {
  margin-top: 12px;
  max-height: none;
  background: #f8fafc;
}

#page-digital-human .dh-style-controls-visible .dh-setting-block {
  background: #fff;
}

#page-digital-human .dh-style-preview-side .dh-live-style-preview {
  min-height: 520px;
  border-radius: 22px;
}

#page-digital-human #dhCoverModal .dh-style-modal-layout {
  grid-template-columns: minmax(420px, .88fr) minmax(360px, .72fr);
}

#page-digital-human .dh-cover-style-grid button {
  min-height: 246px;
  border-radius: 20px;
}

#page-digital-human .dh-cover-style-grid img {
  height: 178px;
  object-fit: cover;
}

#page-digital-human .dh-cover-canvas {
  background: #f8fafc;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
}

@media (max-width: 1320px) {
  #page-digital-human .dhx-layout {
    grid-template-columns: minmax(270px, .74fr) minmax(432px, 1.08fr) minmax(266px, .68fr);
  }

  #page-digital-human .dhx-pick-card {
    grid-template-columns: 94px minmax(0, 1fr);
  }

  #page-digital-human .dhx-pick-icon {
    width: 94px;
    height: 124px;
  }

  #page-digital-human .dhx-pick-card b {
    font-size: 21px;
  }

  #page-digital-human .dhx-edit-heading em {
    font-size: 18px;
  }

  #page-digital-human .dhx-phone {
    width: min(100%, 272px);
  }
}

/* v21 final cockpit corrections: preserve readability after legacy overrides. */
#page-digital-human .dhx-pick-card {
  grid-template-columns: 96px minmax(0, 1fr) !important;
  min-height: 196px !important;
}

#page-digital-human .dhx-pick-icon {
  width: 96px !important;
  height: 132px !important;
}

#page-digital-human .dhx-pick-copy b {
  font-size: 20px !important;
  line-height: 1.12 !important;
}

#page-digital-human .dhx-pick-copy small {
  display: -webkit-box !important;
  line-height: 1.32 !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-pick-card > i {
  height: 38px !important;
}

#page-digital-human .dhx-edit-heading {
  right: 52px !important;
}

#page-digital-human .dhx-edit-heading em {
  font-size: 18px !important;
  line-height: 1 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#page-digital-human .dhx-edit-current {
  padding: 10px 12px !important;
  background: rgba(2, 6, 23, .52) !important;
}

#page-digital-human .dhx-edit-current b {
  font-size: 16px !important;
}

#page-digital-human .dhx-edit-tile > i {
  top: 11px !important;
  right: 11px !important;
  padding: 6px 8px !important;
  color: #fff !important;
  background: rgba(2, 6, 23, .40) !important;
}

#page-digital-human .dhx-edit-tile.is-configured > i {
  color: #06384a !important;
  background: rgba(125, 211, 252, .96) !important;
}

#page-digital-human .dh-persona-grid {
  grid-auto-rows: 270px !important;
}

#page-digital-human .dh-persona-option {
  height: 270px !important;
  min-height: 270px !important;
}

#page-digital-human .dh-persona-option-media,
#page-digital-human .dh-persona-option-media.persona-portrait,
#page-digital-human .dh-persona-option-media.is-video-preview {
  height: 166px !important;
  min-height: 166px !important;
}

#page-digital-human .dh-persona-option-media img,
#page-digital-human .dh-persona-option-media video {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

#page-digital-human .dh-persona-option-body {
  height: 52px !important;
  min-height: 52px !important;
}

#page-digital-human .dh-persona-select {
  height: 34px !important;
  margin-top: 6px !important;
}

/* v22 commercial SaaS consolidation: one coherent cockpit, no stacked legacy card rules. */
#page-digital-human {
  --dhx-bg: #f6f8fc;
  --dhx-panel: rgba(255, 255, 255, .97);
  --dhx-ink: #0b1220;
  --dhx-muted: #667085;
  --dhx-line: rgba(15, 23, 42, .08);
  --dhx-blue: #2458f3;
  --dhx-cyan: #04b8d9;
  --dhx-green: #10b981;
  --dhx-shadow: 0 18px 52px rgba(15, 23, 42, .10);
}

body:has(#page-digital-human.active) .content {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

#page-digital-human .dhx-board {
  height: calc(100vh - 112px);
  min-height: 600px;
  padding: 10px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(36, 88, 243, .10), transparent 28%),
    linear-gradient(225deg, rgba(4, 184, 217, .10), transparent 30%),
    #f7f9fd;
}

#page-digital-human .dhx-top {
  height: 36px;
  margin-bottom: 8px;
}

#page-digital-human .dhx-title > span {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

#page-digital-human .dhx-title h1 {
  font-size: 22px;
}

#page-digital-human .dhx-layout {
  height: calc(100% - 44px);
  grid-template-columns: minmax(286px, .8fr) minmax(520px, 1.15fr) minmax(310px, .82fr);
  grid-template-rows: minmax(228px, .39fr) minmax(330px, .61fr);
  gap: 10px;
  overflow: visible;
}

#page-digital-human .dhx-panel {
  padding: 11px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)),
    #fff;
  box-shadow: 0 14px 42px rgba(15, 23, 42, .08);
}

#page-digital-human .dhx-panel-head {
  height: 30px;
  margin-bottom: 8px;
}

#page-digital-human .dhx-panel-head > b {
  color: #0b1220;
  font-size: 17px;
  font-weight: 920;
}

#page-digital-human .dhx-production-panel {
  overflow: visible;
}

#page-digital-human .dhx-production-body {
  gap: 8px;
}

#page-digital-human .dhx-production-selects {
  min-height: 136px;
  gap: 10px;
}

#page-digital-human .dhx-pick-card {
  position: relative;
  grid-template-columns: minmax(112px, 42%) minmax(0, 1fr) !important;
  grid-template-rows: 1fr 34px !important;
  min-height: 178px !important;
  height: 100%;
  padding: 10px !important;
  gap: 10px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(36, 88, 243, .12) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(4, 184, 217, .16), transparent 38%),
    linear-gradient(180deg, #fff, #f8fbff) !important;
  box-shadow: 0 16px 34px rgba(36, 88, 243, .08) !important;
  overflow: hidden;
}

#page-digital-human .dhx-pick-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.70);
  pointer-events: none;
}

#page-digital-human .dhx-pick-card.is-selected {
  border-color: rgba(36, 88, 243, .28) !important;
  background:
    radial-gradient(circle at 8% 6%, rgba(4, 184, 217, .20), transparent 36%),
    linear-gradient(180deg, #fff, #eef5ff) !important;
}

#page-digital-human .dhx-pick-media,
#page-digital-human .dhx-pick-icon {
  width: 100% !important;
  height: 124px !important;
  min-height: 124px !important;
  align-self: center;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(180deg, #e8f2ff 0%, #d9e8ff 58%, #f7fbff 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.82);
}

#page-digital-human .dhx-pick-media img,
#page-digital-human .dhx-pick-media video,
#page-digital-human .dhx-pick-icon img,
#page-digital-human .dhx-pick-icon video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
}

#page-digital-human .dhx-pick-voice .dhx-pick-media,
#page-digital-human .dhx-pick-audio .dhx-pick-media {
  background:
    radial-gradient(circle at 50% 18%, rgba(125, 211, 252, .35), transparent 42%),
    linear-gradient(145deg, #0b1220, #173b88 62%, #06b6d4) !important;
}

#page-digital-human .dhx-voice-mark {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 8px;
}

#page-digital-human .dhx-voice-orb {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 18px 34px rgba(2,6,23,.20);
}

#page-digital-human .dhx-voice-orb svg {
  width: 26px;
  height: 26px;
}

#page-digital-human .dhx-voice-bars {
  height: 26px;
  display: inline-flex;
  align-items: end;
  gap: 5px;
}

#page-digital-human .dhx-voice-bars i {
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #7dd3fc);
  box-shadow: 0 0 18px rgba(125,211,252,.48);
}

#page-digital-human .dhx-voice-bars i:nth-child(1) { height: 11px; }
#page-digital-human .dhx-voice-bars i:nth-child(2) { height: 20px; }
#page-digital-human .dhx-voice-bars i:nth-child(3) { height: 26px; }
#page-digital-human .dhx-voice-bars i:nth-child(4) { height: 17px; }
#page-digital-human .dhx-voice-bars i:nth-child(5) { height: 22px; }

#page-digital-human .dhx-pick-copy {
  align-content: center;
  gap: 8px;
  padding-right: 2px;
}

#page-digital-human .dhx-pick-card em {
  color: #2458f3 !important;
  font-size: 15px !important;
  font-weight: 920 !important;
}

#page-digital-human .dhx-pick-card em strong {
  font-weight: 920;
}

#page-digital-human .dhx-pick-card em i {
  width: 26px !important;
  height: 26px !important;
  background: linear-gradient(135deg, #0b1220, #2458f3) !important;
}

#page-digital-human .dhx-pick-copy b,
#page-digital-human .dhx-pick-card b {
  color: #0b1220;
  font-size: 20px !important;
  line-height: 1.14 !important;
  font-weight: 940 !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-pick-copy small,
#page-digital-human .dhx-pick-card small {
  color: #667085 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 2 !important;
}

#page-digital-human .dhx-pick-card > i {
  grid-column: 1 / -1;
  height: 34px !important;
  color: #0b1220 !important;
  background: #eef4ff !important;
  font-size: 13px !important;
  font-weight: 880 !important;
}

#page-digital-human .dhx-pick-card.is-selected > i {
  color: #075985 !important;
  background: linear-gradient(90deg, rgba(125,211,252,.32), rgba(219,234,254,.96)) !important;
}

#page-digital-human .dhx-production-foot {
  gap: 6px;
}

#page-digital-human .dhx-run-row {
  gap: 8px;
}

#page-digital-human .dhx-run-row .dhx-btn,
#page-digital-human .dhx-run-row .dhx-advanced summary {
  min-height: 38px;
}

#page-digital-human .dhx-advanced {
  flex-basis: 78px;
  border-radius: 13px;
}

#page-digital-human .dhx-advanced-grid {
  width: min(420px, calc(100vw - 370px));
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#page-digital-human .dhx-edit-panel {
  overflow: hidden;
}

#page-digital-human .dhx-edit-grid {
  gap: 10px;
}

#page-digital-human .dhx-edit-tile {
  border-radius: 22px !important;
  background: #0b1220 !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .16) !important;
}

#page-digital-human .dhx-edit-tile img {
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

#page-digital-human .dhx-edit-overlay {
  background:
    linear-gradient(180deg, rgba(2,6,23,.10), rgba(2,6,23,.16) 32%, rgba(2,6,23,.78)),
    linear-gradient(135deg, rgba(36,88,243,.34), transparent 52%) !important;
}

#page-digital-human .dhx-edit-heading {
  top: 13px !important;
  left: 13px !important;
  right: 68px !important;
  align-items: center;
}

#page-digital-human .dhx-edit-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.20) !important;
  border: 1px solid rgba(255,255,255,.18);
}

#page-digital-human .dhx-edit-heading em {
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1.05 !important;
  font-weight: 940 !important;
  text-shadow: 0 2px 16px rgba(2,6,23,.54);
}

#page-digital-human .dhx-edit-current {
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  padding: 9px 11px !important;
  border-radius: 16px;
  background: rgba(2, 6, 23, .58) !important;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
}

#page-digital-human .dhx-edit-current b {
  color: #fff;
  font-size: 15px !important;
  font-weight: 920 !important;
}

#page-digital-human .dhx-edit-current small {
  color: rgba(255,255,255,.78) !important;
  font-size: 12px !important;
}

#page-digital-human .dhx-edit-tile > i {
  top: 12px !important;
  right: 12px !important;
  height: 28px;
  display: inline-flex;
  align-items: center;
  color: #fff !important;
  background: rgba(2, 6, 23, .42) !important;
  border: 1px solid rgba(255,255,255,.14);
}

#page-digital-human .dhx-edit-tile.is-configured > i {
  color: #06384a !important;
  background: rgba(125, 211, 252, .96) !important;
}

#page-digital-human .dhx-edit-foot {
  margin-top: 7px;
  grid-template-columns: minmax(0, 1fr) 152px;
}

#page-digital-human .dhx-edit-summary {
  gap: 5px;
}

#page-digital-human .dhx-edit-summary span {
  min-height: 25px;
  padding: 0 8px;
  font-size: 11px;
}

#page-digital-human .dhx-cut-btn {
  min-width: 0;
  min-height: 40px;
}

#page-digital-human .dhx-output-panel {
  overflow: hidden;
  gap: 6px;
}

#page-digital-human .dhx-phone {
  width: min(100%, 206px) !important;
  max-height: 362px;
  margin-bottom: 4px;
  filter: drop-shadow(0 26px 44px rgba(15, 23, 42, .30));
}

#page-digital-human .dhx-phone-inner {
  padding: 10px;
  border-radius: 48px;
  background:
    linear-gradient(145deg, #fbfdff 0%, #cbd5e1 3%, #64748b 7%, #111827 14%, #030712 56%, #111827 82%, #94a3b8 97%, #fff 100%);
}

#page-digital-human .dhx-phone-screen {
  border-radius: 38px;
}

#page-digital-human .dhx-output-persona img {
  object-fit: contain !important;
  object-position: center bottom !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 32%),
    #05070b;
}

#page-digital-human .dhx-audio-mount {
  min-height: 68px;
  max-height: 72px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 14% 10%, rgba(125,211,252,.26), transparent 34%),
    radial-gradient(circle at 84% 24%, rgba(36,88,243,.34), transparent 35%),
    linear-gradient(135deg, #0b1220, #173b88 58%, #06b6d4);
  box-shadow: 0 18px 38px rgba(36, 88, 243, .22);
}

#page-digital-human .dhx-audio-state,
#page-digital-human .dhx-audio-player {
  min-height: 68px;
  padding: 10px;
}

#page-digital-human .dhx-audio-player {
  grid-template-columns: 38px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 10px;
}

#page-digital-human .dhx-audio-toggle {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.20);
}

#page-digital-human .dhx-audio-toggle.is-playing {
  background: rgba(125,211,252,.32);
}

#page-digital-human .dhx-audio-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#page-digital-human .dhx-audio-copy b {
  color: #fff;
  font-size: 13px;
  font-weight: 920;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-digital-human .dhx-audio-copy span {
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 820;
}

#page-digital-human .dhx-wave-live {
  justify-content: end;
  height: 34px;
}

#page-digital-human .dhx-output-actions {
  margin-top: 2px;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px !important;
}

#page-digital-human .dhx-output-actions .dhx-btn {
  min-height: 36px;
  padding: 0 7px;
  font-size: 12px;
}

#page-digital-human .dhx-output-panel .dhx-panel-head {
  margin-bottom: 6px;
}

#page-digital-human .dhx-output-panel .dhx-phone {
  flex: 0 1 auto;
}

#page-digital-human .dhx-output-panel .dhx-audio-mount {
  flex: 0 0 70px;
}

#page-digital-human .dh-persona-modal,
#page-digital-human .dh-voice-modal {
  width: min(1180px, calc(100vw - 44px)) !important;
}

#page-digital-human .dh-picker-head .dh-picker-create-btn {
  border-radius: 999px;
  min-height: 38px;
  padding: 0 14px;
}

#page-digital-human .dh-picker-split {
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 16px;
}

#page-digital-human .dh-persona-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 224px !important;
  gap: 12px !important;
}

#page-digital-human .dh-persona-option {
  height: 224px !important;
  min-height: 224px !important;
  border-radius: 18px !important;
  overflow: hidden;
}

#page-digital-human .dh-persona-option-media,
#page-digital-human .dh-persona-option-media.persona-portrait,
#page-digital-human .dh-persona-option-media.is-video-preview {
  height: 124px !important;
  min-height: 124px !important;
  flex: 0 0 124px !important;
  margin: 9px 9px 0;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.94), transparent 26%),
    linear-gradient(180deg, #eaf4ff, #f8fbff 88%) !important;
}

#page-digital-human .dh-persona-option-media img,
#page-digital-human .dh-persona-option-media video {
  object-fit: contain !important;
  object-position: center bottom !important;
}

#page-digital-human .dh-persona-option-body {
  height: 44px !important;
  min-height: 44px !important;
  padding: 7px 10px 0 !important;
}

#page-digital-human .dh-persona-option-body b {
  font-size: 14px !important;
}

#page-digital-human .dh-persona-option-body em {
  font-size: 11px !important;
  line-height: 1.2;
}

#page-digital-human .dh-persona-select {
  height: 30px !important;
  margin: 5px 9px 9px !important;
}

#page-digital-human .dh-picker-fav,
#page-digital-human .dh-voice-fav {
  z-index: 5;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 18px rgba(15,23,42,.12);
}

#page-digital-human .dh-picker-preview-media {
  min-height: 408px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.90), transparent 28%),
    linear-gradient(180deg, #eaf4ff, #f8fbff);
}

#page-digital-human .dh-picker-preview-media img,
#page-digital-human .dh-picker-preview-media video,
#page-digital-human .dh-picker-preview-persona,
#page-digital-human .dh-picker-preview-persona-video {
  object-fit: contain !important;
  object-position: center bottom !important;
}

#page-digital-human .dh-voice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#page-digital-human .dh-voice-option {
  min-height: 104px !important;
  border-radius: 18px !important;
}

#page-digital-human .dh-music-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#page-digital-human .dh-broll-modal {
  width: min(1160px, calc(100vw - 40px)) !important;
}

#page-digital-human .dh-broll-layout {
  min-height: 520px !important;
  grid-template-columns: minmax(420px, .9fr) minmax(0, 1fr) !important;
}

#page-digital-human .dh-broll-mode-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#page-digital-human .dh-broll-mode-cards button {
  border-radius: 18px !important;
  min-height: 112px !important;
  background: #fff;
}

#page-digital-human .dh-broll-plan-preview {
  border-radius: 20px;
  background: #f8fafc;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-modal-layout {
  grid-template-columns: minmax(440px, .92fr) minmax(360px, .72fr) !important;
  min-height: 540px !important;
}

#page-digital-human .dh-featured-style-grid-premium {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px;
}

#page-digital-human .dh-featured-style-grid-premium button {
  min-height: 172px !important;
  border-radius: 20px !important;
  background: #fff;
}

#page-digital-human .dh-style-card-demo {
  border-radius: 16px;
}

#page-digital-human .dh-style-controls-visible {
  border-radius: 20px;
}

#page-digital-human #dhCoverModal .dh-style-modal-layout {
  grid-template-columns: minmax(420px, .9fr) minmax(360px, .72fr) !important;
}

#page-digital-human .dh-cover-style-grid button {
  min-height: 228px !important;
  border-radius: 20px !important;
  background: #fff;
}

#page-digital-human .dh-cover-style-grid img {
  height: 160px !important;
  object-fit: cover !important;
}

@media (max-width: 1320px) {
  #page-digital-human .dhx-board {
    min-height: 592px;
  }

  #page-digital-human .dhx-layout {
    grid-template-columns: minmax(270px, .78fr) minmax(420px, 1.12fr) minmax(270px, .72fr);
    grid-template-rows: minmax(216px, .38fr) minmax(316px, .62fr);
  }

  #page-digital-human .dhx-pick-card {
    grid-template-columns: minmax(96px, 39%) minmax(0, 1fr) !important;
    min-height: 164px !important;
  }

  #page-digital-human .dhx-pick-media,
  #page-digital-human .dhx-pick-icon {
    height: 112px !important;
    min-height: 112px !important;
  }

  #page-digital-human .dhx-pick-copy b,
  #page-digital-human .dhx-pick-card b {
    font-size: 18px !important;
  }

  #page-digital-human .dhx-edit-heading em {
    font-size: 18px !important;
  }

  #page-digital-human .dhx-phone {
    width: min(100%, 204px) !important;
    max-height: 358px;
  }

  #page-digital-human .dhx-audio-mount {
    min-height: 72px;
    max-height: 78px;
  }
}

/* v27 commercial delivery lock: stable cockpit geometry and modal actions. */
#page-digital-human .dhx-board {
  height: calc(100vh - 112px) !important;
  min-height: 604px !important;
  padding: 12px !important;
}

#page-digital-human .dhx-layout {
  height: calc(100% - 44px) !important;
  grid-template-columns: minmax(270px, .78fr) minmax(410px, 1.16fr) minmax(248px, .72fr) !important;
  grid-template-rows: 270px minmax(0, 1fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-production-panel {
  padding: 10px !important;
  overflow: visible !important;
  z-index: 12 !important;
}

#page-digital-human .dhx-production-panel .dhx-panel-head {
  height: 28px !important;
  margin-bottom: 6px !important;
}

#page-digital-human .dhx-production-body {
  flex: 1 1 auto !important;
  min-height: 140px !important;
  overflow: visible !important;
}

#page-digital-human .dhx-production-selects {
  min-height: 140px !important;
  gap: 10px !important;
}

#page-digital-human .dhx-pick-card {
  min-height: 140px !important;
  height: 140px !important;
  grid-template-columns: 45% minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) 28px !important;
  padding: 10px !important;
  gap: 8px !important;
  border-radius: 20px !important;
}

#page-digital-human .dhx-pick-media,
#page-digital-human .dhx-pick-icon {
  width: 100% !important;
  height: 92px !important;
  min-height: 92px !important;
  border-radius: 16px !important;
}

#page-digital-human .dhx-pick-persona .dhx-pick-media img,
#page-digital-human .dhx-pick-persona .dhx-pick-media video,
#page-digital-human .dhx-pick-persona .dhx-pick-icon img,
#page-digital-human .dhx-pick-persona .dhx-pick-icon video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
}

#page-digital-human .dhx-pick-copy {
  gap: 7px !important;
  align-content: center !important;
}

#page-digital-human .dhx-pick-card em {
  font-size: 15px !important;
  line-height: 1.1 !important;
}

#page-digital-human .dhx-pick-copy b,
#page-digital-human .dhx-pick-card b {
  font-size: 18px !important;
  line-height: 1.12 !important;
  -webkit-line-clamp: 2 !important;
}

#page-digital-human .dhx-pick-copy small,
#page-digital-human .dhx-pick-card small {
  font-size: 11px !important;
  line-height: 1.28 !important;
  -webkit-line-clamp: 2 !important;
}

#page-digital-human .dhx-pick-card > i {
  height: 28px !important;
  font-size: 12px !important;
}

#page-digital-human .dhx-production-foot {
  flex: 0 0 auto !important;
  gap: 5px !important;
}

#page-digital-human .dhx-run-row {
  gap: 7px !important;
}

#page-digital-human .dhx-run-row .dhx-btn,
#page-digital-human .dhx-run-row .dhx-advanced summary {
  min-height: 34px !important;
  font-size: 12px !important;
}

#page-digital-human .dhx-advanced {
  flex: 0 0 62px !important;
}

#page-digital-human .dhx-advanced-grid {
  z-index: 120 !important;
  width: min(390px, calc(100vw - 382px)) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#page-digital-human .dhx-status-strip {
  min-height: 24px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
}

#page-digital-human .dhx-edit-panel {
  overflow: hidden !important;
}

#page-digital-human .dhx-edit-grid {
  gap: 10px !important;
}

#page-digital-human .dhx-edit-tile {
  min-height: 0 !important;
  border-radius: 20px !important;
}

#page-digital-human .dhx-edit-heading {
  top: 10px !important;
  left: 10px !important;
  right: 56px !important;
  padding: 7px 8px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 12px 24px rgba(2, 6, 23, .14) !important;
}

#page-digital-human .dhx-edit-heading em {
  color: #07111f !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

#page-digital-human .dhx-edit-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #14213d, #2458f3) !important;
}

#page-digital-human .dhx-edit-current {
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  padding: 8px 10px !important;
}

#page-digital-human .dhx-edit-current b {
  font-size: 14px !important;
}

#page-digital-human .dhx-edit-current small {
  font-size: 11px !important;
}

#page-digital-human .dhx-edit-foot {
  margin-top: 7px !important;
  grid-template-columns: minmax(0, 1fr) 144px !important;
}

#page-digital-human .dhx-edit-summary span {
  min-height: 24px !important;
  padding: 0 7px !important;
  font-size: 10px !important;
}

#page-digital-human .dhx-cut-btn {
  min-height: 38px !important;
  font-size: 12px !important;
}

#page-digital-human .dhx-output-panel {
  gap: 6px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-phone {
  width: min(100%, 196px) !important;
  max-height: 348px !important;
  margin: 0 auto 4px !important;
  aspect-ratio: 9 / 16 !important;
}

#page-digital-human .dhx-phone-inner {
  padding: 9px !important;
  border-radius: 48px !important;
}

#page-digital-human .dhx-phone-screen {
  border-radius: 39px !important;
}

#page-digital-human .dhx-audio-mount {
  flex: 0 0 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
}

#page-digital-human .dhx-audio-state,
#page-digital-human .dhx-audio-player {
  min-height: 72px !important;
  height: 72px !important;
}

#page-digital-human .dhx-audio-player {
  grid-template-columns: 36px minmax(0, 1fr) 82px !important;
  gap: 8px !important;
}

#page-digital-human .dhx-output-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#page-digital-human .dhx-output-actions .dhx-btn {
  min-height: 36px !important;
  padding: 0 4px !important;
  font-size: 11px !important;
}

#page-digital-human .dh-modal-backdrop.active {
  z-index: 12000 !important;
  padding: 48px 22px 22px !important;
}

#page-digital-human .dh-picker-modal {
  position: relative !important;
  max-height: calc(100dvh - 70px) !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#page-digital-human .dh-style-modal,
#page-digital-human .dh-auto-modal,
#page-digital-human .dh-broll-modal,
#page-digital-human .dh-audio-source-modal {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

#page-digital-human .dh-copy-tool-modal {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

#page-digital-human .dh-modal-actions {
  position: relative !important;
  z-index: 30 !important;
  margin: 0 -2px !important;
  padding: 12px 2px 0 !important;
  background: #fff !important;
  isolation: isolate !important;
}

#page-digital-human .dh-modal-actions .btn {
  position: relative !important;
  z-index: 31 !important;
  min-height: 42px !important;
  pointer-events: auto !important;
}

#page-digital-human .dh-picker-split {
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) 278px !important;
  overflow: hidden !important;
}

#page-digital-human .dh-persona-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 212px !important;
  overflow: auto !important;
}

#page-digital-human .dh-persona-option {
  display: grid !important;
  grid-template-rows: 126px 48px 30px !important;
  height: 212px !important;
  min-height: 212px !important;
  border-radius: 16px !important;
}

#page-digital-human .dh-persona-option-media,
#page-digital-human .dh-persona-option-media.persona-portrait,
#page-digital-human .dh-persona-option-media.is-video-preview {
  height: 126px !important;
  min-height: 126px !important;
  margin: 8px 8px 0 !important;
  border-radius: 14px !important;
}

#page-digital-human .dh-persona-option-media img,
#page-digital-human .dh-persona-option-media video {
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
}

#page-digital-human .dh-persona-option-body {
  height: 48px !important;
  min-height: 48px !important;
  padding: 7px 10px 4px !important;
}

#page-digital-human .dh-persona-option-body b {
  font-size: 13px !important;
}

#page-digital-human .dh-persona-option-body em {
  font-size: 10px !important;
}

#page-digital-human .dh-persona-select {
  height: 28px !important;
  margin: 0 8px 8px !important;
}

#page-digital-human .dh-picker-preview {
  position: relative !important;
  z-index: 1 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

#page-digital-human .dh-picker-preview-media {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

#page-digital-human .dh-picker-preview-media video,
#page-digital-human .dh-picker-preview-media img,
#page-digital-human .dh-picker-preview-persona,
#page-digital-human .dh-picker-preview-persona-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

#page-digital-human .dh-voice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  overflow: auto !important;
}

#page-digital-human .dh-music-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  overflow: auto !important;
  max-height: none !important;
}

#page-digital-human .dh-broll-modal {
  width: min(1120px, calc(100vw - 44px)) !important;
}

#page-digital-human .dh-broll-layout {
  grid-template-columns: minmax(390px, .82fr) minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#page-digital-human .dh-broll-source,
#page-digital-human .dh-broll-plan-side {
  overflow: auto !important;
}

#page-digital-human .dh-broll-mode-cards,
#page-digital-human #dhBrollModeCards.dh-broll-mode-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#page-digital-human .dh-broll-mode-cards button {
  min-height: 98px !important;
  border-radius: 16px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-modal-layout,
#page-digital-human #dhCoverModal .dh-style-modal-layout {
  min-height: 0 !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-modal-layout {
  grid-template-columns: minmax(420px, .92fr) minmax(320px, .72fr) !important;
}

#page-digital-human #dhCoverModal .dh-style-modal-layout {
  grid-template-columns: minmax(400px, .9fr) minmax(320px, .72fr) !important;
}

#page-digital-human .dh-style-controls,
#page-digital-human .dh-style-preview-side {
  min-height: 0 !important;
  overflow: auto !important;
}

@media (max-width: 1320px) {
  #page-digital-human .dhx-board {
    min-height: 604px !important;
  }

  #page-digital-human .dhx-layout {
    grid-template-columns: minmax(270px, .78fr) minmax(410px, 1.16fr) minmax(248px, .72fr) !important;
    grid-template-rows: 270px minmax(0, 1fr) !important;
  }
}

/* v28 viewport delivery lock: keep the SaaS cockpit readable on the real test browser. */
#page-digital-human .dhx-board {
  height: calc(100vh - 112px) !important;
  min-height: 620px !important;
  padding: 12px !important;
}

#page-digital-human .dhx-layout {
  height: calc(100% - 44px) !important;
  grid-template-columns: minmax(300px, .84fr) minmax(500px, 1.18fr) minmax(282px, .72fr) !important;
  grid-template-rows: minmax(252px, .36fr) minmax(0, .64fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-panel {
  padding: 12px !important;
  border-radius: 18px !important;
}

#page-digital-human .dhx-panel-head {
  height: 30px !important;
  margin-bottom: 8px !important;
}

#page-digital-human .dhx-production-panel {
  overflow: visible !important;
}

#page-digital-human .dhx-production-body {
  min-height: 0 !important;
  gap: 8px !important;
  overflow: visible !important;
}

#page-digital-human .dhx-production-selects {
  min-height: 134px !important;
  height: 134px !important;
  flex: 0 0 134px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: visible !important;
}

#page-digital-human .dhx-pick-card {
  min-height: 134px !important;
  height: 134px !important;
  grid-template-columns: minmax(74px, 39%) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) 26px !important;
  gap: 7px 9px !important;
  padding: 9px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-pick-media,
#page-digital-human .dhx-pick-icon {
  height: 86px !important;
  min-height: 86px !important;
  border-radius: 15px !important;
}

#page-digital-human .dhx-pick-persona .dhx-pick-media img,
#page-digital-human .dhx-pick-persona .dhx-pick-media video,
#page-digital-human .dhx-pick-persona .dhx-pick-icon img,
#page-digital-human .dhx-pick-persona .dhx-pick-icon video {
  object-fit: contain !important;
  object-position: center bottom !important;
}

#page-digital-human .dhx-pick-copy {
  gap: 5px !important;
  align-content: center !important;
}

#page-digital-human .dhx-pick-card em {
  gap: 5px !important;
  font-size: 13px !important;
  line-height: 1.08 !important;
}

#page-digital-human .dhx-pick-card em i {
  width: 23px !important;
  height: 23px !important;
  font-size: 10px !important;
}

#page-digital-human .dhx-pick-copy b,
#page-digital-human .dhx-pick-card b {
  font-size: 17px !important;
  line-height: 1.1 !important;
  -webkit-line-clamp: 2 !important;
}

#page-digital-human .dhx-pick-copy small,
#page-digital-human .dhx-pick-card small {
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2 !important;
}

#page-digital-human .dhx-pick-card > i {
  height: 26px !important;
  min-height: 26px !important;
  font-size: 11px !important;
}

#page-digital-human .dhx-production-foot {
  position: relative !important;
  gap: 5px !important;
}

#page-digital-human .dhx-run-row {
  gap: 7px !important;
}

#page-digital-human .dhx-run-row .dhx-btn,
#page-digital-human .dhx-run-row .dhx-advanced summary {
  min-height: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
}

#page-digital-human .dhx-advanced {
  position: static !important;
  flex: 0 0 64px !important;
}

#page-digital-human .dhx-advanced-grid {
  left: 0 !important;
  right: auto !important;
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  width: min(100%, 476px) !important;
  max-width: calc(100vw - 340px) !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  padding: 10px !important;
  z-index: 180 !important;
}

#page-digital-human .dhx-advanced-grid label {
  min-width: 0 !important;
}

#page-digital-human .dhx-advanced-grid span {
  font-size: 11px !important;
}

#page-digital-human .dhx-advanced-grid select {
  height: 32px !important;
  font-size: 12px !important;
  background: #fff !important;
  color: #0b1220 !important;
}

#page-digital-human .dhx-status-strip {
  min-height: 24px !important;
  padding: 3px 8px !important;
  gap: 6px !important;
  font-size: 11px !important;
}

#page-digital-human .dhx-edit-panel {
  overflow: hidden !important;
}

#page-digital-human .dhx-edit-grid {
  gap: 10px !important;
  min-height: 0 !important;
  flex: 1 1 0 !important;
}

#page-digital-human .dhx-edit-tile {
  min-height: 0 !important;
  border-radius: 18px !important;
}

#page-digital-human .dhx-edit-overlay {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, .06), rgba(2, 6, 23, .18) 42%, rgba(2, 6, 23, .84)),
    linear-gradient(135deg, rgba(36, 88, 243, .28), transparent 54%) !important;
}

#page-digital-human .dhx-edit-heading {
  top: 11px !important;
  left: 11px !important;
  right: 70px !important;
  padding: 0 !important;
  gap: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#page-digital-human .dhx-edit-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .74), rgba(36, 88, 243, .78)) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  backdrop-filter: blur(12px) !important;
}

#page-digital-human .dhx-edit-heading em {
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1.04 !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .74), rgba(15, 23, 42, .48)) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 12px 24px rgba(2, 6, 23, .20) !important;
  backdrop-filter: blur(12px) !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 16px rgba(2, 6, 23, .58) !important;
}

#page-digital-human .dhx-edit-tile > i {
  top: 11px !important;
  right: 11px !important;
  height: 25px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}

#page-digital-human .dhx-edit-current {
  left: 11px !important;
  right: 11px !important;
  bottom: 11px !important;
  gap: 3px !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
}

#page-digital-human .dhx-edit-current b {
  font-size: 14px !important;
  line-height: 1.08 !important;
}

#page-digital-human .dhx-edit-current small {
  font-size: 11px !important;
  line-height: 1.18 !important;
}

#page-digital-human .dhx-edit-foot {
  flex: 0 0 38px !important;
  margin-top: 8px !important;
  grid-template-columns: minmax(0, 1fr) 148px !important;
  gap: 8px !important;
  align-items: stretch !important;
  min-height: 38px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-edit-summary {
  gap: 5px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
}

#page-digital-human .dhx-edit-summary span {
  min-height: 24px !important;
  padding: 0 7px !important;
  font-size: 10.5px !important;
}

#page-digital-human .dhx-cut-btn {
  min-height: 38px !important;
  height: 38px !important;
  font-size: 12px !important;
}

#page-digital-human .dhx-output-panel {
  gap: 7px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-output-panel .dhx-panel-head {
  flex: 0 0 30px !important;
  margin-bottom: 6px !important;
}

#page-digital-human .dhx-phone {
  width: min(100%, 204px) !important;
  max-height: min(438px, calc(100% - 166px)) !important;
  margin: 0 auto 4px !important;
  aspect-ratio: 9 / 18.65 !important;
  flex: 0 1 auto !important;
}

#page-digital-human .dhx-phone-inner {
  padding: 9px !important;
}

#page-digital-human .dhx-phone-screen {
  border-radius: 37px !important;
}

#page-digital-human .dhx-island {
  top: 10px !important;
  width: 82px !important;
  height: 23px !important;
}

#page-digital-human .dhx-audio-mount {
  margin-top: 0 !important;
  flex: 0 0 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  border-radius: 18px !important;
}

#page-digital-human .dhx-audio-state,
#page-digital-human .dhx-audio-player {
  min-height: 68px !important;
  height: 68px !important;
  padding: 9px !important;
}

#page-digital-human .dhx-audio-player {
  grid-template-columns: 34px minmax(0, 1fr) 76px !important;
  gap: 8px !important;
}

#page-digital-human .dhx-wave-live {
  height: 30px !important;
}

#page-digital-human .dhx-output-actions {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#page-digital-human .dhx-output-actions .dhx-btn {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 4px !important;
  font-size: 11px !important;
}

@media (max-width: 1480px) {
  #page-digital-human .dhx-layout {
    grid-template-columns: minmax(290px, .84fr) minmax(478px, 1.18fr) minmax(270px, .70fr) !important;
  }

  #page-digital-human .dhx-pick-copy b,
  #page-digital-human .dhx-pick-card b {
    font-size: 16px !important;
  }

  #page-digital-human .dhx-phone {
    width: min(100%, 196px) !important;
  }
}

@media (max-height: 860px) {
  #page-digital-human .dhx-board {
    min-height: 0 !important;
    height: calc(100vh - 86px) !important;
    padding: 10px !important;
  }

  #page-digital-human .dhx-layout {
    height: calc(100% - 42px) !important;
    grid-template-rows: 246px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #page-digital-human .dhx-panel {
    padding: 10px !important;
  }

  #page-digital-human .dhx-production-selects {
    height: 126px !important;
    min-height: 126px !important;
    flex-basis: 126px !important;
  }

  #page-digital-human .dhx-pick-card {
    height: 126px !important;
    min-height: 126px !important;
    grid-template-columns: minmax(68px, 36%) minmax(0, 1fr) !important;
    padding: 8px !important;
  }

  #page-digital-human .dhx-pick-media,
  #page-digital-human .dhx-pick-icon {
    height: 78px !important;
    min-height: 78px !important;
  }

  #page-digital-human .dhx-pick-copy small,
  #page-digital-human .dhx-pick-card small {
    display: none !important;
  }

  #page-digital-human .dhx-edit-grid {
    gap: 8px !important;
  }

  #page-digital-human .dhx-edit-heading em {
    font-size: 16px !important;
    padding: 6px 9px !important;
  }

  #page-digital-human .dhx-edit-icon {
    width: 30px !important;
    height: 30px !important;
  }

  #page-digital-human .dhx-edit-summary {
    display: none !important;
  }

  #page-digital-human .dhx-edit-foot {
    grid-template-columns: 1fr !important;
  }

  #page-digital-human .dhx-phone {
    width: min(100%, 174px) !important;
    max-height: min(338px, calc(100% - 148px)) !important;
  }

  #page-digital-human .dhx-audio-mount {
    flex-basis: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }

  #page-digital-human .dhx-audio-state,
  #page-digital-human .dhx-audio-player {
    min-height: 60px !important;
    height: 60px !important;
    padding: 8px !important;
  }

  #page-digital-human .dhx-output-actions .dhx-btn {
    min-height: 32px !important;
    height: 32px !important;
  }
}

@media (max-width: 1340px) {
  #page-digital-human .dhx-board {
    padding: 8px !important;
  }

  #page-digital-human .dhx-layout {
    height: calc(100% - 40px) !important;
    grid-template-columns: minmax(262px, .76fr) minmax(426px, 1.2fr) minmax(214px, .64fr) !important;
    grid-template-rows: 240px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #page-digital-human .dhx-panel {
    padding: 8px !important;
    border-radius: 16px !important;
  }

  #page-digital-human .dhx-copy-pane {
    gap: 7px !important;
  }

  #page-digital-human .dhx-field {
    gap: 4px !important;
  }

  #page-digital-human .dhx-field input,
  #page-digital-human .dhx-field select,
  #page-digital-human .dhx-field textarea {
    border-radius: 11px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  #page-digital-human .dhx-topic input {
    height: 38px !important;
  }

  #page-digital-human .dhx-copy-meta {
    gap: 7px !important;
    grid-template-columns: minmax(0, 1fr) 118px !important;
  }

  #page-digital-human .dhx-script textarea {
    min-height: 112px !important;
  }

  #page-digital-human .dhx-action-line {
    padding-bottom: 2px !important;
  }

  #page-digital-human .dhx-panel-head {
    height: 28px !important;
    margin-bottom: 7px !important;
  }

  #page-digital-human .dhx-panel-head > b {
    font-size: 16px !important;
  }

  #page-digital-human .dhx-production-selects {
    height: 120px !important;
    min-height: 120px !important;
    flex-basis: 120px !important;
    gap: 8px !important;
  }

  #page-digital-human .dhx-pick-card {
    height: 120px !important;
    min-height: 120px !important;
    grid-template-columns: minmax(60px, 34%) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) 24px !important;
    gap: 6px 8px !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }

  #page-digital-human .dhx-pick-media,
  #page-digital-human .dhx-pick-icon {
    height: 72px !important;
    min-height: 72px !important;
  }

  #page-digital-human .dhx-pick-card em {
    font-size: 12px !important;
  }

  #page-digital-human .dhx-pick-card em i {
    width: 21px !important;
    height: 21px !important;
  }

  #page-digital-human .dhx-pick-copy b,
  #page-digital-human .dhx-pick-card b {
    font-size: 15px !important;
    -webkit-line-clamp: 1 !important;
  }

  #page-digital-human .dhx-pick-copy small,
  #page-digital-human .dhx-pick-card small {
    display: none !important;
  }

  #page-digital-human .dhx-pick-card > i {
    height: 24px !important;
    min-height: 24px !important;
    font-size: 10px !important;
  }

  #page-digital-human .dhx-run-row {
    gap: 6px !important;
  }

  #page-digital-human .dhx-run-row .dhx-btn,
  #page-digital-human .dhx-run-row .dhx-advanced summary {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
  }

  #page-digital-human .dhx-advanced {
    flex-basis: 58px !important;
  }

  #page-digital-human .dhx-status-strip {
    min-height: 22px !important;
    padding: 2px 7px !important;
  }

  #page-digital-human .dhx-edit-grid {
    gap: 8px !important;
  }

  #page-digital-human .dhx-edit-heading {
    left: 9px !important;
    top: 9px !important;
    right: 54px !important;
    gap: 6px !important;
  }

  #page-digital-human .dhx-edit-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
  }

  #page-digital-human .dhx-edit-heading em {
    padding: 5px 8px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
  }

  #page-digital-human .dhx-edit-tile > i {
    top: 9px !important;
    right: 9px !important;
    height: 23px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  #page-digital-human .dhx-edit-current {
    left: 9px !important;
    right: 9px !important;
    bottom: 9px !important;
    padding: 7px 9px !important;
  }

  #page-digital-human .dhx-edit-current b {
    font-size: 13px !important;
  }

  #page-digital-human .dhx-edit-current small {
    font-size: 10px !important;
  }

  #page-digital-human .dhx-edit-foot {
    flex-basis: 36px !important;
    min-height: 36px !important;
    grid-template-columns: 1fr !important;
  }

  #page-digital-human .dhx-edit-summary {
    display: none !important;
  }

  #page-digital-human .dhx-cut-btn {
    height: 36px !important;
    min-height: 36px !important;
  }

  #page-digital-human .dhx-output-panel {
    gap: 6px !important;
  }

  #page-digital-human .dhx-phone {
    width: min(100%, 154px) !important;
    max-height: min(304px, calc(100% - 134px)) !important;
    aspect-ratio: 9 / 18.2 !important;
  }

  #page-digital-human .dhx-phone-inner {
    padding: 7px !important;
    border-radius: 39px !important;
  }

  #page-digital-human .dhx-phone-screen {
    border-radius: 32px !important;
  }

  #page-digital-human .dhx-island {
    width: 68px !important;
    height: 19px !important;
  }

  #page-digital-human .dhx-audio-mount {
    flex-basis: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    border-radius: 15px !important;
  }

  #page-digital-human .dhx-audio-state,
  #page-digital-human .dhx-audio-player {
    min-height: 54px !important;
    height: 54px !important;
    padding: 7px !important;
  }

  #page-digital-human .dhx-output-actions {
    gap: 5px !important;
  }

  #page-digital-human .dhx-output-actions .dhx-btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 3px !important;
    font-size: 10px !important;
  }
}

/* v53: copy generation state and compact result layout. */
#page-digital-human .dhx-copy-panel {
  overflow: hidden !important;
}

#page-digital-human .dhx-copy-pane {
  height: calc(100% - 40px) !important;
  gap: 8px !important;
  display: grid !important;
  grid-template-rows: auto auto 72px minmax(148px, 1fr) 40px !important;
  align-content: stretch !important;
}

#page-digital-human .dhx-copy-status {
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(124px, .72fr) !important;
  gap: 8px !important;
  padding: 9px !important;
  border: 1px solid rgba(37, 99, 235, .12) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, .92), rgba(255, 255, 255, .96)) !important;
}

#page-digital-human .dhx-copy-status > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

#page-digital-human .dhx-copy-status em {
  color: #64748b !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

#page-digital-human .dhx-copy-status b {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.28 !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human .dhx-copy-status p {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-copy-status strong {
  max-width: 88px !important;
  height: 20px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  color: #1d4ed8 !important;
  background: rgba(37, 99, 235, .10) !important;
  font-size: 11px !important;
  line-height: 20px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human .dhx-copy-status.is-empty {
  opacity: .82 !important;
  background: rgba(248, 250, 252, .92) !important;
}

#page-digital-human .dhx-copy-status.is-loading,
#page-digital-human .dhx-copy-status.is-fail {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
}

#page-digital-human .dhx-copy-status.is-loading i,
#page-digital-human .dhx-copy-status.is-fail i {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: conic-gradient(from 90deg, #2563eb, #06b6d4, rgba(37,99,235,.16)) !important;
}

#page-digital-human .dhx-copy-status.is-loading i {
  animation: dhx-spin 1.1s linear infinite !important;
}

#page-digital-human .dhx-copy-status.is-fail i {
  background: linear-gradient(135deg, #fb7185, #e11d48) !important;
}

#page-digital-human .dhx-copy-status small {
  grid-column: 2 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

#page-digital-human .dhx-script {
  flex: 1 1 0 !important;
  min-height: 150px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

#page-digital-human .dhx-script textarea {
  min-height: 150px !important;
  height: 100% !important;
}

#page-digital-human .dhx-action-line {
  margin-top: 0 !important;
  align-self: end !important;
}

#page-digital-human .dhx-action-line .dhx-btn {
  width: 100% !important;
}

#page-digital-human .dhx-pick-preview {
  position: absolute !important;
  right: 82px !important;
  bottom: 10px !important;
  z-index: 4 !important;
  height: 23px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #0f172a !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(37, 99, 235, .16) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
  font-size: 11px !important;
  line-height: 23px !important;
  font-weight: 900 !important;
}

@keyframes dhx-spin {
  to { transform: rotate(360deg); }
}

#page-digital-human .dh-generation-overlay.is-copy .dh-generation-mark {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .35), transparent 30%),
    linear-gradient(135deg, #4f46e5, #06b6d4) !important;
}

/* v62: copy result and audio output are tied to current script state. */
#page-digital-human .dhx-copy-pane {
  grid-template-rows: auto auto 92px minmax(132px, 1fr) 42px !important;
}

#page-digital-human .dhx-copy-status {
  min-height: 84px !important;
  max-height: 96px !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(168px, .9fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 10px !important;
  overflow: visible !important;
}

#page-digital-human .dhx-copy-status > span {
  min-height: 64px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .82) !important;
}

#page-digital-human .dhx-copy-status b {
  display: -webkit-box !important;
  max-height: 40px !important;
  white-space: normal !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

#page-digital-human .dhx-copy-status p {
  max-height: 44px !important;
  overflow: auto !important;
  padding-bottom: 1px !important;
}

#page-digital-human .dhx-copy-status strong {
  max-width: 118px !important;
  height: 22px !important;
  line-height: 22px !important;
  color: #0f3ea6 !important;
  background: rgba(37, 99, 235, .12) !important;
}

#page-digital-human .dhx-copy-status.is-loading,
#page-digital-human .dhx-copy-status.is-fail {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  max-height: 84px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-script textarea {
  min-height: 132px !important;
}

#page-digital-human .dhx-audio-player.is-native {
  height: auto !important;
  min-height: 82px !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 38px !important;
  gap: 9px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, .20), transparent 35%),
    linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(17, 24, 39, .90)) !important;
}

#page-digital-human .dhx-audio-player.is-native .dhx-audio-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#page-digital-human .dhx-audio-player.is-native .dhx-audio-copy b {
  color: #f8fafc !important;
  font-size: 13px !important;
}

#page-digital-human .dhx-audio-player.is-native .dhx-audio-copy span {
  flex: 0 0 auto !important;
  color: rgba(186, 230, 253, .94) !important;
}

#page-digital-human .dhx-audio-player.is-native audio {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  accent-color: #22d3ee !important;
}

#page-digital-human .dhx-audio-player.is-native .dhx-wave-live,
#page-digital-human .dhx-audio-player.is-native .dhx-audio-track,
#page-digital-human .dhx-audio-player.is-native .dhx-audio-toggle {
  display: none !important;
}

#page-digital-human .dhx-native-audio-skeleton {
  width: 100% !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, .08) !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-native-audio-skeleton i {
  display: block !important;
  width: 38% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(37, 99, 235, .16), rgba(6, 182, 212, .28)) !important;
}

@media (max-height: 860px) {
  #page-digital-human .dhx-copy-pane {
    grid-template-rows: auto auto 84px minmax(118px, 1fr) 38px !important;
  }

  #page-digital-human .dhx-copy-status {
    min-height: 78px !important;
    max-height: 88px !important;
  }

  #page-digital-human .dhx-audio-player.is-native {
    min-height: 76px !important;
    grid-template-rows: auto 34px !important;
    padding: 10px !important;
  }

  #page-digital-human .dhx-audio-player.is-native audio {
    height: 34px !important;
  }
}

/* v55: generated audio must show real playback state and duration in the SaaS board output. */
#page-digital-human .dhx-final-mount .short-preview-overlay,
#page-digital-human .dhx-final-mount .video-preview-extra,
#page-digital-human .dhx-final-mount .avatar-preview-audio-hint,
#page-digital-human .dhx-final-mount .video-load-state {
  display: none !important;
}

#page-digital-human .dhx-audio-player {
  position: relative !important;
  grid-template-columns: 42px minmax(0, 1fr) minmax(92px, .72fr) !important;
  grid-template-rows: auto 5px !important;
  column-gap: 11px !important;
  row-gap: 10px !important;
  align-items: center !important;
  padding: 12px !important;
  border: 1px solid rgba(56, 189, 248, .22) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 211, 238, .20), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(15, 23, 42, .88)) !important;
  box-shadow: 0 18px 34px rgba(15, 23, 42, .20) !important;
}

#page-digital-human .dhx-audio-toggle {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 1px solid rgba(255, 255, 255, .20) !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #22d3ee, #6366f1) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(34, 211, 238, .24) !important;
}

#page-digital-human .dhx-audio-toggle svg {
  width: 19px !important;
  height: 19px !important;
}

#page-digital-human .dhx-audio-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

#page-digital-human .dhx-audio-copy b {
  max-width: 100% !important;
  overflow: hidden !important;
  color: #f8fafc !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human .dhx-audio-copy span {
  color: rgba(203, 213, 225, .88) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

#page-digital-human .dhx-audio-track {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 5px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, .25) !important;
}

#page-digital-human .dhx-audio-track i {
  display: block !important;
  width: 0;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6) !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, .44) !important;
  transition: width .18s ease !important;
}

#page-digital-human .dhx-audio-player .dhx-wave-live {
  justify-self: end !important;
  max-width: 106px !important;
  opacity: .94 !important;
}

#page-digital-human .dh-generation-mark {
  font-size: 0 !important;
}

@media (max-width: 760px) {
  #page-digital-human .dh-generation-card {
    padding: 22px !important;
    border-radius: 24px !important;
  }

  #page-digital-human .dh-generation-head {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #page-digital-human .dh-generation-mark {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
  }

  #page-digital-human .dh-generation-actions {
    flex-direction: column;
  }

  #page-digital-human .dh-generation-action {
    width: 100%;
  }

  #page-digital-human .dhx-status-strip {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    row-gap: 6px !important;
  }

  #page-digital-human .dhx-status-strip small,
  #page-digital-human .dhx-status-strip i {
    grid-column: 2 / -1;
  }

  #page-digital-human .dhx-status-action {
    height: 26px;
  }
}

/* v30 delivery pass: stable production controls, realistic preview device, clear audio player. */
#page-digital-human .dhx-production-panel {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

#page-digital-human .dhx-production-panel .dhx-panel-head {
  flex: 0 0 auto !important;
}

#page-digital-human .dhx-production-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: 8px !important;
  overflow: visible !important;
}

#page-digital-human .dhx-production-selects {
  height: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  overflow: visible !important;
}

#page-digital-human .dhx-pick-card {
  height: 100% !important;
  min-height: 126px !important;
  max-height: 156px !important;
  grid-template-columns: minmax(82px, 31%) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) 28px !important;
  gap: 8px 10px !important;
  padding: 10px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 16% -8%, rgba(14, 165, 233, .18), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%) !important;
  border-color: rgba(37, 99, 235, .18) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .07) !important;
}

#page-digital-human .dhx-pick-card.is-selected {
  background:
    radial-gradient(circle at 18% -10%, rgba(14, 165, 233, .24), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #edf6ff 100%) !important;
  border-color: rgba(37, 99, 235, .32) !important;
}

#page-digital-human .dhx-pick-media {
  width: 100% !important;
  height: 100% !important;
  min-height: 84px !important;
  max-height: 104px !important;
  align-self: stretch !important;
  border-radius: 16px !important;
}

#page-digital-human .dhx-pick-persona .dhx-pick-media {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.78), transparent 30%),
    linear-gradient(180deg, #e7eef8 0%, #f7fbff 100%) !important;
}

#page-digital-human .dhx-pick-persona .dhx-pick-media img,
#page-digital-human .dhx-pick-persona .dhx-pick-media video {
  object-fit: cover !important;
  object-position: center top !important;
}

#page-digital-human .dhx-pick-voice .dhx-pick-media,
#page-digital-human .dhx-pick-audio .dhx-pick-media {
  background:
    radial-gradient(circle at 52% 42%, rgba(125, 211, 252, .32), transparent 42%),
    linear-gradient(145deg, #0b1220 0%, #173b88 62%, #06b6d4 100%) !important;
}

#page-digital-human .dhx-voice-mark {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transform: translateY(3px);
}

#page-digital-human .dhx-voice-orb {
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
}

#page-digital-human .dhx-voice-orb svg {
  width: 22px !important;
  height: 22px !important;
}

#page-digital-human .dhx-voice-bars {
  height: 21px !important;
  gap: 4px !important;
}

#page-digital-human .dhx-voice-bars i {
  width: 4px !important;
}

#page-digital-human .dhx-voice-bars i:nth-child(1) { height: 8px !important; }
#page-digital-human .dhx-voice-bars i:nth-child(2) { height: 15px !important; }
#page-digital-human .dhx-voice-bars i:nth-child(3) { height: 21px !important; }
#page-digital-human .dhx-voice-bars i:nth-child(4) { height: 13px !important; }
#page-digital-human .dhx-voice-bars i:nth-child(5) { height: 17px !important; }

#page-digital-human .dhx-pick-copy {
  align-content: center !important;
  gap: 6px !important;
}

#page-digital-human .dhx-pick-card em {
  gap: 6px !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
}

#page-digital-human .dhx-pick-card em i {
  width: 25px !important;
  height: 25px !important;
}

#page-digital-human .dhx-pick-copy b,
#page-digital-human .dhx-pick-card b {
  font-size: 19px !important;
  line-height: 1.12 !important;
  -webkit-line-clamp: 2 !important;
}

#page-digital-human .dhx-pick-copy small,
#page-digital-human .dhx-pick-card small {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}

#page-digital-human .dhx-pick-card > i {
  height: 28px !important;
  min-height: 28px !important;
  font-size: 12px !important;
}

#page-digital-human .dhx-production-foot {
  flex: 0 0 auto !important;
  gap: 7px !important;
  margin-top: 8px !important;
  position: relative !important;
  z-index: 12 !important;
}

#page-digital-human .dhx-run-row {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1.05fr) !important;
  align-items: stretch !important;
  gap: 9px !important;
}

#page-digital-human .dhx-run-row .dhx-btn,
#page-digital-human .dhx-run-row .dhx-advanced summary {
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
}

#page-digital-human .dhx-run-row .dhx-btn svg,
#page-digital-human .dhx-run-row .dhx-advanced summary svg {
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 auto !important;
}

#page-digital-human .dhx-advanced {
  flex: none !important;
  min-width: 0 !important;
  border-radius: 16px !important;
}

#page-digital-human .dhx-advanced-grid {
  left: 0 !important;
  right: auto !important;
  top: calc(100% + 10px) !important;
  bottom: auto !important;
  width: min(520px, calc(100vw - 390px)) !important;
  max-width: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  border-radius: 18px !important;
}

#page-digital-human .dhx-status-strip {
  min-height: 30px !important;
  padding: 5px 10px !important;
  border-radius: 14px !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(56px, .38fr) auto auto !important;
  gap: 7px !important;
  font-size: 12px !important;
}

#page-digital-human .dhx-output-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-output-panel .dhx-panel-head {
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
}

#page-digital-human .dhx-phone {
  width: min(100%, 248px) !important;
  max-height: min(488px, calc(100% - 170px)) !important;
  aspect-ratio: 9 / 19.35 !important;
  margin: 0 auto 2px !important;
  border-radius: 44px !important;
  background:
    linear-gradient(145deg, #dbe4ef 0%, #718096 5%, #1f2937 11%, #020617 50%, #111827 86%, #94a3b8 96%, #f8fafc 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34),
    inset 0 0 0 4px rgba(255,255,255,.08),
    0 34px 64px rgba(15, 23, 42, .30) !important;
  filter: none !important;
}

#page-digital-human .dhx-phone::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 39px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 10px 22px rgba(255,255,255,.08);
  pointer-events: none;
  z-index: 2;
}

#page-digital-human .dhx-phone::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 42%);
  pointer-events: none;
  z-index: 5;
}

#page-digital-human .dhx-phone-inner {
  inset: 9px !important;
  padding: 0 !important;
  border-radius: 34px !important;
  background: #020617 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 0 2px rgba(0,0,0,.72) !important;
}

#page-digital-human .dhx-phone-inner::before {
  display: none !important;
}

#page-digital-human .dhx-phone-screen {
  border-radius: 31px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 34px rgba(0,0,0,.38) !important;
}

#page-digital-human .dhx-output-persona img {
  object-fit: cover !important;
  object-position: center top !important;
  opacity: .86 !important;
  background: #05070b !important;
}

#page-digital-human .dhx-phone-screen::after {
  bottom: 10px !important;
  width: 84px !important;
  height: 4px !important;
  opacity: .88 !important;
}

#page-digital-human .dhx-island {
  top: 13px !important;
  width: 92px !important;
  height: 26px !important;
  border-radius: 18px !important;
  background: #010409 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 10px rgba(0,0,0,.26) !important;
}

#page-digital-human .dhx-phone-button {
  width: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #b7c1cf, #0f172a) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.24) !important;
}

#page-digital-human .dhx-phone-volume {
  left: -3px !important;
  top: 92px !important;
  height: 58px !important;
}

#page-digital-human .dhx-phone-power {
  right: -3px !important;
  top: 160px !important;
  height: 74px !important;
}

#page-digital-human .dhx-audio-mount {
  flex: 0 0 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;
  margin-top: 2px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(125, 211, 252, .34), transparent 35%),
    radial-gradient(circle at 94% 20%, rgba(59, 130, 246, .42), transparent 42%),
    linear-gradient(135deg, #07111f 0%, #16449d 58%, #05a9d8 100%) !important;
  border: 1px solid rgba(147,197,253,.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 18px 38px rgba(37, 99, 235, .23) !important;
}

#page-digital-human .dhx-audio-state,
#page-digital-human .dhx-audio-player {
  height: 82px !important;
  min-height: 82px !important;
  padding: 12px !important;
}

#page-digital-human .dhx-audio-player {
  grid-template-columns: 48px minmax(0, 1fr) 96px !important;
  align-items: center !important;
  gap: 12px !important;
}

#page-digital-human .dhx-audio-toggle {
  width: 48px !important;
  height: 48px !important;
  border-radius: 18px !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  color: #082f49 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(186,230,253,.82)) !important;
  border: 1px solid rgba(255,255,255,.54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 12px 24px rgba(2, 6, 23, .18) !important;
}

#page-digital-human .dhx-audio-toggle svg {
  width: 23px !important;
  height: 23px !important;
  fill: currentColor !important;
  stroke: none !important;
}

#page-digital-human .dhx-audio-pause {
  display: none;
}

#page-digital-human .dhx-audio-toggle.is-playing .dhx-audio-play {
  display: none;
}

#page-digital-human .dhx-audio-toggle.is-playing .dhx-audio-pause {
  display: grid;
}

#page-digital-human .dhx-audio-toggle.is-playing {
  color: #fff !important;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4) !important;
}

#page-digital-human .dhx-audio-player.is-pending .dhx-audio-toggle {
  cursor: default !important;
  opacity: .78 !important;
  color: rgba(8, 47, 73, .62) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(219,234,254,.58)) !important;
}

#page-digital-human .dhx-audio-player.is-pending .dhx-wave-live i {
  opacity: .55 !important;
}

#page-digital-human .dhx-audio-copy {
  gap: 5px !important;
}

#page-digital-human .dhx-audio-copy b {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

#page-digital-human .dhx-audio-copy span {
  font-size: 12px !important;
  color: rgba(255,255,255,.78) !important;
}

#page-digital-human .dhx-wave-live {
  height: 34px !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-wave-live i {
  width: 5px !important;
}

#page-digital-human .dhx-output-actions {
  flex: 0 0 auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

#page-digital-human .dhx-output-actions .dhx-btn {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 8px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
}

@media (max-width: 1480px) {
  #page-digital-human .dhx-pick-card {
    min-height: 118px !important;
    max-height: 142px !important;
    grid-template-columns: minmax(76px, 30%) minmax(0, 1fr) !important;
    padding: 9px !important;
  }

  #page-digital-human .dhx-pick-media {
    min-height: 78px !important;
    max-height: 96px !important;
  }

  #page-digital-human .dhx-pick-card em {
    font-size: 14px !important;
  }

  #page-digital-human .dhx-pick-copy b,
  #page-digital-human .dhx-pick-card b {
    font-size: 18px !important;
  }

  #page-digital-human .dhx-phone {
    width: min(100%, 232px) !important;
    max-height: min(456px, calc(100% - 164px)) !important;
  }
}

@media (max-width: 1340px) {
  #page-digital-human .dhx-production-selects {
    gap: 8px !important;
  }

  #page-digital-human .dhx-pick-card {
    min-height: 112px !important;
    max-height: 132px !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) 25px !important;
    gap: 7px 8px !important;
    padding: 8px !important;
    border-radius: 18px !important;
  }

  #page-digital-human .dhx-pick-media {
    min-height: 72px !important;
    max-height: 88px !important;
    border-radius: 15px !important;
  }

  #page-digital-human .dhx-voice-orb {
    width: 37px !important;
    height: 37px !important;
  }

  #page-digital-human .dhx-voice-bars {
    height: 17px !important;
  }

  #page-digital-human .dhx-pick-card em {
    font-size: 12.5px !important;
  }

  #page-digital-human .dhx-pick-card em i {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }

  #page-digital-human .dhx-pick-copy b,
  #page-digital-human .dhx-pick-card b {
    font-size: 16px !important;
    -webkit-line-clamp: 1 !important;
  }

  #page-digital-human .dhx-pick-copy small,
  #page-digital-human .dhx-pick-card small {
    display: block !important;
    font-size: 10.5px !important;
    -webkit-line-clamp: 1 !important;
  }

  #page-digital-human .dhx-pick-card > i {
    height: 25px !important;
    min-height: 25px !important;
    font-size: 10.5px !important;
  }

  #page-digital-human .dhx-run-row {
    grid-template-columns: 86px minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  #page-digital-human .dhx-run-row .dhx-btn,
  #page-digital-human .dhx-run-row .dhx-advanced summary {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 12px !important;
  }

  #page-digital-human .dhx-status-strip {
    min-height: 28px !important;
    font-size: 11px !important;
  }

  #page-digital-human .dhx-phone {
    width: min(100%, 210px) !important;
    max-height: min(410px, calc(100% - 158px)) !important;
    border-radius: 40px !important;
  }

  #page-digital-human .dhx-phone-inner {
    inset: 8px !important;
    border-radius: 31px !important;
  }

  #page-digital-human .dhx-phone-screen {
    border-radius: 28px !important;
  }

  #page-digital-human .dhx-island {
    width: 78px !important;
    height: 22px !important;
  }

  #page-digital-human .dhx-audio-mount {
    flex-basis: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    border-radius: 21px !important;
  }

  #page-digital-human .dhx-audio-state,
  #page-digital-human .dhx-audio-player {
    height: 72px !important;
    min-height: 72px !important;
    padding: 10px !important;
  }

  #page-digital-human .dhx-audio-player {
    grid-template-columns: 42px minmax(0, 1fr) 74px !important;
    gap: 9px !important;
  }

  #page-digital-human .dhx-audio-toggle {
    width: 42px !important;
    height: 42px !important;
    border-radius: 16px !important;
  }

  #page-digital-human .dhx-audio-copy b {
    font-size: 13px !important;
  }

  #page-digital-human .dhx-output-actions .dhx-btn {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 11px !important;
  }
}

@media (max-height: 860px) {
  #page-digital-human .dhx-pick-card {
    min-height: 108px !important;
    max-height: 124px !important;
  }

  #page-digital-human .dhx-pick-media {
    min-height: 66px !important;
    max-height: 78px !important;
  }

  #page-digital-human .dhx-production-foot {
    margin-top: 6px !important;
    gap: 6px !important;
  }

  #page-digital-human .dhx-run-row .dhx-btn,
  #page-digital-human .dhx-run-row .dhx-advanced summary {
    min-height: 36px !important;
    height: 36px !important;
  }

  #page-digital-human .dhx-status-strip {
    min-height: 26px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  #page-digital-human .dhx-phone {
    width: min(100%, 196px) !important;
    max-height: min(384px, calc(100% - 148px)) !important;
  }

  #page-digital-human .dhx-audio-mount {
    flex-basis: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
  }

  #page-digital-human .dhx-audio-state,
  #page-digital-human .dhx-audio-player {
    height: 66px !important;
    min-height: 66px !important;
    padding: 9px !important;
  }
}

@media (max-width: 980px) {
  #page-digital-human .dhx-production-selects {
    grid-template-columns: 1fr !important;
  }

  #page-digital-human .dhx-pick-card {
    min-height: 104px !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  #page-digital-human .dhx-run-row {
    grid-template-columns: 1fr 1fr !important;
  }

  #page-digital-human .dhx-advanced {
    grid-column: 1 / -1;
  }

  #page-digital-human .dhx-advanced-grid {
    width: min(100%, 520px) !important;
  }
}

/* v32: stable production controls, with compact badges and protected action spacing. */
#page-digital-human .dhx-production-panel {
  --dhx-production-card-h: clamp(116px, 7.8vw, 134px);
  display: grid !important;
  grid-template-rows: auto var(--dhx-production-card-h) auto !important;
  align-content: start !important;
  row-gap: 12px !important;
  overflow: visible !important;
  isolation: isolate !important;
}

#page-digital-human .dhx-production-panel .dhx-panel-head {
  margin-bottom: 0 !important;
}

#page-digital-human .dhx-production-body {
  flex: 0 0 var(--dhx-production-card-h) !important;
  height: var(--dhx-production-card-h) !important;
  min-height: var(--dhx-production-card-h) !important;
  max-height: var(--dhx-production-card-h) !important;
  overflow: visible !important;
}

#page-digital-human .dhx-production-selects {
  height: var(--dhx-production-card-h) !important;
  min-height: var(--dhx-production-card-h) !important;
  max-height: var(--dhx-production-card-h) !important;
  flex: 0 0 var(--dhx-production-card-h) !important;
  align-items: start !important;
  gap: 12px !important;
}

#page-digital-human .dhx-pick-card {
  position: relative !important;
  height: var(--dhx-production-card-h) !important;
  min-height: var(--dhx-production-card-h) !important;
  max-height: var(--dhx-production-card-h) !important;
  align-self: start !important;
  grid-template-columns: minmax(74px, 31%) minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-pick-media {
  min-height: 0 !important;
  height: 100% !important;
  max-height: calc(var(--dhx-production-card-h) - 20px) !important;
}

#page-digital-human .dhx-pick-card > i {
  position: absolute !important;
  right: 12px !important;
  bottom: 10px !important;
  z-index: 3 !important;
  width: auto !important;
  height: 23px !important;
  min-height: 23px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 23px !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .12) !important;
}

#page-digital-human .dhx-production-foot {
  margin-top: 0 !important;
  display: grid !important;
  gap: 9px !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 30 !important;
}

#page-digital-human .dhx-run-row {
  position: relative !important;
  z-index: 2 !important;
  grid-template-columns: 112px minmax(0, .96fr) minmax(0, 1.18fr) !important;
  gap: 10px !important;
}

#page-digital-human .dhx-run-row .dhx-btn,
#page-digital-human .dhx-run-row .dhx-advanced summary {
  white-space: nowrap !important;
}

#page-digital-human .dhx-run-row:has(.dhx-advanced[open]) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#page-digital-human .dhx-production-foot:has(.dhx-advanced[open]) {
  gap: 0 !important;
}

#page-digital-human .dhx-production-foot:has(.dhx-advanced[open]) .dhx-status-strip {
  display: none !important;
}

#page-digital-human .dhx-run-row:has(.dhx-advanced[open]) #dhxAudioBtn {
  grid-column: 1 !important;
}

#page-digital-human .dhx-run-row:has(.dhx-advanced[open]) #dhxVideoBtn {
  grid-column: 2 !important;
}

#page-digital-human .dhx-run-row .dhx-advanced summary span,
#page-digital-human .dhx-run-row .dhx-btn span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human .dhx-status-strip {
  margin-top: 0 !important;
}

#page-digital-human .dhx-advanced[open] {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  z-index: 35 !important;
}

#page-digital-human .dhx-advanced[open] summary {
  border: 1px solid rgba(37, 99, 235, .18) !important;
  background: rgba(255, 255, 255, .96) !important;
  border-radius: 16px !important;
}

#page-digital-human .dhx-advanced-grid {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 4px !important;
  grid-template-columns: .72fr .78fr .74fr minmax(70px, 1fr) !important;
  gap: 5px !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .10) !important;
}

#page-digital-human .dhx-advanced-grid label {
  gap: 0 !important;
}

#page-digital-human .dhx-advanced-grid label > span {
  display: none !important;
}

#page-digital-human .dhx-advanced-grid select {
  min-width: 0 !important;
  width: 100% !important;
  height: 30px !important;
  padding: 0 7px !important;
  font-size: 12px !important;
}

@media (max-width: 1480px) {
  #page-digital-human .dhx-production-panel {
    --dhx-production-card-h: 116px;
  }
}

@media (max-width: 1340px) {
  #page-digital-human .dhx-production-panel {
    --dhx-production-card-h: 108px;
    row-gap: 10px !important;
  }

  #page-digital-human .dhx-production-selects {
    gap: 9px !important;
  }

  #page-digital-human .dhx-pick-card {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    padding: 8px 10px !important;
  }

  #page-digital-human .dhx-production-foot {
    gap: 8px !important;
  }

  #page-digital-human .dhx-run-row {
    grid-template-columns: 96px minmax(0, .96fr) minmax(0, 1.14fr) !important;
    gap: 8px !important;
  }

  #page-digital-human .dhx-advanced[open] {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #page-digital-human .dhx-pick-card > i {
    right: 10px !important;
    bottom: 8px !important;
    height: 21px !important;
    min-height: 21px !important;
    line-height: 21px !important;
    font-size: 10px !important;
  }
}

@media (max-height: 860px) {
  #page-digital-human .dhx-production-panel {
    --dhx-production-card-h: 104px;
    row-gap: 9px !important;
  }

  #page-digital-human .dhx-production-foot {
    gap: 7px !important;
  }

  #page-digital-human .dhx-pick-card b {
    font-size: 15px !important;
  }

  #page-digital-human .dhx-pick-card small {
    font-size: 10px !important;
  }

  #page-digital-human .dhx-advanced-grid {
    padding: 4px !important;
  }

  #page-digital-human .dhx-advanced-grid select {
    height: 30px !important;
  }
}

/* v33: commercial b-roll planner. Keep original planning logic, make the modal operable. */
#page-digital-human .dh-broll-modal {
  width: min(1220px, calc(100vw - 42px)) !important;
  max-height: calc(100dvh - 58px) !important;
  padding: 20px !important;
  gap: 14px !important;
  border-radius: 30px !important;
  background: #fff !important;
}

#page-digital-human .dh-broll-modal .dh-picker-head {
  min-height: 42px !important;
  margin: 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
}

#page-digital-human .dh-broll-modal .dh-picker-head h2 {
  font-size: 24px !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

#page-digital-human .dh-broll-layout {
  display: grid !important;
  grid-template-columns: minmax(430px, .82fr) minmax(520px, 1fr) !important;
  gap: 16px !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

#page-digital-human .dh-broll-source,
#page-digital-human .dh-broll-plan-side {
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 22px !important;
  background: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

#page-digital-human .dh-broll-source {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 12px !important;
}

#page-digital-human #dhBrollModeCards[hidden],
#page-digital-human #dhBrollModeCards.dh-broll-mode-cards[hidden] {
  display: none !important;
}

#page-digital-human .dh-broll-control-card,
#page-digital-human .dh-broll-material-panel {
  min-width: 0 !important;
  border: 1px solid rgba(15, 23, 42, .07) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05) !important;
}

#page-digital-human .dh-broll-control-card {
  display: grid !important;
  gap: 12px !important;
  padding: 12px !important;
}

#page-digital-human .dh-broll-rule-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#page-digital-human .dh-broll-rule-grid .dh-field,
#page-digital-human .dh-broll-script-field {
  min-width: 0 !important;
  gap: 6px !important;
}

#page-digital-human .dh-broll-rule-grid .dh-field b,
#page-digital-human .dh-broll-script-field b {
  color: #172033 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

#page-digital-human .dh-broll-rule-grid select {
  width: 100% !important;
  height: 38px !important;
  min-width: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(37, 99, 235, .16) !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 820 !important;
}

#page-digital-human .dh-broll-script-field textarea {
  width: 100% !important;
  min-height: 94px !important;
  max-height: 116px !important;
  resize: none !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, .03) !important;
}

#page-digital-human .dh-broll-plan-tools-primary {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 92px 104px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#page-digital-human .dh-broll-plan-tools-primary .btn {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}

#page-digital-human #dhBrollPlanSummary {
  min-height: 36px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(6, 182, 212, .07)) !important;
  color: #1d4ed8 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#page-digital-human .dh-broll-material-panel {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 12px !important;
  overflow: hidden !important;
}

#page-digital-human .dh-broll-local-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(88px, auto) !important;
  gap: 8px !important;
  align-items: center !important;
}

#page-digital-human .dh-broll-local-actions .dh-mini-btn {
  min-height: 34px !important;
  border-radius: 12px !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#page-digital-human .dh-broll-filters {
  margin: 0 !important;
  display: flex !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
}

#page-digital-human .dh-broll-filters button {
  flex: 0 0 auto !important;
  min-height: 28px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, .07) !important;
  background: #eef2f7 !important;
  color: #475467 !important;
  font-size: 11px !important;
}

#page-digital-human .dh-broll-filters button.active {
  color: #fff !important;
  border-color: rgba(37, 99, 235, .18) !important;
  background: linear-gradient(135deg, #2458f3, #0ea5e9) !important;
}

#page-digital-human .dh-broll-material-grid {
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow: auto !important;
  align-content: start !important;
}

#page-digital-human .broll-material-chip {
  min-width: 0 !important;
  min-height: 118px !important;
  display: grid !important;
  grid-template-rows: 68px auto 22px !important;
  gap: 6px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  background: #fff !important;
  color: #172033 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

#page-digital-human .broll-material-chip > span:first-child {
  min-height: 0 !important;
  height: 68px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(14, 165, 233, .09)) !important;
}

#page-digital-human .broll-material-chip img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#page-digital-human .broll-material-chip b {
  min-width: 0 !important;
  color: #111827 !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human .broll-material-chip em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #eef2f7 !important;
  color: #475467 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

#page-digital-human .broll-material-chip.active {
  border-color: rgba(37, 99, 235, .42) !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .15) !important;
}

#page-digital-human .broll-material-chip.active em {
  color: #fff !important;
  background: linear-gradient(135deg, #2458f3, #0ea5e9) !important;
}

#page-digital-human .broll-material-empty {
  min-height: 180px !important;
  border-radius: 16px !important;
}

#page-digital-human .dh-broll-plan-side {
  padding: 12px !important;
}

#page-digital-human .dh-broll-plan-preview {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, .07) !important;
  background: #fff !important;
  overflow: hidden !important;
}

#page-digital-human .dh-broll-plan-shell {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#page-digital-human .broll-plan-head {
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(14, 165, 233, .08)) !important;
}

#page-digital-human .broll-plan-head b {
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#page-digital-human .broll-plan-head span {
  min-width: 0 !important;
  color: #475467 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human .dh-broll-plan-list {
  min-height: 0 !important;
  overflow: auto !important;
  padding-right: 2px !important;
}

#page-digital-human .broll-plan-row {
  min-width: 0 !important;
  min-height: 64px !important;
  margin: 0 0 8px !important;
  padding: 9px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1.15fr) minmax(128px, .7fr) 66px 66px 42px !important;
  gap: 8px !important;
  align-items: center !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 15px !important;
  background: #f8fafc !important;
}

#page-digital-human .broll-plan-row.is-assigned {
  border-color: rgba(37, 99, 235, .22) !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .07), rgba(14, 165, 233, .05)), #fff !important;
}

#page-digital-human .broll-plan-row.is-disabled {
  opacity: .82 !important;
}

#page-digital-human .broll-plan-row > i {
  width: 30px !important;
  height: 30px !important;
  border-radius: 11px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: linear-gradient(135deg, #2458f3, #0ea5e9) !important;
  font-style: normal !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#page-digital-human .broll-plan-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

#page-digital-human .broll-plan-copy b {
  min-width: 0 !important;
  color: #111827 !important;
  font-size: 13px !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human .broll-plan-copy em {
  color: #667085 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human .broll-plan-control,
#page-digital-human .broll-plan-time {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

#page-digital-human .broll-plan-control small,
#page-digital-human .broll-plan-time small {
  color: #8a94a6 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

#page-digital-human .broll-plan-row select,
#page-digital-human .broll-plan-row input {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 820 !important;
}

#page-digital-human .broll-plan-pending {
  width: 100% !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  border: 1px solid rgba(37, 99, 235, .14) !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(14, 165, 233, .08)) !important;
  color: #1d4ed8 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  white-space: nowrap !important;
}

#page-digital-human .broll-plan-row .btn.tiny {
  width: 42px !important;
  min-width: 42px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

#page-digital-human .dh-broll-plan-skeleton {
  min-height: 0 !important;
  align-content: center !important;
  gap: 10px !important;
  overflow: auto !important;
}

#page-digital-human .dh-broll-plan-skeleton span {
  min-height: 62px !important;
  border-radius: 15px !important;
}

#page-digital-human .dh-broll-empty-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#page-digital-human .dh-broll-empty-actions .btn {
  min-height: 40px !important;
  border-radius: 12px !important;
}

#page-digital-human .dh-broll-actions {
  padding-top: 12px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

@media (max-width: 1120px) {
  #page-digital-human .dh-broll-layout {
    grid-template-columns: 1fr !important;
    overflow: auto !important;
  }

  #page-digital-human .dh-broll-modal {
    overflow: auto !important;
  }
}

@media (max-width: 1280px) {
  #page-digital-human .dh-modal-backdrop.active:has(#dhBrollModal),
  #page-digital-human #dhBrollModal.dh-modal-backdrop.active {
    align-items: flex-start !important;
    padding: 18px !important;
  }

  #page-digital-human .dh-broll-modal {
    width: min(940px, calc(100vw - 36px)) !important;
    max-height: calc(100dvh - 36px) !important;
    padding: 16px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
  }

  #page-digital-human .dh-broll-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  #page-digital-human .dh-broll-source {
    grid-template-rows: auto !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  #page-digital-human .dh-broll-material-panel {
    min-height: 132px !important;
    max-height: 150px !important;
  }

  #page-digital-human .dh-broll-material-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #page-digital-human .broll-material-chip {
    min-height: 86px !important;
    grid-template-rows: 42px auto 18px !important;
    padding: 6px !important;
  }

  #page-digital-human .broll-material-chip > span:first-child {
    height: 42px !important;
  }

  #page-digital-human .dh-broll-plan-side {
    min-height: 0 !important;
  }

  #page-digital-human .dh-broll-plan-preview {
    min-height: 168px !important;
  }

  #page-digital-human .dh-broll-script-field textarea {
    min-height: 72px !important;
    max-height: 78px !important;
  }
}

@media (max-width: 1280px) and (max-height: 620px) {
  #page-digital-human #dhBrollModal.dh-modal-backdrop.active {
    padding: 10px 18px !important;
  }

  #page-digital-human .dh-broll-modal {
    max-height: calc(100dvh - 126px) !important;
    padding: 12px !important;
    gap: 10px !important;
  }

  #page-digital-human .dh-broll-modal .dh-picker-head {
    min-height: 34px !important;
    padding-bottom: 8px !important;
  }

  #page-digital-human .dh-broll-modal .dh-picker-head h2 {
    font-size: 20px !important;
  }

  #page-digital-human .dh-broll-layout {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #page-digital-human .dh-broll-source {
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: 8px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  #page-digital-human .dh-broll-control-card {
    padding: 6px !important;
    gap: 6px !important;
  }

  #page-digital-human .dh-broll-rule-grid {
    gap: 6px !important;
  }

  #page-digital-human .dh-broll-rule-grid .dh-field,
  #page-digital-human .dh-broll-script-field {
    gap: 3px !important;
  }

  #page-digital-human .dh-broll-rule-grid .dh-field b,
  #page-digital-human .dh-broll-script-field b {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  #page-digital-human .dh-broll-rule-grid select {
    height: 28px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
  }

  #page-digital-human .dh-broll-script-field textarea {
    min-height: 38px !important;
    max-height: 42px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #page-digital-human .dh-broll-plan-tools-primary {
    grid-template-columns: 78px 86px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  #page-digital-human .dh-broll-plan-tools-primary .btn,
  #page-digital-human #dhBrollPlanSummary {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  #page-digital-human .dh-broll-material-panel {
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px !important;
    gap: 6px !important;
    grid-template-rows: minmax(42px, 1fr) !important;
  }

  #page-digital-human .dh-broll-local-actions,
  #page-digital-human .dh-broll-filters {
    display: none !important;
  }

  #page-digital-human .broll-material-chip {
    min-height: 68px !important;
    grid-template-rows: 34px auto !important;
  }

  #page-digital-human .broll-material-empty {
    min-height: 40px !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
  }

  #page-digital-human .broll-material-empty b {
    margin: 0 !important;
    font-size: 12px !important;
  }

  #page-digital-human .broll-material-empty span {
    font-size: 11px !important;
  }

  #page-digital-human .broll-material-chip em {
    display: none !important;
  }

  #page-digital-human .broll-material-chip > span:first-child {
    height: 34px !important;
  }

  #page-digital-human .dh-broll-plan-side {
    height: 100% !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  #page-digital-human .dh-broll-plan-preview {
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  #page-digital-human .dh-broll-plan-shell {
    gap: 4px !important;
  }

  #page-digital-human .broll-plan-head {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
  }

  #page-digital-human .broll-plan-head b {
    font-size: 13px !important;
  }

  #page-digital-human .broll-plan-head span {
    font-size: 11px !important;
  }

  #page-digital-human .dh-broll-plan-skeleton span,
  #page-digital-human .broll-plan-row {
    min-height: 34px !important;
  }

  #page-digital-human .broll-plan-row {
    margin: 0 0 4px !important;
    padding: 4px !important;
    gap: 5px !important;
    grid-template-columns: 26px minmax(0, 1fr) minmax(92px, .56fr) 50px 50px 36px !important;
  }

  #page-digital-human .broll-plan-row.is-disabled {
    grid-template-columns: 24px minmax(0, 1fr) 86px !important;
    min-height: 30px !important;
    height: 30px !important;
  }

  #page-digital-human .broll-plan-row.is-disabled .broll-plan-time,
  #page-digital-human .broll-plan-row.is-disabled .btn.tiny {
    display: none !important;
  }

  #page-digital-human .broll-plan-row > i {
    width: 22px !important;
    height: 22px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }

  #page-digital-human .broll-plan-copy b {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  #page-digital-human .broll-plan-copy em {
    display: none !important;
  }

  #page-digital-human .broll-plan-control small,
  #page-digital-human .broll-plan-time small {
    display: none !important;
  }

  #page-digital-human .broll-plan-row select,
  #page-digital-human .broll-plan-row input,
  #page-digital-human .broll-plan-row .btn.tiny {
    height: 22px !important;
    min-height: 22px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }

  #page-digital-human .broll-plan-row.is-disabled select {
    padding: 0 5px !important;
  }

  #page-digital-human .dh-broll-actions {
    padding-top: 8px !important;
  }

  #page-digital-human .dh-broll-empty-actions {
    gap: 6px !important;
  }

  #page-digital-human .dh-broll-empty-actions .btn {
    min-height: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 1180px) {
  #page-digital-human .dhx-board {
    padding: 8px !important;
  }

  #page-digital-human .dhx-layout {
    grid-template-columns: minmax(260px, .78fr) minmax(398px, 1.18fr) minmax(208px, .62fr) !important;
    grid-template-rows: 238px minmax(0, 1fr) !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  #page-digital-human .dhx-copy-panel,
  #page-digital-human .dhx-production-panel,
  #page-digital-human .dhx-edit-panel,
  #page-digital-human .dhx-output-panel {
    min-height: 0 !important;
  }

  #page-digital-human .dhx-copy-panel {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  #page-digital-human .dhx-production-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #page-digital-human .dhx-edit-panel {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #page-digital-human .dhx-output-panel {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
  }

  #page-digital-human .dhx-edit-panel {
    padding: 8px !important;
    overflow: hidden !important;
  }

  #page-digital-human .dhx-edit-grid {
    gap: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0 !important;
  }

  #page-digital-human .dhx-edit-tile {
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 16px !important;
  }

  #page-digital-human .dhx-edit-heading {
    top: 9px !important;
    left: 9px !important;
    right: 46px !important;
    gap: 7px !important;
  }

  #page-digital-human .dhx-edit-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
  }

  #page-digital-human .dhx-edit-heading em {
    max-width: 100% !important;
    padding: 6px 8px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #page-digital-human .dhx-edit-current {
    left: 9px !important;
    right: 9px !important;
    bottom: 9px !important;
    padding: 7px 8px !important;
  }

  #page-digital-human .dhx-edit-current b {
    font-size: 12px !important;
  }

  #page-digital-human .dhx-edit-current small {
    font-size: 10px !important;
  }

  #page-digital-human .dhx-edit-tile > i {
    top: 9px !important;
    right: 9px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  #page-digital-human .dhx-edit-foot {
    grid-template-columns: 1fr !important;
    min-height: 34px !important;
  }

  #page-digital-human .dhx-edit-summary {
    display: none !important;
  }

  #page-digital-human .dhx-cut-btn {
    min-height: 34px !important;
    height: 34px !important;
  }

  #page-digital-human .dhx-production-selects {
    gap: 8px !important;
  }

  #page-digital-human .dhx-pick-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    padding: 8px !important;
  }

  #page-digital-human .dhx-pick-copy b,
  #page-digital-human .dhx-pick-card b {
    font-size: 14px !important;
  }
}

@media (max-width: 1180px) and (max-height: 620px) {
  #page-digital-human .dhx-board {
    height: calc(100vh - 86px) !important;
    min-height: 0 !important;
  }

  #page-digital-human .dhx-layout {
    height: calc(100% - 40px) !important;
    grid-template-rows: 222px minmax(0, 1fr) !important;
  }

  #page-digital-human .dhx-edit-grid {
    grid-template-rows: repeat(2, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  #page-digital-human .dhx-edit-heading {
    top: 7px !important;
    left: 7px !important;
    right: 38px !important;
    gap: 5px !important;
  }

  #page-digital-human .dhx-edit-icon {
    width: 24px !important;
    height: 24px !important;
  }

  #page-digital-human .dhx-edit-heading em {
    padding: 5px 6px !important;
    font-size: 13px !important;
  }

  #page-digital-human .dhx-edit-tile > i {
    top: 7px !important;
    right: 7px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
  }

  #page-digital-human .dhx-edit-current {
    left: 7px !important;
    right: 7px !important;
    bottom: 7px !important;
    padding: 5px 7px !important;
    border-radius: 11px !important;
  }

  #page-digital-human .dhx-edit-current b {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  #page-digital-human .dhx-edit-current small {
    display: none !important;
  }

  #page-digital-human .dhx-edit-foot {
    display: none !important;
  }
}

/* v34: tighten the smart b-roll planner into a real work surface. */
#page-digital-human #dhBrollModal.dh-modal-backdrop.active {
  padding: 16px !important;
  align-items: center !important;
}

#page-digital-human .dh-broll-modal {
  width: min(1180px, calc(100vw - 32px)) !important;
  height: min(760px, calc(100dvh - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 14px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}

#page-digital-human .dh-broll-layout {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-columns: minmax(380px, 0.82fr) minmax(480px, 1fr) !important;
  gap: 14px !important;
}

#page-digital-human .dh-broll-section-title {
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#page-digital-human .dh-broll-section-title b {
  color: #101828 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

#page-digital-human .dh-broll-section-title span {
  min-width: 0 !important;
  max-width: 62% !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #2458f3 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human .dh-broll-section-title.compact {
  min-height: 28px !important;
}

#page-digital-human .dh-broll-section-title.compact span {
  background: transparent !important;
  color: #667085 !important;
  padding: 0 !important;
  max-width: 58% !important;
}

#page-digital-human .dh-broll-source {
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 10px !important;
}

#page-digital-human .dh-broll-control-card {
  gap: 10px !important;
  padding: 12px !important;
}

#page-digital-human .dh-broll-rule-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .96fr) 92px !important;
  gap: 8px !important;
}

#page-digital-human .dh-broll-rule-grid .dh-field b,
#page-digital-human .dh-broll-script-field b {
  font-size: 11px !important;
  color: #344054 !important;
}

#page-digital-human .dh-broll-rule-grid select {
  height: 36px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
}

#page-digital-human .dh-broll-script-field textarea {
  min-height: 86px !important;
  max-height: 104px !important;
  border-radius: 12px !important;
}

#page-digital-human .dh-broll-plan-tools-primary {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#page-digital-human .dh-broll-plan-tools-primary .btn {
  width: 100% !important;
}

#page-digital-human .dh-broll-material-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
}

#page-digital-human .dh-broll-local-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#page-digital-human .dh-broll-material-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#page-digital-human .broll-material-chip {
  min-height: 104px !important;
  grid-template-rows: 56px auto 20px !important;
}

#page-digital-human .broll-material-chip > span:first-child {
  height: 56px !important;
}

#page-digital-human .dh-broll-plan-side {
  padding: 10px !important;
}

#page-digital-human .dh-broll-plan-preview {
  padding: 12px !important;
}

#page-digital-human .broll-plan-head {
  min-height: 40px !important;
  padding: 0 12px !important;
}

#page-digital-human .broll-plan-row {
  min-height: 58px !important;
  grid-template-columns: 28px minmax(0, 1.2fr) minmax(120px, .72fr) 64px 64px 42px !important;
  gap: 7px !important;
  padding: 8px !important;
}

#page-digital-human .broll-plan-row.is-disabled {
  grid-template-columns: 28px minmax(0, 1fr) minmax(112px, .5fr) !important;
}

#page-digital-human .broll-plan-row.is-disabled .broll-plan-time,
#page-digital-human .broll-plan-row.is-disabled .btn.tiny {
  display: none !important;
}

#page-digital-human .dh-broll-empty-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#page-digital-human .dh-broll-actions {
  padding-top: 0 !important;
  min-height: 42px !important;
  align-items: center !important;
}

@media (max-width: 1280px) {
  #page-digital-human #dhBrollModal.dh-modal-backdrop.active {
    padding: 12px !important;
    align-items: center !important;
  }

  #page-digital-human .dh-broll-modal {
    width: min(1040px, calc(100vw - 24px)) !important;
    height: min(720px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  #page-digital-human .dh-broll-layout {
    grid-template-columns: minmax(360px, .8fr) minmax(440px, 1fr) !important;
  }
}

@media (max-width: 1180px) and (max-height: 640px) {
  #page-digital-human #dhBrollModal.dh-modal-backdrop.active {
    padding: 8px !important;
  }

  #page-digital-human .dh-broll-modal {
    width: min(1088px, calc(100vw - 16px)) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 12px !important;
    gap: 8px !important;
    border-radius: 22px !important;
  }

  #page-digital-human .dh-broll-modal .dh-picker-head {
    min-height: 30px !important;
    padding-bottom: 6px !important;
  }

  #page-digital-human .dh-broll-modal .dh-picker-head h2 {
    font-size: 19px !important;
  }

  #page-digital-human .dh-broll-layout {
    grid-template-columns: minmax(360px, .78fr) minmax(410px, 1fr) !important;
    gap: 8px !important;
  }

  #page-digital-human .dh-broll-source,
  #page-digital-human .dh-broll-plan-side {
    padding: 8px !important;
    border-radius: 18px !important;
  }

  #page-digital-human .dh-broll-control-card,
  #page-digital-human .dh-broll-material-panel,
  #page-digital-human .dh-broll-plan-preview {
    border-radius: 15px !important;
  }

  #page-digital-human .dh-broll-source {
    gap: 7px !important;
  }

  #page-digital-human .dh-broll-control-card {
    padding: 8px !important;
    gap: 7px !important;
  }

  #page-digital-human .dh-broll-section-title {
    min-height: 24px !important;
  }

  #page-digital-human .dh-broll-section-title b {
    font-size: 13px !important;
  }

  #page-digital-human .dh-broll-section-title span {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  #page-digital-human .dh-broll-rule-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) 74px !important;
    gap: 6px !important;
  }

  #page-digital-human .dh-broll-rule-grid .dh-field b,
  #page-digital-human .dh-broll-script-field b {
    font-size: 10px !important;
  }

  #page-digital-human .dh-broll-rule-grid select {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  #page-digital-human .dh-broll-script-field textarea {
    min-height: 48px !important;
    max-height: 52px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  #page-digital-human .dh-broll-plan-tools-primary {
    gap: 6px !important;
  }

  #page-digital-human .dh-broll-plan-tools-primary .btn {
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  #page-digital-human .dh-broll-material-panel {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    padding: 8px !important;
    gap: 6px !important;
  }

  #page-digital-human .dh-broll-local-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #page-digital-human .dh-broll-local-actions .dh-mini-btn {
    min-height: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  #page-digital-human .dh-broll-filters {
    display: none !important;
  }

  #page-digital-human .dh-broll-material-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #page-digital-human .broll-material-chip {
    min-height: 62px !important;
    grid-template-rows: 30px auto !important;
    padding: 5px !important;
    gap: 4px !important;
  }

  #page-digital-human .broll-material-chip > span:first-child {
    height: 30px !important;
  }

  #page-digital-human .broll-material-chip em {
    display: none !important;
  }

  #page-digital-human .broll-material-chip b {
    font-size: 10px !important;
  }

  #page-digital-human .broll-material-empty {
    min-height: 54px !important;
    padding: 8px !important;
  }

  #page-digital-human .dh-broll-plan-preview {
    padding: 8px !important;
  }

  #page-digital-human .dh-broll-plan-shell {
    gap: 6px !important;
  }

  #page-digital-human .broll-plan-head {
    min-height: 30px !important;
    padding: 0 9px !important;
  }

  #page-digital-human .broll-plan-head b {
    font-size: 12px !important;
  }

  #page-digital-human .broll-plan-head span {
    font-size: 10px !important;
  }

  #page-digital-human .broll-plan-row {
    min-height: 38px !important;
    grid-template-columns: 22px minmax(0, 1.2fr) minmax(86px, .62fr) 46px 46px 32px !important;
    gap: 5px !important;
    padding: 5px !important;
    margin: 0 0 5px !important;
    border-radius: 12px !important;
  }

  #page-digital-human .broll-plan-row.is-disabled {
    grid-template-columns: 22px minmax(0, 1fr) 78px !important;
  }

  #page-digital-human .broll-plan-row > i {
    width: 20px !important;
    height: 20px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
  }

  #page-digital-human .broll-plan-copy b {
    font-size: 10px !important;
  }

  #page-digital-human .broll-plan-copy em,
  #page-digital-human .broll-plan-control small,
  #page-digital-human .broll-plan-time small {
    display: none !important;
  }

  #page-digital-human .broll-plan-row select,
  #page-digital-human .broll-plan-row input,
  #page-digital-human .broll-plan-row .btn.tiny,
  #page-digital-human .broll-plan-pending {
    height: 24px !important;
    min-height: 24px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    padding: 0 5px !important;
  }

  #page-digital-human .broll-plan-row .btn.tiny {
    width: 32px !important;
    min-width: 32px !important;
  }

  #page-digital-human .dh-broll-empty-actions .btn {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
  }

  #page-digital-human .dh-broll-actions {
    min-height: 34px !important;
    gap: 8px !important;
  }

  #page-digital-human .dh-broll-actions .btn {
    min-height: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }
}

/* v38: production-safe split title/subtitle QA overrides. */
#page-digital-human .dhx-edit-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-edit-tile {
  min-height: 0 !important;
  border-radius: 18px !important;
}

#page-digital-human .dhx-edit-heading {
  top: 9px !important;
  left: 9px !important;
  right: 9px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 7px !important;
}

#page-digital-human .dhx-edit-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
}

#page-digital-human .dhx-edit-heading em {
  max-width: 100% !important;
  padding: 6px 7px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: clamp(12px, .9vw, 15px) !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human .dhx-edit-current {
  left: 9px !important;
  right: 9px !important;
  bottom: 9px !important;
  padding: 7px 8px !important;
  border-radius: 12px !important;
}

#page-digital-human .dhx-edit-current b {
  font-size: clamp(11px, .82vw, 13px) !important;
  line-height: 1.06 !important;
}

#page-digital-human .dhx-edit-current small {
  font-size: 10px !important;
  line-height: 1.16 !important;
}

#page-digital-human .dhx-edit-tile > i {
  display: none !important;
}

#page-digital-human .dh-template-grid {
  align-content: start !important;
}

#page-digital-human .dh-template-card {
  min-height: 128px !important;
}

#page-digital-human .dh-template-card small {
  min-height: 0 !important;
}

#page-digital-human .dh-template-stage {
  min-height: 72px !important;
}

#page-digital-human .dh-template-card.dh-template-off .dh-template-stage {
  background:
    linear-gradient(135deg, rgba(248, 250, 252, .94), rgba(226, 232, 240, .96)) !important;
}

#page-digital-human .dh-template-card.dh-template-off .dh-template-stage b,
#page-digital-human .dh-template-card.dh-template-off .dh-template-off {
  color: #64748b !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

#page-digital-human .dh-template-title.dh-template-business .dh-template-stage b {
  background: transparent !important;
  box-shadow: none !important;
}

#page-digital-human .dh-preview-title.title-business {
  padding: .28em .62em .28em .5em !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #0f172a !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .16) !important;
  text-shadow: none !important;
}

@media (max-width: 1280px) {
  #page-digital-human .dhx-edit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(70px, 1fr)) !important;
    gap: 7px !important;
  }

  #page-digital-human .dhx-edit-heading {
    top: 7px !important;
    left: 7px !important;
    right: 7px !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #page-digital-human .dhx-edit-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
  }

  #page-digital-human .dhx-edit-heading em {
    padding: 5px 6px !important;
    font-size: 13px !important;
  }

  #page-digital-human .dhx-edit-current {
    left: 7px !important;
    right: 7px !important;
    bottom: 7px !important;
    padding: 6px 7px !important;
  }

  #page-digital-human .dhx-edit-current b {
    font-size: 12px !important;
  }

  #page-digital-human .dhx-edit-current small {
    display: none !important;
  }
}

@media (max-width: 1180px) {
  #page-digital-human .dhx-edit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(68px, 1fr)) !important;
  }
}

@media (max-width: 1180px) and (max-height: 640px) {
  #page-digital-human .dhx-edit-grid {
    gap: 5px !important;
  }

  #page-digital-human .dhx-edit-heading {
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  #page-digital-human .dhx-edit-icon {
    width: 22px !important;
    height: 22px !important;
  }

  #page-digital-human .dhx-edit-heading em {
    padding: 4px 5px !important;
    font-size: 11px !important;
  }

  #page-digital-human .dhx-edit-current {
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    padding: 5px 6px !important;
  }

  #page-digital-human .dhx-edit-current b {
    font-size: 10px !important;
  }
}

@media (max-width: 760px) {
  #page-digital-human .dhx-board {
    height: auto !important;
    min-height: calc(100vh - 76px) !important;
    overflow: visible !important;
  }

  #page-digital-human .dhx-layout {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    overflow: visible !important;
  }

  #page-digital-human .dhx-copy-panel,
  #page-digital-human .dhx-production-panel,
  #page-digital-human .dhx-edit-panel,
  #page-digital-human .dhx-output-panel {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 0 !important;
  }

  #page-digital-human .dhx-edit-panel {
    height: auto !important;
    min-height: 444px !important;
    overflow: visible !important;
  }

  #page-digital-human .dhx-edit-grid {
    flex: 0 0 auto !important;
    height: 326px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, 104px) !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  #page-digital-human .dhx-edit-foot {
    flex: 0 0 auto !important;
    margin-top: 8px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #page-digital-human .dhx-output-panel {
    height: auto !important;
    min-height: 560px !important;
  }
}

/* v39 final QA layer: restore visible controls in split editors. */
#page-digital-human #dhSubtitleModal .dh-style-controls-visible .dh-setting-block,
#page-digital-human #dhTitleModal .dh-style-controls-visible .dh-setting-block {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 7px !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header,
#page-digital-human #dhTitleModal .dh-setting-block header {
  min-height: 14px !important;
  height: 14px !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header b,
#page-digital-human #dhTitleModal .dh-setting-block header b {
  font-size: 10px !important;
  line-height: 14px !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-block header span,
#page-digital-human #dhTitleModal .dh-setting-block header span {
  display: none !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls-visible,
#page-digital-human #dhTitleModal .dh-style-controls-visible {
  overflow: visible !important;
}

#page-digital-human #dhTitleModal #dhTitleTextProxy {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
}

#page-digital-human .dhx-phone {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-phone-volume {
  left: 0 !important;
}

#page-digital-human .dhx-phone-power {
  right: 0 !important;
}

@media (max-width: 1280px) {
  #page-digital-human .dhx-phone {
    max-width: 184px !important;
  }
}

@media (max-width: 1180px) and (max-height: 640px) {
  #page-digital-human .dhx-phone {
    max-width: 174px !important;
  }
}

@media (max-width: 900px) {
  #page-digital-human .dh-broll-modal {
    overflow: auto !important;
  }

  #page-digital-human .dh-broll-layout {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }
}

/* v35: premium talking-head title/subtitle editor. */
#page-digital-human #dhSubtitleTitleModal.dh-modal-backdrop.active {
  align-items: center !important;
  padding: 14px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-modal {
  width: min(1180px, calc(100vw - 28px)) !important;
  height: min(760px, calc(100dvh - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-picker-head {
  min-height: 40px !important;
  padding-bottom: 10px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-picker-head h2 {
  font-size: 24px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-modal-layout {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-columns: minmax(500px, .96fr) minmax(430px, .82fr) !important;
  gap: 16px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(260px, 1fr) 154px !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  overflow: auto !important;
  padding: 2px 4px 4px 2px !important;
}

#page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium button {
  min-height: 142px !important;
  padding: 8px !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 7px !important;
  border-radius: 17px !important;
  background: #fff !important;
}

#page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium strong {
  color: #101828 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-card-demo {
  min-height: 92px !important;
  height: 92px !important;
  border-radius: 14px !important;
  padding: 12px !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-card-demo b {
  font-size: 21px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-card-demo i {
  width: max-content !important;
  max-width: 100% !important;
  padding: 3px 7px !important;
  border-radius: 7px !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-card-demo em {
  width: max-content !important;
  max-width: 100% !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(239, 68, 68, .92) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

#page-digital-human .dh-style-card-knowledge {
  background:
    radial-gradient(circle at 84% 14%, rgba(45, 212, 191, .28), transparent 26%),
    linear-gradient(180deg, #061826, #082f49 54%, #0f766e) !important;
}

#page-digital-human .dh-style-card-knowledge b { color: #ecfeff !important; }
#page-digital-human .dh-style-card-knowledge i {
  color: #06202b !important;
  background: #67e8f9 !important;
}

#page-digital-human .dh-style-card-minimal {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .08), transparent 44%),
    linear-gradient(180deg, #ffffff, #f1f5f9) !important;
}

#page-digital-human .dh-style-card-minimal b {
  color: #111827 !important;
  text-shadow: none !important;
}

#page-digital-human .dh-style-card-minimal i {
  color: #111827 !important;
  background: rgba(15, 23, 42, .08) !important;
}

#page-digital-human .dh-style-card-minimal em {
  color: #1d4ed8 !important;
  background: #dbeafe !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible {
  margin: 0 !important;
  height: 154px !important;
  max-height: none !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  background: #fff !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible .dh-setting-block {
  min-width: 0 !important;
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-setting-block header {
  min-height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-setting-block header b {
  color: #101828 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-setting-block header span {
  color: #667085 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-setting-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field,
#page-digital-human #dhSubtitleTitleModal .dh-compact-field {
  gap: 4px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field b {
  color: #667085 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field select,
#page-digital-human #dhSubtitleTitleModal .dh-field input {
  height: 29px !important;
  min-height: 29px !important;
  padding: 0 9px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  background: #f8fafc !important;
  color: #172033 !important;
  font-size: 11px !important;
  font-weight: 820 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-preview-side {
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-preview-side .dh-live-style-preview {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 14px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 6%, rgba(37, 99, 235, .08), transparent 26%),
    #fff !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-phone {
  width: min(320px, 78%) !important;
  max-height: 100% !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 27px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 42px rgba(15, 23, 42, .16) !important;
}

#page-digital-human .dh-preview-layer {
  pointer-events: none !important;
}

#page-digital-human .dh-preview-title,
#page-digital-human .video-editor-title-overlay b {
  font-family: var(--title-preview-font, "PingFang SC", "Microsoft YaHei", sans-serif) !important;
  letter-spacing: 0 !important;
}

#page-digital-human .dh-preview-title {
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  z-index: 6 !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.08 !important;
}

#page-digital-human .dh-preview-title.is-upper { top: 5.2% !important; bottom: auto !important; }
#page-digital-human .dh-preview-title.is-center { top: 43% !important; bottom: auto !important; }
#page-digital-human .dh-preview-title.is-lower { top: auto !important; bottom: 17% !important; }

#page-digital-human .dh-preview-title.title-viral,
#page-digital-human .video-editor-title-overlay.title-viral b {
  color: #fff !important;
  font-weight: 1000 !important;
  text-shadow: 0 3px 0 #020617, 0 0 18px rgba(250, 204, 21, .42) !important;
  -webkit-text-stroke: 1px rgba(2, 6, 23, .85) !important;
}

#page-digital-human .dh-preview-title.title-cover,
#page-digital-human .video-editor-title-overlay.title-cover b {
  padding: .32em .72em !important;
  border-radius: 14px !important;
  color: #111827 !important;
  background: linear-gradient(135deg, #fde68a, #f59e0b) !important;
  box-shadow: 0 10px 22px rgba(2, 6, 23, .20) !important;
  font-weight: 1000 !important;
}

#page-digital-human .dh-preview-title.title-business,
#page-digital-human .video-editor-title-overlay.title-business b,
#page-digital-human .dh-preview-title.title-news,
#page-digital-human .video-editor-title-overlay.title-news b {
  padding: .30em .72em !important;
  border-radius: 12px !important;
  color: #0f172a !important;
  background: rgba(255, 255, 255, .88) !important;
  border-left: 5px solid #2563eb !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .16) !important;
  font-weight: 950 !important;
}

#page-digital-human .dh-preview-title.title-brand,
#page-digital-human .video-editor-title-overlay.title-brand b,
#page-digital-human .dh-preview-title.title-top,
#page-digital-human .video-editor-title-overlay.title-top b {
  padding: .34em .9em !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .92), rgba(79, 70, 229, .92)) !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .22) !important;
  font-weight: 950 !important;
}

#page-digital-human .dh-preview-subtitle {
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  z-index: 7 !important;
  line-height: 1.28 !important;
  text-align: center !important;
  font-weight: 900 !important;
  white-space: pre-line !important;
  letter-spacing: 0 !important;
}

#page-digital-human .dh-preview-subtitle.is-lower { bottom: 7.6% !important; top: auto !important; }
#page-digital-human .dh-preview-subtitle.is-center { top: 56% !important; bottom: auto !important; }
#page-digital-human .dh-preview-subtitle.is-top { top: 18% !important; bottom: auto !important; }

#page-digital-human .dh-preview-subtitle.style-stroke,
#page-digital-human .video-editor-subtitle-overlay.style-stroke {
  color: #fff !important;
  text-shadow: 0 2px 0 #020617, 0 0 8px rgba(2, 6, 23, .55) !important;
  -webkit-text-stroke: .55px rgba(2, 6, 23, .72) !important;
}

#page-digital-human .dh-preview-subtitle.style-brand,
#page-digital-human .video-editor-subtitle-overlay.style-brand {
  padding: .22em .52em !important;
  border-radius: 9px !important;
  color: #111827 !important;
  background: linear-gradient(90deg, #fde047, #fbbf24) !important;
  box-shadow: 0 10px 22px rgba(2, 6, 23, .22) !important;
  text-shadow: none !important;
}

#page-digital-human .dh-preview-subtitle.style-note,
#page-digital-human .video-editor-subtitle-overlay.style-note {
  padding: .38em .7em !important;
  border-radius: 13px !important;
  color: #0f172a !important;
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(37, 99, 235, .22) !important;
  box-shadow: 0 12px 26px rgba(2, 6, 23, .16) !important;
  text-shadow: none !important;
}

#page-digital-human .dh-preview-subtitle.style-clean,
#page-digital-human .video-editor-subtitle-overlay.style-clean,
#page-digital-human .dh-preview-subtitle.style-dualbrand,
#page-digital-human .video-editor-subtitle-overlay.style-dualbrand {
  padding: .28em .65em !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(15, 23, 42, .68) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 10px 22px rgba(2, 6, 23, .18) !important;
}

#page-digital-human .dh-preview-subtitle.style-karaoke,
#page-digital-human .video-editor-subtitle-overlay.style-karaoke {
  padding: .24em .56em !important;
  border-radius: 9px !important;
  color: #04111f !important;
  background: linear-gradient(90deg, #67e8f9 0 55%, rgba(255,255,255,.92) 55% 100%) !important;
  text-shadow: none !important;
  box-shadow: 0 10px 22px rgba(14, 165, 233, .24) !important;
}

#page-digital-human .dh-preview-subtitle.style-news,
#page-digital-human .video-editor-subtitle-overlay.style-news {
  padding: .28em .64em !important;
  border-radius: 4px !important;
  color: #fff !important;
  background: linear-gradient(90deg, #1d4ed8, #0f172a) !important;
  text-shadow: none !important;
}

#page-digital-human .dh-preview-subtitle.style-plain,
#page-digital-human .video-editor-subtitle-overlay.style-plain {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(2, 6, 23, .88), 0 0 12px rgba(2, 6, 23, .42) !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 1180px) and (max-height: 640px) {
  #page-digital-human #dhSubtitleTitleModal.dh-modal-backdrop.active {
    padding: 8px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-modal {
    width: min(1088px, calc(100vw - 16px)) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 12px !important;
    gap: 8px !important;
    border-radius: 22px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-picker-head {
    min-height: 30px !important;
    padding-bottom: 6px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-picker-head h2 {
    font-size: 19px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-modal-layout {
    grid-template-columns: minmax(520px, 1fr) minmax(360px, .7fr) !important;
    gap: 8px !important;
  }

  #page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium button {
    min-height: 112px !important;
    padding: 6px !important;
    border-radius: 13px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-card-demo {
    height: 70px !important;
    min-height: 70px !important;
    padding: 9px !important;
    gap: 3px !important;
    border-radius: 11px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-card-demo b {
    font-size: 17px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-card-demo i {
    font-size: 12px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-card-demo em {
    font-size: 9px !important;
  }

  #page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium strong {
    font-size: 11px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible {
    height: 144px !important;
    padding: 7px !important;
    gap: 8px !important;
    border-radius: 14px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-controls {
    grid-template-rows: minmax(246px, 1fr) 144px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-setting-grid {
    gap: 5px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-setting-block header {
    min-height: 18px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-setting-block header b {
    font-size: 11px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-setting-block header span,
  #page-digital-human #dhSubtitleTitleModal .dh-field b {
    font-size: 9px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-field select,
  #page-digital-human #dhSubtitleTitleModal .dh-field input {
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-preview-side .dh-live-style-preview {
    padding: 8px !important;
    border-radius: 18px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-preview-phone {
    width: min(248px, 82%) !important;
    border-radius: 22px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-modal-actions {
    min-height: 34px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-modal-actions .btn {
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }
}


/* v36: CapCut-style compact title/subtitle editor polish. */
#page-digital-human #dhSubtitleTitleModal .dh-style-modal {
  width: min(1196px, calc(100vw - 28px)) !important;
  height: min(748px, calc(100dvh - 28px)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
  box-shadow: 0 34px 86px rgba(15, 23, 42, .30) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-picker-head {
  border-bottom: 1px solid rgba(15, 23, 42, .07) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-modal-layout {
  grid-template-columns: minmax(570px, .98fr) minmax(390px, .68fr) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls {
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 12px !important;
}

#page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium {
  overflow: hidden !important;
  align-content: stretch !important;
}

#page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium button {
  min-height: 132px !important;
  padding: 8px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .06) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

#page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium button.active {
  border-color: rgba(37, 99, 235, .62) !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .16), inset 0 0 0 2px rgba(37, 99, 235, .18) !important;
}

#page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium button:hover {
  transform: translateY(-1px) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-card-demo {
  position: relative !important;
  height: 86px !important;
  min-height: 86px !important;
  overflow: hidden !important;
  box-shadow: inset 0 -28px 56px rgba(2, 6, 23, .20) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-card-demo::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 10px 12px 10px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.24) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-card-demo b,
#page-digital-human #dhSubtitleTitleModal .dh-style-card-demo i,
#page-digital-human #dhSubtitleTitleModal .dh-style-card-demo em {
  position: relative !important;
  z-index: 1 !important;
}

#page-digital-human .dh-style-card-viral {
  background:
    radial-gradient(circle at 78% 15%, rgba(250, 204, 21, .34), transparent 28%),
    linear-gradient(160deg, #101827 0%, #30123f 54%, #be123c 100%) !important;
}

#page-digital-human .dh-style-card-viral b {
  color: #fff !important;
  text-shadow: 0 3px 0 rgba(2, 6, 23, .92), 0 0 16px rgba(250, 204, 21, .45) !important;
}

#page-digital-human .dh-style-card-sell {
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(250, 204, 21, .95) 12% 88%, transparent 88% 100%),
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(160deg, #141336 0%, #30123f 55%, #7c2d12 100%) !important;
}

#page-digital-human .dh-style-card-knowledge {
  background:
    linear-gradient(90deg, rgba(103,232,249,.95) 0 3px, transparent 3px 100%),
    radial-gradient(circle at 86% 16%, rgba(45, 212, 191, .30), transparent 28%),
    linear-gradient(160deg, #061826, #083344 58%, #115e59) !important;
}

#page-digital-human .dh-style-card-business {
  background:
    linear-gradient(90deg, rgba(37, 99, 235, .94) 0 4px, transparent 4px 100%),
    linear-gradient(180deg, #f8fafc, #e2e8f0) !important;
  box-shadow: inset 0 -36px 58px rgba(15, 23, 42, .07) !important;
}

#page-digital-human .dh-style-card-business b {
  color: #0f172a !important;
  text-shadow: none !important;
}

#page-digital-human .dh-style-card-business i {
  color: #0f172a !important;
  background: rgba(37, 99, 235, .10) !important;
}

#page-digital-human .dh-style-card-karaoke {
  background:
    linear-gradient(90deg, #67e8f9 0 58%, rgba(255,255,255,.88) 58% 100%),
    linear-gradient(160deg, #082f49, #0f172a) !important;
}

#page-digital-human .dh-style-card-karaoke b {
  color: #e0f2fe !important;
  text-shadow: 0 2px 0 rgba(2, 6, 23, .82) !important;
}

#page-digital-human .dh-style-card-minimal {
  background:
    radial-gradient(circle at 86% 18%, rgba(37, 99, 235, .14), transparent 28%),
    linear-gradient(180deg, #ffffff, #edf2f7) !important;
  box-shadow: inset 0 -36px 64px rgba(15, 23, 42, .06) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible {
  height: auto !important;
  min-height: 132px !important;
  max-height: 164px !important;
  grid-template-columns: minmax(245px, .8fr) minmax(330px, 1.15fr) !important;
  gap: 9px !important;
  padding: 9px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06), 0 14px 30px rgba(15, 23, 42, .06) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible .dh-setting-block {
  display: grid !important;
  grid-template-rows: 18px minmax(0, 1fr) !important;
  gap: 6px !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-setting-block header {
  min-height: 18px !important;
  height: 18px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-setting-block header b {
  font-size: 12px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-setting-block header span {
  font-size: 10px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-setting-grid {
  align-content: start !important;
  gap: 5px !important;
  min-height: 0 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-subtitle-setting-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-title-setting-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-subtitle-setting-grid .dh-wide-field,
#page-digital-human #dhSubtitleTitleModal .dh-title-setting-grid .dh-wide-field {
  grid-column: auto !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field,
#page-digital-human #dhSubtitleTitleModal .dh-compact-field {
  display: grid !important;
  grid-template-rows: 12px 26px !important;
  gap: 3px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field b {
  height: 12px !important;
  line-height: 12px !important;
  color: #64748b !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-field select,
#page-digital-human #dhSubtitleTitleModal .dh-field input {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 22px 0 8px !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  border-radius: 9px !important;
  background: #f8fafc !important;
  color: #172033 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 26px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-preview-side .dh-live-style-preview {
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .09), transparent 30%),
    linear-gradient(180deg, #fff, #f8fafc) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-phone {
  width: min(324px, 82%) !important;
  border-radius: 36px !important;
  border: 8px solid #111827 !important;
  background: #020617 !important;
  box-shadow:
    0 28px 60px rgba(15, 23, 42, .28),
    inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-phone::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  z-index: 16 !important;
  width: 82px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: #020617 !important;
  transform: translateX(-50%) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.10) !important;
}

#page-digital-human .dh-preview-title {
  font-size: var(--dh-title-size, 28px) !important;
  padding: 0 !important;
  background: transparent !important;
}

#page-digital-human .dh-preview-subtitle {
  font-size: var(--dh-subtitle-size, 16px) !important;
  max-width: 86% !important;
  margin-inline: auto !important;
}

#page-digital-human .dh-preview-title.title-viral,
#page-digital-human .video-editor-title-overlay.title-viral b {
  color: #fff !important;
  text-shadow:
    0 3px 0 #020617,
    0 5px 14px rgba(2, 6, 23, .72),
    0 0 22px rgba(250, 204, 21, .46) !important;
  -webkit-text-stroke: 1.1px rgba(2, 6, 23, .95) !important;
}

#page-digital-human .dh-preview-title.title-news,
#page-digital-human .video-editor-title-overlay.title-news b {
  justify-content: flex-start !important;
  text-align: left !important;
}

#page-digital-human .dh-preview-title.title-news,
#page-digital-human .video-editor-title-overlay.title-news b,
#page-digital-human .dh-preview-title.title-business,
#page-digital-human .video-editor-title-overlay.title-business b {
  padding: .32em .68em !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  background: rgba(255, 255, 255, .88) !important;
  border-left: 5px solid #2563eb !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .18) !important;
  text-shadow: none !important;
}

#page-digital-human .dh-preview-title.title-cover,
#page-digital-human .video-editor-title-overlay.title-cover b {
  color: #111827 !important;
  background: linear-gradient(90deg, #fef08a, #f59e0b) !important;
  text-shadow: none !important;
}

#page-digital-human .dh-preview-title.title-brand,
#page-digital-human .video-editor-title-overlay.title-brand b {
  padding: .34em .78em !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(15,23,42,.82), rgba(37,99,235,.86)) !important;
}

#page-digital-human .dh-preview-subtitle.style-stroke,
#page-digital-human .video-editor-subtitle-overlay.style-stroke {
  background: transparent !important;
  color: #fff !important;
  text-shadow:
    0 2px 0 #020617,
    0 4px 10px rgba(2, 6, 23, .70),
    0 0 12px rgba(2, 6, 23, .50) !important;
  -webkit-text-stroke: .65px rgba(2, 6, 23, .86) !important;
}

#page-digital-human .dh-preview-subtitle.style-brand,
#page-digital-human .video-editor-subtitle-overlay.style-brand {
  color: #121826 !important;
  background: linear-gradient(90deg, #fde047, #f59e0b) !important;
  box-shadow: 0 12px 24px rgba(2, 6, 23, .24) !important;
}

#page-digital-human .dh-preview-subtitle.style-note,
#page-digital-human .video-editor-subtitle-overlay.style-note {
  color: #0f172a !important;
  background: rgba(255,255,255,.90) !important;
  border-left: 4px solid #06b6d4 !important;
  box-shadow: 0 12px 26px rgba(2, 6, 23, .16) !important;
}

#page-digital-human .dh-preview-subtitle.style-karaoke,
#page-digital-human .video-editor-subtitle-overlay.style-karaoke {
  color: #031827 !important;
  background: linear-gradient(90deg, #67e8f9 0 58%, rgba(255,255,255,.94) 58% 100%) !important;
  box-shadow: 0 12px 24px rgba(14, 165, 233, .28) !important;
}

#page-digital-human .dh-preview-subtitle.style-clean,
#page-digital-human .video-editor-subtitle-overlay.style-clean {
  color: #fff !important;
  background: rgba(15, 23, 42, .58) !important;
  backdrop-filter: blur(10px) !important;
}

@media (max-width: 1180px) and (max-height: 640px) {
  #page-digital-human #dhSubtitleTitleModal .dh-style-modal {
    width: min(1114px, calc(100vw - 16px)) !important;
    height: calc(100dvh - 16px) !important;
    padding: 10px !important;
    gap: 7px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-modal-layout {
    grid-template-columns: minmax(622px, 1fr) minmax(350px, .56fr) !important;
    gap: 8px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-controls {
    grid-template-rows: minmax(0, 1fr) 120px !important;
    gap: 7px !important;
  }

  #page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium button {
    min-height: 102px !important;
    padding: 5px !important;
    gap: 4px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-card-demo {
    height: 64px !important;
    min-height: 64px !important;
    padding: 7px !important;
    gap: 2px !important;
    border-radius: 11px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-card-demo b {
    font-size: 16px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-card-demo i {
    padding: 2px 5px !important;
    font-size: 10.5px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-card-demo em {
    padding: 3px 5px !important;
    font-size: 8.5px !important;
  }

  #page-digital-human #dhFeaturedStyleGrid.dh-featured-style-grid-premium strong {
    font-size: 10.5px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible {
    min-height: 120px !important;
    max-height: 120px !important;
    grid-template-columns: minmax(230px, .76fr) minmax(360px, 1.2fr) !important;
    padding: 7px !important;
    gap: 7px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible .dh-setting-block {
    grid-template-rows: 16px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-setting-block header {
    min-height: 16px !important;
    height: 16px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-setting-block header b {
    font-size: 10px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-setting-block header span {
    display: none !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-setting-grid {
    gap: 4px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-field,
  #page-digital-human #dhSubtitleTitleModal .dh-compact-field {
    grid-template-rows: 10px 22px !important;
    gap: 2px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-field b {
    height: 10px !important;
    line-height: 10px !important;
    font-size: 8px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-field select,
  #page-digital-human #dhSubtitleTitleModal .dh-field input {
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 18px 0 6px !important;
    border-radius: 7px !important;
    font-size: 9px !important;
    line-height: 22px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-preview-side .dh-live-style-preview {
    padding: 6px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-preview-phone {
    width: min(226px, 82%) !important;
    border-width: 6px !important;
    border-radius: 27px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-preview-phone::before {
    top: 6px !important;
    width: 62px !important;
    height: 15px !important;
  }
}

/* v37: split subtitle and title editors with compact commercial template cards. */
#page-digital-human #dhSubtitleModal.dh-modal-backdrop.active,
#page-digital-human #dhTitleModal.dh-modal-backdrop.active {
  align-items: center !important;
  padding: 14px !important;
}

#page-digital-human #dhSubtitleModal .dh-style-modal,
#page-digital-human #dhTitleModal .dh-style-modal {
  width: min(1120px, calc(100vw - 28px)) !important;
  height: min(690px, calc(100dvh - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,250,252,.97)) !important;
  box-shadow: 0 34px 86px rgba(15, 23, 42, .30) !important;
}

#page-digital-human #dhSubtitleModal .dh-picker-head,
#page-digital-human #dhTitleModal .dh-picker-head {
  min-height: 40px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(15, 23, 42, .07) !important;
}

#page-digital-human #dhSubtitleModal .dh-picker-head h2,
#page-digital-human #dhTitleModal .dh-picker-head h2 {
  color: #101828 !important;
  font-size: 24px !important;
  font-weight: 950 !important;
}

#page-digital-human #dhSubtitleModal .dh-style-modal-layout,
#page-digital-human #dhTitleModal .dh-style-modal-layout {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(520px, .98fr) minmax(390px, .72fr) !important;
  gap: 16px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls,
#page-digital-human #dhTitleModal .dh-style-controls {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#page-digital-human .dh-template-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: auto !important;
  padding: 2px 6px 4px 2px !important;
}

#page-digital-human .dh-template-card {
  min-height: 142px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  gap: 7px !important;
  padding: 9px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .06) !important;
  text-align: left !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

#page-digital-human .dh-template-card:hover {
  transform: translateY(-1px) !important;
}

#page-digital-human .dh-template-card.active {
  border-color: rgba(37, 99, 235, .62) !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .16), inset 0 0 0 2px rgba(37, 99, 235, .18) !important;
}

#page-digital-human .dh-template-card strong {
  color: #101828 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

#page-digital-human .dh-template-card small {
  color: #667085 !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
}

#page-digital-human .dh-template-stage {
  position: relative !important;
  min-height: 80px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  padding: 12px !important;
  background:
    radial-gradient(circle at 80% 16%, rgba(96, 165, 250, .16), transparent 28%),
    linear-gradient(160deg, #111827, #1f2937) !important;
}

#page-digital-human .dh-template-stage b {
  max-width: 100% !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

#page-digital-human .dh-template-off {
  color: rgba(255,255,255,.72) !important;
  font-size: 14px !important;
}

#page-digital-human .dh-template-stroke .dh-template-stage b {
  text-shadow: 0 2px 0 #020617, 0 5px 12px rgba(2, 6, 23, .72) !important;
  -webkit-text-stroke: .65px rgba(2, 6, 23, .88) !important;
}

#page-digital-human .dh-template-karaoke .dh-template-stage {
  background: linear-gradient(160deg, #082f49, #0f172a) !important;
}

#page-digital-human .dh-template-karaoke i {
  display: inline-block !important;
  color: rgba(255,255,255,.42) !important;
  font-style: normal !important;
}

#page-digital-human .dh-template-karaoke i.read {
  color: #fff !important;
}

#page-digital-human .dh-template-karaoke i.active {
  color: #facc15 !important;
  transform: translateY(-1px) scale(1.12) !important;
  text-shadow: 0 0 14px rgba(250, 204, 21, .42) !important;
}

#page-digital-human .dh-template-typewriter .dh-template-stage {
  background: linear-gradient(160deg, #0f172a, #312e81) !important;
}

#page-digital-human .dh-template-typewriter i {
  display: inline-block !important;
  font-style: normal !important;
  animation: dhTypePop 1.8s ease-in-out infinite !important;
  animation-delay: calc(var(--i, 0) * 72ms) !important;
}

#page-digital-human .dh-template-keyword .dh-template-stage {
  background: linear-gradient(160deg, #111827, #3b2214) !important;
}

#page-digital-human .dh-template-keyword i {
  display: inline-block !important;
  margin: 0 .08em !important;
  padding: .04em .18em !important;
  border-radius: .28em !important;
  background: #facc15 !important;
  color: #111827 !important;
  font-style: normal !important;
  box-shadow: 0 8px 18px rgba(250, 204, 21, .26) !important;
}

#page-digital-human .dh-template-title.dh-template-business .dh-template-stage {
  place-items: center start !important;
  background: linear-gradient(180deg, #f8fafc, #e2e8f0) !important;
}

#page-digital-human .dh-template-title.dh-template-business .dh-template-stage b {
  padding: .38em .72em !important;
  border-left: 5px solid #2563eb !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.9) !important;
  color: #0f172a !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .14) !important;
  text-align: left !important;
}

#page-digital-human .dh-template-title.dh-template-viral .dh-template-stage b {
  font-size: 22px !important;
  text-shadow: 0 3px 0 #020617, 0 0 20px rgba(250, 204, 21, .34) !important;
  -webkit-text-stroke: .8px rgba(2, 6, 23, .9) !important;
}

#page-digital-human .dh-template-title.dh-template-keyword .dh-template-stage b {
  font-size: 21px !important;
  color: #fff !important;
}

#page-digital-human #dhSubtitleModal .dh-style-controls-visible,
#page-digital-human #dhTitleModal .dh-style-controls-visible {
  min-height: 106px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06), 0 14px 30px rgba(15, 23, 42, .06) !important;
}

#page-digital-human #dhSubtitleModal .dh-setting-grid,
#page-digital-human #dhTitleModal .dh-setting-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#page-digital-human #dhTitleModal .dh-title-setting-grid .dh-wide-field:first-child {
  grid-column: span 3 !important;
}

#page-digital-human #dhSubtitleModal .dh-field,
#page-digital-human #dhTitleModal .dh-field,
#page-digital-human #dhSubtitleModal .dh-compact-field,
#page-digital-human #dhTitleModal .dh-compact-field {
  display: grid !important;
  grid-template-rows: 12px 30px !important;
  gap: 4px !important;
  min-height: 0 !important;
  padding: 0 !important;
}

#page-digital-human #dhSubtitleModal .dh-field b,
#page-digital-human #dhTitleModal .dh-field b {
  height: 12px !important;
  color: #64748b !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 12px !important;
}

#page-digital-human #dhSubtitleModal .dh-field select,
#page-digital-human #dhSubtitleModal .dh-field input,
#page-digital-human #dhTitleModal .dh-field select,
#page-digital-human #dhTitleModal .dh-field input {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 24px 0 9px !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  color: #172033 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

#page-digital-human #dhSubtitleModal .dh-style-preview-side,
#page-digital-human #dhTitleModal .dh-style-preview-side {
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleModal .dh-style-preview-side .dh-live-style-preview,
#page-digital-human #dhTitleModal .dh-style-preview-side .dh-live-style-preview {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 12px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .09), transparent 30%),
    linear-gradient(180deg, #fff, #f8fafc) !important;
}

#page-digital-human #dhSubtitleModal .dh-preview-phone,
#page-digital-human #dhTitleModal .dh-preview-phone {
  position: relative !important;
  width: min(318px, 82%) !important;
  max-height: 100% !important;
  aspect-ratio: 9 / 16 !important;
  overflow: hidden !important;
  border: 8px solid #111827 !important;
  border-radius: 36px !important;
  background: #020617 !important;
  box-shadow: 0 28px 60px rgba(15, 23, 42, .28), inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

#page-digital-human #dhSubtitleModal .dh-preview-phone::before,
#page-digital-human #dhTitleModal .dh-preview-phone::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  z-index: 16 !important;
  width: 82px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: #020617 !important;
  transform: translateX(-50%) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.10) !important;
}

#page-digital-human .dh-preview-subtitle.style-typewriter,
#page-digital-human .video-editor-subtitle-overlay.style-typewriter {
  color: #fff !important;
  text-shadow: 0 2px 0 #020617, 0 4px 10px rgba(2, 6, 23, .72) !important;
  -webkit-text-stroke: .55px rgba(2, 6, 23, .82) !important;
}

#page-digital-human .dh-preview-subtitle.style-keyword,
#page-digital-human .video-editor-subtitle-overlay.style-keyword {
  padding: .28em .62em !important;
  border-radius: 10px !important;
  color: #111827 !important;
  background: linear-gradient(90deg, #fde047, #fbbf24) !important;
  box-shadow: 0 12px 24px rgba(2, 6, 23, .24) !important;
  text-shadow: none !important;
}

#page-digital-human .dh-preview-title.title-keyword,
#page-digital-human .video-editor-title-overlay.title-keyword b {
  color: #fff !important;
  font-weight: 1000 !important;
  text-shadow: 0 3px 0 #020617, 0 0 18px rgba(250, 204, 21, .38) !important;
  -webkit-text-stroke: 1px rgba(2, 6, 23, .92) !important;
}

@keyframes dhTypePop {
  0%, 18%, 100% { opacity: .55; transform: translateY(0) scale(1); }
  8% { opacity: 1; transform: translateY(-2px) scale(1.12); }
}

@media (max-width: 1180px) and (max-height: 640px) {
  #page-digital-human #dhSubtitleModal .dh-style-modal,
  #page-digital-human #dhTitleModal .dh-style-modal {
    width: min(1114px, calc(100vw - 16px)) !important;
    height: calc(100dvh - 16px) !important;
    padding: 10px !important;
    gap: 7px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-style-modal-layout,
  #page-digital-human #dhTitleModal .dh-style-modal-layout {
    grid-template-columns: minmax(590px, 1fr) minmax(340px, .58fr) !important;
    gap: 8px !important;
  }

  #page-digital-human .dh-template-grid {
    gap: 6px !important;
  }

  #page-digital-human .dh-template-card {
    min-height: 104px !important;
    padding: 6px !important;
    border-radius: 14px !important;
    gap: 4px !important;
  }

  #page-digital-human .dh-template-stage {
    min-height: 56px !important;
    padding: 8px !important;
    border-radius: 11px !important;
  }

  #page-digital-human .dh-template-stage b {
    font-size: 14px !important;
  }

  #page-digital-human .dh-template-card strong {
    font-size: 11px !important;
  }

  #page-digital-human .dh-template-card small {
    font-size: 9px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-style-controls-visible,
  #page-digital-human #dhTitleModal .dh-style-controls-visible {
    min-height: 92px !important;
    padding: 7px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-field,
  #page-digital-human #dhTitleModal .dh-field,
  #page-digital-human #dhSubtitleModal .dh-compact-field,
  #page-digital-human #dhTitleModal .dh-compact-field {
    grid-template-rows: 10px 24px !important;
    gap: 2px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-field select,
  #page-digital-human #dhSubtitleModal .dh-field input,
  #page-digital-human #dhTitleModal .dh-field select,
  #page-digital-human #dhTitleModal .dh-field input {
    height: 24px !important;
    min-height: 24px !important;
    font-size: 9px !important;
  }

  #page-digital-human #dhSubtitleModal .dh-preview-phone,
  #page-digital-human #dhTitleModal .dh-preview-phone {
    width: min(226px, 82%) !important;
    border-width: 6px !important;
    border-radius: 27px !important;
  }
}

/* v48 final override: compact four edit modules and combined title/subtitle editor. */
#page-digital-human .dhx-edit-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-edit-tile {
  min-height: 0 !important;
  border-radius: 18px !important;
}

#page-digital-human .dhx-edit-heading {
  top: 9px !important;
  left: 9px !important;
  right: 9px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 7px !important;
}

#page-digital-human .dhx-edit-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
}

#page-digital-human .dhx-edit-heading em {
  max-width: 100% !important;
  padding: 6px 8px !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: clamp(12px, .9vw, 15px) !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human .dhx-edit-current {
  left: 9px !important;
  right: 9px !important;
  bottom: 9px !important;
  padding: 7px 8px !important;
  border-radius: 12px !important;
}

#page-digital-human .dhx-edit-current b {
  font-size: clamp(11px, .82vw, 13px) !important;
  line-height: 1.06 !important;
}

#page-digital-human .dhx-edit-current small {
  font-size: 10px !important;
  line-height: 1.16 !important;
}

#page-digital-human .dhx-edit-tile > i {
  display: none !important;
}

#page-digital-human .dh-template-card.dh-template-off .dh-template-stage {
  background: linear-gradient(135deg, rgba(248, 250, 252, .94), rgba(226, 232, 240, .96)) !important;
}

#page-digital-human .dh-template-card.dh-template-off .dh-template-stage b,
#page-digital-human .dh-template-card.dh-template-off .dh-template-off {
  color: #64748b !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

#page-digital-human .dh-template-title.dh-template-business .dh-template-stage b {
  background: transparent !important;
  box-shadow: none !important;
}

#page-digital-human .dh-preview-title.title-business {
  padding: .28em .62em .28em .5em !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #0f172a !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .16) !important;
  text-shadow: none !important;
}

#page-digital-human #dhSubtitleTitleModal.dh-modal-backdrop.active {
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-combo-text-modal {
  width: min(1160px, calc(100vw - 28px)) !important;
  height: min(720px, calc(100dvh - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-combo-text-layout {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(520px, 1.05fr) minmax(330px, .72fr) !important;
  gap: 16px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: rgba(241, 245, 249, .88) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button.active {
  color: #0f172a !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-panel {
  min-height: 0 !important;
  display: none !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-panel.active {
  display: grid !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-grid {
  min-height: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: auto !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-preview-side {
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-phone {
  width: min(276px, 78%) !important;
  aspect-ratio: 9 / 16 !important;
  border-width: 8px !important;
  border-radius: 34px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-layer {
  pointer-events: auto !important;
}

#page-digital-human .dh-preview-title[data-dh-draggable-text],
#page-digital-human .dh-preview-subtitle[data-dh-draggable-text] {
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: none !important;
  user-select: none !important;
}

#page-digital-human .dh-preview-title.is-custom {
  left: var(--dh-title-x) !important;
  right: auto !important;
  top: var(--dh-title-y) !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: 84% !important;
  transform: translate(-50%, -50%) !important;
}

#page-digital-human .dh-preview-subtitle.is-custom {
  left: var(--dh-subtitle-x) !important;
  right: auto !important;
  top: var(--dh-subtitle-y) !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: 84% !important;
  transform: translate(-50%, -50%) !important;
}

#page-digital-human .dh-template-typewriter i,
#page-digital-human .dh-preview-subtitle.style-typewriter i {
  display: inline-block !important;
  opacity: .18 !important;
  transform: translateY(8px) scale(.84) !important;
  animation-name: dhTypePopV48 !important;
  animation-duration: 1.45s !important;
  animation-timing-function: cubic-bezier(.2, .85, .2, 1) !important;
  animation-iteration-count: infinite !important;
  animation-delay: calc(var(--i, 0) * 90ms) !important;
}

@media (max-width: 1280px) {
  #page-digital-human .dhx-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(72px, 1fr)) !important;
    gap: 7px !important;
  }

  #page-digital-human .dhx-edit-heading {
    top: 7px !important;
    left: 7px !important;
    right: 7px !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #page-digital-human .dhx-edit-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
  }

  #page-digital-human .dhx-edit-heading em {
    padding: 5px 7px !important;
    font-size: 13px !important;
  }

  #page-digital-human .dhx-edit-current {
    left: 7px !important;
    right: 7px !important;
    bottom: 7px !important;
    padding: 6px 7px !important;
  }

  #page-digital-human .dhx-edit-current b {
    font-size: 12px !important;
  }

  #page-digital-human .dhx-edit-current small {
    display: none !important;
  }

  #page-digital-human .dhx-output-panel {
    gap: 5px !important;
  }

  #page-digital-human .dhx-phone {
    max-width: 188px !important;
  }
}

@media (max-width: 1180px) {
  #page-digital-human .dhx-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(72px, 1fr)) !important;
  }
}

@media (max-width: 1180px) and (max-height: 640px) {
  #page-digital-human .dhx-edit-grid {
    gap: 5px !important;
  }

  #page-digital-human .dhx-edit-heading {
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  #page-digital-human .dhx-edit-icon {
    width: 22px !important;
    height: 22px !important;
  }

  #page-digital-human .dhx-edit-heading em {
    padding: 4px 6px !important;
    font-size: 11px !important;
  }

  #page-digital-human .dhx-edit-current {
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    padding: 5px 6px !important;
  }

  #page-digital-human .dhx-edit-current b {
    font-size: 10px !important;
  }

  #page-digital-human .dhx-output-panel .dhx-panel-head {
    flex-basis: 26px !important;
    margin-bottom: 2px !important;
  }

  #page-digital-human .dhx-phone {
    max-width: 178px !important;
  }

  #page-digital-human .dhx-audio-mount,
  #page-digital-human .dhx-audio-state,
  #page-digital-human .dhx-audio-player {
    min-height: 56px !important;
    max-height: 56px !important;
    height: 56px !important;
  }
}

@media (max-width: 760px) {
  #page-digital-human .dhx-board {
    height: auto !important;
    min-height: calc(100vh - 76px) !important;
    overflow: visible !important;
  }

  #page-digital-human .dhx-layout {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    overflow: visible !important;
  }

  #page-digital-human .dhx-copy-panel,
  #page-digital-human .dhx-production-panel,
  #page-digital-human .dhx-edit-panel,
  #page-digital-human .dhx-output-panel {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 0 !important;
  }

  #page-digital-human .dhx-edit-panel {
    height: auto !important;
    min-height: 444px !important;
    overflow: visible !important;
  }

  #page-digital-human .dhx-edit-grid {
    flex: 0 0 auto !important;
    height: 220px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 104px) !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  #page-digital-human .dhx-edit-foot {
    flex: 0 0 auto !important;
    margin-top: 8px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #page-digital-human .dhx-output-panel {
    height: auto !important;
    min-height: 560px !important;
  }
}

/* v49 EOF lock: readable controls inside the combined title/subtitle modal. */
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-style-controls-visible {
  min-height: 184px !important;
  padding: 10px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 16px !important;
  background: rgba(248, 250, 252, .96) !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-setting-grid,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-title-setting-grid,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-subtitle-setting-grid {
  display: grid !important;
  width: 100% !important;
  height: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 52px !important;
  gap: 8px !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-subtitle-setting-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-title-setting-grid .dh-wide-field:first-child {
  grid-column: 1 / -1 !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-title-setting-grid .dh-wide-field:not(:first-child),
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-subtitle-setting-grid .dh-wide-field {
  grid-column: auto !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-compact-field {
  display: block !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: none !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
  color: #0f172a !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field b {
  display: block !important;
  margin: 0 0 5px !important;
  color: #64748b !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field select,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field input {
  display: block !important;
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 28px !important;
  font-weight: 850 !important;
  outline: none !important;
}

/* v50 EOF lock: restore the post-edit module cards to the approved 2x2 large layout. */
#page-digital-human .dhx-edit-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-edit-tile {
  min-height: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .16) !important;
}

#page-digital-human .dhx-edit-heading {
  top: 13px !important;
  left: 13px !important;
  right: 68px !important;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 9px !important;
}

#page-digital-human .dhx-edit-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
}

#page-digital-human .dhx-edit-heading em {
  max-width: 100% !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: clamp(18px, 1.25vw, 22px) !important;
  line-height: 1.05 !important;
  font-weight: 940 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human .dhx-edit-current {
  left: 13px !important;
  right: 13px !important;
  bottom: 12px !important;
  gap: 4px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
}

#page-digital-human .dhx-edit-current b {
  font-size: clamp(14px, .95vw, 16px) !important;
  line-height: 1.12 !important;
}

#page-digital-human .dhx-edit-current small {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.18 !important;
}

#page-digital-human .dhx-edit-tile > i {
  display: inline-flex !important;
  top: 12px !important;
  right: 12px !important;
  height: 28px !important;
  padding: 0 10px !important;
  align-items: center !important;
  font-size: 12px !important;
}

@media (max-width: 1180px) {
  #page-digital-human .dhx-edit-heading {
    top: 10px !important;
    left: 10px !important;
    right: 58px !important;
    gap: 7px !important;
  }

  #page-digital-human .dhx-edit-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 12px !important;
  }

  #page-digital-human .dhx-edit-heading em {
    padding: 6px 8px !important;
    font-size: 16px !important;
  }

  #page-digital-human .dhx-edit-current {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    padding: 8px 10px !important;
  }
}

@media (max-width: 760px) {
  #page-digital-human .dhx-edit-grid {
    height: 220px !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 104px) !important;
    gap: 7px !important;
  }
}

/* v51 EOF lock: split title/subtitle editing inside one compact commercial modal. */
#page-digital-human #dhSubtitleTitleModal.dh-modal-backdrop.active {
  padding: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-combo-text-modal {
  width: min(1100px, calc(100vw - 32px)) !important;
  height: min(660px, calc(100dvh - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  display: grid !important;
  grid-template-rows: 58px minmax(0, 1fr) 56px !important;
  gap: 12px !important;
  padding: 16px 18px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-picker-head {
  min-height: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-picker-head h2 {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-combo-text-layout {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(610px, 1fr) minmax(260px, 330px) !important;
  gap: 16px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 62px minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs {
  height: 62px !important;
  min-height: 62px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 62px !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fff, #f8fafc) !important;
  color: #334155 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
  font-size: 0 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button::before {
  content: "" !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, .95), rgba(37, 99, 235, .95)),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .65), transparent 42%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 18px rgba(37, 99, 235, .22) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button[data-dh-text-tab="title"]::before {
  background:
    linear-gradient(135deg, rgba(245, 158, 11, .98), rgba(236, 72, 153, .94)),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .62), transparent 42%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 18px rgba(236, 72, 153, .18) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button b {
  display: block !important;
  color: inherit !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button span {
  display: block !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button.active {
  border-color: rgba(37, 99, 235, .55) !important;
  background: linear-gradient(180deg, #eff6ff, #fff) !important;
  color: #0f172a !important;
  box-shadow: 0 16px 32px rgba(37, 99, 235, .15) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button.active::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: -1px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #2563eb, #06b6d4) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-panel {
  min-height: 0 !important;
  height: 100% !important;
  display: none !important;
  grid-template-rows: minmax(172px, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-text-panel.active {
  display: grid !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="title"] {
  grid-template-rows: minmax(138px, 1fr) 172px !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="title"] .dh-style-controls-visible {
  min-height: 172px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-grid {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(96px, 1fr) !important;
  gap: 9px !important;
  overflow-y: auto !important;
  padding: 1px 4px 1px 1px !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="title"] .dh-template-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(116px, 1fr) !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="title"] .dh-template-card {
  min-height: 116px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-card {
  min-height: 96px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06) !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-card.active {
  border-color: rgba(37, 99, 235, .55) !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, .13) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-stage {
  flex: 0 0 42px !important;
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-stage b {
  max-width: 100% !important;
  transform: scale(.9) !important;
  transform-origin: center !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-card strong {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-card small {
  flex: 0 0 auto !important;
  display: block !important;
  color: #64748b !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-style-controls-visible {
  min-height: 128px !important;
  height: auto !important;
  padding: 9px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(255, 255, 255, .98)) !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-setting-grid,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-title-setting-grid,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-subtitle-setting-grid {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 48px !important;
  gap: 7px !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-title-setting-grid .dh-wide-field:first-child {
  grid-column: 1 / -1 !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-title-setting-grid .dh-wide-field:not(:first-child),
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-subtitle-setting-grid .dh-wide-field {
  grid-column: auto !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-compact-field {
  display: grid !important;
  grid-template-rows: 11px 24px !important;
  align-content: center !important;
  gap: 3px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field b {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 10px !important;
  line-height: 11px !important;
  font-weight: 900 !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field select,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field input {
  height: 25px !important;
  min-height: 25px !important;
  line-height: 25px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-preview-side {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 14%, rgba(59, 130, 246, .15), transparent 34%),
    linear-gradient(180deg, #0f172a, #111827) !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-live-style-preview {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-phone {
  width: min(210px, 76%) !important;
  max-width: 210px !important;
  height: auto !important;
  max-height: calc(100% - 6px) !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 30px !important;
  border: 7px solid #05070b !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .28),
    0 28px 56px rgba(0, 0, 0, .42) !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-phone::before {
  width: 68px !important;
  height: 15px !important;
  top: 7px !important;
  border-radius: 999px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-modal-actions {
  min-height: 0 !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 0 !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-modal-actions .btn {
  min-width: 112px !important;
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

@media (max-width: 1280px), (max-height: 760px) {
  #page-digital-human #dhSubtitleTitleModal.dh-modal-backdrop.active {
    padding: 10px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-combo-text-modal {
    width: min(1040px, calc(100vw - 20px)) !important;
    height: min(624px, calc(100dvh - 20px)) !important;
    grid-template-rows: 46px minmax(0, 1fr) 48px !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-picker-head h2 {
    font-size: 19px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-combo-text-layout {
    grid-template-columns: minmax(520px, 1fr) minmax(210px, 260px) !important;
    gap: 10px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-controls {
    grid-template-rows: 52px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs,
  #page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button {
    height: 52px !important;
    min-height: 52px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button::before {
    width: 26px !important;
    height: 26px !important;
    border-radius: 10px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button b {
    font-size: 16px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-text-mode-tabs button span {
    font-size: 12px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-template-grid {
    grid-auto-rows: minmax(84px, 1fr) !important;
    gap: 7px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-template-card {
    min-height: 84px !important;
    padding: 7px 8px !important;
    border-radius: 14px !important;
    gap: 4px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="title"] .dh-template-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(116px, 1fr) !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="title"] .dh-template-card {
    min-height: 116px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-template-stage {
    flex-basis: 30px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-template-card strong {
    font-size: 13px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-template-card small {
    font-size: 10px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-style-controls-visible {
    min-height: 108px !important;
    padding: 7px !important;
    border-radius: 15px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="title"] {
    grid-template-rows: minmax(126px, 1fr) 162px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="title"] .dh-style-controls-visible {
    min-height: 162px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-setting-grid,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-title-setting-grid,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-subtitle-setting-grid {
    grid-auto-rows: 44px !important;
    gap: 6px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-compact-field {
    grid-template-rows: 10px 22px !important;
    gap: 2px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 5px 8px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field select,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field input {
    height: 22px !important;
    min-height: 22px !important;
    line-height: 22px !important;
    font-size: 12px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-style-preview-side {
    padding: 8px !important;
    border-radius: 18px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-preview-phone {
    width: min(174px, 82%) !important;
    max-width: 174px !important;
    border-width: 6px !important;
    border-radius: 26px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-modal-actions {
    height: 48px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-modal-actions .btn {
    min-width: 104px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
}

/* v52 EOF lock: clean subtitle preview and make subtitle controls readable. */
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-stroke,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-karaoke,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-typewriter,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-keyword,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-clean,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-brand,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-note {
  width: auto !important;
  min-width: 0 !important;
  max-width: 84% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: #fff !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  -webkit-text-stroke: .55px rgba(2, 6, 23, .88) !important;
  text-shadow:
    0 1px 0 #020617,
    0 3px 8px rgba(2, 6, 23, .78),
    0 0 14px rgba(2, 6, 23, .55) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-karaoke i,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-typewriter i,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-keyword i {
  display: inline-block !important;
  margin: 0 .03em !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-style: normal !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-karaoke i {
  color: rgba(255, 255, 255, .72) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-karaoke i.read {
  color: #fff !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-karaoke i.active,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-keyword i {
  color: #facc15 !important;
  transform: translateY(-1px) scale(1.08) !important;
  -webkit-text-stroke: .35px rgba(2, 6, 23, .88) !important;
  text-shadow:
    0 1px 0 #020617,
    0 3px 8px rgba(2, 6, 23, .68),
    0 0 14px rgba(250, 204, 21, .58) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-typewriter i {
  color: #fff !important;
  opacity: .72 !important;
  transform: translateY(7px) scale(.88) !important;
  animation-name: dhTypePopV48 !important;
  animation-duration: 1.45s !important;
  animation-timing-function: cubic-bezier(.2, .85, .2, 1) !important;
  animation-iteration-count: infinite !important;
  animation-delay: calc(var(--i, 0) * 90ms) !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] {
  grid-template-rows: minmax(250px, 1fr) 78px !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-style-controls-visible {
  min-height: 78px !important;
  height: 78px !important;
  padding: 10px 8px !important;
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-subtitle-setting-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 54px !important;
  gap: 8px !important;
  align-content: start !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-compact-field,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-wide-field {
  grid-column: auto !important;
  height: 54px !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(100, 116, 139, .28) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fff, #f8fafc) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 6px 14px rgba(15, 23, 42, .04) !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field b {
  display: block !important;
  flex: 0 0 auto !important;
  color: #2563eb !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field select,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field input {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  line-height: 34px !important;
  padding-right: 22px !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  opacity: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #475569 50%),
    linear-gradient(135deg, #475569 50%, transparent 50%) !important;
  background-position:
    calc(100% - 12px) 50%,
    calc(100% - 7px) 50% !important;
  background-repeat: no-repeat !important;
  background-size: 5px 5px, 5px 5px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-card.dh-template-typewriter .dh-template-stage b,
#page-digital-human #dhSubtitleTitleModal .dh-template-card.dh-template-typewriter .dh-template-typewriter {
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 0 rgba(2, 6, 23, .9), 0 0 14px rgba(99, 102, 241, .45) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-card.dh-template-typewriter .dh-template-typewriter i {
  color: #fff !important;
  opacity: .72 !important;
  transform: translateY(6px) scale(.9) !important;
}

@media (max-width: 1280px), (max-height: 760px) {
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] {
    grid-template-rows: minmax(238px, 1fr) 76px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-style-controls-visible {
    min-height: 76px !important;
    height: 76px !important;
    padding: 10px 7px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-subtitle-setting-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 52px !important;
    gap: 7px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-compact-field,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-wide-field {
    height: 52px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 9px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field select,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field input {
    height: 32px !important;
    min-height: 32px !important;
    line-height: 32px !important;
    font-size: 14px !important;
  }
}

/* v52.1 EOF lock: transparent subtitle overlays and readable native-select facades. */
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-stroke,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-karaoke,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-typewriter,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-keyword,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-clean,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-brand,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-note,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-news,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-plain,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-dualbrand {
  width: max-content !important;
  min-width: 0 !important;
  max-width: 86% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: #fff !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  -webkit-text-stroke: .55px rgba(2, 6, 23, .9) !important;
  text-shadow:
    0 1px 0 #020617,
    0 3px 8px rgba(2, 6, 23, .78),
    0 0 14px rgba(2, 6, 23, .56) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-karaoke i,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-typewriter i,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-keyword i {
  display: inline-block !important;
  margin: 0 .03em !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-style: normal !important;
  -webkit-text-stroke: inherit !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-karaoke i {
  color: rgba(255, 255, 255, .55) !important;
  transform: none !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-karaoke i.read {
  color: #fff !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-karaoke i.active,
#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-keyword i {
  color: #facc15 !important;
  transform: translateY(-1px) scale(1.08) !important;
  text-shadow:
    0 1px 0 #020617,
    0 3px 8px rgba(2, 6, 23, .68),
    0 0 14px rgba(250, 204, 21, .58) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-typewriter i {
  color: #fff !important;
  opacity: .42 !important;
  transform: translateY(5px) scale(.92) !important;
  animation-name: dhTypePopV48 !important;
  animation-duration: 1.35s !important;
  animation-timing-function: cubic-bezier(.2, .85, .2, 1) !important;
  animation-iteration-count: infinite !important;
  animation-delay: calc(var(--i, 0) * 84ms) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-typewriter::after {
  background: #22d3ee !important;
  box-shadow: 0 0 10px rgba(34, 211, 238, .72) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-subtitle-setting-grid,
#page-digital-human #dhSubtitleTitleModal .dh-title-setting-grid {
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-select-field {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 14px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(100, 116, 139, .24) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(15, 23, 42, .05) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-select-field::after {
  content: "" !important;
  justify-self: end !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid #64748b !important;
  border-bottom: 2px solid #64748b !important;
  transform: translateY(-2px) rotate(45deg) !important;
  pointer-events: none !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-select-field b {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  color: #2563eb !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-control-value {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  color: #0f172a !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-select-field select {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  opacity: .001 !important;
  cursor: pointer !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-select-field select:focus-visible {
  outline: 2px solid rgba(37, 99, 235, .45) !important;
  outline-offset: -2px !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-card.dh-template-typewriter .dh-template-stage b,
#page-digital-human #dhSubtitleTitleModal .dh-template-card.dh-template-typewriter .dh-template-typewriter {
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 0 rgba(2, 6, 23, .92), 0 0 16px rgba(34, 211, 238, .48) !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-template-card.dh-template-typewriter .dh-template-typewriter i {
  color: #fff !important;
  opacity: .5 !important;
}

@media (max-width: 1280px), (max-height: 760px) {
  #page-digital-human #dhSubtitleTitleModal .dh-select-field {
    min-height: 50px !important;
    height: 50px !important;
    gap: 7px !important;
    padding: 0 9px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-select-field b {
    font-size: 11px !important;
  }

  #page-digital-human #dhSubtitleTitleModal .dh-control-value {
    font-size: 14px !important;
  }
}

/* v52.2 EOF lock: out-rank legacy field rules so the clear value layer is the only visible control text. */
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field.dh-select-field,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field.dh-select-field,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-compact-field.dh-select-field,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-wide-field.dh-select-field,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="title"] .dh-field.dh-select-field {
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 14px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 11px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field.dh-select-field b,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field.dh-select-field b {
  grid-column: 1 !important;
  grid-row: 1 !important;
  z-index: 1 !important;
  display: block !important;
  margin: 0 !important;
  color: #2563eb !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field.dh-select-field .dh-control-value,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field.dh-select-field .dh-control-value {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  opacity: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field.dh-select-field select,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field.dh-select-field select,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="title"] .dh-field.dh-select-field select {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: .001 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field.dh-select-field::after,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field.dh-select-field::after {
  grid-column: 3 !important;
  grid-row: 1 !important;
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid #64748b !important;
  border-bottom: 2px solid #64748b !important;
  transform: translateY(-2px) rotate(45deg) !important;
}

@keyframes dhTypePopReadable {
  0%, 100% {
    opacity: .7;
    transform: translateY(3px) scale(.96);
  }
  42% {
    opacity: 1;
    transform: translateY(-2px) scale(1.08);
  }
}

#page-digital-human #dhSubtitleTitleModal .dh-preview-subtitle.style-typewriter i,
#page-digital-human #dhSubtitleTitleModal .dh-template-card.dh-template-typewriter .dh-template-typewriter i {
  animation-name: dhTypePopReadable !important;
  animation-duration: 1.28s !important;
  opacity: .78 !important;
}

@media (max-width: 1280px), (max-height: 760px) {
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field.dh-select-field,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field.dh-select-field,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-compact-field.dh-select-field,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-wide-field.dh-select-field,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="title"] .dh-field.dh-select-field {
    height: 50px !important;
    min-height: 50px !important;
    gap: 7px !important;
    padding: 0 9px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field.dh-select-field b,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field.dh-select-field b {
    font-size: 11px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel] .dh-field.dh-select-field .dh-control-value,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field.dh-select-field .dh-control-value {
    font-size: 14px !important;
  }
}

/* v52.3 EOF lock: give subtitle controls real room instead of compressing four selects into one strip. */
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] {
  grid-template-rows: minmax(220px, 1fr) 118px !important;
  gap: 10px !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-template-grid {
  grid-auto-rows: minmax(78px, 1fr) !important;
  gap: 8px !important;
  padding: 1px 5px 4px 1px !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-template-card {
  min-height: 78px !important;
  padding: 7px 9px !important;
  gap: 3px !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-template-stage {
  flex: 0 0 30px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-template-card strong {
  font-size: 13px !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-template-card small {
  font-size: 10px !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-style-controls-visible {
  min-height: 118px !important;
  height: 118px !important;
  padding: 9px !important;
  overflow: hidden !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-subtitle-setting-grid {
  height: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, 47px) !important;
  grid-auto-rows: 47px !important;
  gap: 8px !important;
  align-content: center !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field.dh-select-field,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-compact-field.dh-select-field,
#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-wide-field.dh-select-field {
  height: 47px !important;
  min-height: 47px !important;
  grid-template-columns: 30px minmax(0, 1fr) 14px !important;
  gap: 10px !important;
  padding: 0 13px !important;
  border-radius: 13px !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field.dh-select-field b {
  font-size: 12px !important;
}

#page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field.dh-select-field .dh-control-value {
  font-size: 15px !important;
}

@media (max-width: 1280px), (max-height: 760px) {
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] {
    grid-template-rows: minmax(204px, 1fr) 112px !important;
    gap: 8px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-template-grid {
    grid-auto-rows: minmax(72px, 1fr) !important;
    gap: 7px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-template-card {
    min-height: 72px !important;
    padding: 6px 8px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-template-stage {
    flex-basis: 28px !important;
    min-height: 28px !important;
    height: 28px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-style-controls-visible {
    min-height: 112px !important;
    height: 112px !important;
    padding: 8px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-subtitle-setting-grid {
    grid-template-rows: repeat(2, 45px) !important;
    grid-auto-rows: 45px !important;
    gap: 7px !important;
  }

  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-field.dh-select-field,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-compact-field.dh-select-field,
  #page-digital-human #dhSubtitleTitleModal [data-dh-text-panel="subtitle"] .dh-wide-field.dh-select-field {
    height: 45px !important;
    min-height: 45px !important;
    gap: 8px !important;
    padding: 0 11px !important;
  }
}

/* v52.4 EOF lock: subtitle/title setting blocks in the combined modal have no header, so do not reserve a phantom row. */
#page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible .dh-setting-block.dh-subtitle-settings,
#page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible .dh-setting-block.dh-title-settings,
#page-digital-human #dhSubtitleTitleModal .dh-subtitle-settings,
#page-digital-human #dhSubtitleTitleModal .dh-title-settings {
  display: block !important;
  grid-template-rows: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

#page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible .dh-setting-block.dh-subtitle-settings .dh-subtitle-setting-grid,
#page-digital-human #dhSubtitleTitleModal .dh-style-controls-visible .dh-setting-block.dh-title-settings .dh-title-setting-grid {
  height: 100% !important;
  min-height: 0 !important;
}

/* v53.1 EOF lock: copywriting feedback and generation overlay must stay visible after legacy modal/style locks. */
#page-digital-human .dhx-copy-pane {
  height: calc(100% - 40px) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto 72px minmax(148px, 1fr) 40px !important;
  gap: 8px !important;
  align-content: stretch !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-copy-status {
  min-height: 64px !important;
  max-height: 72px !important;
  overflow: hidden !important;
}

#page-digital-human .dhx-script {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

#page-digital-human .dhx-script textarea {
  min-height: 0 !important;
  height: 100% !important;
  line-height: 1.55 !important;
}

#page-digital-human .dhx-action-line {
  margin-top: 0 !important;
  align-self: end !important;
}

#page-digital-human .dhx-action-line .dhx-btn {
  width: 100% !important;
}

#page-digital-human .dh-generation-mark {
  font-size: 0 !important;
}

#page-digital-human .dh-generation-overlay.is-copy .dh-generation-mark {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .35), transparent 30%),
    linear-gradient(135deg, #4f46e5, #06b6d4) !important;
}