/* Light studio palette: richer hierarchy without changing the creation flow. */
html:not(.theme-dark) #studioView {
  --studio-ink: #172033;
  --studio-muted: #748096;
  --studio-blue: #4169e1;
  --studio-violet: #7357d9;
  background:
    radial-gradient(circle at 12% 7%, rgba(104, 140, 255, 0.16), transparent 31%),
    radial-gradient(circle at 92% 25%, rgba(174, 121, 225, 0.11), transparent 29%),
    linear-gradient(180deg, #f6f8ff 0%, #fbfcff 42%, #f7f9fc 100%) !important;
}

html:not(.theme-dark) #studioView::before {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 260px !important;
  border-radius: 0 !important;
  background: linear-gradient(150deg, rgba(93, 123, 238, 0.10), rgba(137, 93, 211, 0.04) 55%, transparent) !important;
}

html:not(.theme-dark) #studioView .studio-mode-switch {
  padding: 3px !important;
  border-color: rgba(77, 96, 171, 0.15) !important;
  background: rgba(250, 251, 255, 0.92) !important;
  box-shadow: 0 10px 28px rgba(39, 55, 108, 0.12), inset 0 1px 0 #fff !important;
}

html:not(.theme-dark) #appPanel #studioView .studio-mode-switch #switchManualCreateBtn {
  border-left: 0 !important;
}

html:not(.theme-dark) #appPanel #studioView .studio-mode-switch :is(#switchAgentCreateBtn, #switchManualCreateBtn) {
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  color: #7a8498 !important;
}

html:not(.theme-dark) #appPanel #studioView .studio-mode-switch :is(#switchAgentCreateBtn, #switchManualCreateBtn).active {
  background: linear-gradient(135deg, #4f79ee, #7759dc) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(84, 91, 205, 0.24) !important;
}

html:not(.theme-dark) #appPanel #studioView :is(.studio-top-my-works, #uploadWorkBtn.studio-upload-work) {
  border-color: rgba(84, 101, 171, 0.16) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #5d6fba !important;
  box-shadow: 0 9px 22px rgba(44, 57, 107, 0.11) !important;
}

html:not(.theme-dark) #studioView .prompt-block {
  border-color: rgba(87, 104, 164, 0.14) !important;
  background:
    radial-gradient(circle at 94% 4%, rgba(112, 87, 217, 0.09), transparent 27%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(247, 249, 255, 0.97)) !important;
  box-shadow: 0 20px 46px rgba(40, 55, 105, 0.11), inset 0 1px 0 #fff !important;
}

html:not(.theme-dark) #studioView .prompt-block::after {
  background: radial-gradient(circle, rgba(104, 85, 214, 0.11), transparent 68%) !important;
}

html:not(.theme-dark) #studioView .prompt-block .section-title h3 {
  color: var(--studio-ink) !important;
  font-weight: 720 !important;
}

html:not(.theme-dark) #studioView .title-hint { color: var(--studio-muted) !important; }

html:not(.theme-dark) #studioView .prompt-title-actions .studio-model-trigger {
  border-color: rgba(103, 83, 203, 0.18) !important;
  background: linear-gradient(135deg, #f8f5ff, #eef3ff) !important;
  color: #6655c6 !important;
  box-shadow: 0 7px 18px rgba(83, 78, 173, 0.09) !important;
}

html:not(.theme-dark) #studioView .prompt-title-actions :is(.studio-model-name, .duration-badge) {
  color: #6252c4 !important;
}

html:not(.theme-dark) #studioView .prompt-title-actions .duration-badge {
  background: rgba(109, 88, 204, 0.10) !important;
}

html:not(.theme-dark) #studioView .prompt-title-actions .status-dot { background: #7560dc !important; }

html:not(.theme-dark) #studioView .prompt-library-entry > button {
  box-shadow: 0 6px 14px rgba(47, 60, 110, 0.06) !important;
}

html:not(.theme-dark) #studioView .prompt-library-entry .manual-prompt-library {
  border-color: rgba(61, 110, 215, 0.18) !important;
  background: #eef5ff !important;
  color: #386bc3 !important;
}

