.mp-mobile{display:none}@media (max-width:768px){.mp-mobile{display:block; background:#fff; border-bottom:1px solid #e1e8ed}.mp-tabs{display:flex; gap:8px; padding:10px 12px}.mp-tab{flex:1; padding:8px 10px; border:1px solid #e1e8ed; background:#fff; border-radius:8px; font-size:14px; color:#555}.mp-tab.active{background:#667eea; color:#fff; border-color:#667eea}.mp-panels{padding:8px 12px 12px; height:80px; box-sizing:border-box}.mp-panel{display:none; height:100%}.mp-description{font-size:14px;color:#666;text-align:left;margin-bottom:2px;line-height:1.2;margin-left:52px}.mp-row{display:grid; grid-template-columns:36px 1fr; align-items:center; gap:10px; padding:8px 4px; height:calc(100% - 24px)}.mp-val{text-align:center; color:#667eea; font-weight:600}.mp-range{width:100%; height:6px; -webkit-appearance:none; appearance:none; background:#e1e8ed; border-radius:3px}.mp-range::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#667eea; box-shadow:0 2px 6px rgba(102,126,234,0.3); cursor:pointer}.mp-range::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:#667eea; border:none; box-shadow:0 2px 6px rgba(102,126,234,0.3); cursor:pointer}.mp-layouts{display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:6px; padding:4px 6px; height:100%; -webkit-overflow-scrolling:touch; align-items:center}.mp-layouts .unified-template-item{flex:0 0 auto; padding:3px; width:60px; height:60px; border:2px solid #e1e8ed; border-radius:6px; background:white; cursor:pointer; transition:all 0.2s ease; aspect-ratio:1; box-shadow:0 1px 3px rgba(0,0,0,0.05); display:flex; align-items:center; justify-content:center}.mp-layouts .unified-template-item:hover{border-color:#667eea; box-shadow:0 4px 16px rgba(102,126,234,0.15); transform:translateY(-1px)}.mp-layouts .unified-template-item.active{border-color:#667eea; background:#f8f9ff; box-shadow:0 4px 16px rgba(102,126,234,0.2); transform:translateY(-1px)}.mp-layouts .unified-template-item .template-preview{width:48px; height:36px; display:flex; gap:1px; align-items:stretch}.mp-layouts::-webkit-scrollbar{height:6px}.mp-layouts::-webkit-scrollbar-thumb{background:#c1c1c1; border-radius:3px}.workspace-sidebar{display:none !important}.canvas-toolbar{display:none !important}.mp-mobile{position:sticky; top:60px; z-index:2001}.workspace-btn-primary span{display:inline !important}.workspace-btn-primary{width:auto !important; padding:8px 16px !important}.workspace-canvas{overflow-x:hidden !important}.canvas-container{display:flex !important; justify-content:center; align-items:center; overflow:hidden !important; padding:16px !important; min-height:calc(100vh - 245px); box-sizing:border-box !important}.canvas-content{max-width:none !important; max-height:none !important}#workspaceCanvas{position:static !important; margin:0 auto !important; max-width:calc(100vw - 32px) !important; max-height:calc(100vh - 285px) !important; object-fit:contain; display:block !important; transform-origin:center center !important}.canvas-resize-controls,.canvas-resize-handle,.resize-handle{display:none !important}#workspaceCanvas{user-select:none !important; -webkit-user-select:none !important; -moz-user-select:none !important; -ms-user-select:none !important}.workspace-photo{pointer-events:auto !important}.canvas-container{touch-action:none !important}.canvas-resize-controls,.canvas-resize-handle,.resize-handle:not(.workspace-photo .resize-handle){display:none !important}.workspace-photo .drag-handle,.workspace-photo .rotate-handle,.workspace-photo .resize-handle{display:block !important; pointer-events:auto !important}.workspace-photo .rotate-handle{width:28px !important; height:28px !important; top:-38px !important; left:50% !important; transform:translateX(-50%) !important; background:#667eea !important; border:2px solid white !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:0 2px 8px rgba(0,0,0,0.2) !important; z-index:1000 !important}.workspace-photo .rotate-handle i,.workspace-photo .rotate-handle::before{color:white !important; font-size:14px !important}.workspace-photo .rotate-handle::before{width:40px !important; height:35px !important; left:50% !important; top:100% !important; transform:translateX(-50%) !important}.workspace-photo .resize-handle{width:18px !important; height:18px !important; touch-action:none !important}.workspace-photo.resizing{pointer-events:none !important}.workspace-photo.resizing .resize-handle{pointer-events:auto !important}.workspace-photo.zooming{transition:none !important; z-index:1000 !important}.workspace-photo.zooming .drag-handle,.workspace-photo.zooming .rotate-handle,.workspace-photo.zooming .resize-handle,.workspace-photo.zooming .delete-button{transition:opacity 0.2s ease !important}.workspace-photo{box-sizing:border-box !important}.workspace-photo.selected{z-index:999997 !important}.workspace-photo.zooming{z-index:2147483647 !important; position:relative !important; will-change:transform !important}.workspace-photo.dragging,.workspace-photo.resizing,.workspace-photo.rotating{z-index:2147483647 !important; position:relative !important; will-change:transform !important}}