.brand > img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

footer {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 28px 30px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

dialog {
  width: min(520px, calc(100% - 32px));
  border: 0;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 24px 80px rgba(16, 45, 43, .25);
}

dialog::backdrop { background: rgba(16, 45, 43, .55); }
.branding-form { padding: 34px; display: grid; gap: 18px; }
.branding-form > p { margin: 0; color: var(--muted); font-size: 13px; }
.branding-form label small { color: var(--muted); font-weight: 400; }
.dialog-close { position: absolute; right: 18px; top: 14px; border: 0; background: none; color: var(--muted); font-size: 26px; cursor: pointer; }

@media (max-width: 600px) {
  .header-actions { gap: 4px; }
  .header-actions .secondary { padding: 8px; }
  .brand small { display: none; }
}