/* File tools dialog: drop area, ordered file list, live status and result. */
.file-tool .tool-drop { margin:6px 0 12px; transition:border-color .2s, background .2s; }
.file-tool .tool-drop.over { border-color:#16877a; background:#eef7f2; }
.tool-files { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:6px; counter-reset:tool-file; }
.tool-files li { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; counter-increment:tool-file; font-size:calc(12px * var(--font-scale,1.1)); }
.tool-files li::before { content:counter(tool-file); min-width:20px; height:20px; border-radius:6px; background:#eef4ef; color:#4f7a62; display:grid; place-items:center; font-size:calc(10px * var(--font-scale,1.1)); }
.tool-files .file-name { flex:1; min-width:0; display:flex; align-items:center; gap:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-files .file-name svg { width:15px; flex-shrink:0; color:#7d9584; }
.tool-files small { color:var(--muted); white-space:nowrap; }
.tool-files .icon-button { width:28px; height:28px; border:0; }
.tool-files .icon-button svg { width:15px; }
.tool-files .icon-button:disabled { opacity:.3; }
.tool-options { margin:4px 0 8px; }
.tool-options .form-grid { margin-bottom:6px; }
.tool-status { margin:14px 0 4px; padding:13px 14px; border-radius:12px; background:#f4f8f5; border:1px solid #e1ebe4; font-size:calc(12px * var(--font-scale,1.1)); }
.tool-status .row { gap:9px; }
.tool-status .progress { margin:10px 0 0; }
.tool-status .progress>span { transition:width .4s; background:#16877a; }
.tool-status .progress.indeterminate>span { animation:tool-slide 1.3s ease-in-out infinite; }
.tool-status.error { display:flex; gap:9px; align-items:flex-start; background:#fff4f2; border-color:#f3d6d0; color:#a2412f; }
.tool-status.error svg { width:18px; flex-shrink:0; }
.tool-status.done { background:#fff; }
.tool-status .spinner { width:15px; height:15px; border-radius:50%; border:2px solid #cfe1d6; border-top-color:#16877a; animation:tool-spin .8s linear infinite; flex-shrink:0; }
.tool-result { display:flex; align-items:center; gap:12px; }
.tool-result>div { flex:1; min-width:0; }
.tool-result strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-result small { color:var(--muted); line-height:1.8; }
.tool-result .icon-tile { width:38px; height:38px; border-radius:11px; flex-shrink:0; }
.tool-status textarea { min-height:190px; line-height:1.9; margin-top:6px; }
.tool-status .field { margin-top:12px; }
.file-tool.busy .tool-drop, .file-tool.busy .tool-files, .file-tool.busy .tool-options { opacity:.55; pointer-events:none; }
.qr-preview { display:grid; justify-items:center; gap:12px; margin:14px 0 4px; }
.qr-preview img { width:210px; height:210px; border:1px solid var(--line); border-radius:12px; padding:8px; background:#fff; }
@keyframes tool-spin { to { transform:rotate(360deg); } }
@keyframes tool-slide { 0% { transform:translateX(120%); } 100% { transform:translateX(-300%); } }
@media(max-width:600px) { .tool-result { flex-wrap:wrap; } .tool-result .btn { width:100%; } }
:root[data-theme="dark"] .tool-files li { background:#161d2a; }
:root[data-theme="dark"] .tool-files li::before { background:#1e2938; color:#9fc3ae; }
:root[data-theme="dark"] .file-tool .tool-drop.over { background:#16232a; border-color:#3f8f7d; }
:root[data-theme="dark"] .tool-status { background:#131a27; border-color:#2b3445; }
:root[data-theme="dark"] .tool-status.done { background:#161d2a; }
:root[data-theme="dark"] .tool-status.error { background:#2a1a1a; border-color:#4a2a28; color:#f0a497; }
:root[data-theme="dark"] .qr-preview img { border-color:#333b4b; }

/* Site-wide file picker (public/js/file-picker.js) replacing the browser's native file button. */
input.file-picker-input { position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important; padding:0 !important; margin:0 !important; opacity:0 !important; overflow:hidden; clip-path:inset(50%); border:0 !important; pointer-events:none; }
.file-picker { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; width:100%; padding:10px; border:1.5px dashed #c9d8ce; border-radius:14px; background:#fafcfa; transition:border-color .2s, background .2s; }
.file-picker.in-zone { justify-content:center; border:0; background:none; padding:4px 0 0; margin-top:8px; }
.file-picker.dragging, .dropzone.dragging { border-color:#16877a; background:#eef7f2; }
.file-picker-button { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:8px 16px; border-radius:11px; background:linear-gradient(135deg,#16877a,#1f9d8c); color:#fff; font-weight:600; font-size:calc(13px * var(--font-scale,1.1)); box-shadow:0 4px 14px #16877a2e; transition:transform .15s, box-shadow .15s; white-space:nowrap; }
.file-picker-button:hover { transform:translateY(-1px); box-shadow:0 7px 18px #16877a3d; }
.file-picker-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.file-picker-hint { color:var(--muted); font-size:calc(12px * var(--font-scale,1.1)); }
.file-picker.in-zone .file-picker-hint { width:100%; text-align:center; }
.file-picker-list { display:grid; gap:6px; width:100%; }
.file-picker-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px; background:#fff; border:1px solid var(--line); font-size:calc(12px * var(--font-scale,1.1)); text-align:start; }
.file-picker-item>svg { width:16px; height:16px; flex-shrink:0; fill:none; stroke:#5f8d73; stroke-width:1.8; }
.file-picker-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.file-picker-item small { color:var(--muted); white-space:nowrap; }
.file-picker-remove { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:none; color:var(--muted); }
.file-picker-remove:hover { background:#fff0ed; color:#b8443e; }
.file-picker-remove svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.dropzone .file-picker-button { pointer-events:auto; }
.tool-drop .file-picker-button { margin-top:6px; }
:root[data-theme="dark"] .file-picker { background:#131a27; border-color:#313849; }
:root[data-theme="dark"] .file-picker.in-zone { background:none; }
:root[data-theme="dark"] .file-picker-item { background:#161d2a; border-color:#333b4b; }
:root[data-theme="dark"] .file-picker.dragging, :root[data-theme="dark"] .dropzone.dragging { background:#16232a; border-color:#3f8f7d; }
:root[data-theme="dark"] .file-picker-remove:hover { background:#2a1a1a; color:#f0a497; }
.tool-drop .file-picker-button svg, .dropzone .file-picker-button svg { width:18px; height:18px; margin:0; color:inherit; }