.site-branding-admin { margin-bottom: 22px; }
.site-branding-preview { overflow: hidden; border: 1px solid rgba(132,169,189,.2); border-radius: 10px; background: rgba(5,14,21,.56); }
.site-branding-browser-preview { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid rgba(132,169,189,.13); color: #9ab0bc; font-size: 12px; }
.site-branding-browser-preview > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-branding-browser-dots { display: inline-flex; flex: none; gap: 5px; }
.site-branding-browser-dots i { width: 5px; height: 5px; border-radius: 50%; background: #506572; }
.site-branding-header-preview { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; background: linear-gradient(110deg,rgba(27,48,61,.36),rgba(7,20,29,.28)); }
.site-branding-header-preview .site-brand { min-width: 0; overflow: visible; }
.site-branding-header-preview .site-brand img { object-fit: contain; }
.site-branding-header-preview .site-brand > span { min-width: 0; overflow: hidden; }
.site-branding-header-preview .site-brand strong, .site-branding-header-preview .site-brand small { overflow: hidden; text-overflow: ellipsis; }
.site-branding-preview-label { flex: none; color: #7995a6; font-size: 10px; letter-spacing: .1em; }
.site-branding-footer-preview { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 13px 22px; border-top: 1px solid rgba(132,169,189,.13); color: #819cae; font-size: 11px; text-align: center; }
.site-branding-footer-preview > span { max-width: 100%; overflow-wrap: anywhere; }
.site-branding-footer-preview > span:empty { display: none; }
.site-branding-editor .site-branding-preview { margin-bottom: 14px; }
.site-branding-editor > .field + .form-grid,
.site-branding-editor > .form-grid + .field { margin-top: 18px; }
.site-branding-logo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.site-branding-logo-actions p { width: 100%; margin: 0; padding-top: 3px; color: #8ea8b9; font-size: 12px; line-height: 1.65; }
@media (max-width: 600px) {
  .site-branding-header-preview { padding: 18px 14px; gap: 10px; }
  .site-branding-preview-label { display: none; }
  .site-branding-browser-preview { padding-inline: 14px; }
  .site-branding-footer-preview { padding-inline: 14px; gap: 6px 12px; }
  .site-branding-admin .card-header { align-items: flex-start; }
}