html:not(.theme-dark) #studioView .prompt-library-entry .manual-video-template {
  border-color: rgba(111, 81, 199, 0.18) !important;
  background: #f4f0ff !important;
  color: #6951b7 !important;
}

html:not(.theme-dark) #studioView .prompt-library-entry .manual-hot-replication {
  border-color: rgba(215, 118, 74, 0.18) !important;
  background: #fff3ed !important;
  color: #c16843 !important;
}

html:not(.theme-dark) #studioView .prompt-library-entry .manual-style-settings {
  border-color: rgba(43, 151, 132, 0.18) !important;
  background: #edf9f6 !important;
  color: #278675 !important;
}

html:not(.theme-dark) #studioView .manual-prompt-editor textarea {
  border-color: rgba(94, 109, 158, 0.16) !important;
  background: rgba(255, 255, 255, 0.90) !important;
  color: var(--studio-ink) !important;
  box-shadow: inset 0 1px 3px rgba(37, 50, 91, 0.04) !important;
}

html:not(.theme-dark) #studioView .manual-prompt-editor textarea:focus {
  border-color: rgba(95, 91, 210, 0.42) !important;
  box-shadow: 0 0 0 4px rgba(103, 91, 210, 0.08) !important;
}

html:not(.theme-dark) #studioView .ai-prompt-button {
  border-color: rgba(105, 84, 205, 0.15) !important;
  background: linear-gradient(135deg, #f3efff, #eef5ff) !important;
  color: #6655c6 !important;
}

html:not(.theme-dark) #studioView .manual-prompt-actions .manual-asset-library-toggle {
  border-color: rgba(48, 139, 124, 0.17) !important;
  background: linear-gradient(135deg, #ecf9f6, #f5fbff) !important;
  color: #287f73 !important;
  box-shadow: 0 7px 15px rgba(46, 126, 113, 0.07) !important;
}

html:not(.theme-dark) #studioView .creator-picks { gap: 9px !important; }

html:not(.theme-dark) #studioView .creator-pick {
  border-color: rgba(77, 94, 146, 0.13) !important;
  box-shadow: 0 12px 25px rgba(41, 54, 97, 0.08) !important;
}

html:not(.theme-dark) #studioView .creator-pick:nth-child(1) { background: linear-gradient(145deg, #fff, #f1f5ff) !important; }
html:not(.theme-dark) #studioView .creator-pick:nth-child(2) { background: linear-gradient(145deg, #fff, #eef9f7) !important; }
html:not(.theme-dark) #studioView .creator-pick:nth-child(3) { background: linear-gradient(145deg, #fff, #fff5ed) !important; }
html:not(.theme-dark) #studioView .creator-pick:nth-child(4) { background: linear-gradient(145deg, #fff, #f6f0ff) !important; }

html:not(.theme-dark) #studioView .creator-pick:nth-child(1) .pick-icon { background: #eaf0ff !important; }
html:not(.theme-dark) #studioView .creator-pick:nth-child(2) .pick-icon { background: #e5f7f2 !important; }
html:not(.theme-dark) #studioView .creator-pick:nth-child(3) .pick-icon { background: #fff0e4 !important; }
html:not(.theme-dark) #studioView .creator-pick:nth-child(4) .pick-icon { background: #f0e9ff !important; }

html:not(.theme-dark) #studioView .creator-panel {
  border-color: rgba(81, 98, 151, 0.14) !important;
  background: linear-gradient(160deg, #fff, #f8f9fe) !important;
  box-shadow: 0 16px 34px rgba(40, 53, 94, 0.09) !important;
}

html:not(.theme-dark) #studioView .main-create-button {
  background: linear-gradient(135deg, #4778ec 0%, #675fdc 58%, #8456ce 100%) !important;
  box-shadow: 0 18px 34px rgba(79, 83, 203, 0.27) !important;
}

html:not(.theme-dark) #studioView .auto-agent-panel {
  background:
    radial-gradient(circle at 85% 10%, rgba(125, 84, 207, 0.10), transparent 31%),
    linear-gradient(180deg, rgba(249, 250, 255, 0.98), rgba(245, 248, 255, 0.96)) !important;
}

html:not(.theme-dark) #studioView .auto-agent-head strong {
  color: var(--studio-ink) !important;
  font-weight: 800 !important;
}

