/* Personal image backgrounds use the same calm glass language as the
   established Brand Workspace and Companion surfaces. This deliberately
   targets only large content containers: navigation, controls, inputs and
   compact cards retain their existing hierarchy. */
html[data-app-background="image"][data-theme-resolved="dark"] :is(
  .campaign-panel,
  .brand-hub-panel,
  .video-studio-panel,
  .social-publishing-panel,
  .agent-panel,
  .provider-center-panel,
  .ai-provider-card-grid,
  .content-calendar-panel,
  .media-module .module-overview-panel,
  .export-module .module-overview-panel,
  .control-panel.settings-panel
) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-app-background="image"][data-theme-resolved="dark"] :is(
  .campaign-hero,
  .brand-hub-hero,
  .intelligence-hero,
  .analytics-hero,
  .agent-hero,
  .social-publishing-hero,
  .video-studio-hero,
  .provider-center-hero,
  .enterprise-integrations-hero,
  .help-center__hero,
  .company-knowledge__hero,
  .contacts-audience__hero,
  .organization-foundation__hero,
  .photo-studio__hero,
  .creative-library__hero,
  .content-calendar-hero,
  .image-editor__header,
  .advanced-analytics-header,
  .dashboard-mobile-header,
  .media-module .module-overview-header,
  .export-module .module-overview-header
) {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(16, 25, 42, 0.82);
  box-shadow: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* The command center previously stacked blue decorative gradients on top of
   the shared surface. Keep its information hierarchy, but let the exact
   Companion panel color remain the perceived base. */
html[data-app-background="image"][data-theme-resolved="dark"] :is(
  .command-center-panel > header,
  .command-center-panel > section
) {
  background-color: transparent;
  background-image: none;
}

html[data-app-background="image"][data-theme-resolved="dark"]
  .command-center-panel > .command-ai-recommendation {
  background: rgba(8, 15, 28, 0.42);
}

html[data-app-background="image"][data-theme-resolved="dark"] :is(
  .campaign-sidebar,
  .campaign-step,
  .brand-profile-switcher,
  .brand-hub-card,
  .intelligence-card,
  .analytics-card,
  .agent-card,
  .publishing-card,
  .publishing-dashboard-card,
  .integration-status-panel,
  .video-workflow-card,
  .enterprise-integrations-content,
  .sap-connection-panel,
  .help-companion-card,
  .help-context,
  .help-quick-start,
  .help-library,
  .help-whats-new,
  .company-knowledge__panel,
  .contacts-audience__panel,
  .organization-foundation__panel,
  .photo-studio__provider,
  .photo-studio__stage,
  .photo-studio__side,
  .photo-studio__actions,
  .photo-studio__history,
  .creative-library__controls,
  .creative-library__sidebar,
  .creative-library__content,
  .advanced-analytics-filters,
  .advanced-analytics-card,
  .dashboard-section,
  .command-center-panel,
  .settings-panel .appearance-settings,
  .settings-panel .companion-settings,
  .settings-panel .panel-section,
  .settings-panel .privacy-center-section,
  body[data-active-view="aiMarketing"] .control-panel,
  body[data-active-view="aiMarketing"] .marketing-panel,
  .image-editor__panel,
  .calendar-card
) {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(22, 32, 51, 0.72);
  box-shadow: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Compact and data-heavy surfaces stay more opaque for legibility, but use
   the same neutral Companion base instead of module-specific blue fills. */
html[data-app-background="image"][data-theme-resolved="dark"] :is(
  .image-editor__toolbar,
  .image-editor__stage,
  .image-editor__property-group,
  .video-project-type-selector label,
  .video-main-track-summary,
  .storyboard-director-overlay-windows article,
  .ai-provider-card,
  .export-result-card,
  .enterprise-integration-card,
  .privacy-card,
  .creative-library__card,
  .brand-hub-card-title,
  .intelligence-kpi-card,
  .company-knowledge__metrics article,
  .contacts-audience__metrics article,
  .advanced-analytics-kpis article,
  .dashboard-kpi-grid article,
  .calendar-month-grid article,
  .dashboard-companion-slot,
  .continue-action,
  .quick-action-card,
  .provider-manager-shortcut
) {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(8, 15, 28, 0.82);
  background-image: none;
  box-shadow: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

html[data-app-background="image"][data-theme-resolved="dark"] :is(
  .image-editor button,
  .image-editor select,
  .image-editor input,
  .video-overlay-toolbar,
  .video-overlay-composer > footer
) {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(8, 15, 28, 0.9);
  background-image: none;
}

html[data-app-background="image"][data-theme-resolved="dark"]
  .image-editor button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

html[data-app-background="image"][data-theme-resolved="dark"]
  .video-project-type-selector label.is-active {
  border-color: color-mix(in srgb, var(--accent) 68%, rgba(255, 255, 255, 0.09));
  background: color-mix(in srgb, var(--accent) 9%, rgba(8, 15, 28, 0.82));
}

/* Remove the last decorative blue washes from the dashboard. Icons and
   borders may still communicate state through the selected accent color. */
html[data-app-background="image"][data-theme-resolved="dark"] :is(
  .continue-action--primary,
  .provider-manager-shortcut,
  .command-center-panel > header,
  .command-center-panel > section
) {
  background-image: none;
}

html[data-app-background="image"][data-theme-resolved="dark"]
  .command-center-panel > .command-ai-recommendation {
  background: rgba(8, 15, 28, 0.42);
}