/* ═══════════════════════════════════════════════════════════════════
   VIDEO FRAMES EXTRACTOR — only what is specific to this tool.

   Hero, canvas, panels, tabs, drop zone, switch, buttons, loader shell,
   captcha and CTA all come from tool-page.css. Everything below is the
   frame workbench: the extraction-mode picker, the option controls, and
   the results grid.

   Every colour here is a token, so the whole file follows the site's
   light/dark switch without a second set of rules.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   EXTRACTION MODE PICKER

   Five modes, and the choice between them is the single most important
   thing on the page — it is what separates this tool from a slicer. So
   it is not a dropdown: each mode is a card carrying its own one-line
   explanation of what it will actually give you.
   ═══════════════════════════════════════════════════════════════════ */
.vfe-options {
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--tp-line);
}

.vfe-pick-label,
.vfe-field > label,
.vfe-field-label {
  display: block;
  margin-bottom: 9px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--foreground);
}

.vfe-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 8px;
}

.vfe-mode {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  text-align: left;
  border: 1.5px solid var(--tp-line);
  border-radius: 13px;
  background: var(--tp-panel);
  color: var(--foreground);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.vfe-mode:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.vfe-mode:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.vfe-mode-name {
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.25;
}

.vfe-mode-sub {
  font-size: .715rem;
  line-height: 1.4;
  color: var(--muted-foreground);
}

.vfe-mode[aria-pressed="true"] {
  border-color: transparent;
  background:
    linear-gradient(var(--tp-panel), var(--tp-panel)) padding-box,
    var(--gradient-scanner) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 6px 20px -10px var(--tp-badge-glow);
}

.vfe-mode[aria-pressed="true"] .vfe-mode-name { color: var(--primary); }

/* The tie back to the core product gets a marker of its own, because it
   is the one mode no competing tool can offer. */
.vfe-mode--trace .vfe-mode-name::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--gradient-scanner);
}

/* ═══════════════════════════════════════════════════════════════════
   OPTION CONTROLS

   The controls differ per mode — a count for the ranked modes, an
   interval for interval mode, a timestamp for moment mode. They share
   one grid cell so the panel keeps the height of the tallest arm and
   NOTHING below moves when the mode changes. Same reason the two input
   modes share .tp-mode-stage.
   ═══════════════════════════════════════════════════════════════════ */
.vfe-opt-stage {
  display: grid;
  margin-top: 16px;
}

.vfe-opt-stage > .vfe-opt-arm {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease;
}

.vfe-opt-stage > .vfe-opt-arm.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.vfe-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px;
}

.vfe-field { min-width: 0; }

.vfe-field-hint {
  display: block;
  margin-top: 5px;
  font-size: .7rem;
  line-height: 1.4;
  color: var(--muted-foreground);
}

.vfe-input,
.vfe-select {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--foreground);
  background: var(--tp-panel-inset);
  border: 1.5px solid var(--tp-line);
  border-radius: 11px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.vfe-select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

.vfe-input:focus,
.vfe-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Count control: a slider paired with the number it is setting, so the
   value is always legible rather than implied by a handle position. */
.vfe-count {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vfe-count input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 4px;
  appearance: none;
  border-radius: 50px;
  background: var(--tp-line);
  cursor: pointer;
}

.vfe-count input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 3px solid var(--tp-knob);
  background: var(--primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  cursor: pointer;
}

.vfe-count input[type="range"]::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 3px solid var(--tp-knob);
  background: var(--primary);
  cursor: pointer;
}

.vfe-count-value {
  flex-shrink: 0;
  min-width: 38px;
  padding: 5px 9px;
  text-align: center;
  font-size: .82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 8px;
}

.vfe-dedupe { margin-top: 14px; }

/* ═══════════════════════════════════════════════════════════════════
   RESULTS

   Its own section under the hero, not a column beside the controls —
   a grid of pictures wants the full width of the page.
   ═══════════════════════════════════════════════════════════════════ */
.vfe-results-section {
  position: relative;
  padding: 72px 0 88px;
  scroll-margin-top: 84px;
  background: var(--tp-panel-inset);
  border-top: 1px solid var(--tp-line);
}

