/* ════════════════════════════════════════════════════════════════════
   FileFi — Glass theme (v65)
   Peach at the top → pink → purple → blue at the bottom, frosted-glass
   cards, white text, black buttons. Loaded LAST on every page; every rule
   is scoped to html.ffg so it wins over the base styles without !important.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --g-top: #c36c55;
  --g-1: #e598ac;
  --g-2: #b48fd3;
  --g-3: #929fe0;
  --g-4: #6e7cc4;
  --g-bottom: #4c5089;
  --glass: rgba(255, 255, 255, 0.15);
  --glass-hi: rgba(255, 255, 255, 0.24);
  --glass-lo: rgba(255, 255, 255, 0.09);
  --glass-line: rgba(255, 255, 255, 0.32);
  --glass-line-soft: rgba(255, 255, 255, 0.18);
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.86);
  --ink-3: rgba(255, 255, 255, 0.8);
  --ink-4: rgba(255, 255, 255, 0.68);
  --field: rgba(32, 30, 78, 0.24);
  --btn: #121218;
  --btn-hover: #000000;
  --ok: #b6f5d4;
  --bad: #ffd0d8;
  --warn: #ffe7a6;
  --r-card: 1.5rem;
  --blur: blur(18px) saturate(140%);
}

/* ── page background ─────────────────────────────────────────────── */
html.ffg { background: var(--g-bottom); color-scheme: dark; }
html.ffg body {
  background: transparent !important;
  color: var(--ink) !important;
  font-family: "Poppins", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html.ffg body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 12% 76%, rgba(126, 170, 240, 0.55), transparent 70%),
    radial-gradient(55% 40% at 92% 6%, rgba(236, 132, 170, 0.45), transparent 70%),
    radial-gradient(45% 35% at 8% 4%, rgba(246, 170, 120, 0.55), transparent 70%),
    linear-gradient(180deg, var(--g-top) 0%, var(--g-1) 20%, var(--g-2) 44%, var(--g-3) 66%, var(--g-4) 84%, var(--g-bottom) 100%);
}
html.ffg ::selection { background: rgba(255, 255, 255, 0.35); color: #fff; }

/* ── text colours ────────────────────────────────────────────────── */
html.ffg .text-slate-900, html.ffg .text-slate-800, html.ffg .text-slate-700,
html.ffg .text-gray-900, html.ffg .text-gray-800, html.ffg .text-gray-700, html.ffg .text-black { color: var(--ink); }
html.ffg .text-slate-600, html.ffg .text-gray-600 { color: var(--ink-2); }
html.ffg .text-slate-500, html.ffg .text-gray-500 { color: var(--ink-3); }
html.ffg .text-slate-400, html.ffg .text-slate-300, html.ffg .text-gray-400 { color: var(--ink-4); }
html.ffg .text-indigo-500, html.ffg .text-indigo-600, html.ffg .text-indigo-700, html.ffg .text-indigo-800,
html.ffg .text-violet-600, html.ffg .text-blue-600, html.ffg .text-sky-600 { color: var(--ink); }
html.ffg .hover\:text-indigo-600:hover, html.ffg .hover\:text-indigo-700:hover,
html.ffg .hover\:text-slate-600:hover, html.ffg .hover\:text-slate-900:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
html.ffg .text-emerald-500, html.ffg .text-emerald-600, html.ffg .text-emerald-700, html.ffg .text-green-600, html.ffg .text-green-700 { color: var(--ok); }
html.ffg .text-red-500, html.ffg .text-red-600, html.ffg .text-red-700, html.ffg .text-rose-600 { color: var(--bad); }
html.ffg .hover\:text-red-500:hover { color: var(--bad); }
html.ffg .text-amber-500, html.ffg .text-amber-600, html.ffg .text-amber-700, html.ffg .text-amber-800, html.ffg .text-orange-600 { color: var(--warn); }
html.ffg a { text-underline-offset: 3px; }

/* ── type: light, airy headings like the reference ───────────────── */
html.ffg h1, html.ffg h2, html.ffg h3, html.ffg h4 { letter-spacing: -0.01em; }
html.ffg .ff-hero-title { font-weight: 300 !important; letter-spacing: -0.015em; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem); line-height: 1.12; }
html.ffg .ff-page-title { font-weight: 400 !important; letter-spacing: -0.01em; }
html.ffg .font-extrabold, html.ffg .font-black { font-weight: 600; }
html.ffg h3.font-extrabold, html.ffg h2.font-extrabold { font-weight: 500; }

