/* White theme for the video workspace. Keep this file scoped so the canvas
   and account pages retain their existing appearance. */
html[data-screen="studio"] body.video-workspace {
  --video-surface: #ffffff;
  --video-muted: #64748b;
  --video-line: #e2e8f0;
  --video-accent: #2563eb;
  --console-surface: #ffffff;
  --console-raised: #f8fafc;
  --console-ink: #172033;
  --console-line: #e2e8f0;
  --console-accent: #2563eb;
  color: #172033 !important;
  background: #f8fafc !important;
}

html body.video-workspace .app-shell,
html body.video-workspace .app-shell .main,
html body.video-workspace .app-shell .topbar,
html body.video-workspace .app-shell #createView,
html body.video-workspace .app-shell #koko-platform-announcement {
  color: #172033 !important;
  background: #f8fafc !important;
}

html body.video-workspace .app-shell .topbar {
  border-bottom: 1px solid #e2e8f0 !important;
}

html body.video-workspace .app-shell #createView .composer,
html body.video-workspace .app-shell #createView .preview,
html body.video-workspace .app-shell #createView .task-sidebar {
  color: #172033 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

html body.video-workspace .app-shell #createView .video-composer-footer {
  background: #ffffff !important;
  border-top-color: #e2e8f0 !important;
}

html body.video-workspace .app-shell #createView :is(.panel-head h3, .field-label, .control label,
  .workflow-reference-heading, .task-sidebar strong, .preview strong) {
  color: #172033 !important;
}

html body.video-workspace .app-shell #createView :is(.muted, #videoModelMeta,
  #assetCount, .asset-help-note, #videoTools summary, .side-task-row small,
  .side-task-row em, .preview .panel-head .muted) {
  color: #64748b !important;
}

html body.video-workspace .app-shell #createView :is(#videoModelSelect, .control select,
  #prompt, input, textarea) {
  color: #172033 !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

html body.video-workspace .app-shell #createView :is(#videoModelSelect, .control select) {
  color-scheme: light;
}

html body.video-workspace .app-shell #createView #prompt::placeholder {
  color: #94a3b8 !important;
}

html body.video-workspace .app-shell #createView #videoTools {
  border-top: 1px solid #e2e8f0;
}

html body.video-workspace .app-shell #createView #videoTools summary {
  color: #334155 !important;
}

html body.video-workspace .app-shell #createView :is(.upload-tile, .asset-item,
  .workflow-preview-frame, .workflow-reference-picker,
  .workflow-preview-actions button, .workflow-image-category) {
  color: #334155 !important;
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

html body.video-workspace .app-shell #createView .workflow-preview-frame {
  background: #f1f5f9 !important;
}

html body.video-workspace .app-shell #createView :is(.retry-last-btn, .face-guide-btn,
  .text-btn, #videoWorkspaceSwitch button) {
  color: #334155 !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

html body.video-workspace .app-shell #createView #generateBtn,
html body.video-workspace .app-shell #createView #videoWorkspaceSwitch button[aria-pressed="true"] {
  color: #ffffff !important;
  background: #2563eb !important;
  border-color: #2563eb !important;
}

html body.video-workspace .app-shell #createView #generateBtn:hover:not(:disabled),
html body.video-workspace .app-shell #createView #videoWorkspaceSwitch button[aria-pressed="true"]:hover {
  background: #1d4ed8 !important;
}

html body.video-workspace .app-shell #createView #previewStage,
html body.video-workspace .app-shell #createView .side-task-row {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html body.video-workspace .app-shell #createView ::selection {
  color: #ffffff !important;
  background: #2563eb !important;
}