@media (max-width: 767px) {
  .vfe-results-section { padding: 44px 0 56px; }
}

.vfe-results-section .tp-panel {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(15, 23, 42, .35);
}

.vfe-results-section .tp-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-scanner);
  z-index: 3;
}

.vfe-results-section .tp-result-head { padding: 22px 26px; }
.vfe-results-section .tp-result-title { font-size: 1.15rem; letter-spacing: -.02em; }

/* ── The note ─────────────────────────────────────────────────────
   Where the service explains a short result ("this video is one
   continuous shot"). It is the most useful sentence on the page when
   it appears, so it is not a muted aside. */
.vfe-note {
  display: flex;
  gap: 11px;
  margin: 0;
  padding: 14px 26px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--foreground);
  background: var(--primary-soft);
  border-bottom: 1px solid var(--tp-line);
}

.vfe-note::before {
  content: 'i';
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 800;
  font-style: italic;
  color: #fff;
  background: var(--primary);
}

/* ── Motion timeline ──────────────────────────────────────────────
   The change signal across the video, with the delivered frames pinned
   on it. It answers "where in this video did anything happen?" — and
   it costs nothing, because it is the same hash-distance series the
   shot detection already computed.
   ─────────────────────────────────────────────────────────────── */
.vfe-motion-wrap {
  padding: 18px 26px 20px;
  border-bottom: 1px solid var(--tp-line);
}

.vfe-motion-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.vfe-motion-title {
  margin: 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.vfe-motion-legend {
  font-size: .72rem;
  color: var(--muted-foreground);
}

.vfe-motion {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 46px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--tp-line);
}

.vfe-motion-bar {
  flex: 1;
  min-width: 1px;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--primary);
  opacity: .30;
  transition: opacity .15s ease;
}

/* A pin marks a frame that was actually delivered, so the strip reads as
   "here is where the action is, and here is what we took from it". */
.vfe-motion-pin {
  position: absolute;
  bottom: -1px;
  width: 2px;
  height: 13px;
  border-radius: 2px;
  background: var(--gradient-scanner);
  transform: translateX(-1px);
  cursor: pointer;
}

.vfe-motion-pin::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  transform: translateX(-50%);
  transition: transform .15s ease;
}

.vfe-motion-pin:hover::after,
.vfe-motion-pin.is-active::after { transform: translateX(-50%) scale(1.5); }

/* ── Toolbar: two actions left, two right ─────────────────────────── */
.vfe-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 15px 26px;
  background: var(--tp-panel-inset);
  border-bottom: 1px solid var(--tp-line);
}

.vfe-toolbar-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vfe-views {
  display: inline-flex;
  padding: 3px;
  border: 1.5px solid var(--tp-line);
  border-radius: 10px;
  background: var(--tp-panel);
}

.vfe-view {
  padding: 6px 13px;
  font-family: inherit;
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted-foreground);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.vfe-view.active {
  color: #fff;
  background: var(--gradient-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   FRAME GRID

   The frames are the product, so they get the room. Each card carries
   its timestamp, its two scores, and — when there is something to say —
   how many near-identical frames it stands for.
   ═══════════════════════════════════════════════════════════════════ */
.vfe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 16px;
  padding: 22px 26px 26px;
}

.vfe-grid--detail { grid-template-columns: minmax(0, 1fr); gap: 20px; }

.vfe-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tp-line);
  border-radius: 15px;
  overflow: hidden;
  background: var(--tp-panel);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.vfe-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 16px 34px -18px rgba(15, 23, 42, .45);
}

.vfe-card.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.vfe-shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: none;
  padding: 0;
  cursor: zoom-in;
  overflow: hidden;
}

.vfe-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.vfe-grid--detail .vfe-shot { aspect-ratio: auto; }
.vfe-grid--detail .vfe-shot img { max-height: 62vh; object-fit: contain; }

/* Timestamp burned into the corner of the picture, where it belongs —
   it is a property of the frame, not of the card around it. */
.vfe-stamp {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  font-size: .7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  pointer-events: none;
}

.vfe-reps {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 3px 8px;
  font-size: .66rem;
  font-weight: 700;
  color: #fff;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  pointer-events: none;
}

