.cp-main { padding:24px 0 40px; }
.cp-heading { margin:20px 0; }.cp-heading h1 { margin:6px 0; }.cp-heading p { margin:0; color:var(--ink-500); }
.cp-drop { display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px; border:2px dashed var(--border); border-radius:12px; background:var(--surface-50); cursor:pointer; text-align:center; }.cp-drop input { max-width:100%; }.cp-drop.dragging { border-color:var(--brand-600); background:var(--brand-50); }
.cp-file-row,.cp-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }.cp-file-row { justify-content:space-between; margin:16px 0; }.cp-file-row strong { overflow-wrap:anywhere; }.cp-muted { color:var(--ink-500); font-size:13px; line-height:1.6; margin:6px 0; }
.cp-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:16px; }.cp-preview-panel { min-width:0; }.cp-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px; background:var(--surface-50); border:1px solid var(--border); border-radius:10px; }.cp-toolbar input { width:56px; padding:5px; }.cp-instruction { font-size:13px; margin:10px 0; }
.cp-scroll { height:650px; max-height:75vh; overflow:auto; background:#e5e9ed; border:1px solid var(--border); border-radius:10px; padding:18px; }.cp-stage { position:relative; margin:0 auto; background:white; box-shadow:0 2px 10px #0002; }.cp-stage canvas { display:block; width:100%; height:100%; }#cp-overlay { position:absolute; inset:0; touch-action:none; cursor:crosshair; }
.cp-selection { position:absolute; border:2px solid #087d6c; background:#129c841a; cursor:move; box-sizing:border-box; }.cp-selection.b { border-color:#7150c7; background:#7150c71a; }.cp-selection.active { box-shadow:0 0 0 1px white; }.cp-handle { position:absolute; width:18px; height:18px; border:2px solid white; background:#087d6c; border-radius:3px; transform:translate(-50%,-50%); touch-action:none; }.b .cp-handle { background:#7150c7; }.cp-handle[data-handle="nw"] { left:0; top:0; cursor:nwse-resize; }.cp-handle[data-handle="n"] { left:50%; top:0; cursor:ns-resize; }.cp-handle[data-handle="ne"] { left:100%; top:0; cursor:nesw-resize; }.cp-handle[data-handle="e"] { left:100%; top:50%; cursor:ew-resize; }.cp-handle[data-handle="se"] { left:100%; top:100%; cursor:nwse-resize; }.cp-handle[data-handle="s"] { left:50%; top:100%; cursor:ns-resize; }.cp-handle[data-handle="sw"] { left:0; top:100%; cursor:nesw-resize; }.cp-handle[data-handle="w"] { left:0; top:50%; cursor:ew-resize; }
.cp-controls { padding:18px; align-self:start; }.cp-controls>label { display:block; margin:0 0 6px; font-weight:600; }.cp-region { border:1px solid var(--border); border-left:3px solid #087d6c; border-radius:8px; padding:12px; margin:14px 0; min-width:0; }.cp-b { border-left-color:#7150c7; }.cp-region label { font-size:13px; }.cp-region .cp-row { margin-top:10px; }.cp-exports { display:flex; flex-direction:column; gap:8px; margin:12px 0; }.cp-controls .form-input { width:100%; min-width:0; }.cp-download { display:block; margin:8px 0; overflow-wrap:anywhere; }#cp-error { color:#a32727; background:#fff1f1; border-radius:8px; padding:12px; }#cp-status:empty { display:none; }
#cp-dialog { max-width:min(94vw,1000px); width:900px; padding:18px; border:1px solid var(--border); border-radius:12px; }#cp-dialog::backdrop { background:#0008; }#cp-dialog .cp-row { justify-content:space-between; }.cp-crop-preview { overflow:auto; max-height:75vh; }.cp-crop-preview canvas { display:block; max-width:100%; height:auto; margin:auto; }[hidden] { display:none !important; }
@media(max-width:850px) { .cp-layout { grid-template-columns:minmax(0,1fr); }.cp-scroll { height:520px; padding:12px; }.cp-controls { padding:16px; }.cp-toolbar .btn { min-height:40px; } }