.workspace-header-banner[hidden] { display: none; }
.topbar.has-workspace-header-banner { gap: 18px; }
.topbar.has-workspace-header-banner .breadcrumb { flex: 0 1 auto; min-width: 0; }
.topbar.has-workspace-header-banner .breadcrumb strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar.has-workspace-header-banner .topbar-actions { flex: 0 0 auto; }
.workspace-header-banner { align-items: center; display: flex; flex: 1 1 200px; justify-content: center; min-width: 0; height: 48px; }
.workspace-header-banner img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
workspace-header-banner-editor { display: block; }
.workspace-banner-editor { display: grid; gap: 12px; }
.workspace-banner-preview { align-items: center; background: var(--banner-preview-background, var(--topbar-background)); border: 1px solid var(--border-default); border-radius: 12px; display: flex; justify-content: center; min-height: 82px; overflow: hidden; padding: 12px 16px; }
.workspace-banner-preview img { display: block; width: 100%; height: 64px; object-fit: contain; }
.workspace-banner-preview > span { background: #212121; border-radius: 6px; color: #fff; font-size: 13px; padding: 6px 10px; text-align: center; }
.workspace-banner-editor .workspace-banner-caption, .workspace-banner-editor > small { color: var(--text-secondary); font-size: 12px; line-height: 1.5; margin: 0; }
.workspace-banner-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.workspace-banner-actions .file-picker:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.workspace-banner-actions .file-picker:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.workspace-banner-status { color: var(--text-primary); font-size: 13px; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .topbar.has-workspace-header-banner { flex-wrap: wrap; height: auto; min-height: 64px; gap: 8px 12px; padding-block: 10px; }
  .topbar.has-workspace-header-banner .breadcrumb { flex: 1 1 0; margin-left: 0; }
  .topbar.has-workspace-header-banner .workspace-header-banner { flex: 1 0 100%; height: clamp(26px, 6vw, 46px); order: 1; }
}
@media (max-width: 520px) {
  .workspace-banner-preview { padding-inline: 10px; }
  .workspace-banner-actions > .button { flex: 1 1 auto; justify-content: center; }
}