/* Editriq tool widgets — usable both on standalone tool pages and inside
   the existing lp.css landing pages. Colour tokens come from :root of
   tool-ui.css or lp.css; only the two extra tokens are defined here. */
:root{--ok:#047857;--warn:#b45309}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.badge-chip{display:inline-block;font-size:.78rem;padding:4px 12px;border-radius:999px;border:1px solid rgba(8,145,178,.3);background:rgba(8,145,178,.08);color:#0e7490}
.badge-chip.server{border-color:rgba(180,83,9,.3);background:rgba(180,83,9,.08);color:var(--warn)}
.privacy-note{margin:0 0 20px;padding:12px 16px;border-left:3px solid var(--cyan);background:rgba(8,145,178,.06);color:var(--text-dim);font-size:.84rem}
.drop-zone{border:2px dashed var(--border);border-radius:16px;padding:44px 24px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--cyan);background:rgba(8,145,178,.04)}
.drop-zone p{color:var(--text-dim);margin-top:10px;font-size:.95rem}
.drop-hint{font-size:.8rem !important;opacity:.75}
.panel{margin-top:20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}
.panel h3{font-size:1rem;color:var(--text-heading);margin-bottom:12px}
.field{display:block;margin-bottom:14px;font-size:.88rem;color:var(--text-heading)}
.field span.label{display:block;margin-bottom:6px;font-weight:600}
.field input[type=text],.field input[type=password],.field input[type=number],.field select{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:.92rem;background:var(--white);color:var(--text)}
.field .hint{display:block;margin-top:5px;font-size:.78rem;color:var(--text-dim);font-weight:400}
.radio-row{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.radio-row label{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;cursor:pointer}
.radio-row input{margin-top:4px;flex:none}
.radio-row .rl-title{font-weight:600;color:var(--text-heading)}
.radio-row .rl-desc{display:block;font-size:.79rem;color:var(--text-dim)}
.check-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;font-size:.87rem}
.check-row label{display:flex;gap:7px;align-items:center;cursor:pointer}
.btn-run{background:var(--accent);color:var(--white);border:none;padding:12px 30px;border-radius:8px;font-weight:700;font-size:.95rem;cursor:pointer;transition:background .2s}
.btn-run:hover:not(:disabled){background:var(--accent-hover)}
.btn-run:disabled{opacity:.55;cursor:not-allowed}
.btn-sub{background:transparent;color:var(--text-dim);border:1px solid var(--border);padding:9px 18px;border-radius:8px;font-size:.85rem;cursor:pointer;margin-left:8px}
.btn-sub:hover{border-color:var(--cyan);color:var(--text-heading)}
.btn-download{display:inline-block;background:var(--cyan);color:var(--white);padding:10px 26px;border-radius:8px;font-weight:600;font-size:.9rem;text-decoration:none;margin:4px 6px 4px 0}
.btn-download:hover{opacity:.88}
.file-list{list-style:none;margin:0 0 14px}
.file-list li{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--white);margin-bottom:8px;font-size:.86rem}
.file-list .fl-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list .fl-size{color:var(--text-dim);font-size:.78rem;flex:none}
.file-list button{border:1px solid var(--border);background:var(--white);border-radius:6px;width:30px;height:30px;cursor:pointer;color:var(--text-dim);font-size:.9rem;flex:none}
.file-list button:hover{border-color:var(--cyan);color:var(--text-heading)}
.progress{display:none;margin-top:20px}
.progress.active{display:block}
.progress-bar{width:100%;height:6px;background:var(--surface);border-radius:3px;overflow:hidden;margin:10px 0}
.progress-fill{height:100%;background:var(--cyan);border-radius:3px;transition:width .25s;width:0}
.progress-text{font-size:.85rem;color:var(--text-dim)}
.result{display:none;margin-top:20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px}
.result.active{display:block}
.result h3{color:var(--text-heading);margin-bottom:8px;font-size:1.05rem}
.result .stat{font-size:.88rem;color:var(--text-dim);margin-bottom:14px}
.result .stat strong{color:var(--ok)}
.notice{margin-top:12px;padding:11px 14px;border-radius:8px;font-size:.83rem;border-left:3px solid var(--warn);background:rgba(180,83,9,.07);color:#7c2d12}
.error{display:none;margin-top:16px;padding:11px 14px;border-radius:8px;font-size:.86rem;border-left:3px solid var(--accent);background:rgba(233,69,96,.07);color:#9f1239}
.error.active{display:block}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:12px}
.thumbs figure{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--white)}
.thumbs img,.thumbs canvas{width:100%;display:block}
.thumbs figcaption{font-size:.74rem;color:var(--text-dim);padding:6px;text-align:center}
.crop-stage{position:relative;display:inline-block;max-width:100%;margin-top:8px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--white);touch-action:none}
.crop-stage canvas{display:block;max-width:100%}
.crop-box{position:absolute;border:2px solid var(--accent);background:rgba(233,69,96,.12);pointer-events:none}