body{margin:0;font-family:Arial,sans-serif;overflow-x:hidden;background:#fafafa}

/* адаптивный контейнер (масштабируется вся сцена) */
.scale-wrapper{
  width:100vw;height:70vh;overflow:hidden;position:relative;background:#f5f5f5;
}

/* базовая сцена: 1900x650 (6 м по ширине) */
.background-area{
  position:relative;width:1900px;height:650px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  transform-origin:top left;transition:transform .2s ease;
  transform-style:preserve-3d; /* 3D-контекст */
}

#img-wrapper{
  position:absolute;z-index:10;cursor:move;
  perspective:1200px;               /* ключ к правильной перспективе */
  perspective-origin:50% 50%;
}

#rotor{
  display:inline-block;transform-origin:50% 50%;will-change:transform;
  transform-style:preserve-3d;
}

#fixed{
  opacity:.9;display:block;user-select:none;pointer-events:none;
  border:4px solid #8b5a2b;transition:border-radius .2s ease;
}

#resizer{
  width:16px;height:16px;background:#e53935;position:absolute;right:0;bottom:0;cursor:se-resize;z-index:11;
  border-radius:3px;box-shadow:0 0 0 1px #0003;
}

.bg-selector{margin:12px 20px}
.bg-selector img{object-fit:cover;width:200px;height:100px;border:1px solid #ccc;margin:10px}

.rot-controls{
  margin:12px 20px;padding:10px;background:#f7f7f7;border:1px solid #ddd;border-radius:8px;
  display:flex;gap:16px;flex-wrap:wrap;
}
.rot-controls .rc-item{min-width:220px}
.rot-controls input[type="range"]{width:220px}
.rot-controls label{display:block;margin-bottom:6px;font-size:13px;color:#333}

#save-btn{margin:12px 20px;padding:8px 14px;font-size:16px;cursor:pointer}
#save-status{margin-left:8px;font-weight:bold;color:green}

/* Бейдж размеров (метры) */
#meter{
  position:absolute;right:8px;bottom:-38px;background:rgba(0,0,0,.65);color:#fff;
  font:13px/1.35 Arial,sans-serif;padding:8px 10px;border-radius:6px;
  pointer-events:none;white-space:nowrap;backdrop-filter:blur(2px)
}