.header-editor { border: 1px solid var(--border, #d4dce5); border-radius: 12px; margin: 1.5rem 0; padding: 1.25rem; min-width: 0; }
.header-editor legend { padding: 0 .5rem; font-weight: 700; }
.header-editor canvas { display: block; width: 400px; max-width: 100%; height: auto; aspect-ratio: 200 / 45; background: white; border: 1px solid #aebbc9; border-radius: 4px; cursor: move; touch-action: none; margin: 1rem 0; }
.header-editor canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.header-editor-controls { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; align-items: end; }
.header-editor-controls input { width: 100%; min-width: 0; }
.header-editor input[type="file"] { max-width: 100%; }
.header-editor input[readonly] { background: #f3f5f8; }
.header-file-row { display: flex; align-items: center; gap: .75rem; }
.header-file-row input { flex: 1; min-width: 0; }
.header-file-row .button { flex: 0 0 auto; }
.header-editor [data-header-error]:empty { display: none; }
@media (max-width: 640px) { .header-editor-controls { grid-template-columns: 1fr; } .header-editor { padding: .8rem; } }