body.is-live-editing [data-live-edit]{
  position:relative;
  outline:1px dashed rgba(245,5,56,.45);
  outline-offset:6px;
  cursor:text;
  transition:outline-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

body.is-live-editing [data-live-edit]:hover{
  outline-color:rgba(245,5,56,.78);
  box-shadow:0 0 0 6px rgba(245,5,56,.08);
}

body.is-live-editing [data-live-edit].is-live-edit-active{
  outline:1px solid rgba(245,5,56,.95);
  box-shadow:0 0 0 8px rgba(245,5,56,.12), 0 18px 42px rgba(0,0,0,.22);
  background:rgba(255,255,255,.02);
}

body.is-live-editing [data-live-edit] a,
body.is-live-editing a [data-live-edit]{
  cursor:text;
}

body.is-live-editing [data-live-edit][contenteditable="true"]{
  -webkit-user-modify:read-write;
  user-select:text;
}

.live-editor-group--sticky{
  position:sticky;
  top:0;
  z-index:2;
  backdrop-filter:blur(18px);
}

.live-editor-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.live-editor-status{
  font-size:.78rem;
  color:rgba(255,255,255,.58);
  line-height:1.5;
}

body.is-live-editing .live-editor-group[data-live-form]{
  display:none;
}

.live-inline-panel{
  display:grid;
  gap:14px;
}

.live-inline-panel[hidden]{
  display:none !important;
}

.live-inline-panel__list{
  display:grid;
  gap:8px;
  max-height:34vh;
  overflow:auto;
  padding-right:4px;
}

.live-inline-panel__item{
  appearance:none;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:#fff;
  text-align:left;
  border-radius:14px;
  padding:12px 14px;
  display:grid;
  gap:4px;
  transition:transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.live-inline-panel__item:hover,
.live-inline-panel__item.is-active{
  transform:translateY(-1px);
  border-color:rgba(245,5,56,.26);
  background:rgba(245,5,56,.12);
}

.live-inline-panel__item strong{
  font-size:.86rem;
  line-height:1.3;
}

.live-inline-panel__item span{
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.live-editor-floating-tools{
  position:fixed;
  left:24px;
  right:24px;
  bottom:24px;
  z-index:96;
  display:flex;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .18s ease, transform .18s ease;
}

.live-editor-floating-tools.is-visible{
  opacity:1;
  transform:translateY(0);
}

.live-editor-floating-tools__shell{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  max-width:min(900px, calc(100vw - 48px));
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(10,10,10,.92);
  box-shadow:0 22px 64px rgba(0,0,0,.3);
  backdrop-filter:blur(18px) saturate(145%);
}

.live-editor-floating-tools__label{
  padding:0 .35rem 0 .15rem;
  font-size:.72rem;
  color:rgba(255,255,255,.6);
}

.live-editor-tool{
  appearance:none;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#fff;
  min-width:38px;
  height:38px;
  padding:0 .8rem;
  border-radius:12px;
  font-size:.8rem;
  font-weight:700;
  transition:transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.live-editor-tool:hover,
.live-editor-tool.is-active{
  transform:translateY(-1px);
  border-color:rgba(245,5,56,.28);
  background:rgba(245,5,56,.14);
}

.live-editor-tool--wide{
  min-width:auto;
}

@media (max-width: 1024px){
  .live-editor-trigger{
    right:16px;
    bottom:16px;
    z-index:108;
  }

  .live-editor-drawer{
    width:min(100vw, 460px);
    z-index:107;
  }

  .live-editor-floating-tools{
    left:12px;
    right:12px;
    bottom:14px;
    z-index:109;
  }

  .live-editor-floating-tools__shell{
    width:100%;
    justify-content:flex-start;
    max-width:none;
  }
}