.tf-wrap{max-width:1200px;margin:0 auto}
.tf-card{background:#fff;border-radius:12px;padding:16px;margin:12px 0;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tf-dropzone{border:2px dashed #cbd5e1;border-radius:12px;padding:28px;text-align:center;background:#f8fafc}
.tf-dropzone.is-drag{background:#eef2ff;border-color:#6366f1}
.tf-choose{display:inline-block;background:#1e64f0;color:#fff;border-radius:10px;padding:12px 20px;cursor:pointer}
.tf-bar{height:8px;background:#e5e7eb;border-radius:999px;margin:12px 0;overflow:hidden}
.tf-bar-inner{height:100%;width:0%;background:#1e64f0;transition:width .2s ease;border-radius:999px}
.tf-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.tf-table th,.tf-table td{padding:14px;border-bottom:1px solid #e5e7eb;vertical-align:middle}
.tf-table thead th{font-weight:700;color:#111827}
/* Column widths */
.tf-table .tf-fname{width:44%}
.tf-table .tf-size{width:12%}
.tf-table .tf-type{width:8%; text-align:center}
.tf-table .tf-date{width:18%}
.tf-table .tf-actions{width:18%; white-space:nowrap}
/* Name line */
.tf-icon{width:20px;height:20px;display:inline-block}
.tf-name-line{display:flex;gap:10px;align-items:center}
.tf-badge{background:#eef2ff;color:#1e3a8a;padding:.15rem .5rem;border-radius:.5rem;font-size:.75rem;font-weight:600}
.tf-btn{border-radius:10px;font-size:13px;padding:.45rem .65rem}
.tf-btn.tf-danger{background:#ef4444;color:#fff;border:0}
.tf-btn.tf-note{background:#1e64f0;color:#fff;border:0}
.tf-btn.tf-note.has-note{background:#f59e0b;color:#111}
/* Modal */
.tf-modal{position:fixed;inset:0;z-index:9999;display:none}
.tf-modal.open{display:block}
.tf-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.tf-modal-dialog{position:relative;margin:8vh auto;background:#fff;border-radius:12px;max-width:560px;padding:16px}
.tf-modal .tf-label{display:block;color:#374151;font-weight:600;margin:8px 0 4px}
.tf-modal textarea{width:100%;min-height:120px}
.tf-modal .tf-row{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
/* Logs */
.tf-log{background:#0b1020;color:#e5eefc;border-radius:12px;padding:12px;overflow:auto}
.tf-loglist{list-style:none;margin:0;padding:0}
.tf-loglist li{padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.15)}
.tf-loglist li:last-child{border-bottom:0}

/* v1.6.1 tweaks */
.tf-icon{width:24px;height:24px}
.tf-table .tf-type{text-align:center}
.tf-ver{min-width:5ch; background:#e5e7eb; border:1px solid #cbd5e1; border-radius:8px; padding:.35rem .9rem .35rem .5rem; font-weight:700}
.tf-log{max-height:280px; overflow:auto; background:#0f172a; color:#e2e8f0}
.tf-loglist li{color:#e2e8f0}

/* v1.6.2 — modal fixes */
.tf-backdrop{position:fixed; inset:0; background:rgba(2,6,23,.55); z-index:10000}
.tf-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:10001; max-width:780px; width:92%; background:#fff; border-radius:16px;
  box-shadow:0 25px 60px rgba(2,6,23,.25);}
/* while modal is open, hide selects behind to avoid native overlay issues */
.tf-modal-open .tf-table select{ visibility:hidden !important; }
.tf-modal-open .tf-table .tf-ver{ visibility:hidden !important; }
/* keep selects visible inside the modal itself */
.tf-modal select, .tf-modal .tf-ver{ visibility:visible !important; }
/* ensure site doesn't scroll in background on mobile */
.tf-modal-open body, .tf-modal-open{ overflow:hidden; }

/* v1.6.3 — modal/scroll refinements */
body.tf-modal-open{ overflow:hidden !important; }        /* lock page scroll while modal open */
.tf-backdrop{ position:fixed; inset:0; background:rgba(2,6,23,.55); z-index:10000; }
.tf-modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:10001; max-width:780px; width:92%; max-height:85vh; overflow:auto;
  background:#fff; border-radius:16px; box-shadow:0 25px 60px rgba(2,6,23,.25); }
/* hide selects behind the modal only while open */
body.tf-modal-open .tf-table select{ visibility:hidden !important; }
body.tf-modal-open .tf-table .tf-ver{ visibility:hidden !important; }
.tf-modal select, .tf-modal .tf-ver{ visibility:visible !important; }

/* v1.6.5 — UI tweaks */
body.tf-modal-open, html.tf-modal-open{ overflow:visible !important; }
body.tf-hide-selects select{ visibility:hidden !important; }
.tf-modal select{ visibility:visible !important; }
.tf-backdrop{ position:fixed; inset:0; background:rgba(2,6,23,.55); z-index:10000; }
.tf-modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:10001; max-width:780px; width:92%; max-height:85vh; overflow:auto;
  background:#fff; border-radius:16px; box-shadow:0 25px 60px rgba(2,6,23,.25); }
.tf-log{ max-height:320px; overflow:auto; }
.tf-type{ text-align:center; }
.tf-type svg{ width:24px; height:24px; display:inline-block; }
.tf-ver{ width:4.4rem; min-width:4.4rem; max-width:4.4rem; text-align:center; padding:.3rem .7rem .3rem .4rem; border-radius:8px; }

/* v1.6.6 — force narrow version select across themes/browsers */
.tf-wrap .tf-table select.tf-ver{
  width:4.0rem !important;
  min-width:0 !important;
  max-width:4.0rem !important;
  box-sizing:border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding:.25rem .4rem !important;
  line-height:1.2 !important;
  text-align:center !important;
  text-align-last:center !important;
}