/* ===== РЕДАКТОР (оверлей). активен только когда на body класс .editing ===== */

/* тулбар — всегда виден */
.ed-toolbar{
  position:fixed;top:14px;right:14px;z-index:1000;
  display:flex;gap:8px;align-items:center;
  background:rgba(17,19,31,.92);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);border-radius:12px;
  padding:8px 10px;font-family:"Pixelify Sans","Inter",sans-serif;
}
.ed-btn{
  cursor:pointer;border:1px solid rgba(255,255,255,.16);
  background:#1b1e2e;color:#ede9f0;border-radius:8px;
  padding:.5em .8em;font-size:.85rem;font-family:inherit;
  transition:background .15s,border-color .15s;white-space:nowrap;
}
.ed-btn:hover{background:#262a40;border-color:rgba(255,126,176,.5)}
.ed-btn.active{background:#ff7eb0;color:#0b0c14;border-color:#ff7eb0}
.ed-hint{font-size:.72rem;color:#a7a3b8;max-width:140px;line-height:1.3}
.ed-status{font-size:.72rem;color:#9fe6b0;min-width:64px;font-family:"Inter",sans-serif}

/* подсветка редактируемых зон в режиме редактирования */
body.editing [data-edit]{
  outline:1px dashed rgba(255,126,176,.45);outline-offset:3px;
  cursor:text;border-radius:3px;transition:outline-color .15s;
}
body.editing [data-edit]:hover{outline-color:rgba(255,126,176,.9)}
body.editing [data-edit]:focus{outline:2px solid #ff7eb0;background:rgba(255,126,176,.08)}

body.editing [data-img]{position:relative;cursor:pointer}
body.editing [data-img]::after{
  content:"⇄ картинка";position:absolute;z-index:5;
  top:8px;left:8px;
  font-family:"Pixelify Sans",sans-serif;font-size:.75rem;
  background:rgba(11,12,20,.8);color:#ff7eb0;
  border:1px solid rgba(255,126,176,.5);border-radius:6px;
  padding:.3em .6em;pointer-events:none;opacity:0;transition:opacity .15s;
}
body.editing [data-img]:hover::after{opacity:1}
body.editing [data-img]:hover{outline:2px solid rgba(255,126,176,.7);outline-offset:-2px}

/* в режиме редактирования гасим анимации появления, чтобы не мешали */
body.editing .reveal{opacity:1!important;transform:none!important;transition:none!important}

/* мини-меню выбора картинки */
.ed-picker{
  position:fixed;inset:0;z-index:1100;display:none;
  align-items:center;justify-content:center;
  background:rgba(8,9,15,.8);backdrop-filter:blur(4px);
}
.ed-picker.open{display:flex}
.ed-picker-box{
  background:#11131f;border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:1.4rem;max-width:720px;width:90vw;
  max-height:82vh;overflow:auto;font-family:"Inter",sans-serif;
}
.ed-picker-box h4{font-family:"Pixelify Sans",sans-serif;color:#ede9f0;margin-bottom:1rem;font-size:1.1rem}
.ed-actions{display:flex;gap:10px;margin-bottom:1.2rem;flex-wrap:wrap}
.ed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.ed-grid img{
  width:100%;height:80px;object-fit:cover;border-radius:8px;
  border:2px solid transparent;cursor:pointer;image-rendering:pixelated;
}
.ed-grid img:hover{border-color:#ff7eb0}
.ed-close{margin-top:1rem;color:#a7a3b8;font-size:.85rem;cursor:pointer;background:none;border:none;font-family:inherit}

@media(max-width:560px){
  .ed-toolbar{top:auto;bottom:10px;right:10px;left:10px;justify-content:center;flex-wrap:wrap}
  .ed-hint{display:none}
}