/* Shared look for the browser-only file tools (HEIC to JPG, image resizer, JPG to PDF, merge PDF). */
.ft-drop { border:2px dashed #9AA9AD; border-radius:12px; padding:2rem 1.25rem; text-align:center; cursor:pointer; background:#F5F6F2; transition:border-color .15s, background .15s; outline:none; }
.ft-drop:hover, .ft-drop.dragover, .ft-drop:focus-visible { border-color:#1F5C99; background:#EAF1F8; }
.ft-drop:focus-visible { box-shadow:0 0 0 3px rgba(31,92,153,.2); }
.ft-drop-icon { color:#1F5C99; margin-bottom:.5rem; }
.ft-drop-icon .idt-icon { width:36px; height:36px; }
.ft-drop-title { font-weight:600; color:#183340; font-size:1rem; }
.ft-drop-sub { font-size:.84rem; color:#53636A; margin-top:.25rem; }
.ft-drop-sub strong { color:#1F5C99; }
.ft-privacy { display:flex; gap:.5rem; align-items:flex-start; font-size:.8rem; color:#53636A; margin:.75rem 0 0; line-height:1.5; }
.ft-privacy .idt-icon { color:#1E7A4C; width:16px; height:16px; flex:none; margin-top:.15rem; }

.ft-list { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.ft-item { display:flex; align-items:center; gap:.75rem; padding:.625rem .75rem; background:#FFFFFF; border:1px solid #D8DEDD; border-radius:10px; }
.ft-item.ft-error { border-color:#E7B4AE; background:#FDF3F2; }
.ft-item.ft-dragging { opacity:.5; }
.ft-item.ft-over { border-color:#1F5C99; box-shadow:0 0 0 2px rgba(31,92,153,.15); }
.ft-thumb { width:52px; height:52px; flex:none; border-radius:8px; background:#EDF1EE center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:#53636A; overflow:hidden; border:1px solid #E3E8E6; }
.ft-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ft-thumb .idt-icon { width:22px; height:22px; }
.ft-meta { flex:1; min-width:0; }
.ft-name { font-size:.9rem; font-weight:600; color:#183340; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ft-sub { font-size:.8rem; color:#53636A; margin-top:.15rem; overflow-wrap:anywhere; }
.ft-sub .ft-ok { color:#1E7A4C; font-weight:600; }
.ft-sub .ft-bad { color:#B42318; font-weight:600; }
.ft-actions { display:flex; gap:.375rem; align-items:center; flex:none; }
.ft-iconbtn { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #D8DEDD; border-radius:8px; background:#FFFFFF; color:#183340; cursor:pointer; padding:0; }
.ft-iconbtn:hover:not(:disabled) { border-color:#1F5C99; color:#1F5C99; background:#EAF1F8; }
.ft-iconbtn:disabled { opacity:.35; cursor:default; }
.ft-iconbtn:focus-visible { outline:3px solid rgba(31,92,153,.35); outline-offset:1px; }
.ft-iconbtn .idt-icon { width:18px; height:18px; }
.ft-grip { cursor:grab; color:#748892; display:flex; align-items:center; flex:none; touch-action:none; }
.ft-grip .idt-icon { width:18px; height:18px; }
.ft-pages { width:7.5rem; flex:none; }
.tool-content-wrap .ft-pages .tc-input { min-height:40px; padding:.4rem .6rem; font-size:.84rem; }
.ft-bar { height:4px; border-radius:999px; background:#E3E8E6; margin-top:.4rem; overflow:hidden; }
.ft-bar span { display:block; height:100%; width:0; background:#1F5C99; transition:width .2s; }
.ft-spin { width:16px; height:16px; border:2px solid #C9DCEB; border-top-color:#1F5C99; border-radius:50%; animation:ftSpin .7s linear infinite; display:inline-block; vertical-align:-3px; }
@keyframes ftSpin { to { transform:rotate(360deg); } }
.ft-summary { display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.75rem; font-size:.86rem; color:#53636A; }
.ft-summary strong { color:#183340; }
.ft-bar-actions { display:flex; gap:.625rem; flex-wrap:wrap; margin-top:1rem; }
.tool-content-wrap .ft-bar-actions .tc-btn, .tool-content-wrap .ft-bar-actions .tc-btn-ghost { width:auto; }
.ft-opts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.ft-opts .tc-field { margin-bottom:0; }
.ft-msg { font-size:.86rem; padding:.625rem .875rem; border-radius:8px; margin-top:.75rem; }
.ft-msg.ok { background:#E8F3EC; color:#1E5C3C; }
.ft-msg.err { background:#FDF3F2; color:#8F1D14; }
.ft-msg.info { background:#EAF1F8; color:#183340; }
.ft-check { display:flex; align-items:center; gap:.6rem; min-height:40px; font-size:.9rem; color:#183340; cursor:pointer; }
.ft-check input { width:18px; height:18px; accent-color:#1F5C99; flex:none; }
.ft-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width: 720px) {
  .ft-opts { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .ft-opts { grid-template-columns:1fr; }
  .ft-item { flex-wrap:wrap; }
  .ft-grip { display:none; }   /* drag needs a mouse; phones use the arrow buttons */
  .ft-meta { flex:1 1 calc(100% - 70px); }
  .ft-actions { width:100%; justify-content:flex-end; }
  .ft-pages { flex:1; width:auto; }
  .tool-content-wrap .ft-bar-actions .tc-btn, .tool-content-wrap .ft-bar-actions .tc-btn-ghost { flex:1 1 150px; }
  .tool-content-wrap .ft-actions .tc-btn-ghost { width:auto; }
}

/* Nov 2026 tool pack: option cards, PDF page grids, result lines (Compress/Split/Organize/Sign PDF, PDF to JPG, Image to KB). */
.ft-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.5rem; margin:0; padding:0; border:0; min-width:0; }
.ft-choices legend { font-size:.84rem; font-weight:600; color:#183340; margin-bottom:.5rem; padding:0; }
.ft-choice { position:relative; display:block; }
.ft-choice input { position:absolute; opacity:0; width:1px; height:1px; }
.ft-choice span { display:block; height:100%; padding:.7rem .85rem; border:1px solid #D8DEDD; border-radius:10px; background:#FFFFFF; color:#183340; cursor:pointer; transition:border-color .15s, background .15s; }
.ft-choice span strong { display:block; font-size:.92rem; }
.ft-choice span small { display:block; font-size:12px; color:#53636A; margin-top:.15rem; line-height:1.4; }
.ft-choice span:hover { border-color:#1F5C99; }
.ft-choice input:checked + span { background:var(--ink,#16233A); border-color:var(--ink,#16233A); color:#FFFFFF; }
.ft-choice input:checked + span small { color:rgba(255,255,255,.8); }
.ft-choice input:focus-visible + span { outline:3px solid rgba(31,92,153,.45); outline-offset:2px; }
.ft-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.ft-chip { min-height:40px; padding:.35rem .8rem; border:1px solid #D8DEDD; border-radius:999px; background:#FFFFFF; color:#183340; font-weight:600; font-size:.86rem; cursor:pointer; }
.ft-chip:hover { border-color:#1F5C99; }
.ft-chip[aria-pressed="true"] { background:var(--ink,#16233A); border-color:var(--ink,#16233A); color:#FFFFFF; }
.ft-chip:focus-visible { outline:3px solid rgba(31,92,153,.45); outline-offset:2px; }
.ft-inline { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.ft-inline .tc-input { width:auto; flex:1 1 7rem; min-width:0; }
.ft-saved { color:#1E7A4C; font-weight:700; white-space:nowrap; }
.ft-nowrap { white-space:nowrap; }

.pdf-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:.75rem; }
.pdf-card { position:relative; display:flex; flex-direction:column; gap:.35rem; padding:.5rem; border:1px solid #D8DEDD; border-radius:10px; background:#FFFFFF; }
.pdf-card.is-on { border-color:#1F5C99; box-shadow:0 0 0 2px rgba(31,92,153,.25); background:#F3F7FB; }
.pdf-card.is-off .pdf-thumb, .pdf-card.is-off .pdf-num { opacity:.45; }
.pdf-card.ft-dragging { opacity:.4; }
.pdf-card.ft-over { border-color:#1F5C99; box-shadow:0 0 0 2px rgba(31,92,153,.15); }
.pdf-thumb { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:3/4; border-radius:6px; background:#EDF1EE; overflow:hidden; color:#53636A; font-size:.8rem; }
.pdf-thumb canvas { max-width:100%; max-height:100%; width:auto; height:auto; display:block; box-shadow:0 1px 3px rgba(22,35,58,.18); transition:transform .2s; background:#fff; }
.pdf-thumb-btn { all:unset; display:block; cursor:pointer; border-radius:6px; }
.pdf-thumb-btn:focus-visible { outline:3px solid rgba(31,92,153,.45); outline-offset:2px; }
.pdf-num { display:flex; align-items:center; justify-content:space-between; gap:.25rem; font-size:12px; color:#53636A; font-weight:600; min-height:20px; }
.pdf-tag { font-size:12px; font-weight:700; padding:.05rem .4rem; border-radius:6px; background:#EDF1EE; color:#183340; }
.pdf-card.is-on .pdf-tag { background:#1F5C99; color:#fff; }
.pdf-card-actions { display:flex; flex-direction:column; gap:6px; align-items:center; }
.pdf-card-row { display:flex; gap:6px; justify-content:center; width:100%; }
.pdf-card-row .op-del { width:100%; max-width:142px; gap:.35rem; font-size:.84rem; font-weight:600; }
.pdf-card.is-off .op-del { opacity:1; }
.pdf-card-actions .ft-iconbtn { width:40px; height:40px; }
.pdf-toolbar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.75rem; }
.tool-content-wrap .pdf-toolbar .tc-btn-ghost { width:auto; min-height:40px; }
@media (max-width: 640px) {
  .pdf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pdf-card-actions .ft-iconbtn { width:44px; height:44px; }
  .pdf-card-row .op-del { width:100%; }
  .ft-chip { min-height:44px; }
  .tool-content-wrap .pdf-toolbar .tc-btn-ghost { flex:1 1 140px; min-height:44px; }
}

/* Tool pack batch 2: Background Remover, Passport Photo Maker, Image to Text, video tools. */
.bgr-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:200px; max-height:560px; padding:.75rem; border:1px solid #D8DEDD; border-radius:12px; background:#F5F6F2 repeating-conic-gradient(#E3E8E6 0 25%, #FFFFFF 0 50%) 0 0/20px 20px; overflow:hidden; }
.bgr-stage canvas { display:block; max-width:100%; max-height:534px; width:auto; height:auto; object-fit:contain; }
.bgr-summary { margin-top:.75rem; }
.bgr-dot { display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid rgba(22,35,58,.35); margin-right:.4rem; vertical-align:-2px; flex:none; }
.ft-chip[aria-pressed="true"] .bgr-dot { border-color:rgba(255,255,255,.7); }
.ft-chip .idt-icon { width:16px; height:16px; vertical-align:-3px; margin-right:.25rem; }
.bgr-pick { position:relative; display:inline-flex; align-items:center; overflow:hidden; }
.bgr-pick.is-on { background:var(--ink,#16233A); border-color:var(--ink,#16233A); color:#FFFFFF; }
.bgr-color-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }
.bgr-pick:focus-within { outline:3px solid rgba(31,92,153,.45); outline-offset:2px; }
.ft-out { width:100%; min-height:220px; font:14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ocr-langs { display:flex; flex-wrap:wrap; gap:.4rem; }
.vt-player { display:block; width:100%; max-height:360px; border-radius:10px; background:#0F1828; }
.vt-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.vt-row .tc-field { margin-bottom:0; }
.vt-trim .tc-input { max-width:none; }
@media (max-width: 640px) {
  .bgr-stage { max-height:420px; padding:.5rem; }
  .bgr-stage canvas { max-height:400px; }
  .vt-row { grid-template-columns:1fr; }
}
.pp-layout { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:1.5rem; align-items:start; }
.pp-frame { display:flex; justify-content:center; padding:.75rem; border:1px solid #D8DEDD; border-radius:12px; background:#EDF1EE; }
.pp-frame canvas { display:block; max-width:100%; height:auto; box-shadow:0 2px 8px rgba(22,35,58,.2); cursor:grab; touch-action:none; background:#fff; }
.pp-frame canvas:active { cursor:grabbing; }
.pp-frame canvas:focus-visible { outline:3px solid rgba(31,92,153,.45); outline-offset:3px; }
.pp-legend { display:flex; gap:.5rem; align-items:center; font-size:12px; color:#53636A; margin:.5rem 0 0; line-height:1.4; }
.pp-key { width:14px; height:10px; flex:none; border-radius:2px; }
.pp-key-band { background:rgba(201,162,39,.35); border:1px solid #A8841A; }
.pp-range { width:100%; accent-color:var(--ink,#16233A); min-height:40px; }
.pp-pad { display:grid; grid-template-columns:repeat(3,44px); grid-template-rows:repeat(3,44px); gap:6px; }
.pp-pad .ft-iconbtn { width:44px; height:44px; }
.pp-pad [data-move="0,-1"] { grid-column:2; grid-row:1; }
.pp-pad [data-move="-1,0"] { grid-column:1; grid-row:2; }
.pp-pad [data-move="reset"] { grid-column:2; grid-row:2; }
.pp-pad [data-move="1,0"] { grid-column:3; grid-row:2; }
.pp-pad [data-move="0,1"] { grid-column:2; grid-row:3; }
@media (max-width: 720px) {
  .pp-layout { grid-template-columns:1fr; }
  .pp-frame canvas { max-width:260px; }
}