.viewer{margin-top:0}.canvas-shell{border:1px solid var(--border-soft);border-radius:0;background:var(--bg-panel);padding:0;position:relative;overflow:visible;--ruler-thick: 18px}.canvas-stage{position:relative;width:100%;overflow:hidden}.canvas-shell.is-rulers{padding-top:var(--ruler-thick);padding-left:var(--ruler-thick)}#posterCanvas,#rulerOverlay{position:absolute;top:0;left:0;width:100%;height:auto;display:block;margin:0;padding:0;border-radius:0;background:transparent;z-index:1}#rulerOverlay{pointer-events:none}.ruler-ui{position:absolute;inset:0;pointer-events:none;z-index:3}.ruler{position:absolute;background:#f3f4f6;pointer-events:auto;cursor:crosshair}.ruler-corner{position:absolute;top:0;left:0;width:var(--ruler-thick);height:var(--ruler-thick);background:#f3f4f6;border-right:1px solid #d1d5db;border-bottom:1px solid #d1d5db;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#111;user-select:none}.ruler-h{top:0;left:var(--ruler-thick);height:var(--ruler-thick);width:calc(100% - var(--ruler-thick));border-bottom:1px solid #d1d5db}.ruler-v{top:var(--ruler-thick);left:0;width:var(--ruler-thick);height:calc(100% - var(--ruler-thick));border-right:1px solid #d1d5db}.bp-crop-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center}.bp-crop-modal[hidden]{display:none!important}.bp-crop-modal__backdrop{position:absolute;inset:0;background:#0f172aa6}.bp-crop-modal__panel{position:relative;width:min(92vw,980px);max-height:92vh;overflow:auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 20px 50px #00000059;display:flex;flex-direction:column;gap:12px;padding:16px}.bp-crop-modal__header{display:flex;justify-content:space-between;align-items:center}.bp-crop-modal__title{margin:0;font-size:1.1rem}.bp-crop-modal__close{margin:0;border-width:1px;padding:4px 10px;line-height:1}.bp-crop-modal__body{display:grid;place-items:center}.bp-crop-canvas{width:100%;min-height:260px;border:1px dashed #d1d5db;border-radius:10px;background:repeating-conic-gradient(#f8fafc 0% 25%,#eef2f7 0% 50%) 50%/22px 22px;padding:10px;display:grid;place-items:center}.bp-crop-stage{position:relative;touch-action:none;user-select:none;overflow:hidden}.bp-crop-stage canvas{display:block;max-width:100%;border-radius:8px}.bp-crop-area{position:absolute;border:2px solid #2563eb;box-shadow:0 0 0 9999px #0f172a73;cursor:move;touch-action:none}.bp-crop-handle{position:absolute;width:16px;height:16px;border-radius:999px;background:#fff;border:2px solid #2563eb}.bp-crop-handle[data-handle=nw]{top:-8px;left:-8px;cursor:nwse-resize}.bp-crop-handle[data-handle=ne]{top:-8px;right:-8px;cursor:nesw-resize}.bp-crop-handle[data-handle=sw]{bottom:-8px;left:-8px;cursor:nesw-resize}.bp-crop-handle[data-handle=se]{bottom:-8px;right:-8px;cursor:nwse-resize}.bp-crop-modal__actions{display:flex;justify-content:flex-end;gap:8px;position:relative;z-index:3;padding-top:6px;background:#fff}.bp-crop-modal__actions .btn,.bp-crop-modal__actions button{opacity:1;filter:none;border:1px solid #111827;background:#fff;color:#111827;box-shadow:0 1px #11182714;margin-top:0}.bp-crop-modal__actions .btn.btn-primary,.bp-crop-modal__actions button.btn-primary{background:#111827;color:#fff}