/* Toolisco — styles for Background Remover, Image to Text OCR, Photo Collage Maker,
   Image to GIF Maker, GIF Compressor and Text to PDF Converter.
   Loaded only on those pages, after seotools.css, utiltools.css and maketools.css (reused read-only). */
.tool-app .btn[hidden]{display:none}
.md-box{border:1px solid var(--border);border-radius:var(--r-md);background:repeating-conic-gradient(var(--bg-sunken) 0% 25%,var(--surface) 0% 50%) 50%/18px 18px;min-height:180px;display:grid;place-items:center;padding:var(--s-2);overflow:hidden}
.md-box canvas,.md-box img{display:block;max-width:100%;max-height:460px;width:auto;height:auto}
.md-empty{color:var(--text-mute);font-size:var(--fs-sm);text-align:center;padding:var(--s-5)}
.md-empty[hidden]{display:none}
.md-info{font-size:var(--fs-sm);color:var(--text-soft);margin-top:var(--s-3);overflow-wrap:anywhere}
.md-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
@media (max-width:700px){.md-pair{grid-template-columns:minmax(0,1fr)}}
.md-cap{font-size:var(--fs-xs);color:var(--text-mute);margin:.35rem 0 0}
.md-color{display:flex;gap:.5rem;align-items:center}
.md-color[hidden]{display:none}
.md-color input[type=color]{width:44px;height:36px;padding:2px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.md-seg{display:flex;flex-wrap:wrap;max-width:100%}
.md-seg button{flex:1 1 auto}
/* before / after comparison */
.bg-stage{display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);padding:var(--s-2);min-height:180px;overflow:hidden}
.bg-compare{--pos:50%;position:relative;max-width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;line-height:0}
.bg-compare[hidden]{display:none}
.bg-compare canvas{display:block;max-width:100%;height:auto}
.bg-compare #afterCanvas{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 0 0 var(--pos));background:repeating-conic-gradient(#d9dde7 0% 25%,#fff 0% 50%) 50%/16px 16px}
.bg-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(16,23,48,.45);pointer-events:none}
.bg-handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:#fff;color:#101730;display:grid;place-items:center;font-size:15px;line-height:30px;text-align:center;box-shadow:0 1px 4px rgba(16,23,48,.35)}
.bg-tags{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-mute);margin-top:.35rem}
.md-range{width:100%;margin-top:var(--s-2)}
/* sortable thumbnails */
.mk-thumbs{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s-2)}
.mk-thumb{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);padding:6px;min-width:0}
.mk-thumb.is-dragging{opacity:.45}
.mk-thumb.is-target{outline:2px dashed var(--signal);outline-offset:1px}
.mk-thumb.is-unused{opacity:.55}
.mk-thumb-img{display:grid;place-items:center;height:78px;cursor:grab;touch-action:none;border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.mk-thumb-img canvas{display:block;max-width:100%;max-height:78px;pointer-events:none}
.mk-thumb-cap{font-size:var(--fs-xs);color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.mk-thumb-btns{display:flex;gap:2px;margin-top:4px}
.mk-thumb-btns .btn{flex:1 1 0;min-width:0;padding:.25rem 0}
.md-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--s-2);margin:var(--s-3) 0 0}
.md-stats div{background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-2) var(--s-3);min-width:0}
.md-stats dt{font-size:var(--fs-xs);color:var(--text-mute);text-transform:uppercase;letter-spacing:.05em}
.md-stats dd{margin:0;font-family:var(--font-mono);font-size:var(--fs-sm);overflow-wrap:anywhere}
/* OCR */
.ocr-out{width:100%;min-height:240px;font-size:var(--fs-base);line-height:1.6}
/* text to PDF */
.tp-text{width:100%;min-height:260px;font-size:var(--fs-sm);line-height:1.55}
.tp-pages{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;padding:var(--s-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);min-height:180px;max-height:780px;overflow:auto}
.tp-page{margin:0;text-align:center;min-width:0;max-width:100%}
.tp-page canvas{display:block;max-width:100%;height:auto;background:#fff;box-shadow:0 1px 4px rgba(16,23,48,.25)}
.tp-page figcaption{font-size:var(--fs-xs);color:var(--text-mute);margin-top:.3rem}
.lb-label{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.md-color label{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.mk-fields[hidden]{display:none}