.site-preview-bar {
  position: fixed;
  z-index: 10000;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem max(1rem, env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: #18313e;
  color: white;
  box-shadow: 0 -3px 18px #0004;
  font: 700 .78rem Arial, sans-serif;
}

.site-preview-bar div { display: flex; gap: .5rem; }
.site-preview-bar button {
  min-height: 42px;
  border: 1px solid #fff8;
  border-radius: .3rem;
  padding: .65rem .85rem;
  background: transparent;
  color: white;
  font: inherit;
}
.site-preview-bar [data-preview-save] { border-color: #72b3ca; background: #4f98b2; }
.site-preview-bar button:disabled { opacity: .7; }

@media (max-width: 520px) {
  .site-preview-bar strong { display: none; }
  .site-preview-bar div { width: 100%; }
  .site-preview-bar button { flex: 1; }
}