.vfe-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 13px 13px;
}

/* ── Scores ───────────────────────────────────────────────────────
   Two numbers that answer two different questions, so they are shown
   as two labelled meters rather than one blended "score" that would
   hide the disagreement between them.
   ─────────────────────────────────────────────────────────────── */
.vfe-scores {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vfe-score {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.vfe-score-label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.vfe-meter {
  height: 4px;
  border-radius: 50px;
  background: var(--tp-line);
  overflow: hidden;
}

.vfe-meter span {
  display: block;
  height: 100%;
  border-radius: 50px;
  background: var(--gradient-primary);
  transition: width .4s ease;
}

.vfe-score--trace .vfe-meter span { background: var(--gradient-scanner); }

.vfe-score-value {
  min-width: 22px;
  text-align: right;
  font-size: .74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

/* ── Flags ────────────────────────────────────────────────────────
   Honest labels on frames with a problem. A tool that hands back a
   blurry frame without saying it is blurry has told you nothing.
   ─────────────────────────────────────────────────────────────── */
.vfe-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.vfe-flag {
  padding: 2px 7px;
  font-size: .64rem;
  font-weight: 700;
  border-radius: 5px;
  color: var(--muted-foreground);
  background: var(--muted);
  border: 1px solid var(--tp-line);
}

.vfe-flag--warn {
  color: var(--tp-err);
  background: var(--tp-err-bg);
  border-color: var(--tp-err-line);
}

.vfe-flag--ok {
  color: var(--tp-ok);
  background: var(--tp-ok-bg);
  border-color: transparent;
}

/* ── Per-frame actions ────────────────────────────────────────────── */
.vfe-card-actions {
  display: flex;
  gap: 6px;
}

.vfe-act {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 8px;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  color: var(--foreground);
  background: var(--tp-panel-inset);
  border: 1.5px solid var(--tp-line);
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.vfe-act:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* The reverse-search hand-off. It gets the brand gradient because it is
   the action that leads back into the product this site is actually for. */
.vfe-act--search {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #fff;
  background: var(--gradient-scanner);
  border-color: transparent;
}

.vfe-act--search:hover { color: #fff; opacity: .9; }

.vfe-act svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Detail view ──────────────────────────────────────────────────── */
.vfe-grid--detail .vfe-card { flex-direction: row; align-items: stretch; }
.vfe-grid--detail .vfe-shot { flex: 1 1 62%; min-width: 0; }
.vfe-grid--detail .vfe-card-body { flex: 1 1 38%; justify-content: center; padding: 18px 20px; }

@media (max-width: 720px) {
  .vfe-grid--detail .vfe-card { flex-direction: column; }
}

/* ── Lightbox ─────────────────────────────────────────────────────── */
.vfe-light {
  position: fixed;
  inset: 0;
  z-index: 99996;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(2, 6, 23, .88);
  backdrop-filter: blur(6px);
}

.vfe-light.show { display: flex; }

.vfe-light img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.vfe-light-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
}

.vfe-light-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 38px;
  height: 38px;
  font-size: 1.1rem;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.vfe-light-nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}

.vfe-light-nav--prev { left: 18px; }
.vfe-light-nav--next { right: 18px; }

/* ── Foot ─────────────────────────────────────────────────────────── */
.vfe-foot {
  padding: 14px 26px 20px;
  border-top: 1px solid var(--tp-line);
  background: var(--tp-panel-inset);
  font-size: .76rem;
  color: var(--muted-foreground);
}

@media (max-width: 640px) {
  .vfe-results-section .tp-result-head,
  .vfe-toolbar,
  .vfe-motion-wrap,
  .vfe-note { padding-left: 18px; padding-right: 18px; }
  .vfe-grid { padding: 18px; gap: 12px; }
  .vfe-foot { padding: 12px 18px 16px; }
  .vfe-toolbar { justify-content: center; }
  .vfe-picker { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   ALERT MODAL

   Same visual language as the homepage search widget's popup — dark
   gradient header with drifting orbs and pulsing rings, a floating
   hero glyph, a type badge, then a light body with the message and
   the actions. Rebuilt in this tool's own classes rather than shared,
   so the two can change independently.
   ═══════════════════════════════════════════════════════════════════ */
.vfe-popup {
    position: fixed;
    inset: 0;
    z-index: 99997;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(6, 15, 28, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.vfe-popup.show {
    display: flex;
    animation: vtePopFade .2s ease;
}

.vfe-popup-box {
    position: relative;
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    border: 1px solid var(--tp-line);
    border-radius: 24px;
    background: var(--card);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .06);
    animation: vtePopUp .26s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Header ───────────────────────────────────────────────────────── */
.vfe-popup-head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 38px 28px 30px;
    overflow: hidden;
    /* Replaced per alert type by the script; this is only the fallback. */
    background: var(--gradient-primary);
}

/* No dark-mode override: the banner's colour IS the alert's nature, and it
   has to read the same in both themes. The script sets it per type. */

/* Orbs drift; their colour is set per alert type by the script. */
.vfe-popup-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}
.vfe-popup-orb--1 { width: 130px; height: 130px; top: -20px; left: -20px; animation: vtePopOrb 7s ease-in-out infinite; }
.vfe-popup-orb--2 { width: 100px; height: 100px; bottom: -10px; right: 10px; animation: vtePopOrb 9s ease-in-out infinite reverse; }
.vfe-popup-orb--3 { width: 80px;  height: 80px;  top: 40%; right: 25%; animation: vtePopOrb 11s ease-in-out infinite 2s; }

.vfe-popup-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    pointer-events: none;
    animation: vtePopRing 3.5s ease-out infinite;
}
.vfe-popup-ring--2 { animation-delay: 1.15s; }
.vfe-popup-ring--3 { animation-delay: 2.3s; }

.vfe-popup-hero {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 22px;
    background: rgba(255, 255, 255, .09);
    font-size: 1.85rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: vtePopFloat 4s ease-in-out infinite;
}

.vfe-popup-badge {
    position: relative;
    z-index: 2;
    padding: 3px 12px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50px;
    background: rgba(255, 255, 255, .09);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

/* ── Body ─────────────────────────────────────────────────────────── */
.vfe-popup-body {
    position: relative;
    padding: 24px 26px 22px;
}

.vfe-popup-title {
    margin: 0 0 .4rem;
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--foreground);
}

.vfe-popup-msg {
    margin: 0 0 1.3rem;
    font-size: .83rem;
    line-height: 1.65;
    color: var(--muted-foreground);
}

.vfe-popup-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.vfe-popup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .82rem 1.5rem;
    border: none;
    border-radius: 14px;
    background: var(--gradient-primary);
    box-shadow: 0 4px 20px rgba(37, 99, 235, .3);
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.vfe-popup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(37, 99, 235, .45), 0 2px 8px rgba(0, 0, 0, .12);
}
.vfe-popup-btn:active { transform: translateY(0); }

.vfe-popup-dismiss {
    display: block;
    width: 100%;
    padding: .25rem;
    border: none;
    background: none;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color .15s;
}
.vfe-popup-dismiss:hover { color: var(--foreground); }

.vfe-popup-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--tp-line);
    border-radius: 50%;
    background: var(--secondary);
    font-size: .75rem;
    line-height: 1;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.vfe-popup-close:hover { background: var(--tp-line); color: var(--foreground); }

@keyframes vtePopFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vtePopUp {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes vtePopOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(12px, -14px) scale(1.12); }
    66%      { transform: translate(-10px, 8px) scale(.9); }
}
@keyframes vtePopRing {
    0%   { transform: translate(-50%, -50%) scale(.85); opacity: .7; }
    100% { transform: translate(-50%, -50%) scale(1.55); opacity: 0; }
}
@keyframes vtePopFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .vfe-popup-orb,
    .vfe-popup-ring,
    .vfe-popup-hero { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROGRESS HUD

   The homepage search's two-column progress modal, rebuilt here: a
   scope on the left, the live checklist and bar on the right, and a
   footer carrying the privacy line and the way out. The stages are
   this tool's own, so the checklist tracks real work rather than a
   platform count.
   ═══════════════════════════════════════════════════════════════════ */
.vfe-prog {
    position: relative;
    width: 100%;
    max-width: 620px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, .25);
    border-radius: 20px;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, .08), 0 32px 80px rgba(0, 0, 0, .75), 0 0 80px rgba(99, 102, 241, .12);
    animation: vteProgUp .35s cubic-bezier(.34, 1.4, .64, 1);
}

