/* Инструмент «Подпись или печать в PNG без фона». Свои классы с префиксом sgp-, общие классы виджета не переопределяются. */
.sgp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.sgp-col{min-width:0}
.sgp-stage{background:#f3f5fa;border:1px solid #e5e7eb;border-radius:12px;padding:12px;text-align:center;line-height:0}
.sgp-stage--res{min-height:120px;display:flex;align-items:center;justify-content:center}
.sgp-wrap{position:relative;display:inline-block;max-width:100%;line-height:0;vertical-align:top}
.sgp-wrap canvas{display:block;max-width:100%;max-height:60vh;width:auto;height:auto;border-radius:4px}
.sgp-check{display:block;max-width:100%;max-height:60vh;width:auto;height:auto;border:1px solid #d6dbe2;
  background-color:#fff;background-image:linear-gradient(45deg,#cfd4dc 25%,transparent 25%,transparent 75%,#cfd4dc 75%),linear-gradient(45deg,#cfd4dc 25%,transparent 25%,transparent 75%,#cfd4dc 75%);
  background-size:16px 16px;background-position:0 0,8px 8px}
.sgp-overlay{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:4px}
.sgp-frame{position:absolute;box-sizing:border-box;cursor:move;outline:0;border:2px solid #fff;box-shadow:0 0 0 1px rgba(29,38,48,.8),0 0 0 9999px rgba(29,38,48,.45)}
.sgp-frame:focus-visible{border-color:#ffd24a}
.sgp-h{position:absolute;width:18px;height:18px;margin:-9px;box-sizing:border-box;background:#3949a0;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(29,38,48,.6)}
/* зона нажатия крупнее видимой точки: удобно пальцем */
.sgp-h::before{content:"";position:absolute;inset:-11px}
.sgp-h[data-c=nw]{left:0;top:0;cursor:nwse-resize}
.sgp-h[data-c=ne]{left:100%;top:0;cursor:nesw-resize}
.sgp-h[data-c=sw]{left:0;top:100%;cursor:nesw-resize}
.sgp-h[data-c=se]{left:100%;top:100%;cursor:nwse-resize}
.sgp-tip,.sgp-note{font-size:.8rem;color:#6b7280;line-height:1.45;margin-top:8px}
.sgp-size{font-size:.86rem;color:#1d2630;line-height:1.45;margin-top:8px;font-weight:600}
.sgp-size.sgp-warn{color:#b3261e}
.sgp-row{margin-top:18px}
.sgp .sgp-opts{margin:0;padding:0;align-items:center}
.sgp .sgp-opts li{margin:0}
.sgp-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sgp-lbl{display:block;font-size:.84rem;color:#1d2630;font-weight:600;margin-bottom:8px}
.sgp-line{display:flex;align-items:center;gap:12px}
.sgp-line input[type=range]{flex:1 1 auto;min-width:0}
.sgp input[type=range]{width:100%;accent-color:#3949a0;margin:0;height:28px}
.sgp input[type=color]{width:44px;height:36px;padding:2px;border:1px solid #d6dbe2;border-radius:8px;background:#fff;cursor:pointer}
.sgp-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gd-w-btn.sgp-sm{padding:7px 14px;font-size:.86rem;border-width:1px;font-weight:600;flex:0 0 auto}
.sgp-checks{display:flex;flex-wrap:wrap;gap:10px 24px}
.sgp-checks label{font-size:.9rem;color:#1d2630;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.sgp-checks input{width:18px;height:18px;accent-color:#3949a0;margin:0}
.sgp-list{margin:0 0 18px;padding-left:22px}
.sgp-list li{margin:0 0 8px;line-height:1.55}
@media (max-width:760px){
  .sgp-grid,.sgp-two{grid-template-columns:1fr}
  .sgp-stage{padding:8px}
}