/* Purple manual creation refinement. Scoped to the creation view only. */
body.studio-manual-mode #appPanel #studioView {
  --create-ref-bg: #f3f5f9;
  --create-ref-card: #ffffff;
  --create-ref-surface: #f7f8fb;
  --create-ref-line: #ecedf2;
  --create-ref-text: #1c1d22;
  --create-ref-dim: #8a8c96;
  --create-ref-purple: #8c5cff;
  --create-ref-purple-soft: #f1edff;
  position: relative !important;
  width: calc(100% + 20px) !important;
  max-width: calc(100% + 20px) !important;
  margin: 0 -10px !important;
  padding: 16px 12px 108px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  background: var(--create-ref-bg) !important;
}

body.studio-manual-mode #appPanel #studioView .studio-mode-switch {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 18px 8px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  background: linear-gradient(150deg, #765cff 0%, #994dff 47%, #c14fdf 100%) !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: none !important;
}

body.studio-manual-mode #appPanel #studioView .studio-mode-switch::before {
  content: "";
  position: absolute;
  top: -44px;
  right: 24px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

body.studio-manual-mode #appPanel #studioView .studio-mode-switch :is(#switchAgentCreateBtn, #switchManualCreateBtn) {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 50% !important;
  width: auto !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 40px !important;
}

body.studio-manual-mode #appPanel #studioView .studio-mode-switch #switchManualCreateBtn {
  border-left: 0 !important;
}

body.studio-manual-mode #appPanel #studioView .studio-mode-switch :is(#switchAgentCreateBtn, #switchManualCreateBtn).active {
  background: #ffffff !important;
  color: #7b5cff !important;
  -webkit-text-fill-color: #7b5cff !important;
  box-shadow: 0 3px 10px rgba(55, 28, 126, 0.14) !important;
}

body.studio-manual-mode #appPanel #studioView .ai-generation-disclosure {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 4px 18px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(150deg, #765cff 0%, #994dff 47%, #c14fdf 100%) !important;
  box-shadow: none !important;
}

body.studio-manual-mode #appPanel #studioView .ai-generation-disclosure-dot {
  width: 5px !important;
  height: 5px !important;
  flex: 0 0 5px !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

body.studio-manual-mode #appPanel #studioView .ai-generation-disclosure span {
  color: rgba(255, 255, 255, 0.82) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

body.studio-manual-mode #appPanel #studioView #personForm.manual-create-panel {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.studio-manual-mode #appPanel #studioView #personForm.manual-create-panel.hidden {
  display: none !important;
}

body.studio-manual-mode #appPanel #studioView .manual-create-panel .prompt-block {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 18px 20px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 0 22px 22px !important;
  background: var(--create-ref-card) !important;
  box-shadow: 0 5px 18px rgba(20, 20, 30, 0.05) !important;
}

body.studio-manual-mode #appPanel #studioView .manual-create-panel .prompt-block::before,
body.studio-manual-mode #appPanel #studioView .manual-create-panel .prompt-block::after {
  display: none !important;
}

body.studio-manual-mode #appPanel #studioView .manual-create-panel .prompt-block > .section-title {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: calc(100% + 36px) !important;
  min-height: 66px !important;
  margin: 0 -18px 16px !important;
  padding: 7px 18px 17px !important;
  border: 0 !important;
  background: linear-gradient(150deg, #765cff 0%, #994dff 47%, #c14fdf 100%) !important;
}

body.studio-manual-mode #appPanel #studioView .manual-create-panel .prompt-block > .section-title::after {
  display: none !important;
}

body.studio-manual-mode #appPanel #studioView .manual-create-panel .prompt-block > .section-title h3 {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body.studio-manual-mode #appPanel #studioView .prompt-title-actions {
  position: static !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  margin-left: 10px !important;
}

body.studio-manual-mode #appPanel #studioView .prompt-title-actions .studio-model-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

body.studio-manual-mode #appPanel #studioView .prompt-title-actions .studio-model-trigger :is(.studio-model-name, .duration-badge),
body.studio-manual-mode #appPanel #studioView .prompt-title-actions .studio-model-trigger span,
body.studio-manual-mode #appPanel #studioView .prompt-title-actions .studio-model-trigger strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

body.studio-manual-mode #appPanel #studioView .prompt-title-actions .studio-model-icon {
  width: 14px !important;
  height: 14px !important;
  stroke: #ffffff !important;
}

body.studio-manual-mode #appPanel #studioView .prompt-title-actions .status-divider {
  height: 13px !important;
  background: rgba(255, 255, 255, 0.28) !important;
}

body.studio-manual-mode #appPanel #studioView #uploadWorkBtn.studio-upload-work {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--create-ref-dim) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: none !important;
}

body.studio-manual-mode #appPanel #studioView #uploadWorkBtn.studio-upload-work svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: var(--create-ref-purple) !important;
  stroke-width: 1.8 !important;
}

body.studio-manual-mode #appPanel #studioView #uploadWorkBtn.studio-upload-work span {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

