:root{--bg:#0b1220;--panel:#0e1526;--muted:#cbd5e1;--accent:#2563eb;--border:#1f2937}
.piep-app{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;color:#e5e7eb}
.piep-ribbon{display:flex;gap:12px;flex-wrap:wrap;background:var(--bg);padding:10px;border-radius:12px;border:1px solid var(--border);margin-bottom:10px}
.piep-ribbon .group{display:flex;gap:8px;align-items:center}
.file-btn{background:var(--accent);color:#fff;padding:6px 10px;border-radius:8px;cursor:pointer;border:1px solid #1d4ed8}
.piep-shell{display:grid;grid-template-columns:240px 1fr 240px;gap:10px}
.piep-left,.piep-right{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:8px;max-height:80vh;overflow:auto}
.piep-main{display:flex;flex-direction:column;gap:8px}
.thumbs{display:grid;grid-template-columns:1fr;gap:8px}
.thumb{background:#0b1220;border:1px solid var(--border);border-radius:8px;padding:6px;position:relative}
.thumb canvas{width:100%;height:auto;background:#fff;border-radius:4px}
.thumb .ops{position:absolute;right:6px;top:6px;display:flex;gap:4px}
.thumb .ops button{font-size:10px}
.page-ops{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.props{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:8px}
.canvas-wrap{background:#0b1220;border:1px dashed var(--border);border-radius:12px;display:flex;justify-content:center;max-height:80vh;overflow:auto;position:relative}
#piep-canvas{background:#fff;margin:20px;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.handles{position:absolute;pointer-events:none}
.handles .h{position:absolute;width:10px;height:10px;border:1px solid #111;background:#fff;pointer-events:auto}
.handles .tl{top:-5px;left:-5px}.handles .tr{top:-5px;right:-5px}
.handles .bl{bottom:-5px;left:-5px}.handles .br{bottom:-5px;right:-5px}
.tool{background:#121a2e;color:#cbd5e1;border:1px solid var(--border);padding:6px 10px;border-radius:10px;cursor:pointer}
.tool.active{background:var(--accent);color:#fff;border-color:#1d4ed8}