/* ============================================================
   DocFlow Tools — layered on /blog/assets/blog.css (same theme)
   Adds the converter workspace UI (dropzone, tool grid, options).
   ============================================================ */

/* ---- Tools hero ---- */
.tools-hero{padding:var(--sp-2xl) 0 var(--sp-lg);text-align:center}
.tools-hero .badge{margin-bottom:var(--sp-md)}
.tools-hero h1{font-size:clamp(2.1rem,5vw,3.3rem);line-height:1.06;font-weight:800;letter-spacing:-.02em;max-width:20ch;margin:0 auto}
.tools-hero p{margin:var(--sp-md) auto 0;color:var(--text-soft);font-size:1.12rem;max-width:52ch}
.privacy-row{display:inline-flex;flex-wrap:wrap;gap:.5rem .9rem;justify-content:center;margin-top:var(--sp-lg)}
.privacy-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:.4rem .9rem;font-size:.8rem;
  font-weight:600;color:var(--text-soft);box-shadow:var(--sh-sm)}
.privacy-chip svg{width:15px;height:15px;flex:0 0 auto}

/* ---- Tool grid (selector) ---- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--sp-md)}
.tool-card{appearance:none;text-align:left;cursor:pointer;font-family:inherit;
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:1.1rem 1rem;display:flex;flex-direction:column;gap:.45rem;
  box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.tool-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--orange)}
.tool-card.is-active{border-color:transparent;box-shadow:var(--sh-md);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--brand) border-box;
  border:2px solid transparent}
.tool-card .ti{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-size:1.35rem;background:var(--brand-soft)}
.tool-card h3{font-size:1rem;font-weight:700;line-height:1.2}
.tool-card p{font-size:.8rem;color:var(--text-muted);line-height:1.4}

/* ---- Workspace ---- */
.workspace{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--sh-md);padding:clamp(1.1rem,3vw,2rem);margin-top:var(--sp-xl)}
.ws-head{display:flex;align-items:center;gap:.7rem;margin-bottom:var(--sp-lg)}
.ws-head .ti{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-size:1.25rem;background:var(--brand-soft)}
.ws-head h2{font-size:1.35rem;font-weight:800;letter-spacing:-.01em}
.ws-head p{font-size:.88rem;color:var(--text-soft);margin-top:.1rem}

/* ---- Dropzone ---- */
.dropzone{border:2.5px dashed var(--border);border-radius:var(--radius-sm);
  background:linear-gradient(180deg,#fffaf5,#fff);padding:clamp(2rem,6vw,3.4rem) 1.2rem;
  text-align:center;transition:border-color .18s,background .18s}
.dropzone.is-over{border-color:var(--orange);background:var(--brand-soft)}
.dz-icon{width:62px;height:62px;border-radius:18px;margin:0 auto var(--sp-md);
  display:grid;place-items:center;background:var(--brand);color:#fff;box-shadow:var(--sh-md)}
.dz-icon svg{width:30px;height:30px}
.dropzone h3{font-size:1.05rem;font-weight:700}
.dropzone .hint{color:var(--text-muted);font-size:.85rem;margin-top:.35rem}
.dropzone .btn{margin-top:var(--sp-md)}

/* ---- File list ---- */
.filelist{list-style:none;margin:var(--sp-lg) 0 0;display:flex;flex-direction:column;gap:.55rem}
.fileitem{display:flex;align-items:center;gap:.8rem;background:var(--bg);border:1px solid var(--border);
  border-radius:12px;padding:.55rem .7rem}
.fileitem .thumb{width:42px;height:42px;border-radius:9px;object-fit:cover;background:var(--bg-2);flex:0 0 auto}
.fileitem .ph{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-soft);font-size:1.1rem;flex:0 0 auto}
.fileitem .meta{flex:1;min-width:0}
.fileitem .nm{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fileitem .sz{font-size:.76rem;color:var(--text-muted)}
.fileitem .ops{display:flex;gap:.25rem;flex:0 0 auto}
.iconbtn{appearance:none;cursor:pointer;border:1px solid var(--border);background:var(--surface);
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--text-soft);
  font-size:.95rem;line-height:1;transition:.15s}
.iconbtn:hover{border-color:var(--orange);color:var(--orange)}
.iconbtn:disabled{opacity:.35;cursor:not-allowed}
.iconbtn.danger:hover{border-color:var(--coral);color:var(--coral)}

/* ---- Options ---- */
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-md);
  margin-top:var(--sp-lg);padding-top:var(--sp-lg);border-top:1px solid var(--border)}
.opt label{display:block;font-size:.78rem;font-weight:700;color:var(--text-soft);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:.35rem}
.opt select,.opt input[type=text]{width:100%;font-family:inherit;font-size:.92rem;color:var(--text);
  background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:.55rem .7rem}
.opt select:focus,.opt input:focus{outline:none;border-color:var(--orange)}
.opt .range-wrap{display:flex;align-items:center;gap:.6rem}
.opt input[type=range]{flex:1;accent-color:var(--orange)}
.opt .rangeval{font-weight:700;font-size:.9rem;min-width:3ch;text-align:right}

/* ---- Action bar ---- */
.actionbar{display:flex;flex-wrap:wrap;gap:var(--sp-md);align-items:center;margin-top:var(--sp-xl)}
.actionbar .btn-primary{min-width:200px;justify-content:center}
.actionbar .spacer{flex:1}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important;filter:none!important}

/* ---- Progress ---- */
.progress{margin-top:var(--sp-lg);display:none}
.progress.show{display:block}
.progress .track{height:9px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.progress .fill{height:100%;width:0;background:var(--brand);border-radius:999px;transition:width .25s}
.progress .lbl{font-size:.82rem;color:var(--text-soft);margin-top:.45rem;text-align:center}

/* ---- Result ---- */
.result{display:none;margin-top:var(--sp-lg);background:var(--brand-soft);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:var(--sp-lg);text-align:center}
.result.show{display:block}
.result .ok{width:54px;height:54px;border-radius:50%;margin:0 auto var(--sp-sm);display:grid;
  place-items:center;background:var(--teal);color:#fff;font-size:1.6rem}
.result h3{font-size:1.15rem;font-weight:800}
.result p{color:var(--text-soft);font-size:.9rem;margin:.3rem 0 var(--sp-md)}
.result .downloads{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}

/* ---- Toast ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:#2d3142;color:#fff;padding:.8rem 1.3rem;border-radius:12px;font-size:.9rem;font-weight:600;
  box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#c0392b}

/* ---- Trust strip / how it works ---- */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-lg)}
.how .step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:var(--sp-lg);box-shadow:var(--sh-sm)}
.how .num{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;
  display:grid;place-items:center;margin-bottom:.6rem}
.how h3{font-size:1.05rem;font-weight:700}
.how p{font-size:.9rem;color:var(--text-soft);margin-top:.3rem}

.faq-tools details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.9rem 1.1rem;margin-bottom:.7rem;box-shadow:var(--sh-sm)}
.faq-tools summary{font-weight:700;cursor:pointer;list-style:none}
.faq-tools summary::-webkit-details-marker{display:none}
.faq-tools summary::after{content:"+";float:right;color:var(--orange);font-weight:800}
.faq-tools details[open] summary::after{content:"\2212"}
.faq-tools details p{margin-top:.6rem;color:var(--text-soft);font-size:.92rem}

@media(max-width:680px){
  .actionbar .btn-primary{width:100%}
  .actionbar .spacer{display:none}
}