/* Toolisco — styles for Image to SVG Converter, Text Encrypt / Decrypt, CSS Animation Generator,
   Markdown Table Generator, Credit Card Number Validator and Batch QR Code Generator from CSV.
   Loaded only on those pages, after seotools.css and utiltools.css (reused read-only). */
.mk-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-3) var(--s-4)}
.mk-fields .field{margin:0;min-width:0}
.mk-fields .input{width:100%}
.mk-fields label{display:flex;justify-content:space-between;gap:.5rem}
.mk-fields input[type=range]{width:100%}
.mk-check{display:flex;gap:.5rem;align-items:center;font-size:var(--fs-sm);color:var(--text-soft);margin:var(--s-2) 0}
.ct-err{color:#c2304a}
.ct-warn{color:#a9730f}
:root[data-theme="dark"] .ct-err{color:#ff8ba0}
:root[data-theme="dark"] .ct-warn{color:#f0b450}
/* image to SVG */
.sv-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-3)}
@media (max-width:700px){.sv-pair{grid-template-columns:minmax(0,1fr)}}
.sv-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:160px;display:grid;place-items:center;padding:var(--s-2);overflow:hidden}
.sv-box canvas,.sv-box img{display:block;max-width:100%;max-height:420px;width:auto;height:auto}
.sv-cap{font-size:var(--fs-xs);color:var(--text-mute);margin:.35rem 0 0}
.sv-info{font-size:var(--fs-sm);color:var(--text-soft);margin-top:var(--s-3);overflow-wrap:anywhere}
/* encrypt */
.en-out{width:100%;min-height:160px;font-family:var(--font-mono);font-size:var(--fs-sm);word-break:break-all}
/* animation */
.ca-stage{display:grid;place-items:center;min-height:260px;border:1px dashed var(--border-strong);border-radius:var(--r-md);background:var(--bg-sunken);overflow:hidden;padding:var(--s-5)}
.ca-controls{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.mk-out{width:100%;min-height:200px}
/* markdown table */
.mt-wrap{overflow:auto;max-width:100%;border:1px solid var(--border);border-radius:var(--r-md)}
.mt-edit{border-collapse:collapse;min-width:100%}
.mt-edit th,.mt-edit td{padding:4px;border-bottom:1px solid var(--border);vertical-align:top}
.mt-edit thead th{background:var(--bg-sunken)}
.mt-colctl{display:flex;gap:2px;align-items:center;min-width:190px}
.mt-colctl .input{padding:.3rem .45rem;font-size:var(--fs-xs);min-width:84px}
.mt-colctl .btn,.mt-rowctl .btn{min-width:30px;padding:.3rem .4rem}
.mt-rowctl{white-space:nowrap;width:1%}
.mt-cell{width:100%;min-width:150px;min-height:38px;resize:vertical;padding:.4rem .5rem;font-size:var(--fs-sm);line-height:1.35}
.mt-head .mt-cell{font-weight:700}
.mt-prev-wrap{overflow:auto;max-width:100%}
.mt-prev td,.mt-prev th{word-break:normal;overflow-wrap:break-word;white-space:pre-wrap}
/* credit card */
.cc-mask{font-family:var(--font-mono);white-space:nowrap}
.cc-table{min-width:620px}
.cc-table td{word-break:normal;overflow-wrap:break-word}
/* batch QR */
.qb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--s-3);margin-top:var(--s-3)}
.qb-card{margin:0;padding:var(--s-2);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);text-align:center;min-width:0}
.qb-card canvas{display:block;width:100%;max-width:160px;height:auto;margin:0 auto;image-rendering:pixelated}
.qb-card figcaption{font-size:var(--fs-xs);color:var(--text-soft);margin-top:.35rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qb-table{min-width:720px}
.qb-table td{word-break:normal;overflow-wrap:anywhere;vertical-align:top}
.qb-payload{max-width:280px;font-family:var(--font-mono);font-size:var(--fs-xs)}
.qb-bad td{opacity:.85}