/* ── glass surfaces (cards, panels, chips) ───────────────────────── */
html.ffg .bg-white, html.ffg .bg-slate-50, html.ffg .bg-slate-100, html.ffg .bg-gray-50, html.ffg .bg-gray-100,
html.ffg .bg-white\/70, html.ffg .bg-white\/80, html.ffg .bg-white\/90 {
  background-color: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
html.ffg .bg-slate-100 { background-color: var(--glass-lo); }
html.ffg .hover\:bg-slate-50:hover, html.ffg .hover\:bg-slate-100:hover, html.ffg .hover\:bg-slate-200:hover,
html.ffg .hover\:bg-indigo-50:hover, html.ffg .hover\:bg-indigo-200:hover { background-color: var(--glass-hi); }
html.ffg .bg-indigo-50, html.ffg .bg-indigo-100, html.ffg .bg-indigo-50\/60, html.ffg .bg-violet-50 { background-color: var(--glass-hi); }
html.ffg .rounded-2xl { border-radius: var(--r-card); }
html.ffg .rounded-3xl { border-radius: 1.8rem; }
html.ffg .shadow-sm, html.ffg .shadow, html.ffg .shadow-md { box-shadow: 0 8px 28px rgba(40, 24, 90, 0.14); }
html.ffg .shadow-lg, html.ffg .shadow-xl, html.ffg .hover\:shadow-xl:hover { box-shadow: 0 16px 44px rgba(40, 24, 90, 0.22); }
html.ffg [class*="shadow-indigo"], html.ffg [class*="shadow-emerald"] { --tw-shadow-color: rgba(0, 0, 0, 0.28); }

/* status boxes */
html.ffg .bg-emerald-50, html.ffg .bg-green-50, html.ffg .bg-emerald-100 { background-color: rgba(52, 211, 153, 0.16); }
html.ffg .bg-red-50, html.ffg .bg-rose-50, html.ffg .hover\:bg-red-50:hover, html.ffg .hover\:bg-red-100:hover { background-color: rgba(251, 113, 133, 0.18); }
html.ffg .bg-amber-50, html.ffg .bg-yellow-50 { background-color: rgba(252, 211, 77, 0.16); }

/* borders */
html.ffg .border-slate-100, html.ffg .border-slate-200, html.ffg .border-slate-300, html.ffg .border-slate-200\/70,
html.ffg .border-gray-200, html.ffg .border-gray-300, html.ffg .border-indigo-200, html.ffg .border-indigo-300 { border-color: var(--glass-line); }
html.ffg .divide-slate-100 > * + *, html.ffg .divide-slate-200 > * + * { border-color: var(--glass-line-soft); }
html.ffg .hover\:border-indigo-300:hover, html.ffg .hover\:border-indigo-400:hover, html.ffg .hover\:border-indigo-500:hover,
html.ffg .border-indigo-400, html.ffg .border-indigo-500, html.ffg .border-indigo-600 { border-color: rgba(255, 255, 255, 0.75); }
html.ffg .border-emerald-200, html.ffg .border-emerald-300, html.ffg .border-green-200 { border-color: rgba(110, 231, 183, 0.5); }
html.ffg .border-red-200 { border-color: rgba(253, 164, 175, 0.55); }
html.ffg .border-amber-200 { border-color: rgba(252, 211, 77, 0.5); }
html.ffg .border-dashed { border-color: rgba(255, 255, 255, 0.5); }
html.ffg .ring-indigo-400, html.ffg .ring-indigo-500, html.ffg .focus\:ring-indigo-400:focus, html.ffg .focus\:ring-indigo-500:focus { --tw-ring-color: rgba(255, 255, 255, 0.65); }

/* ── buttons: black ──────────────────────────────────────────────── */
html.ffg .bg-indigo-600, html.ffg .bg-indigo-500, html.ffg .bg-indigo-700, html.ffg .bg-violet-600,
html.ffg .bg-emerald-600, html.ffg .bg-emerald-500, html.ffg .bg-green-600, html.ffg .bg-amber-500, html.ffg .bg-indigo-600\/90 {
  background-color: var(--btn); color: #fff;
}
html.ffg .hover\:bg-indigo-700:hover, html.ffg .hover\:bg-indigo-500:hover, html.ffg .hover\:bg-emerald-700:hover,
html.ffg .hover\:bg-emerald-500:hover, html.ffg .hover\:bg-amber-600:hover { background-color: var(--btn-hover); }
html.ffg button.bg-indigo-600, html.ffg a.bg-indigo-600, html.ffg button.bg-emerald-600, html.ffg a.bg-emerald-600,
html.ffg label.bg-indigo-600, html.ffg button.bg-indigo-500, html.ffg button.bg-amber-500 {
  border-radius: 9999px; box-shadow: 0 10px 24px rgba(10, 8, 30, 0.28);
}
html.ffg .from-indigo-500, html.ffg .from-indigo-600 { --tw-gradient-from: rgba(255, 255, 255, 0.95) var(--tw-gradient-from-position, 0%); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position, 100%); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.ffg .to-emerald-500, html.ffg .to-violet-600 { --tw-gradient-to: rgba(255, 255, 255, 0.95) var(--tw-gradient-to-position, 100%); }
html.ffg .bg-slate-800 { background-color: rgba(255, 255, 255, 0.16); }

/* the icon tiles: frosted squares with white line icons */
html.ffg .ff-icon, html.ffg .ff-page-icon,
html.ffg section > .flex > .shrink-0.rounded-2xl.bg-indigo-600 {
  background: var(--glass-hi); color: #fff;
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px rgba(40, 24, 90, 0.16);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
html.ffg .ff-badge { background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; }
html.ffg .ff-arrow { color: #fff; }

/* ── form fields ─────────────────────────────────────────────────── */
html.ffg input[type="text"], html.ffg input[type="email"], html.ffg input[type="url"], html.ffg input[type="number"],
html.ffg input[type="password"], html.ffg input[type="search"], html.ffg input[type="tel"], html.ffg input:not([type]),
html.ffg select, html.ffg textarea, html.ffg .ffwm-input, html.ffg .qr-input {
  background-color: var(--field) !important; color: #fff !important;
  border-color: var(--glass-line) !important;
}
html.ffg input::placeholder, html.ffg textarea::placeholder { color: rgba(255, 255, 255, 0.55) !important; }
html.ffg input:focus, html.ffg select:focus, html.ffg textarea:focus {
  outline: none; border-color: rgba(255, 255, 255, 0.85) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18) !important;
}
html.ffg select option, html.ffg select optgroup { background: #3f3f78; color: #fff; }
html.ffg input[type="color"] { background: var(--field) !important; }
html.ffg input[type="range"] { accent-color: #ffffff; }
html.ffg input[type="checkbox"], html.ffg input[type="radio"] { accent-color: #121218; }

/* ── header + footer ─────────────────────────────────────────────── */
html.ffg .glass, html.ffg header.glass, html.ffg footer.glass {
  background: transparent !important; border-color: transparent !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.ffg header.glass { padding-top: 0.85rem; padding-bottom: 0.85rem; }
html.ffg header .text-slate-900, html.ffg header .text-indigo-600, html.ffg header .text-indigo-400 { color: #fff !important; }
html.ffg header a[aria-label="FileFi home"] svg rect { fill: rgba(255, 255, 255, 0.22); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; }
html.ffg header a[aria-label="FileFi home"] > span { letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500 !important; font-size: 1.05rem; }
html.ffg #themeToggle { display: none !important; }
html.ffg header button, html.ffg header a.rounded-full, html.ffg .ff-pro-chip, html.ffg header [class*="rounded-full"] {
  background: var(--glass) !important; color: #fff !important; border: 1px solid var(--glass-line) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
html.ffg header button:hover, html.ffg header a.rounded-full:hover { background: var(--glass-hi) !important; }
html.ffg footer { color: var(--ink-3); }
html.ffg .soc { background: var(--glass); border: 1px solid var(--glass-line); color: #fff; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
html.ffg .soc:hover { border-color: #fff; box-shadow: 0 0 18px rgba(255, 255, 255, 0.35); }
html.ffg .flink { color: var(--ink-2); font-weight: 500; }
html.ffg .flink:hover { color: #fff; text-decoration: underline; }

/* ── shared site components (styles.css) ─────────────────────────── */
html.ffg #dropzone, html.ffg [data-bvd-drop], html.ffg .sr-drop, html.ffg .bpa-drag, html.ffg .ff-drag {
  background: var(--glass-lo); border-color: rgba(255, 255, 255, 0.55) !important;
}
html.ffg #dropzone.drag, html.ffg .sr-drop.drag, html.ffg #cvDrop.drag, html.ffg [data-bvd-drop].drag { background: var(--glass-hi) !important; border-color: #fff !important; }
html.ffg .tab, html.ffg .cv-tab, html.ffg .cv-pdfmode, html.ffg .tbtn, html.ffg .ff-pill, html.ffg .ff-toolbox, html.ffg .qr-type {
  background: var(--glass); color: #fff; border-color: var(--glass-line);
}
html.ffg .tab:hover, html.ffg .cv-tab:hover, html.ffg .cv-pdfmode:hover, html.ffg .ff-pill:hover, html.ffg .ff-toolbox:hover, html.ffg .qr-type:hover { background: var(--glass-hi); border-color: rgba(255, 255, 255, 0.6); }
html.ffg .tab.active, html.ffg .cv-tab.on, html.ffg .cv-pdfmode.on, html.ffg .tbtn.selected, html.ffg .qr-type.selected {
  background: #fff !important; color: #1b1a3a !important; border-color: #fff !important; box-shadow: 0 8px 22px rgba(40, 24, 90, 0.2);
}
html.ffg .qr-type-label, html.ffg .qr-label, html.ffg .qr-step, html.ffg .qr-check, html.ffg .qr-note { color: #fff; }
html.ffg .qr-type.selected .qr-type-label, html.ffg .qr-type.selected svg { color: #1b1a3a; }
html.ffg .qr-type-hint { color: var(--ink-3); }
html.ffg .qr-step .n { background: var(--btn); color: #fff; }
html.ffg .prog { background: rgba(255, 255, 255, 0.22); }
html.ffg .prog > div { background: #fff; }
html.ffg .cmp-handle { background: #fff; }
html.ffg .cmp-knob { background: #fff; color: #1b1a3a; }
html.ffg .cv-file, html.ffg .cv-out { background: var(--glass); border-color: var(--glass-line); color: #fff; }
html.ffg .cv-file .nm, html.ffg .cv-out .nm { color: #fff; }
html.ffg .cv-file .sz, html.ffg .cv-out .sv { color: var(--ink-3); }
html.ffg .cv-out a, html.ffg .cv-out button { background: var(--btn); color: #fff; border-radius: 9999px; border-color: transparent; }
html.ffg .cv-out a:hover, html.ffg .cv-out button:hover { background: var(--btn-hover); }
html.ffg .cv-err { background: rgba(251, 113, 133, 0.18); color: var(--bad); border-color: rgba(253, 164, 175, 0.55); }
html.ffg .cv-file button, html.ffg .cv-file .mv { background: var(--glass-hi); color: #fff; }
html.ffg .checker { background-image: conic-gradient(rgba(255,255,255,.18) 25%, rgba(255,255,255,.06) 0 50%, rgba(255,255,255,.18) 0 75%, rgba(255,255,255,.06) 0); }
html.ffg .modal-pane { background: rgba(70, 62, 140, 0.82) !important; color: #fff; border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--r-card); }
html.ffg .modal-pane h3 { color: #fff; }
html.ffg .modal-pane code { background: rgba(255, 255, 255, 0.16); color: #fff; }
html.ffg .info-article, html.ffg .info-article h1, html.ffg .info-article h2, html.ffg .info-article p, html.ffg .info-article li { color: #fff; }
html.ffg .info-article p, html.ffg .info-article li { color: var(--ink-2); }
html.ffg .info-article a { color: #fff; text-decoration: underline; }
html.ffg .ad-slot, html.ffg .ad-skyscraper { background: var(--glass-lo) !important; border-color: var(--glass-line-soft) !important; }
html.ffg .ad-slot .ad-ph, html.ffg .ad-skyscraper .ad-ph { color: var(--ink-4) !important; }
html.ffg kbd, html.ffg code { color: #fff; }
html.ffg hr { border-color: var(--glass-line-soft); }

/* ── video / watermark / subtitle tools (ffwm-*, sr-*, srl-*) ───── */
html.ffg .ffwm-tabs { border-color: var(--glass-line-soft) !important; }
html.ffg .ffwm-tabs button { color: var(--ink-3) !important; }
html.ffg .ffwm-tabs button.on { color: #fff !important; border-color: #fff !important; }
html.ffg .ffwm-lbl, html.ffg .ffwm-check { color: #fff !important; }
html.ffg .ffwm-seg { background: var(--glass-lo) !important; border-color: var(--glass-line-soft) !important; }
html.ffg .ffwm-seg button { color: #fff !important; }
html.ffg .ffwm-seg button.on { background: #fff !important; color: #1b1a3a !important; }
html.ffg .ffwm-chips button, html.ffg .ffwm-btn2, html.ffg .ffwm-moves button, html.ffg .ffwm-export button:not(.sr-primary) {
  background: var(--glass) !important; color: #fff !important; border-color: var(--glass-line) !important;
}
html.ffg .ffwm-btn2 { border-radius: 9999px !important; }
html.ffg .ffwm-chips button:hover, html.ffg .ffwm-btn2:hover, html.ffg .ffwm-moves button:hover { background: var(--glass-hi) !important; }
html.ffg .ffwm-moves button.on { background: #fff !important; color: #1b1a3a !important; }
html.ffg .ffwm-moves button small { color: var(--ink-3) !important; }
html.ffg .ffwm-moves button.on small { color: #4b4a6b !important; }
html.ffg .ffwm-swatches button.on { box-shadow: 0 0 0 3px #fff !important; }
html.ffg .ffwm-result { background: var(--glass-lo) !important; border-color: var(--glass-line-soft) !important; }
html.ffg .sr-primary { background: var(--btn) !important; color: #fff !important; border-radius: 9999px !important; box-shadow: 0 10px 24px rgba(10, 8, 30, 0.28) !important; }
html.ffg .sr-primary:hover { background: var(--btn-hover) !important; }
html.ffg .sr-hint, html.ffg .sr-steps div { color: var(--ink-3) !important; }
html.ffg .sr-steps div { background: var(--glass-lo) !important; border-color: var(--glass-line-soft) !important; }
html.ffg .sr-steps b { color: #fff !important; }
html.ffg .sr-msg.ok { background: rgba(52, 211, 153, 0.16) !important; color: var(--ok) !important; border-color: rgba(110, 231, 183, 0.5) !important; }
html.ffg .sr-msg.warn { background: rgba(252, 211, 77, 0.16) !important; color: var(--warn) !important; border-color: rgba(252, 211, 77, 0.5) !important; }
html.ffg .srl, html.ffg .sr-tog, html.ffg .srlang, html.ffg .sr-kinds button { background: var(--glass) !important; color: #fff !important; border-color: var(--glass-line) !important; }
html.ffg .srl-in, html.ffg .sr-paste textarea { background: var(--field) !important; color: #fff !important; border-color: var(--glass-line) !important; }
html.ffg .sr-paste { background: var(--glass-lo) !important; border-color: var(--glass-line) !important; }
html.ffg .srl-b { background: var(--glass-hi) !important; color: #fff !important; }
html.ffg .srl-num { background: var(--btn) !important; }

/* ── payment card (checkout) + paywall ───────────────────────────── */
html.ffg #ffPaywall > div > div {
  background: rgba(70, 62, 140, 0.78) !important; border: 1px solid var(--glass-line) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--r-card) !important;
}
html.ffg #ffPaywall a, html.ffg #ffPaywall button[style*="f5c542"] { background: var(--btn) !important; color: #fff !important; border-radius: 9999px !important; }

/* ── small phones ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  html.ffg header.glass { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  html.ffg .ff-hero-title { font-size: 1.75rem; }
}
@media (prefers-reduced-transparency: reduce) {
  html.ffg .bg-white, html.ffg .bg-slate-50, html.ffg .ff-icon { background-color: rgba(92, 86, 160, 0.82); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── v65 refinements ─────────────────────────────────────────────── */
/* free-uses line: a white glass pill (no yellow) */
html.ffg #ffTrialBanner:not(:empty) {
  display: inline-block; color: #fff !important; font-weight: 500 !important;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 9999px;
  padding: 0.3rem 0.95rem; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
/* glass inside glass: the inner one turns clear so cards don't stack up */
html.ffg .bg-white .bg-white, html.ffg .bg-white .bg-slate-50, html.ffg .bg-white section.bg-white,
html.ffg section .ffwm, html.ffg .bg-white [id$="-card"] {
  background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important;
}
/* "100% in your browser" and other mint pills: white text, soft mint glass */
html.ffg .bg-emerald-50.text-emerald-700, html.ffg .bg-emerald-50 .text-emerald-700 { color: #fff !important; }
html.ffg .bg-emerald-50.rounded-full { background-color: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); }
html.ffg .bg-emerald-50.rounded-full svg { color: #b6f5d4; }

/* a whisper of shadow keeps white text crisp on the light peach top */
html.ffg body { text-shadow: 0 1px 2px rgba(80, 36, 96, 0.16); }
html.ffg .tab.active, html.ffg .cv-tab.on, html.ffg .tbtn.selected, html.ffg .qr-type.selected, html.ffg .ffwm-seg button.on,
html.ffg .ffwm-moves button.on, html.ffg input, html.ffg select, html.ffg textarea, html.ffg .phone-screen, html.ffg .cmp-knob { text-shadow: none; }

/* SEO articles under the converters (.ffx) */
html.ffg .ffx { color: var(--ink-2); }
html.ffg .ffx h2, html.ffg .ffx h3 { color: #fff; font-weight: 500; }
html.ffg .ffx b, html.ffg .ffx strong { color: #fff; }
html.ffg .ffx .box { background: var(--glass); border-color: var(--glass-line); border-radius: var(--r-card); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
html.ffg .ffx .pills a { background: var(--glass); color: #fff; border: 1px solid var(--glass-line); }
html.ffg .ffx .pills a:hover { background: var(--glass-hi); }
html.ffg .ffx a { color: #fff; }

/* Text Compare + Line Tools */
html.ffg .tc-ta, html.ffg .ln-ta, html.ffg .ln-i { background: var(--field) !important; color: #fff !important; border-color: var(--glass-line) !important; }
html.ffg .tc-out { border-color: var(--glass-line); background: var(--glass-lo); color: #fff; }
html.ffg .tc-empty, html.ffg .tc-opt, html.ffg .ln-g > b { color: var(--ink-2); }
html.ffg .tc-same { color: var(--ok); }
html.ffg .tc-n, html.ffg .tc-skip { color: var(--ink-4); }
html.ffg .tc-row.tc-del .tc-s { color: var(--bad); }
html.ffg ins.tc-ins { background: rgba(52, 211, 153, 0.42); color: #fff; }
html.ffg del.tc-del { background: rgba(251, 113, 133, 0.42); color: #fff; }
html.ffg .tc-btn, html.ffg .ln-b { background: var(--glass); color: #fff; border: 1px solid var(--glass-line); border-radius: 9999px; }
html.ffg .tc-btn:hover, html.ffg .ln-b:hover { background: var(--glass-hi); color: #fff; border-color: rgba(255, 255, 255, 0.7); }
html.ffg .tc-btn.tc-p, html.ffg .ln-p, html.ffg .tc-btn[data-ff-use], html.ffg .tc-btn[data-ff-use-commit] { background: var(--btn); color: #fff; border-color: var(--btn); }

/* QR builder: the phone preview keeps a white screen with dark text; status boxes */
html.ffg .phone-screen, html.ffg .phone-screen * { color: #1b1a3a; }
html.ffg #qrCanvas + p, html.ffg .phone-screen .text-slate-400 { color: #64648a; }
html.ffg .qr-type svg { color: #fff; }
html.ffg .qr-status.ok { background: rgba(52, 211, 153, 0.16); color: var(--ok); border-color: rgba(110, 231, 183, 0.5); }
html.ffg .qr-status.err { background: rgba(251, 113, 133, 0.18); color: var(--bad); border-color: rgba(253, 164, 175, 0.55); }
html.ffg input[type="file"]::file-selector-button { background: var(--btn); color: #fff; border: 0; border-radius: 9999px; padding: 0.35rem 0.9rem; margin-right: 0.6rem; font-weight: 600; }

/* video player */
html.ffg .ffpl-stage { background: rgba(14, 12, 40, 0.55); border-radius: var(--r-card); }
html.ffg .ffpl-big { background: #fff; color: #1b1a3a; box-shadow: 0 10px 30px rgba(10, 8, 30, 0.35); text-shadow: none; }
html.ffg .ffpl-big:hover { background: #f3f1ff; }
html.ffg .ffpl-bar { color: #fff; }
html.ffg .ffpl-bar button { background: var(--glass); color: #fff; border: 1px solid var(--glass-line); border-radius: 9999px; }
html.ffg .ffpl-seek { accent-color: #ffffff; }
/* Trim / Expand and Mute / Replace switches */
html.ffg .ff-mode-tab { color: #fff; }
html.ffg .ff-mode-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
html.ffg .ff-mode-tab.ff-mode-on { background: #fff !important; color: #1b1a3a !important; box-shadow: 0 8px 22px rgba(40, 24, 90, 0.2) !important; text-shadow: none; }
/* file previews */
html.ffg .ffp-name { color: #fff; } html.ffg .ffp-meta { color: var(--ink-3); } html.ffg .ffp-hint { color: #fff; text-decoration: underline; }
html.ffg .ffp-more, html.ffg .ffp-ico { background: var(--glass-hi); border-color: var(--glass-line); color: #fff; }
/* share sheet */
html.ffg .ffs-wrap { background: rgba(30, 24, 70, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.ffg .ffs-b { background: var(--glass); border-color: var(--glass-line); color: #fff; }
html.ffg .ffs-b:hover { border-color: #fff; background: var(--glass-hi); }
html.ffg .ffs-close { color: #fff; }
html.ffg .ffs-i[style*="4f46e5"] { background: var(--btn) !important; }
html.ffg .ffs { background: rgba(78, 68, 150, 0.82); color: #fff; border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
html.ffg .ffs h3 { color: #fff; font-weight: 500; } html.ffg .ffs p { color: var(--ink-3); }
html.ffg [style*="color:#6366f1"] { color: #fff !important; }

/* ── v65 adjust #1: secondary buttons get a 20% dark tint instead of clear glass ── */
:root { --btn2: rgba(0, 0, 0, 0.2); --btn2-hover: rgba(0, 0, 0, 0.3); --btn2-line: rgba(255, 255, 255, 0.45); }
html.ffg button.border-2:not([class*="bg-"]), html.ffg button.border:not([class*="bg-"]):not(.qr-type):not(.tab):not(.cv-tab):not(.cv-pdfmode),
html.ffg .ffwm-btn2, html.ffg .ffwm-chips button, html.ffg .tc-btn:not([data-ff-use-commit]), html.ffg .ln-b:not(.ln-p),
html.ffg .ffpl-bar button, html.ffg .ffs-b, html.ffg .cv-file button, html.ffg .cv-file .mv, html.ffg .sr-tog, html.ffg .srl-b,
html.ffg .tt-case, html.ffg .ff-pill, html.ffg .ff-toolbox, html.ffg #ffAccount a, html.ffg header a.rounded-full, html.ffg header button {
  background: var(--btn2) !important; border-color: var(--btn2-line) !important; color: #fff !important;
}
html.ffg button.border-2:not([class*="bg-"]) { border-radius: 9999px; }
html.ffg button.border-2:not([class*="bg-"]):hover, html.ffg .ffwm-btn2:hover, html.ffg .ffwm-chips button:hover, html.ffg .tc-btn:not([data-ff-use-commit]):hover,
html.ffg .ln-b:not(.ln-p):hover, html.ffg .ffpl-bar button:hover, html.ffg .ffs-b:hover, html.ffg .ff-pill:hover, html.ffg .ff-toolbox:hover,
html.ffg header a.rounded-full:hover, html.ffg header button:hover { background: var(--btn2-hover) !important; border-color: #fff !important; }
html.ffg button.border-2:disabled, html.ffg .ffwm-btn2:disabled { opacity: 0.5; }

/* ── v65 adjust #2: bigger logo and Pro button on computers ── */
@media (min-width: 1024px) {
  html.ffg header.glass { padding: 1.1rem 1.75rem; }
  html.ffg header a[aria-label="FileFi home"] { gap: 0.75rem; }
  html.ffg header a[aria-label="FileFi home"] svg { width: 2.6rem; height: 2.6rem; }
  html.ffg header a[aria-label="FileFi home"] > span { font-size: 1.5rem !important; letter-spacing: 0.24em; }
  html.ffg header a.rounded-full, html.ffg #ffAccount a { font-size: 1rem !important; padding: 0.7rem 1.4rem !important; }
}
html.ffg .tc-btn[data-ff-use-commit]:hover, html.ffg .ln-p:hover { background: var(--btn-hover) !important; color: #fff !important; }

/* footer links wrap instead of running off narrow screens (tablets) */
html.ffg footer nav { flex-wrap: wrap; justify-content: center; row-gap: 0.4rem; }
html.ffg footer > div { flex-wrap: wrap; justify-content: center; }
@media (min-width: 1024px) { html.ffg footer > div { justify-content: space-between; } }

/* error messages: deeper red glass with white text so they read clearly on the peach top */
html.ffg #err, html.ffg .cv-err, html.ffg .bg-red-50, html.ffg .qr-status.err, html.ffg [id$="-err"]:not(:empty), html.ffg .ff-err {
  background-color: rgba(150, 24, 64, 0.5) !important; color: #fff !important;
  border: 1px solid rgba(255, 196, 206, 0.6) !important; text-shadow: none;
}
html.ffg #err *, html.ffg .cv-err *, html.ffg .bg-red-50 * { color: #fff !important; }
html.ffg .text-red-700, html.ffg .text-red-600 { color: #ffe4e9; }

/* result rows: the "✓ done" badge, file sizes, warnings, paywall small print */
html.ffg .cv-out .sv { background: rgba(16, 120, 80, 0.55); color: #fff; border: 1px solid rgba(167, 243, 208, 0.55); text-shadow: none; }
html.ffg .cv-file .sz, html.ffg .cv-out .sz { color: #fff; opacity: 0.9; }
html.ffg [style*="color:#b45309"] { color: #fff !important; font-weight: 500; }
html.ffg #ffPaywall p[style*="64748b"], html.ffg #ffPaywall p[style*="94a3b8"] { color: rgba(255, 255, 255, 0.78) !important; }

/* ════ v67 readability pass: same look, deeper colours, crisper text ════ */
:root {
  --g-top: #d9785e;      /* coral (was pale peach)  */
  --g-1: #c96b8e;        /* rose                     */
  --g-2: #9a6fc0;        /* violet                   */
  --g-3: #7783cf;        /* periwinkle               */
  --g-4: #5c68b5;        /* blue                     */
  --g-bottom: #43477e;   /* deep blue                */
  --glass: rgba(255, 255, 255, 0.11);
  --glass-hi: rgba(255, 255, 255, 0.19);
  --glass-lo: rgba(255, 255, 255, 0.07);
  --glass-line: rgba(255, 255, 255, 0.34);
  --ink-2: rgba(255, 255, 255, 0.94);
  --ink-3: rgba(255, 255, 255, 0.88);
  --ink-4: rgba(255, 255, 255, 0.8);
  --field: rgba(26, 18, 64, 0.32);
  --blur: blur(12px) saturate(130%);
}
html.ffg body::before {
  background:
    radial-gradient(60% 45% at 12% 76%, rgba(96, 140, 220, 0.42), transparent 70%),
    radial-gradient(55% 40% at 92% 6%, rgba(214, 100, 150, 0.38), transparent 70%),
    radial-gradient(45% 35% at 8% 4%, rgba(226, 132, 92, 0.45), transparent 70%),
    linear-gradient(180deg, var(--g-top) 0%, var(--g-1) 20%, var(--g-2) 44%, var(--g-3) 66%, var(--g-4) 84%, var(--g-bottom) 100%);
}
html.ffg body { text-shadow: 0 1px 2px rgba(48, 18, 70, 0.28); }
/* small print: never thin and faint */
html.ffg .text-xs, html.ffg .text-\[11px\], html.ffg .text-\[10px\], html.ffg .text-\[12px\], html.ffg .sr-hint, html.ffg small { font-weight: 500; }
html.ffg .text-slate-400, html.ffg .text-slate-500 { font-weight: 500; }
/* lighter on older computers: only the big panels are frosted; small chips are plain tinted glass */
html.ffg .ff-badge, html.ffg .soc, html.ffg header button, html.ffg header a.rounded-full, html.ffg .ffwm-chips button, html.ffg .ffwm-btn2,
html.ffg .tc-btn, html.ffg .ln-b, html.ffg button.border-2, html.ffg .ffpl-bar button, html.ffg #ffTrialBanner, html.ffg .ff-icon {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.ffg .ff-icon { background: rgba(255, 255, 255, 0.2); }
/* v67b: one notch deeper so white text reads ≥ 3.7:1 everywhere on the background */
:root { --g-top: #c36c55; --g-1: #b56080; --g-2: #8b64ad; --g-3: #6b76ba; --g-4: #535ea3; --g-bottom: #3c4071;
        --ink-2: #ffffff; --ink-3: rgba(255, 255, 255, 0.94); --ink-4: rgba(255, 255, 255, 0.88); }
html.ffg body::before {
  background:
    radial-gradient(60% 45% at 12% 76%, rgba(86, 126, 205, 0.4), transparent 70%),
    radial-gradient(55% 40% at 92% 6%, rgba(196, 90, 138, 0.36), transparent 70%),
    radial-gradient(45% 35% at 8% 4%, rgba(208, 118, 82, 0.42), transparent 70%),
    linear-gradient(180deg, var(--g-top) 0%, var(--g-1) 20%, var(--g-2) 44%, var(--g-3) 66%, var(--g-4) 84%, var(--g-bottom) 100%);
}
/* badges and info pills: the same 20%-darker tint as the buttons (white on dark reads best) */
html.ffg .ff-badge { background: rgba(0, 0, 0, 0.2) !important; }
html.ffg .bg-emerald-50.rounded-full, html.ffg #ffTrialBanner:not(:empty) { background: rgba(0, 0, 0, 0.16) !important; border-color: rgba(255, 255, 255, 0.4) !important; }
html.ffg .bg-emerald-50.rounded-full svg { color: #c8fbe0; }
/* drop zones + small label chips: light dark tint (two layers of white glass washed the hint text out) */
html.ffg #dropzone, html.ffg [data-bvd-drop], html.ffg .sr-drop, html.ffg .bpa-drag, html.ffg .ff-drag, html.ffg [id$="-drop"], html.ffg .border-dashed { background-color: rgba(0, 0, 0, 0.1) !important; }
html.ffg .bg-indigo-50, html.ffg .bg-indigo-100, html.ffg .bg-indigo-50\/60 { background-color: rgba(0, 0, 0, 0.18); }
html.ffg .sr-steps div { background: rgba(0, 0, 0, 0.12) !important; }
html.ffg .text-slate-400, html.ffg .text-slate-300 { color: rgba(255, 255, 255, 0.92); }
html.ffg .cv-file, html.ffg .ffp-ico, html.ffg .ffp-more { background: rgba(0, 0, 0, 0.14) !important; }

/* ════ v67c: 4.5:1 everywhere — same hues, deeper ════ */
:root { --g-top: #985442; --g-1: #8d4b64; --g-2: #6c4e87; --g-3: #535c91; --g-4: #41497f; --g-bottom: #2f3258;
        --glass: rgba(255, 255, 255, 0.09); --glass-hi: rgba(255, 255, 255, 0.14); --glass-lo: rgba(255, 255, 255, 0.05);
        --ink-2: #ffffff; --ink-3: rgba(255, 255, 255, 0.95); --ink-4: rgba(255, 255, 255, 0.9); }
html.ffg { background: #2f3258; }
html.ffg body::before {
  background:
    radial-gradient(60% 45% at 12% 76%, rgba(70, 104, 170, 0.36), transparent 70%),
    radial-gradient(55% 40% at 92% 6%, rgba(160, 72, 112, 0.32), transparent 70%),
    radial-gradient(45% 35% at 8% 4%, rgba(170, 96, 66, 0.38), transparent 70%),
    linear-gradient(180deg, var(--g-top) 0%, var(--g-1) 20%, var(--g-2) 44%, var(--g-3) 66%, var(--g-4) 84%, var(--g-bottom) 100%);
}
html.ffg .text-slate-400, html.ffg .text-slate-300 { color: rgba(255, 255, 255, 0.92); }
html.ffg .tab:not(.active), html.ffg .cv-tab:not(.on), html.ffg .cv-pdfmode:not(.on), html.ffg .qr-type:not(.selected), html.ffg .tbtn:not(.selected) { background: rgba(0, 0, 0, 0.14); }
:root { --ok: #dcfced; --bad: #ffe1e7; --warn: #fff1d6; }
html.ffg .qr-status.ok, html.ffg .sr-msg.ok { color: #fff !important; }
:root { --ink-3: #ffffff; }

/* ════ v67d: new logo + every icon white on a black tile ════ */
html.ffg header a[aria-label="FileFi home"] { gap: 0; }
html.ffg header a[aria-label="FileFi home"] .ff-logo { display: block; height: 1.85rem; width: auto; max-width: 46vw; }
@media (min-width: 1024px) { html.ffg header a[aria-label="FileFi home"] .ff-logo { height: 2.5rem; } }
/* tool icons: hub cards + the big icon beside every tool title */
html.ffg .ff-icon, html.ffg .ff-page-icon,
html.ffg section > .flex > .shrink-0.rounded-2xl.bg-indigo-600 {
  background: #121218 !important; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.ffg .ff-icon svg, html.ffg .ff-page-icon svg, html.ffg section > .flex > .shrink-0.rounded-2xl.bg-indigo-600 svg { color: #fff; stroke: currentColor; }
/* the small icons that used to be colour emoji (scissors, expand, tabs, drop zones, card titles …) */
.ffe {
  display: inline-grid; place-items: center; vertical-align: middle; flex: none;
  width: 1.5em; height: 1.5em; border-radius: 0.42em;
  background: #121218; color: #fff; line-height: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 3px 10px rgba(0, 0, 0, 0.22);
  text-shadow: none;
}
.ffe.ffe-gap { margin-right: 0.4em; }
.ffe svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* big standalone icons (drop zones, restore page) stay a sensible size */
.text-3xl > .ffe:only-child, .text-4xl > .ffe:only-child { width: 1.6em; height: 1.6em; }
.text-5xl > .ffe:only-child { width: 1.35em; height: 1.35em; }
/* the Pro crown chip: a small tile, no extra pill around it */
.ff-prem-badge .ffe { width: 1.35em; height: 1.35em; margin-left: 0.15em; }
.ff-prem-badge .ffe svg { width: 66%; height: 66%; }
/* inside a black button the tile melts in — the white icon still shows */
html.ffg .ffe { font-size: inherit; }
/* watermark "movement" choices and expand options: icon slot */
html.ffg [data-move] .i { display: inline-grid; place-items: center; }
/* the "100% in your browser" lock and other pill icons */
html.ffg .bg-emerald-50.rounded-full svg { color: #fff !important; background: #121218; border-radius: 999px; padding: 0.3rem; box-sizing: content-box; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22); }
/* footer social icons: black circles, white marks */
html.ffg .soc { background: #121218 !important; border-color: rgba(255, 255, 255, 0.28) !important; color: #fff !important; }
html.ffg .soc:hover { background: #000 !important; border-color: #fff !important; }
/* share sheet "copy link" bubble + file preview icons */
html.ffg .ffs-i:has(.ffe) { background: #121218 !important; }
.ffs-i .ffe, .ffpl-mute .ffe { background: transparent; box-shadow: none; }
html.ffg .ffp-ico .ffe { font-size: inherit; }
/* drop-zone upload icons and other stand-alone line icons: black tile too */
html.ffg #dropzone > svg, html.ffg .mb-2.text-indigo-600 > svg {
  color: #fff !important; background: #121218; border-radius: 0.8rem; padding: 0.55rem; box-sizing: content-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 4px 14px rgba(0, 0, 0, 0.25);
}
/* expand quick-target chips (+10s, ×2 …) were slate-on-dark */
html.ffg .ff-xchip { color: #fff !important; border-color: rgba(255, 255, 255, 0.55) !important; background: rgba(0, 0, 0, 0.16); }
html.ffg .ff-xchip:not(:disabled):hover { border-color: #fff !important; background: #121218; }
html.ffg .ff-xchip:disabled { opacity: 0.6; }
/* watermark movement titles were dark slate on the dark card */
html.ffg .ffwm-moves button b { color: #fff !important; }
html.ffg .ffwm-moves button.on b { color: #1b1a3a !important; }
html.ffg .srlang small { color: rgba(255, 255, 255, 0.9) !important; }
html.ffg .sr-hint code, html.ffg .ffwm-panel code { background: rgba(0, 0, 0, 0.3) !important; color: #fff !important; }
/* watermark + subtitle export rows: the main action is the black button, the other one the 20%-dark button */
html.ffg .ffwm-export button.bg-indigo-600 { background: var(--btn) !important; border-color: var(--btn) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(10, 8, 30, 0.28) !important; }
html.ffg .ffwm-export button.bg-indigo-600:hover:not(:disabled) { background: #000 !important; }
html.ffg .ffwm-export .ffwm-btn2 { background: var(--btn2) !important; border-color: var(--btn2-line) !important; }
html.ffg .ffwm-export .ffwm-btn2:hover { background: var(--btn2-hover) !important; }
/* karaoke sample word on the subtitle style picker: brighter blue so it reads */
html.ffg #sr-kind em { color: #a9bcff !important; }
html.ffg .ffwm-btn2:not(:disabled) { background: var(--btn2) !important; border-color: var(--btn2-line) !important; }
html.ffg .ffwm-moves button:not(.on), html.ffg .srlang:not(.on), html.ffg #sr-kind button:not(.on) { background: rgba(0, 0, 0, 0.16) !important; }
html.ffg .srlang.on, html.ffg #sr-kind button.on { background: rgba(0, 0, 0, 0.32) !important; border-color: #fff !important; }
html.ffg .ffwm-export button.ffwm-btn2:not(:disabled) { background: var(--btn2) !important; border-color: var(--btn2-line) !important; }
html.ffg .ffwm-export button.ffwm-btn2:not(:disabled):hover { background: var(--btn2-hover) !important; }
/* expand "loop / freeze" choice cards are cards, not pills */
html.ffg button.text-left.rounded-2xl[aria-pressed] { border-radius: 1.25rem !important; }