.pc-overlay{position:fixed;inset:0;background:rgba(8,14,28,.5);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:600}
.pc-dialog{background:#fff;color:#16233d;border:1px solid #e6ebf5;border-radius:22px;width:min(560px,100%);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(12,24,48,.3)}
.pc-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 4px}
.pc-title{margin:0;font-size:1.05rem;font-weight:700}
.pc-x{width:30px;height:30px;border-radius:9px;border:0;background:transparent;color:#7c8aa6;font-size:1.3rem;line-height:1;cursor:pointer}
.pc-x:hover{background:#f1f4fa;color:#16233d}

/* Mode row sits directly under the title so the active shape is the first
   thing read, not an afterthought below the picture. */
.pc-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 20px 14px}
.pc-modes{display:flex;gap:8px}
.pc-mode{position:relative;border:2px solid #dde4f0;background:#fff;color:#5b6a86;padding:9px 22px;border-radius:999px;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease,box-shadow .14s ease}
.pc-mode:hover{border-color:#b9c6de;color:#16233d}
.pc-mode.is-active{background:#1746c8;border-color:#1746c8;color:#fff;box-shadow:0 6px 18px rgba(23,70,200,.34)}
.pc-mode.is-active::after{content:"";position:absolute;left:50%;bottom:-9px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#1746c8}
.pc-utils{display:flex;gap:8px}
.pc-util{border:1px solid #dde4f0;background:#fff;color:#5b6a86;padding:8px 14px;border-radius:999px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.pc-util:hover{border-color:#b9c6de;color:#16233d}

.pc-stage{position:relative;height:280px;margin:0 20px;border-radius:14px;overflow:hidden;background:#eef2f9;touch-action:none;user-select:none;cursor:default}
.pc-canvas{display:block;position:absolute;inset:0}
.pc-shade{position:absolute;inset:0;background:rgba(9,15,28,.55);pointer-events:none}

/* The selection is the thing you move. Its own cursor says so, and the image
   underneath never pans. */
.pc-sel{position:absolute;box-sizing:border-box;border:2px solid #fff;cursor:move;box-shadow:0 0 0 1px rgba(9,15,28,.45),0 4px 18px rgba(9,15,28,.35)}
.pc-sel::before{content:attr(data-size);position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:6px;background:rgba(9,15,28,.62);color:#fff;font:600 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;pointer-events:none;white-space:nowrap}
.pc-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33.2%,rgba(255,255,255,.34) 33.2%,rgba(255,255,255,.34) 33.5%,transparent 33.5%,transparent 66.4%,rgba(255,255,255,.34) 66.4%,rgba(255,255,255,.34) 66.7%,transparent 66.7%),linear-gradient(to bottom,transparent 33.2%,rgba(255,255,255,.34) 33.2%,rgba(255,255,255,.34) 33.5%,transparent 33.5%,transparent 66.4%,rgba(255,255,255,.34) 66.4%,rgba(255,255,255,.34) 66.7%,transparent 66.7%)}
.pc-h{position:absolute;background:#fff;border-radius:3px}
.pc-h-corner{width:14px;height:14px;box-shadow:0 1px 4px rgba(9,15,28,.55)}
.pc-h-edge{background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(9,15,28,.4)}
.pc-h[data-grip=nw]{left:-7px;top:-7px;cursor:nwse-resize}
.pc-h[data-grip=ne]{right:-7px;top:-7px;cursor:nesw-resize}
.pc-h[data-grip=se]{right:-7px;bottom:-7px;cursor:nwse-resize}
.pc-h[data-grip=sw]{left:-7px;bottom:-7px;cursor:nesw-resize}
.pc-h[data-grip=n]{left:50%;top:-4px;width:30px;height:7px;margin-left:-15px;cursor:ns-resize}
.pc-h[data-grip=s]{left:50%;bottom:-4px;width:30px;height:7px;margin-left:-15px;cursor:ns-resize}
.pc-h[data-grip=w]{top:50%;left:-4px;width:7px;height:30px;margin-top:-15px;cursor:ew-resize}
.pc-h[data-grip=e]{top:50%;right:-4px;width:7px;height:30px;margin-top:-15px;cursor:ew-resize}

.pc-hint{margin:11px 20px 0;font-size:.76rem;color:#7c8aa6;text-align:center}
.pc-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px 20px}
.pc-btn{border:1px solid #dde4f0;background:#fff;color:#16233d;padding:10px 22px;border-radius:999px;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.pc-btn:hover{border-color:#b9c6de}
.pc-btn.is-primary{background:#1746c8;border-color:#1746c8;color:#fff}
.pc-btn.is-primary:hover{background:#1239a8;border-color:#1239a8}

body[data-theme="dark"] .pc-dialog{background:#131c2e;color:#e8eefb;border-color:#263349}
body[data-theme="dark"] .pc-x{color:#93a3c4}
body[data-theme="dark"] .pc-x:hover{background:#1c2740;color:#e8eefb}
body[data-theme="dark"] .pc-mode,body[data-theme="dark"] .pc-util,body[data-theme="dark"] .pc-btn{background:#1c2740;border-color:#2e3c56;color:#c3ccdd}
body[data-theme="dark"] .pc-mode:hover,body[data-theme="dark"] .pc-util:hover,body[data-theme="dark"] .pc-btn:hover{border-color:#425373;color:#fff}
body[data-theme="dark"] .pc-mode.is-active,body[data-theme="dark"] .pc-btn.is-primary{background:#2f6bff;border-color:#2f6bff;color:#fff}
body[data-theme="dark"] .pc-mode.is-active::after{background:#2f6bff}
body[data-theme="dark"] .pc-stage{background:#0e131a}
body[data-theme="dark"] .pc-hint{color:#93a3c4}

@media (max-width:520px){.pc-stage{height:220px}.pc-tools{justify-content:center}.pc-foot .pc-btn{flex:1 1 auto}}