/* DailyToolLab Sign PDF + Watermark PDF (12-Nov-2026) */
.sg-step{font-size:1.05rem;margin:18px 0 8px}
.sg-step:first-child{margin-top:0}
.sg-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.sg-tab{font:inherit;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:inherit;cursor:pointer;min-height:40px}
.sg-tab[aria-selected="true"]{background:#15803d;border-color:transparent;color:#fff}
.sg-tab:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.sg-pad{display:block;width:100%;height:180px;background:#fff;border:2px dashed #9aa5b1;border-radius:12px;touch-action:none;cursor:crosshair;color-scheme:light}
.sg-typepv{display:block;max-width:100%;height:auto;max-height:110px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-top:6px;color-scheme:light}
.sg-marks{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.sg-mark{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);max-width:100%}
.sg-mark img{height:44px;max-width:160px;object-fit:contain;background:#fff;border-radius:6px;padding:2px}
.sg-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 6px;flex-wrap:wrap}
.sg-stage,.wm-stage{width:100%;max-width:100%;overflow:hidden;padding:10px 0}
.sg-stage-in{position:relative;display:inline-block;max-width:100%;line-height:0;touch-action:pan-y}
.sg-canvas,.wm-canvas{display:block;max-width:100%;height:auto;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18);color-scheme:light}
.sg-layer{position:absolute;left:0;top:0}
.sg-item{position:absolute;outline:1px dashed rgba(37,99,235,.8);cursor:move;touch-action:none;user-select:none;-webkit-user-select:none;line-height:1}
.sg-item.sel,.sg-item:focus{outline:2px solid #2563eb;outline-offset:1px}
.sg-item img{display:block;width:100%;height:100%;pointer-events:none}
.sg-date{display:block;white-space:nowrap;font-family:Helvetica,Arial,sans-serif;color:#111;pointer-events:none}
.sg-handle{position:absolute;right:-10px;bottom:-10px;width:20px;height:20px;border-radius:50%;background:#2563eb;border:2px solid #fff;cursor:nwse-resize;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sg-x{position:absolute;right:-11px;top:-11px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:#b91c1c;color:#fff;font-size:12px;line-height:20px;padding:0;cursor:pointer}
.sg-date-btn{display:flex;align-items:flex-end}
.sg-date-btn .btn{width:100%}
.sg-limit{margin:12px 0 0;padding:10px 12px;border-left:4px solid var(--warn,#b45309);background:var(--surface);border-radius:8px;font-size:.95rem}
.wm-modes{border:0;padding:0;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:6px 18px}
.wm-modes legend{font-weight:700;padding:0;margin-bottom:4px}
.wm input[type=range]{width:100%}
.wm input[type=color]{width:100%;min-height:44px;padding:2px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
@media (pointer:coarse){.sg-handle{width:28px;height:28px;right:-14px;bottom:-14px}.sg-x{width:30px;height:30px;right:-14px;top:-14px;line-height:26px}}

/* long file names in the download button must wrap on phones */
#sg-out .btn,#wm-out .btn{white-space:normal;max-width:100%;overflow-wrap:anywhere;text-align:center}

/* page pager on phones: label on its own line, buttons side by side */
@media (max-width:520px){.sg-nav{justify-content:flex-start}.sg-nav>span{order:-1;flex-basis:100%}}

/* only the selected (or focused) mark shows its remove and resize controls, so small marks stay readable */
.sg-item:not(.sel):not(:focus-within) .sg-x,.sg-item:not(.sel):not(:focus-within) .sg-handle{display:none}