.vpp{--vpp-accent:#7c3aed;font-family:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
position:fixed;inset:0;z-index:99985;display:flex;align-items:center;justify-content:center;
background:rgba(15,23,42,.6);padding:20px;animation:vpp-fade .25s ease}
.vpp[hidden]{display:none!important}  /* без этого класс .vpp{display:flex} перебивает атрибут hidden — попап виден всегда и частота показа не работает */
@keyframes vpp-fade{from{opacity:0}to{opacity:1}}
.vpp-modal{position:relative;background:#fff;border-radius:18px;width:100%;max-width:420px;overflow:hidden;
box-shadow:0 24px 70px rgba(0,0,0,.35);animation:vpp-pop .26s cubic-bezier(.2,.9,.3,1.2)}
@keyframes vpp-pop{from{transform:translateY(18px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.vpp-x{position:absolute;top:9px;right:10px;z-index:2;border:none;width:26px;height:26px;border-radius:50%;
background:rgba(255,255,255,.85);color:#475569;font-size:17px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);
opacity:.65;transition:opacity .16s,background .15s}
.vpp-modal:hover .vpp-x,.vpp-x:focus{opacity:1}
.vpp-x:hover{background:#fff;opacity:1}
.vpp-img img{display:block;width:100%;max-height:200px;object-fit:cover}
.vpp-body{padding:26px 26px 28px;text-align:center}
.vpp-title{margin:0 0 10px;font-size:23px;font-weight:800;color:#0f172a;line-height:1.2}
.vpp-text{margin:0 0 20px;font-size:15px;color:#64748b;line-height:1.55}
.vpp-btn{display:inline-block;background:var(--vpp-accent);color:#fff;text-decoration:none;
border-radius:12px;padding:13px 28px;font-size:15px;font-weight:600;transition:filter .15s,transform .15s}
.vpp-btn:hover{filter:brightness(1.07);transform:translateY(-2px)}

/* Режим правки: попап показан статично в потоке страницы (без оверлея), как превью. */
.vpp--edit{position:relative;inset:auto;z-index:auto;display:block;background:none;padding:0;margin:16px 0;animation:none}
.vpp--edit .vpp-modal{margin:0 auto;animation:none;box-shadow:0 6px 24px rgba(0,0,0,.12);border:1px solid #eef2f6}
.vpp--edit .vpp-x{opacity:1}
.vpp-edit-note{max-width:420px;margin:0 auto 10px;padding:9px 13px;background:#f5f3ff;border:1px dashed var(--vpp-accent);border-radius:10px;font-size:12.5px;color:#6d28d9;text-align:center;line-height:1.4}