/* One creation surface in both themes. Controls remain in their existing layout. */
html body[data-page] :is(.public-chat, .v33-workspace-composer, .chat-composer-wrap > .composer,
  .workspace-start, .music-studio-v22, .creation-box-v32, .video-prompt, .studio-controls) {
  --surface: #101312;
  --surface-2: #171b19;
  --raised: #222825;
  --text: #f6f8f7;
  --muted: #c2cbc6;
  --faint: #a7b4ac;
  --accent: #92edb6;
  --line: #464f49;
  color-scheme: dark;
  color: var(--text) !important;
  background: #0b0e0d !important;
  border: 1px solid #ffffff59 !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 #ffffff1f, 0 0 0 1px #ffffff09, 0 0 18px #ffffff09 !important;
}
html body[data-page] .v33-workspace-composer {padding: clamp(10px, 2vw, 17px)}

/* The dashboard supplies its own outer panel. Avoid two luminous borders. */
html body[data-page] .studio-controls > :is(.music-studio-v22, .creation-box-v32) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body[data-page] :is(.public-chat, .v33-workspace-composer, .workspace-start) .composer {
  color: var(--text) !important;
  background: #151917 !important;
  border-color: #ffffff36 !important;
  box-shadow: none;
}
html body[data-page] :is(.public-chat, .v33-workspace-composer, .workspace-start, .chat-composer-wrap) .composer textarea {
  color: #f6f8f7 !important;
  background: transparent !important;
}
html body[data-page] :is(.music-studio-v22, .creation-box-v32, .studio-controls, .video-prompt)
  :is(input:not([type="checkbox"], [type="radio"], [type="file"]), textarea, select) {
  color: #f6f8f7 !important;
  background: #141816 !important;
  border-color: #ffffff42 !important;
}
html body[data-page] :is(.v26-creator-shell, .creation-box-v32, .v33-workspace-composer, .chat-composer-wrap, .workspace-start)
  :is(.field > span, label:not(.button), .fine, .music-mode-hint) {color: #c2cbc6 !important}
html body[data-page] :is(.v26-creator-shell, .creation-box-v32, .v33-workspace-composer, .chat-composer-wrap, .workspace-start)
  :is(textarea, input)::placeholder {color: #a7b4ac !important; opacity: 1}
html body[data-page] :is(.v26-creator-shell, .creation-box-v32, .v33-workspace-composer, .workspace-start) .segmented {
  background: #171b19 !important;
  border-color: #ffffff38 !important;
}
html body[data-page] :is(.v26-creator-shell, .creation-box-v32, .v33-workspace-composer, .workspace-start) .segmented button {
  color: #c2cbc6;
}
html body[data-page] :is(.v26-creator-shell, .creation-box-v32, .v33-workspace-composer, .workspace-start)
  .segmented button:is([aria-selected="true"], [aria-pressed="true"]) {
  color: #b3f9cf !important;
  background: #1b3023 !important;
  box-shadow: inset 0 0 0 1px #76c99566;
}
html body[data-page] :is(.public-chat, .v33-workspace-composer, .chat-composer-wrap > .composer,
  .workspace-start, .studio-controls, .music-studio-v22, .creation-box-v32):focus-within {
  border-color: #ffffff94 !important;
}
html body[data-page] :is(.public-chat, .chat-composer-wrap, .v33-workspace-composer, .workspace-start, .studio-controls,
  .music-studio-v22, .creation-box-v32) :focus-visible {
  outline: 2px solid #92edb6;
  outline-offset: 2px;
}