/* The indigo bloom the homepage modal carries in its top-left. */
.vfe-prog::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 25%;
    width: 260px;
    height: 180px;
    background: radial-gradient(ellipse, rgba(99, 102, 241, .22), transparent 68%);
    pointer-events: none;
}

.vfe-prog-bar-top {
    height: 3px;
    background: var(--gradient-scanner);
}

@keyframes vteProgUp {
    from { opacity: 0; transform: translateY(22px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.vfe-prog-inner {
    position: relative;
    display: grid;
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 4px;
    padding: 26px 26px 20px;
}

/* ── Left: the scope — see the dedicated block at the end ── */
.vfe-prog-scope-col {
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

/* ── Right: the checklist ─────────────────────────────────────────── */
.vfe-prog-info-col { padding-left: 22px; }

.vfe-prog-badge {
    display: inline-block;
    margin-bottom: 9px;
    padding: 3px 11px;
    border: 1px solid rgba(6, 182, 212, .35);
    border-radius: 50px;
    background: rgba(6, 182, 212, .12);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #67e8f9;
}

.vfe-prog-title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.vfe-prog-title em {
    font-style: normal;
    background: var(--gradient-scanner);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vfe-prog-subtitle {
    margin: 0 0 16px;
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
}

.vfe-prog-steps {
    display: grid;
    gap: 2px;
    margin-bottom: 18px;
}

.vfe-pstep {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 9px;
    border-radius: 9px;
    font-size: .78rem;
    color: rgba(255, 255, 255, .3);
    transition: background .25s ease, color .25s ease;
}

/* The row being worked on is the only bright one. */
.vfe-pstep.is-active {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-weight: 700;
}

.vfe-pstep.is-done { color: rgba(103, 232, 249, .85); }

.vfe-pstep-icon {
    position: relative;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border: 1.5px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
}

/* Active: a spinner. Done: a tick. Pending: an empty circle. */
.vfe-pstep.is-active .vfe-pstep-icon {
    border-color: rgba(6, 182, 212, .35);
    border-top-color: #22d3ee;
    animation: vteProgSpin .8s linear infinite;
}

.vfe-pstep.is-done .vfe-pstep-icon {
    border-color: rgba(6, 182, 212, .5);
    background: rgba(6, 182, 212, .18);
}
.vfe-pstep.is-done .vfe-pstep-icon::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #67e8f9;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
}

.vfe-prog-bar-wrap .tp-track {
    height: 4px;
    margin-bottom: 7px;
    background: rgba(255, 255, 255, .1);
}

.vfe-prog-pct-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vfe-prog-note { font-size: .68rem; color: rgba(255, 255, 255, .3); }
.vfe-prog-pct  { font-size: .78rem; font-weight: 700; color: #22d3ee; font-variant-numeric: tabular-nums; }

/* ── Footer ───────────────────────────────────────────────────────── */
.vfe-prog-footer {
    position: relative;
    padding: 14px 26px 16px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .18);
}

.vfe-prog-gets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 11px;
}

.vfe-prog-gets-label {
    font-size: .68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .35);
    margin-right: 2px;
}

.vfe-prog-chip {
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50px;
    background: rgba(255, 255, 255, .04);
    font-size: .66rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .62);
}

.vfe-prog-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.vfe-prog-privacy {
    margin: 0;
    font-size: .66rem;
    color: rgba(255, 255, 255, .32);
}

.vfe-prog-cancel {
    flex-shrink: 0;
    padding: 7px 15px;
    border: 1px solid rgba(248, 113, 113, .35);
    border-radius: 10px;
    background: rgba(248, 113, 113, .1);
    font-size: .74rem;
    font-weight: 700;
    color: #fca5a5;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.vfe-prog-cancel:hover { background: rgba(248, 113, 113, .2); color: #fff; }

@media (max-width: 620px) {
    .vfe-prog-inner {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px 18px 16px;
    }
    .vfe-prog-scope-col { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 18px; }
    .vfe-prog-scope { width: 130px; height: 130px; }
    .vfe-prog-info-col { padding-left: 0; }
    .vfe-prog-footer { padding: 12px 18px 14px; }
    .vfe-prog-foot-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .vfe-prog-cancel { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .vfe-prog-sweep,
    .vfe-prog-wave i,
    .vfe-pstep.is-active .vfe-pstep-icon { animation: none; }
}

/* ── The scope ────────────────────────────────────────────────────────
   Same instrument the homepage search runs: a radar base with a conic
   sweep, four range rings, pulses leaving the core, signal blips that
   light as the sweep passes over them, HUD brackets, and the site mark
   on a glass mount at the centre. */
.vfe-prog-scope {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 174px;
    height: 174px;
    flex-shrink: 0;
}

.vfe-prog-radar {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: 50%;
    border: 1.5px solid rgba(6, 182, 212, .22);
    background:
        radial-gradient(circle at 50% 50%,
            rgba(6, 182, 212, .07) 0%,
            rgba(37, 99, 235, .05) 32%,
            rgba(8, 12, 36, .93) 70%,
            rgba(3, 5, 18, .97) 100%);
    box-shadow:
        inset 0 0 55px rgba(6, 182, 212, .05),
        0 0 0 1px rgba(37, 99, 235, .1),
        0 0 45px rgba(37, 99, 235, .1);
}

/* The sweep itself — a cone that fades out behind the leading edge. */
.vfe-prog-radar::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(6, 182, 212, .04) 0deg,
        transparent 2deg,
        transparent 50deg,
        rgba(6, 182, 212, .02) 52deg,
        rgba(6, 182, 212, .10) 90deg,
        rgba(6, 182, 212, .28) 135deg,
        rgba(6, 182, 212, .48) 162deg,
        rgba(6, 182, 212, .62) 178deg,
        rgba(6, 182, 212, .04) 181deg);
    animation: vteRadarSpin 3s linear infinite;
}

@keyframes vteRadarSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.vfe-prog-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.vfe-prog-ring--1 { width: 21%; height: 21%; border: 1px solid rgba(6, 182, 212, .32); box-shadow: inset 0 0 12px rgba(6, 182, 212, .08); }
.vfe-prog-ring--2 { width: 42%; height: 42%; border: 1px solid rgba(6, 182, 212, .18); }
.vfe-prog-ring--3 { width: 64%; height: 64%; border: 1px dashed rgba(37, 99, 235, .15); }
.vfe-prog-ring--4 { width: 87%; height: 87%; border: 1px solid rgba(37, 99, 235, .08); }

/* Pulses leaving the core, one behind the other. */
.vfe-prog-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    pointer-events: none;
}
.vfe-prog-pulse--1 { border: 1.5px solid rgba(6, 182, 212, .72);  animation: vtePulseOut 2.4s cubic-bezier(.2,0,.8,1) infinite; }
.vfe-prog-pulse--2 { border: 1.5px solid rgba(37, 99, 235, .60);  animation: vtePulseOut 2.4s cubic-bezier(.2,0,.8,1) infinite .8s; }
.vfe-prog-pulse--3 { border: 1.5px solid rgba(139, 92, 246, .50); animation: vtePulseOut 2.4s cubic-bezier(.2,0,.8,1) infinite 1.6s; }