body.studio-manual-mode #appPanel #studioView .prompt-library-entry {
  gap: 8px !important;
  margin-bottom: 14px !important;
}

body.studio-manual-mode #appPanel #studioView .prompt-library-entry > button,
body.studio-manual-mode #appPanel #studioView .prompt-library-entry > button.secondary {
  height: 66px !important;
  min-height: 66px !important;
  border: 1px solid var(--create-ref-line) !important;
  border-radius: 14px !important;
  background: var(--create-ref-surface) !important;
  color: var(--create-ref-dim) !important;
  font-weight: 500 !important;
}

body.studio-manual-mode #appPanel #studioView .prompt-library-entry > button > span:last-child {
  font-weight: 500 !important;
}

body.studio-manual-mode #appPanel #studioView .manual-prompt-examples {
  display: none !important;
}

body.studio-manual-mode #appPanel #studioView .manual-prompt-editor {
  border: 1px solid var(--create-ref-line) !important;
  border-radius: 16px !important;
  background: var(--create-ref-surface) !important;
}

body.studio-manual-mode #appPanel #studioView .manual-prompt-editor textarea {
  min-height: 178px !important;
  padding: 16px 16px 56px !important;
  color: var(--create-ref-text) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

body.studio-manual-mode #appPanel #studioView .manual-prompt-editor #aiPromptBtn.ai-prompt-button,
body.studio-manual-mode #appPanel #studioView .manual-prompt-editor button#aiPromptBtn.secondary {
  min-width: 110px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #8c5cff, #c24de0) !important;
  box-shadow: 0 4px 12px rgba(140, 92, 255, 0.26) !important;
  font-weight: 600 !important;
}

body.studio-manual-mode #appPanel #studioView .manual-prompt-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  margin-top: 12px !important;
}

body.studio-manual-mode #appPanel #studioView .manual-prompt-actions #toggleAssetLibraryBtn,
body.studio-manual-mode #appPanel #studioView .manual-prompt-actions #uploadWorkBtn,
body.studio-manual-mode #appPanel #studioView .manual-prompt-actions #studioTopMyWorksBtn {
  justify-self: center !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  min-height: 32px !important;
  color: var(--create-ref-dim) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

body.studio-manual-mode #appPanel #studioView .manual-prompt-actions #toggleAssetLibraryBtn::before {
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid var(--create-ref-purple) !important;
  border-bottom: 2px solid var(--create-ref-purple) !important;
  transform: rotate(45deg) translateY(-2px) !important;
}

body.studio-manual-mode #appPanel #studioView .manual-prompt-actions #studioTopMyWorksBtn svg {
  color: var(--create-ref-purple) !important;
}

body.studio-manual-mode #appPanel #studioView .creator-picks {
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body.studio-manual-mode #appPanel #studioView .creator-pick {
  border: 1px solid var(--create-ref-line) !important;
  border-radius: 16px !important;
  background: var(--create-ref-card) !important;
  box-shadow: 0 3px 12px rgba(20, 20, 30, 0.04) !important;
}

body.studio-manual-mode #appPanel #studioView .main-create-wrap {
  position: static !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.studio-manual-mode #appPanel #studioView .main-create-button {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #8c5cff, #c24de0) !important;
  box-shadow: 0 8px 20px rgba(140, 92, 255, 0.28) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body.studio-manual-mode #appPanel #studioView .manual-create-panel .creator-panel {
  border: 1px solid var(--create-ref-line) !important;
  border-radius: 18px !important;
  background: var(--create-ref-card) !important;
  box-shadow: 0 4px 16px rgba(20, 20, 30, 0.04) !important;
}

html.theme-dark body.studio-manual-mode #appPanel #studioView {
  --create-ref-bg: #090b10;
  --create-ref-card: #12151c;
  --create-ref-surface: #171b23;
  --create-ref-line: rgba(255, 255, 255, 0.09);
  --create-ref-text: #f5f6fa;
  --create-ref-dim: #9ca2ae;
  --create-ref-purple-soft: rgba(140, 92, 255, 0.16);
}

html.theme-dark body.studio-manual-mode #appPanel #studioView .manual-create-panel .prompt-block,
html.theme-dark body.studio-manual-mode #appPanel #studioView .creator-pick,
html.theme-dark body.studio-manual-mode #appPanel #studioView .manual-create-panel .creator-panel {
  background: var(--create-ref-card) !important;
}

@media (max-width: 360px) {
  body.studio-manual-mode #appPanel #studioView {
    width: calc(100% + 14px) !important;
    max-width: calc(100% + 14px) !important;
    margin-inline: -7px !important;
    padding-inline: 8px !important;
  }

  body.studio-manual-mode #appPanel #studioView .studio-mode-switch {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.studio-manual-mode #appPanel #studioView .manual-create-panel .prompt-block > .section-title h3 {
    font-size: 16.5px !important;
  }

  body.studio-manual-mode #appPanel #studioView .prompt-title-actions .studio-model-trigger {
    padding-inline: 8px !important;
  }

  body.studio-manual-mode #appPanel #studioView .prompt-title-actions .studio-model-icon {
    display: none !important;
  }
}