/* 8.ro */
.sg-pad { display: block; width: 100%; aspect-ratio: 600 / 220; height: auto; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--surface); touch-action: none; cursor: crosshair; }
.sg-src { display: grid; gap: 10px; }
.sg-preview { display: grid; place-items: center; min-height: 92px; padding: 10px; border-radius: 12px; }
.sg-preview img { display: block; max-width: 100%; max-height: 72px; }
.sg-nav { display: flex; align-items: center; gap: 8px; }
.sg-nav .pg-ic:first-child .i { transform: rotate(-90deg); }
.sg-nav .pg-ic:last-child .i { transform: rotate(-90deg); }
.sg-stage { position: relative; width: fit-content; max-width: calc(100% - 36px); margin: 18px auto; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .4); background: #fff; }
.sg-page { display: block; max-width: 100%; height: auto; }
.sg-marks { position: absolute; inset: 0; }
.sg-mark { position: absolute; display: block; outline: 2px dashed var(--accent); outline-offset: 2px; cursor: move; touch-action: none; }
.sg-mark:focus-visible { outline-style: solid; }
.sg-mark img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.sg-del { position: absolute; top: -14px; right: -14px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); cursor: pointer; }
.sg-del .i { width: 14px; height: 14px; }
.sg-size { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: var(--accent); cursor: nwse-resize; touch-action: none; }
.sg-help { padding: 0 18px 18px; text-align: center; }