@keyframes vtePulseOut {
    0%   { transform: translate(-50%, -50%) scale(.28); opacity: .92; }
    100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}

/* Signals: each one appears, rings out, and fades — staggered so the
   dial always has something arriving on it. */
.vfe-prog-blip {
    position: absolute;
    z-index: 6;
    border-radius: 50%;
    animation: vteBlipFade 3s ease-out infinite;
}
.vfe-prog-blip::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: .5;
    animation: vteBlipRing 3s ease-out infinite;
}
.vfe-prog-blip--1 { width: 7px; height: 7px; top: 22%; left: 63%; background: #06b6d4; color: #06b6d4; box-shadow: 0 0 10px #06b6d4; animation-delay: 0s; }
.vfe-prog-blip--2 { width: 5px; height: 5px; top: 58%; left: 79%; background: #8b5cf6; color: #8b5cf6; box-shadow: 0 0 8px #8b5cf6;  animation-delay: .72s; }
.vfe-prog-blip--3 { width: 6px; height: 6px; top: 75%; left: 35%; background: #3b82f6; color: #3b82f6; box-shadow: 0 0 9px #3b82f6;  animation-delay: 1.44s; }
.vfe-prog-blip--4 { width: 5px; height: 5px; top: 19%; left: 36%; background: #06b6d4; color: #06b6d4; box-shadow: 0 0 8px #06b6d4;  animation-delay: 2.16s; }
.vfe-prog-blip--5 { width: 4px; height: 4px; top: 67%; left: 67%; background: #f59e0b; color: #f59e0b; box-shadow: 0 0 6px #f59e0b;  animation-delay: 2.64s; }
.vfe-prog-blip--6 { width: 5px; height: 5px; top: 40%; left: 16%; background: #8b5cf6; color: #8b5cf6; box-shadow: 0 0 8px #8b5cf6;  animation-delay: 2s; }

@keyframes vteBlipFade {
    0%, 8%   { opacity: 0; transform: scale(0); }
    18%, 72% { opacity: 1; transform: scale(1); }
    100%     { opacity: 0; transform: scale(.8); }
}
@keyframes vteBlipRing {
    0%, 8% { opacity: 0;  transform: scale(0); }
    22%    { opacity: .6; transform: scale(1); }
    100%   { opacity: 0;  transform: scale(2.8); }
}

.vfe-prog-bracket {
    position: absolute;
    z-index: 7;
    width: 13px;
    height: 13px;
    pointer-events: none;
    animation: vteCornerGlow 2.2s ease-in-out infinite;
}
.vfe-prog-bracket::before,
.vfe-prog-bracket::after {
    content: '';
    position: absolute;
    background: rgba(6, 182, 212, .85);
    box-shadow: 0 0 5px rgba(6, 182, 212, .55);
    border-radius: 1px;
}
.vfe-prog-bracket::before { width: 100%; height: 2px; }
.vfe-prog-bracket::after  { width: 2px;  height: 100%; }
.vfe-prog-bracket--tl { top: 4%; left: 4%; }
.vfe-prog-bracket--tl::before, .vfe-prog-bracket--tl::after { top: 0; left: 0; }
.vfe-prog-bracket--tr { top: 4%; right: 4%; }
.vfe-prog-bracket--tr::before, .vfe-prog-bracket--tr::after { top: 0; right: 0; }
.vfe-prog-bracket--bl { bottom: 4%; left: 4%; }
.vfe-prog-bracket--bl::before, .vfe-prog-bracket--bl::after { bottom: 0; left: 0; }
.vfe-prog-bracket--br { bottom: 4%; right: 4%; }
.vfe-prog-bracket--br::before, .vfe-prog-bracket--br::after { bottom: 0; right: 0; }

@keyframes vteCornerGlow {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* The core — a white glass mount so the mark reads in BOTH themes. */
.vfe-prog-core {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    border: 1.5px solid rgba(255, 255, 255, .45);
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, .4),
        0 0 0 3px rgba(6, 182, 212, .22),
        0 0 14px 5px rgba(37, 99, 235, .3),
        0 0 28px 10px rgba(6, 182, 212, .18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: vteCoreFloat 2.8s ease-in-out infinite;
}

.vfe-prog-core img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

@keyframes vteCoreFloat {
    0%, 100% { transform: translateY(-4px); }
    50%      { transform: translateY(4px); }
}

/* ── Light theme ──────────────────────────────────────────────────────
   The homepage modal turns light with the site; this one has to as
   well, or it looks like a different product. */
html:not([data-theme="dark"]) .vfe-prog {
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .07), 0 32px 80px rgba(0, 0, 0, .14);
}
html:not([data-theme="dark"]) .vfe-prog::before {
    background: radial-gradient(ellipse, rgba(37, 99, 235, .14), transparent 68%);
}
html:not([data-theme="dark"]) .vfe-prog-scope-col {
    background: rgba(37, 99, 235, .04);
    border-right: 1px solid var(--border);
}
html:not([data-theme="dark"]) .vfe-prog-radar {
    border-color: rgba(37, 99, 235, .2);
    background:
        radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, .9) 0%,
            rgba(219, 234, 254, .75) 45%,
            rgba(191, 219, 254, .55) 100%);
    box-shadow: inset 0 0 40px rgba(37, 99, 235, .06), 0 0 24px rgba(37, 99, 235, .1);
}
html:not([data-theme="dark"]) .vfe-prog-radar::after {
    background: conic-gradient(from 0deg,
        rgba(37, 99, 235, .03) 0deg,
        transparent 2deg,
        transparent 50deg,
        rgba(37, 99, 235, .04) 52deg,
        rgba(37, 99, 235, .10) 90deg,
        rgba(6, 182, 212, .22) 135deg,
        rgba(6, 182, 212, .34) 162deg,
        rgba(6, 182, 212, .44) 178deg,
        rgba(37, 99, 235, .04) 181deg);
}
html:not([data-theme="dark"]) .vfe-prog-core {
    background: rgba(255, 255, 255, .55);
    border-color: rgba(37, 99, 235, .35);
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, .8),
        0 0 0 3px rgba(37, 99, 235, .15),
        0 0 14px 5px rgba(37, 99, 235, .22),
        0 0 28px 10px rgba(6, 182, 212, .14);
}
html:not([data-theme="dark"]) .vfe-prog-title  { color: var(--foreground); }
html:not([data-theme="dark"]) .vfe-prog-subtitle { color: var(--primary); }
html:not([data-theme="dark"]) .vfe-prog-badge {
    background: rgba(37, 99, 235, .1);
    border-color: rgba(37, 99, 235, .25);
    color: var(--primary);
}
html:not([data-theme="dark"]) .vfe-pstep { color: var(--muted-foreground); }
html:not([data-theme="dark"]) .vfe-pstep.is-active {
    background: rgba(37, 99, 235, .07);
    box-shadow: inset 2px 0 0 var(--primary);
    color: var(--foreground);
}
html:not([data-theme="dark"]) .vfe-pstep.is-done { color: var(--muted-foreground); }
html:not([data-theme="dark"]) .vfe-pstep-icon { border-color: var(--border); }
html:not([data-theme="dark"]) .vfe-pstep.is-active .vfe-pstep-icon {
    border-color: rgba(37, 99, 235, .28);
    border-top-color: var(--primary);
}
html:not([data-theme="dark"]) .vfe-pstep.is-done .vfe-pstep-icon {
    background: var(--gradient-scanner);
    border-color: transparent;
}
html:not([data-theme="dark"]) .vfe-pstep.is-done .vfe-pstep-icon::after { border-color: #fff; }
html:not([data-theme="dark"]) .vfe-prog-bar-wrap .tp-track { background: var(--border); }
html:not([data-theme="dark"]) .vfe-prog-note { color: var(--muted-foreground); }
html:not([data-theme="dark"]) .vfe-prog-pct  { color: var(--primary); }
html:not([data-theme="dark"]) .vfe-prog-footer {
    background: var(--secondary);
    border-top: 1px solid var(--border);
}
html:not([data-theme="dark"]) .vfe-prog-gets-label,
html:not([data-theme="dark"]) .vfe-prog-privacy { color: var(--muted-foreground); }
html:not([data-theme="dark"]) .vfe-prog-chip {
    background: var(--card);
    border-color: var(--border);
    color: var(--muted-foreground);
}
html:not([data-theme="dark"]) .vfe-prog-cancel {
    background: rgba(220, 38, 38, .07);
    border-color: rgba(220, 38, 38, .25);
    color: #dc2626;
}
html:not([data-theme="dark"]) .vfe-prog-cancel:hover { background: rgba(220, 38, 38, .14); color: #991b1b; }

@media (prefers-reduced-motion: reduce) {
    .vfe-prog-radar::after,
    .vfe-prog-pulse,
    .vfe-prog-blip,
    .vfe-prog-blip::after,
    .vfe-prog-bracket,
    .vfe-prog-core { animation: none; }
}