/* Toolisco — styles for Image Color Picker, Image Histogram Analyzer, CSV Viewer & Editor,
   Credit Card Payoff Calculator, PDF Page Counter and LCM & GCF Calculator.
   Loaded only on those pages; builds on tools.css, seotools.css and utiltools.css. */
.tool-app [hidden]{display:none!important}
.it-stage{position:relative;border:1px solid var(--border);border-radius:var(--r-md);background:repeating-conic-gradient(var(--bg-sunken) 0% 25%,var(--surface) 0% 50%) 50%/22px 22px;padding:var(--s-3);display:grid;place-items:center;min-height:200px;overflow:hidden}
.it-stage canvas{display:block;max-width:100%;height:auto;image-rendering:pixelated;cursor:crosshair;touch-action:manipulation;border-radius:var(--r-sm)}
.it-stage canvas:focus-visible,.it-chart canvas:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.it-stage.is-empty{color:var(--text-mute);font-size:var(--fs-sm);text-align:center}
.it-marker{position:absolute;pointer-events:none;border:2px solid #fff;box-shadow:0 0 0 1px #000;border-radius:2px;transform:translate(-50%,-50%)}
.it-pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-4);align-items:start;margin-top:var(--s-3)}
@media (max-width:560px){.it-pick{grid-template-columns:1fr}}
.it-zoom{display:block;width:154px;height:154px;border:1px solid var(--border);border-radius:var(--r-sm);image-rendering:pixelated;background:var(--bg-sunken)}
.it-swatch{width:100%;height:44px;border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:var(--s-2);background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/14px 14px;position:relative;overflow:hidden}
.it-swatch span{position:absolute;inset:0}
.it-coords{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:var(--s-2);align-items:end}
.it-coords .field{margin:0}
.it-recent{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-2);list-style:none;padding:0}
.it-recent button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);border-radius:var(--r-pill);padding:.25rem .6rem .25rem .3rem;font-family:var(--font-mono);font-size:var(--fs-xs);cursor:pointer;min-height:32px}
.it-recent i{display:inline-block;width:20px;height:20px;border-radius:50%;border:1px solid var(--border)}
.it-note{font-size:var(--fs-xs);color:var(--text-mute);margin:.5rem 0 0}
.it-chart{position:relative;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);padding:var(--s-2)}
.it-chart canvas{display:block;width:100%;height:auto}
.it-tip{position:absolute;pointer-events:none;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:.2rem .45rem;font-family:var(--font-mono);font-size:var(--fs-xs);white-space:nowrap;box-shadow:var(--sh-2);transform:translate(-50%,-110%)}
.it-tablebar{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:end;margin:var(--s-3) 0}
.it-tablebar .field{margin:0;min-width:0}
.it-grid-wrap{overflow:auto;max-height:560px;border:1px solid var(--border);border-radius:var(--r-md)}
.it-grid{border-collapse:collapse;font-size:var(--fs-sm);min-width:100%}
.it-grid th,.it-grid td{border:1px solid var(--border);padding:0;vertical-align:top}
.it-grid thead th{position:sticky;top:0;z-index:1;background:var(--bg-sunken)}
.it-grid .it-rownum{min-width:56px;padding:6px 8px;color:var(--text-mute);font-family:var(--font-mono);font-size:var(--fs-xs);text-align:right;white-space:nowrap;background:var(--bg-sunken)}
.it-grid textarea{display:block;width:100%;min-width:120px;min-height:36px;border:0;background:transparent;color:var(--text);padding:7px 9px;font:inherit;resize:vertical;line-height:1.35}
.it-grid thead textarea{font-weight:600;min-height:34px}
.it-grid textarea:focus{outline:2px solid var(--signal);outline-offset:-2px;background:var(--bg-elev)}
.it-colctl{display:flex;gap:2px;padding:2px 4px 4px;justify-content:flex-start}
.it-colctl button,.it-rowdel{border:1px solid var(--border);background:var(--surface);color:var(--text-soft);border-radius:4px;min-width:28px;min-height:28px;font-size:var(--fs-xs);cursor:pointer;line-height:1}
.it-colctl button:disabled{opacity:.4;cursor:not-allowed}
.it-colctl button:focus-visible,.it-rowdel:focus-visible,.it-recent button:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.it-warn{border:1px solid rgba(217,154,43,.55);background:rgba(217,154,43,.10);color:var(--text);border-radius:var(--r-md);padding:var(--s-2) var(--s-3);font-size:var(--fs-sm);margin-top:var(--s-2)}
.it-pager{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-top:var(--s-2);font-size:var(--fs-sm);color:var(--text-soft)}
.it-factors{list-style:none;margin:var(--s-2) 0 0;padding:0;font-family:var(--font-mono);font-size:var(--fs-sm)}
.it-factors li{padding:.35rem .5rem;border-bottom:1px solid var(--border);word-break:break-all;color:var(--text-soft)}
.it-big{font-family:var(--font-mono);word-break:break-all}
.it-steps{margin:var(--s-2) 0 0;padding-left:1.3rem;font-size:var(--fs-sm);color:var(--text-soft)}
.it-steps li{list-style:decimal;margin:.3rem 0;word-break:break-word}
.it-files{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.it-file{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);padding:var(--s-3)}
.it-file-head{display:flex;gap:var(--s-2);align-items:flex-start;justify-content:space-between}
.it-file-name{font-weight:600;color:var(--text);word-break:break-all}
.it-file dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s-2);margin:var(--s-2) 0 0}
.it-file dt{font-size:var(--fs-xs);color:var(--text-mute)}
.it-file dd{margin:0;font-size:var(--fs-sm);color:var(--text);word-break:break-word}
.it-file.is-error{border-color:rgba(225,86,107,.55)}
.it-file.is-locked{border-color:rgba(217,154,43,.55)}
.it-pw{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:end;margin-top:var(--s-2)}
.it-pw .field{margin:0;flex:1 1 180px}
.it-sched{min-width:640px}
.it-sched td,.it-sched th{text-align:right;white-space:nowrap}
.it-sched td:first-child,.it-sched th:first-child,.it-sched td:nth-child(2),.it-sched th:nth-child(2){text-align:left}
.it-mode{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:0 0 var(--s-3)}
.it-mode label{display:inline-flex;gap:.45rem;align-items:center;font-size:var(--fs-sm);color:var(--text-soft);cursor:pointer}
.it-money-stats .seo-stat b{overflow-wrap:anywhere}
@media (max-width:560px){.it-money-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}