/* Basic mockup page styling */
.mockup-canvas-wrap{background:#fff;border:1px solid #e6e6e6;padding:14px;border-radius:6px;}
.mockup-canvas{position:relative;width:100%;height:650px;overflow:auto;background:#f8f8f8;display:flex;align-items:center;justify-content:center}
.mockup-canvas img#base-template{max-width:80%;height:auto;display:block}
.layers{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none}
.layer-item{position:absolute;cursor:move;pointer-events:auto;transition:transform .12s}
.layer-item img{display:block;max-width:100%;max-height:100%}
.mockup-controls{background:#fff;border:1px solid #eee;padding:12px;border-radius:6px}
.mockup-controls .layer-edit-controls input[type=range]{width:100%}
.mockup-toolbar{background:#fff;padding:12px;border-radius:6px;border:1px solid #eee}
.placement-tab{display:inline-block;margin:4px;padding:8px 12px;border-radius:6px;border:1px solid #ddd;background:#fafafa}
.placement-tab.active{background:#007bff;color:#fff;border-color:#007bff}
.layers-list ul{list-style:none;padding-left:0}
.layers-list li{display:flex;align-items:center;justify-content:space-between;padding:6px;border-bottom:1px solid #f1f1f1}
.actions{display:flex;gap:8px}
/* upload controls horizontal */
.upload-section{display:flex;gap:12px;align-items:center}
.upload-section .or-drop{flex:1;padding:10px;border:1px dashed #ddd;border-radius:6px;text-align:center}
@media(max-width:768px){
  .mockup-canvas{height:420px}
  .placement-tab{padding:6px 8px}
  .upload-section{flex-direction:column}
}