html:not(.theme-dark) #appPanel .screen-body .studio-agent-inline .auto-agent-input {
  border-color: rgba(77, 91, 153, 0.15) !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 255, 0.98)) !important;
  box-shadow: 0 20px 42px rgba(40, 52, 101, 0.16), inset 0 1px 0 #fff !important;
}

html:not(.theme-dark) #appPanel .screen-body .studio-agent-inline .auto-agent-input textarea {
  color: var(--studio-ink) !important;
}

html:not(.theme-dark) #appPanel .screen-body .studio-agent-inline .auto-agent-entry-strip #hotReplicationBtn {
  border-color: rgba(213, 118, 75, 0.18) !important;
  background: #fff2eb !important;
  color: #bd633e !important;
  box-shadow: 0 8px 18px rgba(184, 94, 57, 0.09) !important;
}

html:not(.theme-dark) #studioView .auto-agent-voice-btn {
  background: linear-gradient(135deg, #4d78ea, #7459d8) !important;
  color: #fff !important;
  box-shadow: 0 12px 25px rgba(77, 82, 196, 0.24) !important;
}

/* studio calm palette v2: keep light blue, reduce rainbow accents */
html:not(.theme-dark) #studioView {
  --studio-ink: #24344d;
  --studio-muted: #7b8798;
  --studio-blue: #4677d9;
  --studio-soft-blue: #edf4ff;
  --studio-line: rgba(104, 128, 168, 0.16);
  background:
    radial-gradient(circle at 14% 6%, rgba(80, 128, 214, 0.12), transparent 32%),
    radial-gradient(circle at 92% 22%, rgba(96, 146, 205, 0.08), transparent 28%),
    linear-gradient(180deg, #f4f8ff 0%, #fbfdff 46%, #f8fafc 100%) !important;
}

html:not(.theme-dark) #studioView::before {
  background: linear-gradient(150deg, rgba(74, 120, 205, 0.08), rgba(91, 132, 191, 0.03) 58%, transparent) !important;
}

html:not(.theme-dark) #appPanel #studioView .studio-mode-switch :is(#switchAgentCreateBtn, #switchManualCreateBtn).active,
html:not(.theme-dark) #studioView .main-create-button,
html:not(.theme-dark) #studioView .auto-agent-voice-btn {
  background: linear-gradient(135deg, #3f75d7, #5f8bea) !important;
  box-shadow: 0 14px 28px rgba(64, 112, 202, 0.22) !important;
}

html:not(.theme-dark) #studioView .prompt-block {
  border-color: var(--studio-line) !important;
  background:
    radial-gradient(circle at 94% 4%, rgba(75, 120, 205, 0.055), transparent 30%),
    linear-gradient(155deg, rgba(255,255,255,0.99), rgba(247,250,255,0.98)) !important;
  box-shadow: 0 18px 40px rgba(48, 75, 120, 0.09), inset 0 1px 0 #fff !important;
}

html:not(.theme-dark) #studioView .prompt-block::after {
  background: radial-gradient(circle, rgba(80, 128, 214, 0.07), transparent 68%) !important;
}

html:not(.theme-dark) #studioView .prompt-block .section-title h3,
html:not(.theme-dark) #studioView .auto-agent-head strong {
  color: var(--studio-ink) !important;
  font-weight: 520 !important;
}

html:not(.theme-dark) #studioView :is(.title-hint, .auto-agent-voice-hint) {
  color: var(--studio-muted) !important;
}

html:not(.theme-dark) #studioView .prompt-title-actions .studio-model-trigger,
html:not(.theme-dark) #studioView .ai-prompt-button,
html:not(.theme-dark) #studioView .manual-prompt-actions .manual-asset-library-toggle,
html:not(.theme-dark) #appPanel .screen-body .studio-agent-inline .auto-agent-entry-strip #hotReplicationBtn {
  border-color: var(--studio-line) !important;
  background: linear-gradient(135deg, #f6f9ff, #edf4ff) !important;
  color: #426cae !important;
  box-shadow: 0 7px 16px rgba(57, 89, 137, 0.07) !important;
}

html:not(.theme-dark) #studioView .prompt-title-actions :is(.studio-model-name, .duration-badge) {
  color: #426cae !important;
}

