/* Browser file tools: drop zone, results, page ordering and photo crop */
#extra-tool-root [hidden] { display:none !important; }
.ft-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; margin-top:16px; padding:34px 20px; border:2px dashed var(--gray-300); border-radius:14px; background:var(--gray-50); text-align:center; cursor:pointer; transition:border-color var(--transition), background var(--transition); }
.ft-drop:hover, .ft-drop.over { border-color:var(--green); background:#f0fdf4; }
.ft-drop svg { width:36px; height:36px; fill:none; stroke:var(--green-dark); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ft-drop strong { color:var(--black); font-size:1.05rem; }
.ft-drop span { color:var(--gray-500); font-size:.85rem; }
.ft-status { margin:14px 0 0; padding:10px 14px; border-radius:10px; background:var(--gray-100); color:var(--gray-700); font-size:.9rem; }
.ft-status.err { background:#fee2e2; color:#b91c1c; }
.ft-results { display:grid; gap:10px; margin-top:16px; }
.ft-result { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:14px; align-items:center; padding:10px 12px; border:1px solid var(--gray-200); border-radius:12px; background:#fff; }
.ft-result img, .ft-icon { width:56px; height:56px; border-radius:8px; object-fit:cover; background:var(--gray-100); }
.ft-icon { display:flex; align-items:center; justify-content:center; color:var(--green-dark); font-size:.75rem; font-weight:800; }
.ft-meta { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ft-meta strong { overflow:hidden; color:var(--black); font-size:.92rem; text-overflow:ellipsis; white-space:nowrap; }
.ft-meta span { color:var(--gray-500); font-size:.8rem; }
.ft-meta b.down { color:#15803d; }
.ft-dl { padding:9px 18px; font-size:.85rem; }
.ft-order { display:grid; gap:6px; margin:14px 0 0; padding:0; list-style:none; counter-reset:ft; }
.ft-order li { display:grid; grid-template-columns:28px minmax(0,1fr) auto auto auto auto; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--gray-200); border-radius:10px; background:#fff; counter-increment:ft; }
.ft-order li::before { content:counter(ft); color:var(--gray-500); font-size:.8rem; font-weight:700; text-align:center; }
.ft-order span { overflow:hidden; color:var(--black); font-size:.9rem; text-overflow:ellipsis; white-space:nowrap; }
.ft-order small { color:var(--gray-500); font-size:.78rem; }
.ft-order button { width:32px; height:32px; border:1px solid var(--gray-300); border-radius:8px; background:#fff; color:var(--gray-700); font:inherit; cursor:pointer; }
.ft-order button:hover:not(:disabled) { border-color:var(--green-dark); color:var(--green-dark); }
.ft-order button:disabled { opacity:.35; cursor:default; }
.ft-file { margin:14px 0 4px; color:var(--gray-600); }
.ft-crop { display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:start; margin-top:16px; }
.ft-crop canvas { display:block; max-width:100%; border:1px solid var(--gray-200); border-radius:8px; box-shadow:var(--shadow-card); }
.ft-sliders { display:grid; gap:14px; }
.ft-sliders label { display:grid; gap:6px; color:var(--gray-700); font-size:.85rem; font-weight:600; }
.ft-sliders input[type=range] { width:100%; accent-color:var(--green-dark); }
.ft-hint { margin:0; color:var(--gray-500); font-size:.82rem; line-height:1.55; }
.ft-hint a { color:var(--green-dark); font-weight:600; }
.tool-notes code { padding:1px 6px; border-radius:5px; background:var(--gray-100); font-size:.9em; }
@media (max-width:640px) {
  .ft-result { grid-template-columns:44px minmax(0,1fr); }
  .ft-result img, .ft-icon { width:44px; height:44px; }
  .ft-dl { grid-column:1/-1; text-align:center; }
  .ft-order li { grid-template-columns:22px minmax(0,1fr) auto auto auto; }
  .ft-order small { display:none; }
  .ft-crop { grid-template-columns:1fr; justify-items:center; }
  .ft-sliders { width:100%; }
}