:root{--pcm-primary:var(--main-primary);--pcm-primary-hover:var(--main-primary-hover);--pcm-text:#1f2937;--pcm-text-muted:#64748b;--pcm-bg:#fff;--pcm-bg-secondary:#f8fafc;--pcm-bg-hover:#f1f5f9;--pcm-border:#e2e8f0;--pcm-border-hover:#cbd5e1;--pcm-shadow:0 1px 3px #00000014;--pcm-shadow-lg:0 4px 16px #0000001f;--pcm-radius:.5rem;--pcm-radius-lg:.75rem;--pcm-danger:#ef4444;--pcm-danger-hover:#dc2626;--pcm-cell-empty-bg:#f1f5f9;--pcm-cell-empty-border:#cbd5e1;--pcm-cell-overlay-bg:#00000080}._pcm-container{gap:var(--main-space-4);flex-direction:column;max-width:1100px;min-height:500px;margin:0 auto;display:flex}@media (max-width:768px){._pcm-container{gap:var(--main-space-3);padding-left:.75rem;padding-right:.75rem}}._pcm-toolbar{justify-content:space-between;align-items:flex-start;gap:var(--main-space-4);background:var(--pcm-bg);border-radius:var(--pcm-radius-lg);padding:var(--main-space-4);box-shadow:var(--pcm-shadow);border-style:solid;border-width:1px;border-color:var(--pcm-border);flex-wrap:wrap;display:flex}._pcm-toolbar-left,._pcm-toolbar-right{align-items:flex-start;gap:var(--main-space-5);flex-wrap:wrap;display:flex}._pcm-toolbar-label{font-size:var(--main-text-xs);color:var(--pcm-text-muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;align-items:center;gap:.375rem;margin-bottom:.375rem;font-weight:600;display:flex}._pcm-toolbar-label svg{color:var(--pcm-text-muted)}._pcm-layout-options{flex-wrap:wrap;gap:.25rem;display:flex}._pcm-layout-btn{border-style:solid;border-width:1.5px;border-color:var(--pcm-border);border-radius:var(--main-radius);background:var(--pcm-bg);cursor:pointer;justify-content:center;align-items:center;width:40px;height:32px;padding:.25rem;transition:border-color .15s,box-shadow .15s;display:flex}._pcm-layout-btn:hover{border-color:var(--pcm-primary)}._pcm-layout-btn.active{border-color:var(--pcm-primary);box-shadow:0 0 0 1px var(--pcm-primary);background:#6366f10d}._pcm-layout-icon{width:100%;height:100%}._pcm-layout-icon rect{fill:var(--pcm-border);stroke:var(--pcm-text-muted);stroke-width:.5px}._pcm-layout-btn.active ._pcm-layout-icon rect{fill:#6366f126;stroke:var(--pcm-primary)}._pcm-setting-group{flex-direction:column;min-width:0;display:flex}._pcm-select{border-style:solid;border-width:1.5px;border-color:var(--pcm-border);border-radius:var(--main-radius);background:var(--pcm-bg);color:var(--pcm-text);font-size:var(--main-text-sm);cursor:pointer;min-width:70px;padding:.375rem .625rem}._pcm-select:focus{border-color:var(--pcm-primary);outline:none;box-shadow:0 0 0 2px #6366f126}._pcm-range-wrapper{align-items:center;gap:.5rem;display:flex}._pcm-range{width:80px;accent-color:var(--pcm-primary);cursor:pointer}._pcm-range-value{font-size:var(--main-text-xs);color:var(--pcm-text-muted);min-width:32px;font-family:var(--main-font-mono)}._pcm-color-wrapper{align-items:center;gap:.5rem;display:flex}._pcm-color-input{border-style:solid;border-width:1.5px;border-color:var(--pcm-border);border-radius:var(--main-radius);cursor:pointer;background:var(--pcm-bg);width:28px;height:28px;padding:1px}._pcm-color-input::-webkit-color-swatch-wrapper{padding:0}._pcm-color-input::-webkit-color-swatch{border:none;border-radius:3px}._pcm-color-presets{gap:.25rem;display:flex}._pcm-color-preset{border-style:solid;border-width:2px;border-color:var(--pcm-border);cursor:pointer;border-radius:50%;width:22px;height:22px;padding:0;transition:border-color .15s}._pcm-color-preset:hover{border-color:var(--pcm-primary)}._pcm-color-preset.active{border-color:var(--pcm-primary);box-shadow:0 0 0 1px var(--pcm-primary)}@media (max-width:768px){._pcm-toolbar{gap:var(--main-space-3);padding:var(--main-space-3);flex-direction:column}._pcm-toolbar-left,._pcm-toolbar-right{gap:var(--main-space-3);width:100%}._pcm-toolbar-right{grid-template-columns:1fr 1fr;display:grid}._pcm-setting-group{min-width:0}._pcm-layout-btn{width:44px;height:36px}._pcm-layout-options{gap:.375rem}._pcm-select{font-size:var(--main-text-sm);width:100%;padding:.5rem .625rem}._pcm-range-wrapper{width:100%}._pcm-range{flex:1;width:100%;min-width:0;height:28px}._pcm-range::-webkit-slider-thumb{width:22px;height:22px}._pcm-range::-moz-range-thumb{width:22px;height:22px}._pcm-color-wrapper{flex-wrap:wrap}._pcm-color-input{width:36px;height:36px}._pcm-color-presets{gap:.375rem}._pcm-color-preset{width:28px;height:28px}}@media (max-width:480px){._pcm-toolbar-right{grid-template-columns:1fr}._pcm-color-presets{flex-wrap:wrap}}._pcm-upload-zone{border-style:dashed;border-width:2px;border-color:var(--pcm-border);border-radius:var(--pcm-radius-lg);background:var(--pcm-bg);cursor:pointer;justify-content:center;align-items:center;min-height:360px;transition:border-color .2s,background .2s;display:flex}._pcm-upload-zone:hover,._pcm-upload-zone.dragover{border-color:var(--pcm-primary);background:#6366f108}._pcm-upload-zone.dragover{background:#6366f10f}._pcm-upload-content{align-items:center;gap:var(--main-space-3);padding:var(--main-space-6);text-align:center;flex-direction:column;display:flex}._pcm-upload-content svg{color:var(--pcm-border-hover)}._pcm-upload-title{font-size:var(--main-text-base);color:var(--pcm-text);margin:0;font-weight:600}._pcm-upload-hint{font-size:var(--main-text-sm);color:var(--pcm-text-muted);margin:0}._pcm-upload-btn{background:var(--pcm-primary);color:#fff;border-radius:var(--pcm-radius);font-size:var(--main-text-sm);cursor:pointer;border-width:0;align-items:center;gap:.5rem;padding:.625rem 1.5rem;font-weight:600;display:inline-flex;box-shadow:0 2px 8px #6366f140}._pcm-upload-btn:hover{opacity:.9}@media (max-width:768px){._pcm-upload-zone{min-height:240px}._pcm-upload-content{padding:var(--main-space-4);gap:var(--main-space-2)}._pcm-upload-title{font-size:var(--main-text-sm)}._pcm-upload-hint{font-size:var(--main-text-xs)}._pcm-upload-btn{min-height:44px;padding:.75rem 1.5rem}}._pcm-preview-wrapper{justify-content:center;align-items:flex-start;width:100%;display:flex}._pcm-canvas-area{width:100%;min-height:300px}._pcm-preview{border-radius:var(--pcm-radius-lg);box-shadow:var(--pcm-shadow-lg);max-width:100%;display:grid;position:relative;overflow:hidden}._pcm-cell{background:var(--pcm-cell-empty-bg);cursor:pointer;min-height:0;position:relative;overflow:hidden}._pcm-cell-image{object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none;width:100%;height:100%;display:block}._pcm-cell-empty{border-style:dashed;border-width:1px;border-color:var(--pcm-cell-empty-border);width:100%;height:100%;color:var(--pcm-text-muted);font-size:var(--main-text-sm);flex-direction:column;justify-content:center;align-items:center;gap:.375rem;display:flex}._pcm-cell-empty svg{opacity:.5}._pcm-cell-overlay{background:var(--pcm-cell-overlay-bg);opacity:0;justify-content:center;align-items:center;gap:.5rem;transition:opacity .2s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}._pcm-cell:hover ._pcm-cell-overlay{opacity:1}._pcm-cell-action{width:32px;height:32px;color:var(--pcm-text);cursor:pointer;background:#ffffffe6;border-width:0;border-radius:50%;justify-content:center;align-items:center;font-size:14px;display:flex;box-shadow:0 2px 8px #00000026}._pcm-cell-action:hover{background:#fff}._pcm-cell-action._pcm-action-remove{color:var(--pcm-danger)}._pcm-cell.dragging{opacity:.4}._pcm-cell.drag-over{box-shadow:inset 0 0 0 3px var(--pcm-primary)}._pcm-cell.panning ._pcm-cell-image{pointer-events:auto;cursor:grab}._pcm-cell.panning ._pcm-cell-image:active{cursor:grabbing}@media (max-width:768px){._pcm-cell-overlay{opacity:1;background:linear-gradient(#0000 45%,#00000073);align-items:flex-end;padding:.5rem}._pcm-cell-action{width:36px;height:36px;font-size:16px}._pcm-cell{touch-action:pan-y}}._pcm-actions{justify-content:space-between;align-items:center;gap:var(--main-space-3);background:var(--pcm-bg);border-radius:var(--pcm-radius-lg);padding:var(--main-space-3) var(--main-space-4);box-shadow:var(--pcm-shadow);border-style:solid;border-width:1px;border-color:var(--pcm-border);flex-wrap:wrap;display:flex}._pcm-actions-left,._pcm-actions-right{align-items:center;gap:.5rem;display:flex}._pcm-action-btn{border-style:solid;border-width:1.5px;border-color:var(--pcm-border);border-radius:var(--pcm-radius);background:var(--pcm-bg);color:var(--pcm-text);font-size:var(--main-text-sm);cursor:pointer;white-space:nowrap;align-items:center;gap:.375rem;padding:.5rem .875rem;font-weight:500;transition:border-color .15s,box-shadow .15s;display:inline-flex}._pcm-action-btn:hover{border-color:var(--pcm-border-hover);box-shadow:var(--pcm-shadow)}._pcm-action-btn._pcm-action-primary{background:var(--pcm-primary);border-color:var(--pcm-primary);color:#fff;box-shadow:0 2px 8px #6366f140}._pcm-action-btn._pcm-action-primary:hover{opacity:.9}._pcm-action-btn._pcm-action-danger{color:var(--pcm-danger);border-color:#ef44444d}._pcm-action-btn._pcm-action-danger:hover{border-color:var(--pcm-danger);background:#ef44440d}._pcm-export-group{align-items:center;gap:.375rem;display:flex}._pcm-export-format,._pcm-export-quality{font-size:var(--main-text-xs);min-width:auto;padding:.375rem .5rem}@media (max-width:768px){._pcm-actions{padding:var(--main-space-3);gap:var(--main-space-2)}._pcm-actions-left,._pcm-actions-right{flex-wrap:wrap;justify-content:center;gap:.5rem;width:100%}._pcm-action-btn{min-height:40px;padding:.625rem .875rem}._pcm-export-group{flex:1;min-width:0}._pcm-export-format,._pcm-export-quality{min-width:0;font-size:var(--main-text-sm);flex:1;padding:.5rem}}@media (max-width:480px){._pcm-actions-right{flex-direction:column;align-items:stretch}._pcm-export-group{width:100%}._pcm-action-btn._pcm-action-primary{justify-content:center;width:100%}}