html:not(.theme-dark) #studioView .prompt-title-actions .duration-badge {
  background: rgba(70, 119, 217, 0.09) !important;
}

html:not(.theme-dark) #studioView .prompt-title-actions .status-dot {
  background: #4c7ed8 !important;
}

html:not(.theme-dark) #studioView .prompt-library-entry > button,
html:not(.theme-dark) #studioView .prompt-library-entry .manual-prompt-library,
html:not(.theme-dark) #studioView .prompt-library-entry .manual-video-template,
html:not(.theme-dark) #studioView .prompt-library-entry .manual-hot-replication,
html:not(.theme-dark) #studioView .prompt-library-entry .manual-style-settings {
  border-color: var(--studio-line) !important;
  background: linear-gradient(135deg, #f7faff, #eef4fb) !important;
  color: #4a668c !important;
  box-shadow: 0 5px 12px rgba(48, 75, 120, 0.055) !important;
}

html:not(.theme-dark) #studioView .manual-prompt-editor textarea {
  border-color: rgba(104, 128, 168, 0.14) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--studio-ink) !important;
}

html:not(.theme-dark) #studioView .manual-prompt-editor textarea:focus {
  border-color: rgba(70, 119, 217, 0.34) !important;
  box-shadow: 0 0 0 4px rgba(70, 119, 217, 0.07) !important;
}

html:not(.theme-dark) #studioView .creator-pick,
html:not(.theme-dark) #studioView .creator-pick:nth-child(1),
html:not(.theme-dark) #studioView .creator-pick:nth-child(2),
html:not(.theme-dark) #studioView .creator-pick:nth-child(3),
html:not(.theme-dark) #studioView .creator-pick:nth-child(4) {
  border-color: var(--studio-line) !important;
  background: linear-gradient(145deg, #ffffff, #f2f6fb) !important;
  box-shadow: 0 11px 23px rgba(47, 73, 114, 0.075) !important;
}

html:not(.theme-dark) #studioView .creator-pick :is(strong, span) {
  color: #2d3d55 !important;
}

html:not(.theme-dark) #studioView .creator-pick:nth-child(1) .pick-icon,
html:not(.theme-dark) #studioView .creator-pick:nth-child(2) .pick-icon,
html:not(.theme-dark) #studioView .creator-pick:nth-child(3) .pick-icon,
html:not(.theme-dark) #studioView .creator-pick:nth-child(4) .pick-icon {
  background: #edf4ff !important;
  color: #4d74b6 !important;
}

html:not(.theme-dark) #studioView .creator-panel {
  border-color: var(--studio-line) !important;
  background: linear-gradient(160deg, #ffffff, #f7f9fd) !important;
  box-shadow: 0 14px 30px rgba(47, 73, 114, 0.075) !important;
}

html:not(.theme-dark) #studioView .auto-agent-panel {
  background:
    radial-gradient(circle at 85% 10%, rgba(74, 120, 205, 0.065), transparent 31%),
    linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(246, 249, 254, 0.96)) !important;
}

html:not(.theme-dark) #appPanel .screen-body .studio-agent-inline .auto-agent-input {
  border-color: var(--studio-line) !important;
  background: linear-gradient(155deg, rgba(255,255,255,0.98), rgba(246,249,254,0.98)) !important;
  box-shadow: 0 18px 38px rgba(48, 75, 120, 0.13), inset 0 1px 0 #fff !important;
}

/* studio full-screen light-blue canvas v3 */
html:not(.theme-dark) #studioView {
  min-height: calc(100dvh - 0px);
  box-sizing: border-box;
  margin: -12px -14px calc(-108px - env(safe-area-inset-bottom, 0px)) !important;
  padding: calc(66px + env(safe-area-inset-top, 0px)) 14px calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  background:
    radial-gradient(circle at 12% 3%, rgba(80, 128, 214, 0.14), transparent 34%),
    radial-gradient(circle at 94% 20%, rgba(96, 146, 205, 0.09), transparent 30%),
    linear-gradient(180deg, #f1f6ff 0%, #f8fbff 48%, #f7f9fc 100%) !important;
}

html:not(.theme-dark) #studioView::before {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
}