.site-editor-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  max-width: min(720px, calc(100% - 40px));
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border: 1px solid #c8d7e0;
  border-radius: 18px;
  background: rgba(255,255,255,.97);
  padding: 10px;
  box-shadow: 0 16px 42px rgba(14,37,54,.2);
  font-family: "Avenir Next", "Century Gothic", sans-serif;
  backdrop-filter: blur(12px);
}
.site-editor-panel button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 15px;
  color: #12374d;
  font: 700 .72rem/1 "Avenir Next", "Century Gothic", sans-serif;
  cursor: pointer;
}
.site-editor-panel .site-edit { background: #147b78; color: white; }
.site-editor-panel .site-save { background: #ef7f2c; color: white; }
.site-editor-panel .site-reset { background: #eef4f7; }
.site-editor-panel .site-download { border: 1px solid #c8d7e0; background: white; }
.site-editor-status { color: #5c6d78; padding: 0 5px; font-size: .7rem; }
.site-image-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; border-top: 1px solid #dce5e9; padding: 9px 4px 0; }
.site-image-tools[hidden], .site-editor-panel [hidden] { display: none; }
.site-image-tools label { display: flex; flex: 1 1 220px; align-items: center; gap: 8px; color: #12374d; font-size: .7rem; font-weight: 700; }
.site-image-tools input { width: 100%; accent-color: #147b78; }
.site-image-actions { display: flex; width: 100%; flex-wrap: wrap; gap: 7px; }
.site-image-actions button,
.site-image-actions label { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; border: 1px solid #c8d7e0; border-radius: 999px; background: white; color: #12374d; padding: 0 13px; font-size: .68rem; font-weight: 700; cursor: pointer; }
.site-image-actions label { background: #12374d; color: white; }
.site-image-actions input { display: none; }
body.site-is-editing main { outline: 3px dashed rgba(39,167,161,.42); outline-offset: -8px; }
body.site-is-editing main p:hover,
body.site-is-editing main h1:hover,
body.site-is-editing main h2:hover,
body.site-is-editing main h3:hover,
body.site-is-editing main small:hover,
body.site-is-editing main span:hover,
body.site-is-editing main cite:hover { border-radius: 5px; background: rgba(239,127,44,.12); }
body.site-is-editing main img { cursor: pointer; }
body.site-is-editing main img.site-selected-image { outline: 0 !important; }
body.site-is-editing main img.site-drop-target { outline: 5px dashed #147b78 !important; outline-offset: 6px; opacity: .78; }
@media (max-width: 680px) {
  .site-editor-panel { right: 10px; bottom: 10px; max-width: calc(100% - 20px); }
  .site-editor-status { width: 100%; text-align: center; }
}