/* Tools pages (background remover). Colours come from the theme tokens. */
.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:7px 12px 7px 10px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--text-2);text-decoration:none;border:1px solid var(--line);background:var(--elev)}
.back-link:hover{color:var(--text);border-color:var(--line-strong)}
.back-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.back-link svg{flex-shrink:0}
.checker{background-color:#fff;background-image:linear-gradient(45deg,#d9d9de 25%,transparent 25%,transparent 75%,#d9d9de 75%),linear-gradient(45deg,#d9d9de 25%,transparent 25%,transparent 75%,#d9d9de 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.compare{position:relative;width:fit-content;max-width:100%;margin:0 auto 18px;border-radius:16px;overflow:hidden;max-height:520px;background:var(--fill);user-select:none;touch-action:pan-y}
.cmp-base,.cmp-top{display:flex;justify-content:center}
.cmp-base img,.cmp-top img{display:block;max-width:100%;max-height:520px;width:auto;height:auto}
.cmp-top{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 var(--cut,0%) 0 0)}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp-tag{position:absolute;top:10px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(0,0,0,.55);color:#fff;pointer-events:none}
.cmp-l{left:10px}.cmp-r{right:10px}
.cmp-line{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none;left:var(--pos,100%)}
.fname{margin:12px 2px 0;font-size:14px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opts{margin-top:20px;display:grid;gap:16px;padding-top:18px;border-top:1px solid var(--line)}
.opt{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.opt .q-label{min-width:92px}
.opt.row{gap:22px}
.hint{flex-basis:100%;color:var(--text-3);font-size:13px;margin-left:104px}
.opt input[type=range]{accent-color:var(--accent);width:180px}
.chk{display:inline-flex;gap:8px;align-items:center;font-size:14px;color:var(--text-2);cursor:pointer}
.swatches{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sw{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-size:12px;color:var(--text-2)}
.sw em{font-style:normal}
.sw-c{width:36px;height:36px;border-radius:50%;border:2px solid var(--line-strong);display:block;background-size:12px 12px}
.sw-custom{background:conic-gradient(#f43f5e,#f59e0b,#22c55e,#0ea5e9,#8b5cf6,#f43f5e)}
.sw:has(input:checked) .sw-c{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sw:has(input:focus-visible) .sw-c{outline:2px solid var(--accent);outline-offset:2px}
#bgColor{width:36px;height:36px;padding:0;border:0;background:none;cursor:pointer}
.seg-opt:has(input:disabled){opacity:.45;cursor:not-allowed}
#dl{text-decoration:none}
@media(max-width:560px){.hint{margin-left:0}.opt input[type=range]{width:100%}}

.editor{margin-bottom:18px}.editor-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-bottom:12px}
.editor-stage{display:flex;justify-content:center;border-radius:14px;overflow:hidden;padding:0}.editor-stage canvas{display:block;cursor:crosshair;max-width:100%}
.editor-bar input[type=range]{width:120px}

.compare{min-height:120px}.compare img:not([src]){visibility:hidden}

.editor-stage.zoomed{overflow:auto;justify-content:flex-start;max-height:70vh}.editor-stage.zoomed canvas{max-width:none}
.up-sizes{margin:-6px 0 14px;text-align:center;font-size:14px;color:var(--text-2)}
.share-lock{flex-basis:100%;margin:0;font-size:13.5px;color:var(--text-2)}
.share-lock a{color:var(--accent);font-weight:600}
.rs-sec{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:14px}
.rs-sec h3{margin:0;font-size:17px}
.rs-stage{display:flex;justify-content:center;border-radius:14px;overflow:hidden;background-color:var(--fill);padding:0}
.rs-stage canvas{display:block;max-width:100%;height:auto}
.rs-hint{margin:0;flex-basis:auto}
.rs-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;width:100%}
.rs-chip{display:flex;flex-direction:column;gap:2px;text-align:left;padding:9px 12px;border-radius:12px;border:1px solid var(--line-strong);background:var(--elev);color:var(--text);cursor:pointer;font:inherit}
.rs-chip b{font-size:13.5px}.rs-chip small{font-size:12px;color:var(--text-3)}
.rs-chip:hover{border-color:var(--accent)}
.rs-chip[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rs-num{width:110px;padding:9px 10px;border-radius:10px;border:1px solid var(--line-strong);background:var(--elev);color:var(--text);font:inherit}
#barColor{width:36px;height:36px;padding:0;border:0;background:none;cursor:pointer}
@media(max-width:560px){.rs-presets{grid-template-columns:1fr 1fr}.rs-num{width:90px}}
.srv-row{margin:14px 0 4px}
.srv-hint{outline:2px solid var(--accent,#0a74ff);outline-offset:4px;border-radius:8px}

/* Before/after handle: a bright line with a round grip. Drag it (or press the arrow keys) to reveal the result. */
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:0;pointer-events:none;z-index:3}
.cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.28),0 0 14px rgba(0,0,0,.5)}
.cmp-grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;color:#1d1d1f;display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.12);transition:transform .18s cubic-bezier(.2,1.3,.4,1)}
.compare:hover .cmp-grip{transform:translate(-50%,-50%) scale(1.12)}
.compare:active .cmp-grip{transform:translate(-50%,-50%) scale(.94)}
.compare:has(.cmp-range:focus-visible) .cmp-grip{outline:3px solid var(--accent);outline-offset:3px}
.cmp-grip.hint::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.85);animation:cmpPulse 1.6s ease-out infinite}
@keyframes cmpPulse{from{transform:scale(.85);opacity:.9}to{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.cmp-grip.hint::after{animation:none}.cmp-grip{transition:none}}
@media(max-width:560px){.cmp-grip{width:42px;height:42px}}