/* FileFi v1 — QR builder styles appended. */
/* QR type picker grid */
#qrTypes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { #qrTypes { grid-template-columns: repeat(4, 1fr); } }
.qr-type { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: 16px; border: 2px solid #e2e8f0; background: #fff; cursor: pointer; transition: all .15s ease; text-align: center; }
.qr-type svg { width: 30px; height: 30px; color: #4f46e5; }
.qr-type-label { font-weight: 700; font-size: 15px; color: #1e293b; }
.qr-type-hint { font-size: 11px; color: #64748b; line-height: 1.3; }
.qr-type:hover { border-color: #a5b4fc; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,.12); }
.qr-type.selected { border-color: #4f46e5; background: #eef2ff; box-shadow: 0 4px 14px rgba(79,70,229,.22); }
/* QR forms */
.qr-label { display: block; font-size: 13px; font-weight: 600; color: #475569; }
.qr-input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid #e2e8f0; font-size: 15px; background: #fff; color: #1e293b; outline: none; transition: border-color .15s; }
.qr-input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.qr-note { font-size: 12px; color: #64748b; margin-top: 8px; }
.qr-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #475569; padding-top: 26px; }
.qr-status { font-size: 13px; border-radius: 12px; padding: 10px 14px; margin-top: 12px; }
.qr-status.ok { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.qr-status.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
/* step pills */
.qr-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #64748b; }
.qr-step .n { width: 26px; height: 26px; border-radius: 9999px; display: grid; place-items: center; background: #e2e8f0; color: #475569; font-size: 13px; }
/* phone mockup */
.phone { width: 270px; max-width: 100%; margin: 0 auto; background: #0f172a; border-radius: 44px; padding: 12px; box-shadow: 0 18px 44px rgba(15,23,42,.28), inset 0 0 0 2px #334155; }
.phone-screen { background: #fff; border-radius: 34px; overflow: hidden; position: relative; }
.phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 96px; height: 24px; background: #0f172a; border-radius: 9999px; z-index: 2; }
#qrCanvas { display: grid; place-items: center; padding: 18px; background: #fff; min-height: 300px; }
#qrCanvas canvas, #qrCanvas svg { max-width: 100%; height: auto; border-radius: 8px; }
/* dark mode for QR page bits */
html.dark .qr-type { background: #1e293b; border-color: #334155; }
html.dark .qr-type-label { color: #f1f5f9; }
html.dark .qr-type.selected { background: #1e1b4b; }
html.dark .qr-label { color: #94a3b8; }
html.dark .qr-input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
html.dark .qr-check { color: #94a3b8; }
html.dark .qr-step { color: #94a3b8; }
/* FileFi v1 — extracted from the v1 single-file build. */
html, body { height: 100%; }
  body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  .glass { background: rgba(255,255,255,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  /* Tool tab bar: horizontal scroll strip on phones, wraps to rows on desktop */
  #tabs { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  #tabs .tab { flex: 0 0 auto; white-space: nowrap; }
  @media (min-width: 640px) {
    #tabs { flex-wrap: wrap; overflow: visible; }
    #tabs .tab { flex: 1 1 calc(20% - 5px); white-space: normal; }
  }
  #dropzone { transition: border-color .15s ease, background .15s ease, transform .15s ease; }
  #dropzone.drag { border-color: #6366f1; background: #eef2ff; transform: scale(1.01); }
  .tab { transition: all .15s ease; }
  .tab.active { background: #4f46e5; color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,.35); }
  .tbtn { transition: all .12s ease; }
  .tbtn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(79,70,229,.25); }
  .tbtn.selected { background: #4f46e5; color: #fff; border-color: #4f46e5; }
  .tbtn:disabled { opacity: .45; cursor: not-allowed; }
  .fade-in { animation: fadeIn .25s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .soc{width:38px;height:38px;border-radius:9999px;border:1px solid #e2e8f0;background:#fff;display:grid;place-items:center;color:#4f46e5;transition:box-shadow .15s,border-color .15s,transform .15s}
  .soc:hover{border-color:#4f46e5;box-shadow:0 0 14px rgba(79,70,229,.4);transform:translateY(-2px)}
  .soc svg{width:18px;height:18px}
  .flink{color:#475569}
  .flink:hover{color:#4f46e5}
  .safe-center { justify-content: safe center; }
  .checker{background-image:conic-gradient(#e2e8f0 25%, #ffffff 0 50%, #e2e8f0 0 75%, #ffffff 0);background-size:18px 18px;}
  html.dark .checker{background-image:conic-gradient(#334155 25%, #1e293b 0 50%, #334155 0 75%, #1e293b 0);}
  .cmp-handle{position:absolute;top:0;bottom:0;width:2px;background:#4f46e5;pointer-events:none}
  .cmp-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:9999px;background:#4f46e5;color:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.3);font-size:14px}
  .prog{height:8px;border-radius:9999px;background:#e2e8f0;overflow:hidden}
  .prog > div{height:100%;background:#4f46e5;border-radius:9999px;transition:width .2s ease}
  html.dark{color-scheme:dark}
  html.dark .glass{background:rgba(15,23,42,.82)}
  html.dark .soc{background:#1e293b;border-color:#334155;color:#818cf8}
  html.dark .flink{color:#94a3b8}
  html.dark .modal-pane{color:#cbd5e1}
  html.dark .modal-pane h3{color:#f1f5f9}
  html.dark .modal-pane code{background:#1e293b}
  html.dark .tbtn:not(:disabled){background:#1e293b;border-color:#334155;color:#e2e8f0}
  html.dark #dropzone.drag{background:#1e1b4b;border-color:#818cf8}
  html.dark #panel,html.dark #output{color:#cbd5e1}
  html.dark #panel .text-slate-500,html.dark #output .text-slate-500{color:#94a3b8}
  html.dark #panel .text-slate-400,html.dark #output .text-slate-400{color:#64748b}
  html.dark #panel .bg-slate-100{background-color:#1e293b}
  html.dark .prog{background:#334155}
  input[type=range].px-range{-webkit-appearance:none;appearance:none;height:6px;border-radius:9999px;background:#e2e8f0;outline:none}
  input[type=range].px-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:9999px;background:#4f46e5;cursor:pointer;box-shadow:0 2px 6px rgba(79,70,229,.4)}
  input[type=range].px-range::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:9999px;background:#4f46e5;cursor:pointer}
  html.dark input[type=range].px-range{background:#334155}

/* ══════════ CONVERTER (convert.html) ══════════ */
.cv-tab{flex:0 0 auto;font-size:.8rem;font-weight:800;color:#475569;background:#fff;border:2px solid #e2e8f0;border-radius:9999px;padding:.5rem 1rem;transition:all .15s ease;white-space:nowrap}
.cv-tab:hover{border-color:#a5b4fc;color:#4f46e5}
.cv-tab.on{background:#4f46e5;border-color:#4f46e5;color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.35)}
.cv-pdfmode{font-size:.75rem;font-weight:700;color:#475569;background:#f1f5f9;border:2px solid #e2e8f0;border-radius:.75rem;padding:.45rem .9rem;transition:all .15s ease}
.cv-pdfmode:hover{border-color:#a5b4fc}
.cv-pdfmode.on{background:#eef2ff;border-color:#4f46e5;color:#4f46e5}
.cv-file{display:flex;align-items:center;gap:.6rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.9rem;padding:.55rem .7rem;font-size:.78rem}
.cv-file .nm{flex:1;min-width:0;font-weight:700;color:#334155;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-file .sz{flex:0 0 auto;color:#94a3b8;font-weight:600}
.cv-file button{flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:9999px;display:grid;place-items:center;color:#94a3b8;font-weight:800}
.cv-file button:hover{background:#fee2e2;color:#dc2626}
.cv-file .mv{color:#a5b4fc;font-size:1rem;line-height:1}
.cv-file .mv:hover{background:#eef2ff;color:#4f46e5}
.cv-out{display:flex;align-items:center;gap:.6rem;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:.9rem;padding:.6rem .75rem;font-size:.78rem}
.cv-out .nm{flex:1;min-width:0;font-weight:700;color:#14532d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-out .sv{flex:0 0 auto;font-size:.68rem;font-weight:800;color:#15803d;background:#dcfce7;border-radius:9999px;padding:.15rem .55rem}
.cv-out a{flex:0 0 auto;font-size:.72rem;font-weight:800;color:#fff;background:#16a34a;border-radius:.7rem;padding:.45rem .8rem}
.cv-out a:hover{background:#15803d}
.cv-err{font-size:.78rem;font-weight:600;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:.9rem;padding:.6rem .75rem}
.cv-busy{opacity:.55;pointer-events:none}
#cvDrop.drag{border-color:#4f46e5;background:#eef2ff;transform:scale(1.01)}
html.dark .cv-tab{background:#0f172a;border-color:#334155;color:#94a3b8}
html.dark .cv-tab.on{background:#4f46e5;border-color:#4f46e5;color:#fff}
html.dark .cv-pdfmode{background:#0f172a;border-color:#334155;color:#94a3b8}
html.dark .cv-pdfmode.on{background:#1e1b4b;border-color:#818cf8;color:#c7d2fe}
html.dark .cv-file{background:#0f172a;border-color:#334155}
html.dark .cv-file .nm{color:#cbd5e1}
html.dark .cv-out{background:#052e16;border-color:#166534}
html.dark .cv-out .nm{color:#bbf7d0}
html.dark #cvDrop.drag{background:#1e1b4b;border-color:#818cf8}

/* AdSense hidden until Google approves the site — remove ads-off from the <html> tag to show ads */
html.ads-off ins.adsbygoogle { display: none !important; }


/* v6 batch dropzones */
.ff-drag { border-color: #6366f1 !important; background: rgba(99,102,241,.08); }

  .bpa-drag{border-color:#4f46e5 !important;background:#eef2ff !important}
  html.dark .bpa-drag{background:#1e1b4b !important;border-color:#818cf8 !important}

/* ═══ FileFi v7 — tool grid boxes: white, gorgeous shadow, press animation ═══ */
.ff-toolbox{
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 12px 32px -12px rgba(79,70,229,.28);
  transition:transform .18s ease,box-shadow .18s ease;
}
.ff-toolbox:hover{
  box-shadow:0 2px 6px rgba(15,23,42,.06),0 22px 50px -12px rgba(79,70,229,.45);
  transform:translateY(-4px);
}
.ff-toolbox:active{
  box-shadow:0 1px 2px rgba(15,23,42,.08),0 6px 18px -8px rgba(79,70,229,.30);
  transform:scale(.96);
}
.ff-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;
  color:#4f46e5;background:#eef2ff;border:1px solid #e0e7ff;
  border-radius:9999px;padding:6px 14px;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.ff-pill:hover{background:#4f46e5;color:#fff;transform:translateY(-1px);}
.dark .ff-pill{color:#a5b4fc;background:rgba(49,46,129,.45);border-color:rgba(99,102,241,.35);}
.dark .ff-pill:hover{background:#6366f1;color:#fff;}

/* v11: zero-scroll — constrain tool outputs to the viewport (never distort) */
#output, #panel { min-height: 0; }
#output img, #output canvas, #output video { max-width: 100%; height: auto; max-height: 50vh; }
#panel img, #panel canvas, #panel video { max-width: 100%; height: auto; max-height: 38vh; }
/* the before/after compare slider manages its own sizing — leave it alone */
#output .cmp-box img { max-width: none; max-height: none; }
#output .cmp-box .cmp-before img { height: 100%; }
@media (max-width: 640px) {
  #output img, #output canvas, #output video { max-height: 34vh; }
  #output .cmp-box img { max-height: none; }
  #panel img, #panel canvas, #panel video { max-height: 28vh; }
}

/* info pages: the page shell never scrolls; long legal text scrolls INSIDE its own card, single column,
   so nothing is ever clipped (the old multi-column layout cut text off on phones). */
.info-article { columns: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; font-size: 14px; }
.info-article h1 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.info-article h2 { font-size: 1.05rem; margin-top: 1rem; margin-bottom: 0.25rem; }
.info-article p, .info-article li { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.info-article p { margin-top: 0.5rem; }
.info-article ul { margin-top: 0.5rem; }
@media (max-width: 640px) {
  .info-article { font-size: 13px; }
  .info-article h1 { font-size: 1.15rem; }
  .info-article h2 { font-size: 0.95rem; }
  .info-article p, .info-article li { font-size: 13px; line-height: 1.55; }
}

/* v14: visible ad slots — dashed placeholder shows the position; real AdSense <ins> covers it when filled */
.ad-slot { position: relative; display: flex; align-items: center; justify-content: center; border: 2px dashed #c7d2fe; background: #eef2ff; border-radius: 12px; overflow: hidden; }
.dark .ad-slot { border-color: #4338ca; background: #1e1b4b; }
.ad-slot .ad-ph { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #818cf8; white-space: nowrap; }
.dark .ad-slot .ad-ph { color: #a5b4fc; }
.ad-slot ins.adsbygoogle { position: absolute; inset: 0; }
/* v16: Google-standard ad sizes — 728x90 leaderboard / 320x50 mobile / 160x600 skyscraper */
.ad-leader { height: 50px; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) {
  .ad-leader { height: 90px; max-width: 728px; }
  .ad-slot .ad-ph { font-size: 11px; }
}
.ad-rail-col { min-width: 0; }
.ad-skyscraper { width: 160px; height: 600px; max-height: 100%; margin-left: auto; margin-right: auto; position: sticky; top: 8px; }
.ad-skyscraper .ad-ph { writing-mode: vertical-rl; }

/* v19: cap landscape box height — tall viewports must not stretch boxes */
a.ff-land { height: 100%; max-height: 215px; align-self: center; }

/* v14: compact landscape boxes on short screens (small phones landscape / short viewports) */
@media (max-height: 700px) {
  a.ff-land { padding: 0.3rem 0.65rem; gap: 0.6rem; }
  a.ff-land .ff-icon { width: 1.75rem; height: 1.75rem; border-radius: 0.6rem; }
  a.ff-land .ff-icon svg { width: 1rem; height: 1rem; }
  a.ff-land .ff-desc, a.ff-land .ff-badge { display: none; }
  a.ff-land h3 { font-size: 13px; }
  a.ff-land .ff-arrow { font-size: 1rem; }
}

/* v17: photo hub (13 tools) — compact 2-col landscape boxes on phones */
@media (max-width: 640px) {
  .hub-2col a.ff-land { padding: 0.45rem 0.55rem; gap: 0.5rem; }
  .hub-2col a.ff-land .ff-icon { width: 1.9rem; height: 1.9rem; border-radius: 0.6rem; }
  .hub-2col a.ff-land .ff-icon svg { width: 1rem; height: 1rem; }
  .hub-2col a.ff-land .ff-desc { display: none; }
  .hub-2col a.ff-land h3 { font-size: 12px; }
  .hub-2col a.ff-land .ff-arrow { font-size: 0.95rem; }
}

/* v19: compact QR builder to fit zero-scroll with ads */
@media (min-width: 1280px) {
  #qrTypes { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 6px; }
  .qr-type { padding: 8px 4px; gap: 3px; border-radius: 10px; }
  .qr-type svg { width: 20px; height: 20px; }
  .qr-type-label { font-size: 11px; }
  .qr-type-hint { display: none; }
  /* design section: horizontal compact bar */
  #qrDesignBar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
  #qrDesignBar .qr-field { margin: 0 !important; }
  #qrDesignBar label.qr-lab { font-size: 10px; margin-bottom: 2px; }
}



/* ===== v21: Amar's balanced design — bigger, calmer, better air ===== */
/* Bigger homepage title */
.ff-hero-title { font-size: 1.55rem !important; line-height: 1.15 !important; }
@media (min-width: 640px) { .ff-hero-title { font-size: 3.1rem !important; } }
/* Bigger hub/tool page titles */
.ff-page-title { font-size: 1.4rem !important; line-height: 1.2 !important; }
@media (min-width: 640px) { .ff-page-title { font-size: 2.1rem !important; } }
/* Air above the hero */
.ff-hero { padding-top: 1.4rem !important; }
/* Top ad: breathing room above, sits close to boxes below */
.ff-topad { margin-top: 1.4rem !important; }
/* Bottom ad: close to boxes, generous air below */
.ff-botad { margin-bottom: 2.2rem !important; }
/* v22: side rails vertically centered — parallel with the page content (desktop only; keep hidden on mobile) */
@media (min-width: 1024px) {
  .ad-rail-col { display: flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; }
}
/* Bigger homepage boxes on tall screens only (laptops keep 215px to fit) */
@media (min-height: 1100px) {
  main:has(.ff-boxes) { display: flex; align-items: center; }
  .ff-boxes { height: auto !important; max-height: none !important; width: 100%; grid-template-rows: none !important; align-content: center; }
  .ff-boxes a.ff-land { height: 280px !important; max-height: 280px !important; }
}

/* v22: tighten ad air on short viewports so text pages don't scroll */
@media (max-height: 700px) {
  .ff-topad { margin-top: 0.5rem !important; }
  .ff-botad { margin-bottom: 0.5rem !important; }
  .ff-hero { padding-top: 0.5rem !important; }
}
/* ===== v23: FIT-OR-SCROLL (15 Oct 2026) =====
   Pages stay exactly one screen tall whenever everything fits (same look as before).
   If a tool would be CUT OFF (phones, tablets, 1366x768 laptops, landscape, or after a
   file adds settings/results), js/app.js adds html.ff-scroll and the PAGE scrolls instead
   of silently hiding settings and buttons. */
html.ff-scroll body > div.h-\[100dvh\] { height: auto !important; min-height: 100vh; min-height: 100dvh; overflow: visible !important; }
html.ff-scroll body > div.h-\[100dvh\] > .grid, html.ff-scroll body > .grid.flex-1 { grid-template-rows: auto !important; }
html.ff-scroll .min-h-0.flex-1,
html.ff-scroll .min-h-0.h-full,
html.ff-scroll main.min-h-0 { min-height: auto !important; overflow: visible !important; }
html.ff-scroll .min-h-0.h-full,
html.ff-scroll main.h-full { height: auto !important; }
html.ff-scroll .info-article { overflow: visible !important; min-height: auto !important; flex: none !important; }
@media (min-width: 1024px) { html.ff-scroll .ad-rail-col { align-items: flex-start !important; } html.ff-scroll .ad-skyscraper { top: 12px; } }
html.ff-scroll a.ff-land { min-height: auto !important; }
/* v23: laptops with short screens (e.g. 1366x768): trim decorative air so tools fit without scrolling */
@media (min-width: 1024px) and (max-height: 860px) {
  .ff-topad { margin-top: 0.5rem !important; }
  .ff-botad { margin-bottom: 0.6rem !important; }
  .ff-hero { padding-top: 0.6rem !important; }
}
/* v23 mobile: QR builder — compact 4-across type picker and a smaller phone preview */
@media (max-width: 639px) {
  #qrTypes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .qr-type { padding: 8px 2px; gap: 3px; border-radius: 12px; }
  .qr-type svg { width: 20px; height: 20px; }
  .qr-type-label { font-size: 11px; }
  .qr-type-hint { display: none; }
  .phone { width: 210px; border-radius: 36px; padding: 9px; }
  .phone-screen { border-radius: 28px; }
}
/* v23 mobile: tab strips scroll sideways inside themselves, never the page */
@media (max-width: 639px) {
  .cv-tabs, [role="tablist"] { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
}
/* v23 phones: comfortable tap targets for sliders and checkboxes */
@media (pointer: coarse) {
  input[type="range"] { min-height: 28px; }
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
}

/* v23 phones: footer links wrap neatly instead of running off the edge */
@media (max-width: 639px) {
  footer nav[aria-label="Footer"] { flex-wrap: wrap; justify-content: center; row-gap: 6px; column-gap: 14px; }
}
/* v23: tool blocks reused from the hub pages sit inside the page's own card —
   drop their extra top gap, divider line and nested card frame (saves space, cleaner on phones) */
section.flex-1 > :first-child { margin-top: 0 !important; }
section.flex-1 > div.border-t:first-child, section.flex-1 > div.border-t-2:first-child { border-top: 0 !important; padding-top: 0 !important; }
section.flex-1 > section:first-child { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
/* rewarded extras: the crown only shows when an official rewarded ad is actually configured */
html:not(.ff-rewarded) .ff-prem-badge { display: none; }
/* moving stripes while a long task runs, so progress never looks frozen */
.prog.busy > div { background-image: linear-gradient(45deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%, transparent); background-size: 18px 18px; animation: ffStripes .7s linear infinite; }
@keyframes ffStripes { from { background-position: 0 0; } to { background-position: 18px 0; } }
@media (prefers-reduced-motion: reduce) { .prog.busy > div { animation: none; } }

/* v25: HOMEPAGE on phones & tablets — 6 compact tiles, 3 on top + 3 below (like desktop, just smaller) */
@media (max-width: 1023px) {
  .ff-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: auto !important; height: auto !important; max-height: none !important; gap: 10px !important; align-content: start; }
  .ff-boxes a.ff-land { flex-direction: column; align-items: center; justify-content: center; text-align: center; height: auto !important; max-height: none !important; min-height: 0; padding: 16px 10px !important; gap: 10px !important; }
  .ff-boxes a.ff-land > div.min-w-0 { flex: none; width: 100%; }
  .ff-boxes a.ff-land .ff-icon { width: 3rem !important; height: 3rem !important; border-radius: 1rem !important; }
  .ff-boxes a.ff-land .ff-icon svg { width: 1.5rem !important; height: 1.5rem !important; }
  .ff-boxes a.ff-land > div.min-w-0 > div.flex { flex-direction: column; justify-content: center; gap: 5px; }
  .ff-boxes a.ff-land h3 { font-size: 15px !important; line-height: 1.2; }
  .ff-boxes a.ff-land .ff-badge { display: inline-block !important; }
  .ff-boxes a.ff-land .ff-desc { display: -webkit-box !important; -webkit-line-clamp: 2; font-size: 12px !important; margin-top: 6px; }
  .ff-boxes a.ff-land .ff-arrow { display: none; }
}
@media (max-width: 639px) {
  .ff-boxes { gap: 8px !important; }
  .ff-boxes a.ff-land { padding: 14px 6px !important; gap: 8px !important; border-radius: 18px !important; }
  .ff-boxes a.ff-land .ff-icon { width: 2.6rem !important; height: 2.6rem !important; border-radius: 0.85rem !important; }
  .ff-boxes a.ff-land .ff-icon svg { width: 1.3rem !important; height: 1.3rem !important; }
  .ff-boxes a.ff-land h3 { font-size: 12.5px !important; }
  .ff-boxes a.ff-land .ff-badge { font-size: 8.5px !important; padding: 1px 6px !important; letter-spacing: .04em; }
  .ff-boxes a.ff-land .ff-desc { display: none !important; }
}
@media (max-width: 1023px) {
  .ff-boxes a.ff-land { align-self: stretch !important; }               /* equal heights in a row */
  /* centre the tiles in the free space SAFELY: auto margins never push content over the title or ads */
  main:has(.ff-boxes) { display: flex !important; flex-direction: column; }
  .ff-boxes { margin-top: auto !important; margin-bottom: auto !important; }
}

/* v26: height-aware homepage — tiles, title and ads shrink on SHORT screens
   (phones in landscape, Fold, small laptops), so everything fits without overlapping */
@media (max-width: 1023px) and (max-height: 900px) {
  .ff-boxes a.ff-land .ff-desc { display: none !important; }
}
@media (max-height: 720px) {
  .ff-hero-title { font-size: 1.45rem !important; line-height: 1.15 !important; }
  .ff-hero { padding-top: 0.4rem !important; }
  .ff-hero p { margin-top: 2px !important; }
  .ff-topad { margin-top: 0.4rem !important; }
  .ff-botad { margin-bottom: 0.4rem !important; }
  .ad-leader { height: 60px !important; }
}
@media (max-width: 1023px) and (max-height: 720px) {
  /* short screens: compact side-by-side tiles (icon + name), still 3 on top and 3 below */
  .ff-boxes { gap: 8px !important; }
  .ff-boxes a.ff-land { flex-direction: row !important; text-align: left !important; justify-content: flex-start !important; padding: 8px 10px !important; gap: 10px !important; border-radius: 14px !important; }
  .ff-boxes a.ff-land > div.min-w-0 { flex: 1 1 auto !important; width: auto !important; }
  .ff-boxes a.ff-land > div.min-w-0 > div.flex { flex-direction: row !important; justify-content: flex-start !important; align-items: center; flex-wrap: wrap; gap: 4px 6px !important; }
  .ff-boxes a.ff-land .ff-icon { width: 2.2rem !important; height: 2.2rem !important; border-radius: 0.7rem !important; }
  .ff-boxes a.ff-land .ff-icon svg { width: 1.1rem !important; height: 1.1rem !important; }
  .ff-boxes a.ff-land h3 { font-size: 13px !important; }
  .ff-boxes a.ff-land .ff-badge { font-size: 8.5px !important; padding: 1px 6px !important; }
}
@media (max-width: 1023px) and (max-height: 720px) and (max-width: 520px) {
  /* narrow AND short (small phones): stack icon over name again, very compact */
  .ff-boxes a.ff-land { flex-direction: column !important; text-align: center !important; justify-content: center !important; padding: 8px 4px !important; gap: 5px !important; }
  .ff-boxes a.ff-land > div.min-w-0 > div.flex { flex-direction: column !important; justify-content: center !important; }
  .ff-boxes a.ff-land h3 { font-size: 11.5px !important; }
  .ff-boxes a.ff-land .ff-icon { width: 2rem !important; height: 2rem !important; }
}
@media (max-height: 480px) {
  .ff-hero-title { font-size: 1.15rem !important; }
  .ff-hero p { display: none; }
  .ad-leader { height: 50px !important; }
  header { padding-top: 4px !important; padding-bottom: 4px !important; }
}

/* v26b: medium-height screens (Fold, small tablets, 1024-wide laptops) */
@media (min-width: 640px) and (max-height: 900px) {
  .ff-hero-title { font-size: 2.1rem !important; }
}
@media (max-width: 1023px) and (min-height: 721px) and (max-height: 900px) {
  .ff-boxes { gap: 8px !important; }
  .ff-boxes a.ff-land { padding: 12px 8px !important; gap: 7px !important; }
  .ff-boxes a.ff-land .ff-icon { width: 2.6rem !important; height: 2.6rem !important; border-radius: 0.85rem !important; }
  .ff-boxes a.ff-land .ff-icon svg { width: 1.3rem !important; height: 1.3rem !important; }
  .ff-boxes a.ff-land h3 { font-size: 14px !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 820px) {
  .ff-boxes a.ff-land .ff-desc { display: none !important; }
}
@media (max-height: 480px) {
  footer { padding-top: 4px !important; padding-bottom: 4px !important; }
  .ff-boxes { gap: 6px !important; }
  .ff-boxes a.ff-land { padding: 6px 10px !important; }
  .ff-boxes a.ff-land .ff-icon { width: 1.9rem !important; height: 1.9rem !important; }
}
@media (max-height: 480px) {
  footer a.soc { width: 30px !important; height: 30px !important; }
  footer a.soc svg { width: 15px !important; height: 15px !important; }
  footer > div { padding-top: 4px !important; padding-bottom: 4px !important; }
  header a svg { width: 1.5rem !important; height: 1.5rem !important; }
  header #themeToggle { width: 2rem !important; height: 2rem !important; }
}
@media (max-width: 400px) and (max-height: 600px) {
  .ff-hero-title { font-size: 1.15rem !important; }
  .ff-hero p { font-size: 11px !important; }
  .ad-leader { height: 50px !important; }
  .ff-boxes a.ff-land { padding: 6px 4px !important; }
}
/* v26c: 1024–1279 px (small laptops, iPad landscape): centre column is narrow — use the neat stacked tiles */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ff-boxes a.ff-land { flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px 10px !important; gap: 8px !important; align-self: stretch !important; }
  .ff-boxes a.ff-land > div.min-w-0 { flex: none; width: 100%; }
  .ff-boxes a.ff-land > div.min-w-0 > div.flex { flex-direction: column; justify-content: center; gap: 5px; }
  .ff-boxes a.ff-land .ff-icon { width: 2.8rem !important; height: 2.8rem !important; border-radius: 0.9rem !important; }
  .ff-boxes a.ff-land .ff-icon svg { width: 1.4rem !important; height: 1.4rem !important; }
  .ff-boxes a.ff-land h3 { font-size: 15px !important; }
  .ff-boxes a.ff-land .ff-arrow { display: none; }
}

/* v27: until AdSense approves the site (html has class "ads-off"), hide every ad space so pages look
   finished and the tools get the room. Removing "ads-off" from <html> brings the ad spaces back. */
html.ads-off .ad-slot, html.ads-off .ad-rail-col { display: none !important; }
html.ads-off .grid:has(> .ad-rail-col) { grid-template-columns: minmax(0, 1fr) !important; }
/* homepage without ad spaces: title + tiles stay together as one group, centred on the screen */
html.ads-off .ff-hero { margin-top: auto; }
html.ads-off .ff-hero + div.flex-1 { flex: 0 0 auto !important; margin-bottom: auto; padding-top: 14px !important; }
html.ads-off .ff-hero + div.flex-1 main, html.ads-off .ff-hero + div.flex-1 .ff-boxes { height: auto !important; margin-top: 0 !important; }
@media (min-width: 1024px) { html.ads-off .ff-boxes a.ff-land { min-height: 150px; } }
@media (min-width: 1024px) and (min-height: 1000px) { html.ads-off .ff-boxes a.ff-land { min-height: 210px; } }
/* without ad spaces there is room again on mid-height screens (Fold landscape, tablets) — use the bigger stacked tiles */
@media (min-width: 560px) and (max-width: 1023px) and (min-height: 540px) and (max-height: 720px) {
  html.ads-off .ff-boxes a.ff-land { flex-direction: column !important; text-align: center !important; justify-content: center !important; padding: 12px 8px !important; gap: 7px !important; border-radius: 18px !important; }
  html.ads-off .ff-boxes a.ff-land > div.min-w-0 { flex: none !important; width: 100% !important; }
  html.ads-off .ff-boxes a.ff-land > div.min-w-0 > div.flex { flex-direction: column !important; justify-content: center !important; gap: 5px !important; }
  html.ads-off .ff-boxes a.ff-land .ff-icon { width: 2.6rem !important; height: 2.6rem !important; border-radius: 0.85rem !important; }
  html.ads-off .ff-boxes a.ff-land .ff-icon svg { width: 1.3rem !important; height: 1.3rem !important; }
  html.ads-off .ff-boxes a.ff-land h3 { font-size: 14px !important; }
  html.ads-off .ff-hero-title { font-size: 1.9rem !important; }
}

/* ═══ v28 — live video preview player + watermark editor ═══ */
.ffpl{width:100%}
.ffpl-stage{width:100%;display:flex;justify-content:center;align-items:center;background:#0b1020;border-radius:1rem;overflow:hidden;min-height:180px}
.ffpl-box{position:relative;max-width:100%}
.ffpl-box video,.ffpl-box canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ffpl-box video{object-fit:fill;background:#000}
.ffpl-ov{touch-action:none;cursor:pointer}
.ffpl-msg{position:absolute;left:8px;right:8px;top:8px;z-index:2;font-size:.72rem;font-weight:600;color:#e2e8f0;background:rgba(15,23,42,.8);border-radius:.6rem;padding:.4rem .6rem;pointer-events:none}
.ffpl-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:3.4rem;height:3.4rem;border-radius:9999px;background:rgba(79,70,229,.92);color:#fff;font-size:1.25rem;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);padding-left:.2rem}
.ffpl-big:hover{background:#4338ca}
.ffpl-bar{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.75rem;font-weight:700;color:#475569;font-variant-numeric:tabular-nums}
html.dark .ffpl-bar{color:#cbd5e1}
.ffpl-bar button{flex:0 0 auto;width:2.2rem;height:2.2rem;border-radius:.7rem;display:grid;place-items:center;background:#eef2ff;color:#4338ca;font-size:.85rem}
html.dark .ffpl-bar button{background:#1e1b4b;color:#c7d2fe}
.ffpl-seek{flex:1 1 auto;min-width:0;accent-color:#4f46e5;height:1.4rem}
.ffpl-extra{margin-top:.4rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.ffwm-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:800;border-radius:9999px;padding:.2rem .65rem}
.ffwm-badge.on{background:#dcfce7;color:#15803d}
.ffwm-badge.off{background:#f1f5f9;color:#64748b}
html.dark .ffwm-badge.on{background:#052e16;color:#86efac}
html.dark .ffwm-badge.off{background:#1e293b;color:#94a3b8}
.ffwm-tabs{display:flex;gap:.35rem;margin-top:.9rem;overflow-x:auto;scrollbar-width:none;border-bottom:2px solid #e2e8f0;padding-bottom:0}
html.dark .ffwm-tabs{border-color:#334155}
.ffwm-tabs::-webkit-scrollbar{display:none}
.ffwm-tabs button{flex:0 0 auto;font-size:.8rem;font-weight:800;color:#64748b;padding:.55rem .8rem;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.ffwm-tabs button.on{color:#4f46e5;border-color:#4f46e5}
html.dark .ffwm-tabs button.on{color:#a5b4fc;border-color:#818cf8}
.ffwm-panel{padding-top:.85rem}
.ffwm-lbl{display:block;font-size:.75rem;font-weight:800;color:#475569}
html.dark .ffwm-lbl{color:#cbd5e1}
.ffwm-input{display:block;margin-top:.25rem;width:100%;font-size:.875rem;font-weight:500;border:2px solid #e2e8f0;border-radius:.75rem;padding:.5rem .7rem;background:#fff;color:#1e293b}
html.dark .ffwm-input{background:#0f172a;border-color:#334155;color:#e2e8f0}
.ffwm-input:focus{outline:none;box-shadow:0 0 0 2px #818cf8}
.ffwm-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media (max-width:520px){.ffwm-grid2{grid-template-columns:minmax(0,1fr)}}
.ffwm-seg{display:inline-flex;flex-wrap:wrap;gap:.3rem;background:#f1f5f9;border-radius:.85rem;padding:.25rem}
html.dark .ffwm-seg{background:#1e293b}
.ffwm-seg button{font-size:.8rem;font-weight:700;color:#475569;border-radius:.65rem;padding:.4rem .75rem;white-space:nowrap}
html.dark .ffwm-seg button{color:#cbd5e1}
.ffwm-seg button.on{background:#fff;color:#4338ca;box-shadow:0 1px 3px rgba(15,23,42,.15)}
html.dark .ffwm-seg button.on{background:#4f46e5;color:#fff}
.ffwm-chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.ffwm-chips button{font-size:.72rem;font-weight:700;color:#4338ca;background:#eef2ff;border-radius:9999px;padding:.28rem .65rem}
html.dark .ffwm-chips button{background:#1e1b4b;color:#c7d2fe}
.ffwm-chips button:hover{background:#e0e7ff}
.ffwm-sep{width:1px;height:1.2rem;background:#cbd5e1;margin:0 .15rem}
.ffwm-swatches{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.ffwm-swatches button,.ffwm-custom{width:1.9rem;height:1.9rem;border-radius:9999px;border:2px solid #cbd5e1;box-shadow:inset 0 0 0 2px #fff}
html.dark .ffwm-swatches button{border-color:#475569;box-shadow:inset 0 0 0 2px #0f172a}
.ffwm-swatches button.on{outline:3px solid #4f46e5;outline-offset:2px}
.ffwm-custom{position:relative;overflow:hidden;background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#6366f1,#d946ef,#ef4444);cursor:pointer}
.ffwm-custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.ffwm-check{display:flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:600;color:#475569;cursor:pointer}
html.dark .ffwm-check{color:#cbd5e1}
.ffwm-check input{width:1rem;height:1rem;accent-color:#4f46e5}
.ffwm-btn2{font-size:.8rem;font-weight:700;color:#334155;border:2px solid #e2e8f0;border-radius:.75rem;padding:.45rem .85rem;background:#fff}
html.dark .ffwm-btn2{color:#e2e8f0;border-color:#334155;background:#0f172a}
.ffwm-btn2:hover{border-color:#a5b4fc}
.ffwm-moves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
@media (max-width:560px){.ffwm-moves{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ffwm-moves button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.1rem;border:2px solid #e2e8f0;border-radius:.9rem;padding:.55rem .7rem;background:#fff}
html.dark .ffwm-moves button{border-color:#334155;background:#0f172a}
.ffwm-moves button .i{font-size:1.1rem;line-height:1}
.ffwm-moves button b{font-size:.8rem;color:#1e293b}
html.dark .ffwm-moves button b{color:#f1f5f9}
.ffwm-moves button small{font-size:.68rem;color:#64748b;line-height:1.25}
.ffwm-moves button.on{border-color:#4f46e5;background:#eef2ff}
html.dark .ffwm-moves button.on{border-color:#818cf8;background:#1e1b4b}
.ffwm-pos{display:grid;grid-template-columns:repeat(3,2.6rem);gap:.3rem}
.ffwm-pos button{height:2.2rem;border-radius:.6rem;border:2px solid #e2e8f0;background:#f8fafc;color:#64748b;font-size:.9rem}
html.dark .ffwm-pos button{border-color:#334155;background:#1e293b;color:#94a3b8}
.ffwm-pos button.on{background:#4f46e5;border-color:#4f46e5;color:#fff}
.ffwm-export{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:.75rem;align-items:end;margin-top:1rem;padding-top:.9rem;border-top:2px solid #f1f5f9}
html.dark .ffwm-export{border-color:#1e293b}
.ffwm-actions{display:flex;gap:.5rem;flex-wrap:wrap}
@media (max-width:640px){.ffwm-export{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ffwm-actions{grid-column:1/-1}.ffwm-actions #bvw-go{flex:1 1 auto}}
.ffwm-result{background:#f8fafc;border:1px solid #e2e8f0;border-radius:1rem;padding:.7rem}
html.dark .ffwm-result{background:#0f172a;border-color:#334155}
.ffwm-result video{width:100%;max-height:50vh;border-radius:.7rem;background:#000}
#bvw-out,[id$="-out"].grid{grid-template-columns:minmax(0,1fr)}
#bvw-out > *{min-width:0}
.ffpl,.ffpl *{-webkit-user-select:none;user-select:none}
.ffpl-box video{-webkit-touch-callout:none}
@media (max-width:480px){.ffwm-tabs{gap:0}.ffwm-tabs button{padding:.5rem .5rem;font-size:.74rem}}
@media (max-width:359px){.ffwm-tabs button{padding:.45rem .35rem;font-size:.7rem}}
.ffrg{width:100%;margin-top:.35rem}
.ffrg-track{position:relative;height:2.4rem;border-radius:.7rem;background:repeating-linear-gradient(90deg,#e2e8f0 0 2px,#f1f5f9 2px 18px);touch-action:none;cursor:pointer}
html.dark .ffrg-track{background:repeating-linear-gradient(90deg,#334155 0 2px,#1e293b 2px 18px)}
.ffrg-sel{position:absolute;top:0;bottom:0;background:rgba(99,102,241,.28);border-top:3px solid #4f46e5;border-bottom:3px solid #4f46e5}
.ffrg-head{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:#f43f5e;pointer-events:none}
.ffrg-h{position:absolute;top:0;bottom:0;width:1.1rem;margin-left:-.55rem;border-radius:.45rem;background:#4f46e5;box-shadow:0 1px 4px rgba(15,23,42,.35)}
.ffrg-h::after{content:'';position:absolute;left:50%;top:30%;bottom:30%;width:2px;margin-left:-1px;background:rgba(255,255,255,.85);border-radius:2px}
.ffrg-h:focus-visible{outline:3px solid #a5b4fc;outline-offset:1px}
.ffrg-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.5rem}
.ffrg-info{font-size:.75rem;font-weight:800;color:#4338ca;margin-left:auto}
html.dark .ffrg-info{color:#a5b4fc}
@media (max-width:520px){.ffrg-info{margin-left:0;width:100%}.ffrg-row .ffwm-btn2{flex:1 1 auto;padding:.45rem .5rem}}
.ffwm-gif{display:block;max-width:100%;max-height:50vh;margin:0 auto;border-radius:.7rem;background:repeating-conic-gradient(#e2e8f0 0 25%,#fff 0 50%) 0 0/14px 14px}
.ffrg{padding:0 .55rem;box-sizing:border-box}

/* ═══════════ v25 — FileFi Pro: ad-free mode ═══════════
   <html class="pro"> hides every ad slot, mirroring the ads-off layout. */
html.pro ins.adsbygoogle { display: none !important; }
html.pro .ad-slot, html.pro .ad-rail-col { display: none !important; }
html.pro .grid:has(> .ad-rail-col) { grid-template-columns: minmax(0, 1fr) !important; }
html.pro .ff-hero { margin-top: auto; }
html.pro .ff-hero + div.flex-1 { flex: 0 0 auto !important; margin-bottom: auto; padding-top: 14px !important; }
html.pro .ff-hero + div.flex-1 main, html.pro .ff-hero + div.flex-1 .ff-boxes { height: auto !important; margin-top: 0 !important; }
@media (min-width: 1024px) { html.pro .ff-boxes a.ff-land { min-height: 150px; } }
@media (min-width: 1024px) and (min-height: 1000px) { html.pro .ff-boxes a.ff-land { min-height: 210px; } }

/* v44: hide an ad box Google couldn't fill, instead of showing an empty placeholder */
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; }