/* ═══════════════════════════════════════════════════════════════════
   VIDEO TRANSCRIPT EXTRACTOR — only what is specific to this tool.
   Hero, panels, inputs, switch, buttons, loader, steps, FAQ and CTA all
   come from tool-page.css; anything below is the transcript itself.
   ═══════════════════════════════════════════════════════════════════ */

.vte-options {
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--tp-line);
}

/* ── Export / copy row ────────────────────────────────────────────── */
.vte-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--tp-line);
  background: var(--tp-panel-inset);
}

/* ── The transcript ───────────────────────────────────────────────── */
.vte-transcript {
  max-height: 520px;
  overflow-y: auto;
  padding: 20px;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--foreground);
  white-space: pre-wrap;
  word-break: break-word;
  scroll-behavior: smooth;
}

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

/* Scrollbar, so a long transcript doesn't drop a chrome-grey bar into
   an otherwise dark panel. */
.vte-transcript::-webkit-scrollbar { width: 10px; }
.vte-transcript::-webkit-scrollbar-track { background: transparent; }
.vte-transcript::-webkit-scrollbar-thumb {
  background: var(--tp-line);
  border: 3px solid var(--tp-panel);
  border-radius: 50px;
}
.vte-transcript::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }

/* Timestamped mode: each cue is its own row with a monospaced time so
   the times form a clean left column instead of ragging. */
.vte-cue {
  display: flex;
  gap: 14px;
  padding: 3px 0;
  border-radius: 8px;
  transition: background .12s;
}

.vte-cue:hover { background: var(--primary-soft); }

.vte-time {
  flex-shrink: 0;
  align-self: flex-start;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.9;
  color: var(--primary);
  min-width: 52px;
  text-align: right;
}

.vte-cue-text { flex: 1; min-width: 0; }

@media (max-width: 480px) {
  .vte-transcript { padding: 16px; max-height: 400px; font-size: .86rem; }
  .vte-actions { padding: 12px 16px; }
  .vte-time { min-width: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESULTS SECTION — a transcript is long-form reading, so it gets its
   own full-width section under the hero rather than a column beside
   the controls.
   ═══════════════════════════════════════════════════════════════════ */
/* ── Reading toolbar ──────────────────────────────────────────────── */
/* A grid, not a wrapping flex row: the search field takes the top line and
   the four controls sit on ONE line beneath it — the view switch on the
   left, the two actions on the right — instead of re-flowing at every
   width. */
.vte-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--tp-line);
  background: var(--tp-panel-inset);
}

.vte-find   { grid-column: 1 / -1; }
.vte-views  { grid-column: 1; justify-self: start; }
.vte-export { grid-column: 2; justify-self: end; }

/* ── Find in transcript ───────────────────────────────────────────── */
.vte-find {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
  padding: 7px 11px;
  border: 1px solid var(--tp-line);
  border-radius: 10px;
  background: var(--card);
}

.vte-find:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.vte-find svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted-foreground); }

.vte-find input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: .84rem;
  color: var(--foreground);
}
.vte-find input::-webkit-search-cancel-button { cursor: pointer; }

.vte-find-count {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.vte-find-count.is-empty { color: var(--tp-err); }

.vte-find-nav {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--tp-line);
  background: var(--tp-panel-inset);
  color: var(--muted-foreground);
  font-size: .7rem;
  line-height: 1;
  cursor: pointer;
}
.vte-find-nav:hover { color: var(--primary); border-color: var(--primary); }

/* ── View switch ──────────────────────────────────────────────────── */
.vte-views {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: var(--secondary);
  gap: 2px;
}

.vte-view {
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.vte-view.is-active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }

/* ── Export menu ──────────────────────────────────────────────────── */
.vte-export { display: flex; align-items: center; gap: 8px; }
.vte-menu { position: relative; }

.vte-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--tp-line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.vte-menu-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: .82rem;
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
}
.vte-menu-list button:hover { background: var(--secondary); }
.vte-menu-list button span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  color: var(--muted-foreground);
}

/* ── Insights ─────────────────────────────────────────────────────── */
.vte-insight-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 260px));
  justify-content: start;
  gap: 12px;
}

@media (max-width: 620px) {
  .vte-insight-row { grid-template-columns: 1fr; }
}

.vte-insight-label {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.vte-insight-value { font-family: var(--font-display); font-size: 1rem; color: var(--foreground); }
.vte-insight-note { font-size: .72rem; color: var(--muted-foreground); }

.vte-keywords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.vte-keywords-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted-foreground);
  margin-right: 2px;
}

.vte-keyword {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--tp-line);
  border-radius: 50px;
  background: var(--card);
  font-size: .74rem;
  color: var(--foreground);
  cursor: pointer;
}
.vte-keyword:hover { border-color: var(--primary); color: var(--primary); }
.vte-keyword span {
  font-size: .66rem;
  font-weight: 800;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* ── Transcript body additions ────────────────────────────────────── */
.vte-plain { white-space: pre-wrap; }

.vte-cue { position: relative; padding-right: 30px; }

/* A timestamp that opens the video at that moment. Underlined on hover
   only — 300 permanently underlined times would be unreadable. */
.vte-time--link { text-decoration: none; }
.vte-time--link:hover { text-decoration: underline; text-underline-offset: 3px; }

.vte-quote {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s, background .15s;
}
.vte-cue:hover .vte-quote,
.vte-quote:focus-visible { opacity: 1; }
.vte-quote:hover { color: var(--primary); background: var(--primary-soft); }
.vte-quote.is-done { opacity: 1; color: var(--tp-ok); background: var(--tp-ok-bg); }

.vte-hit {
  background: var(--tp-mark);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.vte-hit.is-current { background: var(--tp-mark-current); box-shadow: 0 0 0 2px var(--tp-mark-current); }

@media (max-width: 640px) {
  .vte-toolbar { padding: 12px 16px; }
  .vte-export { margin-left: 0; width: 100%; }
  .vte-insights { padding: 14px 16px; }
  .vte-quote { opacity: 1; }   /* no hover on touch */
}

/* ═══════════════════════════════════════════════════════════════════
   RESULTS — its own place on the page

   The transcript is the payoff, so it gets a section that is clearly
   separated from the hero above it and a panel that looks like a
   finished document rather than a debug dump.
   ═══════════════════════════════════════════════════════════════════ */
.vte-results-section {
  position: relative;
  padding: 72px 0 88px;
  scroll-margin-top: 84px;      /* the sticky header must not cover the head */
  background: var(--vte-res-bg);
  border-top: 1px solid var(--tp-line);
}

/* A soft glow behind the panel so it lifts off the section instead of
   sitting flat on it. */
.vte-results-section::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 92%);
  height: 240px;
  pointer-events: none;
  background: var(--vte-res-glow);
  filter: blur(40px);
  opacity: .9;
}

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

.vte-results-section .container { position: relative; }

.vte-results-section .tp-panel {
  max-width: 1060px;
  margin: 0 auto;
  border-radius: 24px;
  box-shadow: var(--vte-res-shadow);
}

/* The scanner hairline marks this as the panel that carries the answer. */
.vte-results-section .tp-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-scanner);
  z-index: 3;
}

/* ── Head ─────────────────────────────────────────────────────────── */
.vte-results-section .tp-result-head {
  padding: 22px 26px;
  background: var(--vte-head-bg);
}

.vte-results-section .tp-result-title {
  font-size: 1.15rem;
  letter-spacing: -.02em;
}

/* A badge in front of the title, so the head reads as a document header. */
.vte-results-section .tp-result-head > div:first-child {
  display: flex;
  align-items: center;
  gap: 13px;
}

.vte-results-section .tp-result-head > div:first-child::before {
  content: '';
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  box-shadow: 0 6px 18px -6px var(--tp-badge-glow);
  background: var(--vte-head-glyph) center / 20px 20px no-repeat, var(--gradient-scanner);
}

/* ── Stats ────────────────────────────────────────────────────────── */
.vte-results-section .tp-stats { background: transparent; }

.vte-results-section .tp-stat {
  padding: 15px 20px;
  transition: background .18s ease;
}

.vte-results-section .tp-stat:hover { background: var(--tp-panel-inset); }

.vte-results-section .tp-stat-value {
  font-size: 1rem;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* ── Toolbar ──────────────────────────────────────────────────────── */
.vte-toolbar {
  padding: 16px 26px;
  background: var(--tp-panel-inset);
}

.vte-find { padding: 9px 13px; border-radius: 11px; }

/* ── Insights ─────────────────────────────────────────────────────── */
.vte-insights { padding: 20px 26px; }

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

.vte-insight::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gradient-scanner);
  opacity: .8;
}

.vte-insight:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--primary);
}

.vte-insight-value { font-size: 1.12rem; letter-spacing: -.02em; }

/* ── The transcript itself ────────────────────────────────────────── */
.vte-transcript {
  padding: 8px 26px 26px;
  max-height: 560px;
}

/* Each line is a row that lights up under the cursor, so a long transcript
   stays readable and the line you are on is obvious. */
.vte-cue {
  align-items: baseline;
  gap: 16px;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: 10px;
}

.vte-cue:hover { background: var(--tp-panel-inset); }

/* The time is a chip, not loose text — it gives the left column a spine. */
.vte-time {
  min-width: 58px;
  padding: 2px 8px;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .7rem;
  line-height: 1.6;
  text-align: center;
  transition: background .15s ease, color .15s ease;
}

.vte-time--link:hover {
  background: var(--gradient-primary);
  color: #fff;
  text-decoration: none;
}

.vte-cue-text { line-height: 1.7; }

/* Paragraph view reads as prose, so it gets prose spacing. */
.vte-transcript .vte-cue + .vte-cue { margin-top: 1px; }

.vte-plain { padding-top: 10px; line-height: 1.9; }

/* ── Foot ─────────────────────────────────────────────────────────── */
.vte-foot {
  padding: 14px 26px 20px;
  border-top: 1px solid var(--tp-line);
  background: var(--tp-panel-inset);
}

@media (max-width: 640px) {
  .vte-results-section .tp-result-head,
  .vte-toolbar,
  .vte-insights { padding-left: 18px; padding-right: 18px; }
  .vte-transcript { padding: 8px 18px 18px; }
  .vte-foot { padding: 12px 18px 16px; }
  .vte-results-section .tp-result-head > div:first-child::before { display: none; }
}

/* ── Toolbar buttons ──────────────────────────────────────────────────
   These are the controls that make a long transcript usable, so they
   read as real buttons rather than grey text: a solid segmented switch
   for the view, a bordered button for Copy, and the gradient for Export
   because it is what most people come here to do. */
.vte-views {
  padding: 4px;
  border: 1px solid var(--tp-line);
  border-radius: 12px;
  background: var(--card);
}

.vte-view {
  padding: 8px 16px;
  border-radius: 9px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted-foreground);
}

.vte-view:hover { color: var(--foreground); }

.vte-view.is-active {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(37, 99, 235, .55);
}

.vte-export .tp-btn,
.vte-export .vte-menu > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: .82rem;
  font-weight: 700;
}

/* Copy — quiet but unmistakably a button. */
#vteCopyBtn {
  border: 1px solid var(--tp-line);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
#vteCopyBtn:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}
#vteCopyBtn.is-done {
  border-color: var(--tp-ok);
  color: var(--tp-ok);
  background: var(--tp-ok-bg);
}

/* Export — the primary action of the results panel. */
#vteExportBtn {
  border: none;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 4px 16px -4px rgba(37, 99, 235, .6);
  transition: transform .18s ease, box-shadow .18s ease;
}
#vteExportBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(37, 99, 235, .7);
}
#vteExportBtn[aria-expanded="true"] { transform: translateY(-1px); }

.vte-menu-list {
  min-width: 232px;
  padding: 7px;
  border-radius: 14px;
}

.vte-menu-list button {
  padding: 9px 11px;
  border-radius: 10px;
  font-weight: 600;
}

.vte-menu-list button:hover { background: var(--primary-soft); color: var(--primary); }
.vte-menu-list button:hover span { color: var(--primary); }

/* Narrow: the pairs stack, each pair splitting its own row in half, so the
   four controls stay reachable without shrinking to unreadable slivers. */
@media (max-width: 620px) {
  .vte-toolbar { grid-template-columns: 1fr; }
  .vte-views,
  .vte-export {
    grid-column: 1;
    justify-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .vte-export .vte-menu { display: block; }
  #vteExportBtn,
  #vteCopyBtn { width: 100%; justify-content: center; }
  .vte-view { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════ */
.vte-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);
}

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

.vte-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 ───────────────────────────────────────────────────────── */
.vte-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. */
.vte-popup-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}
.vte-popup-orb--1 { width: 130px; height: 130px; top: -20px; left: -20px; animation: vtePopOrb 7s ease-in-out infinite; }
.vte-popup-orb--2 { width: 100px; height: 100px; bottom: -10px; right: 10px; animation: vtePopOrb 9s ease-in-out infinite reverse; }
.vte-popup-orb--3 { width: 80px;  height: 80px;  top: 40%; right: 25%; animation: vtePopOrb 11s ease-in-out infinite 2s; }

.vte-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;
}
.vte-popup-ring--2 { animation-delay: 1.15s; }
.vte-popup-ring--3 { animation-delay: 2.3s; }

.vte-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;
}

.vte-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 ─────────────────────────────────────────────────────────── */
.vte-popup-body {
    position: relative;
    padding: 24px 26px 22px;
}

.vte-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);
}

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

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

.vte-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;
}

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

.vte-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;
}
.vte-popup-dismiss:hover { color: var(--foreground); }

.vte-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;
}
.vte-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) {
    .vte-popup-orb,
    .vte-popup-ring,
    .vte-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.
   ═══════════════════════════════════════════════════════════════════ */
.vte-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. */
.vte-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;
}

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

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

.vte-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 ── */
.vte-prog-scope-col {
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

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

.vte-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;
}

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

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

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

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

.vte-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. */
.vte-pstep.is-active {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-weight: 700;
}

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

.vte-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. */
.vte-pstep.is-active .vte-pstep-icon {
    border-color: rgba(6, 182, 212, .35);
    border-top-color: #22d3ee;
    animation: vteProgSpin .8s linear infinite;
}

.vte-pstep.is-done .vte-pstep-icon {
    border-color: rgba(6, 182, 212, .5);
    background: rgba(6, 182, 212, .18);
}
.vte-pstep.is-done .vte-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);
}

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

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

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

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

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

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

.vte-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);
}

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

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

.vte-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;
}
.vte-prog-cancel:hover { background: rgba(248, 113, 113, .2); color: #fff; }

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

@media (prefers-reduced-motion: reduce) {
    .vte-prog-sweep,
    .vte-prog-wave i,
    .vte-pstep.is-active .vte-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. */
.vte-prog-scope {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 174px;
    height: 174px;
    flex-shrink: 0;
}

.vte-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. */
.vte-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); } }

.vte-prog-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.vte-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); }
.vte-prog-ring--2 { width: 42%; height: 42%; border: 1px solid rgba(6, 182, 212, .18); }
.vte-prog-ring--3 { width: 64%; height: 64%; border: 1px dashed rgba(37, 99, 235, .15); }
.vte-prog-ring--4 { width: 87%; height: 87%; border: 1px solid rgba(37, 99, 235, .08); }

/* Pulses leaving the core, one behind the other. */
.vte-prog-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    pointer-events: none;
}
.vte-prog-pulse--1 { border: 1.5px solid rgba(6, 182, 212, .72);  animation: vtePulseOut 2.4s cubic-bezier(.2,0,.8,1) infinite; }
.vte-prog-pulse--2 { border: 1.5px solid rgba(37, 99, 235, .60);  animation: vtePulseOut 2.4s cubic-bezier(.2,0,.8,1) infinite .8s; }
.vte-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. */
.vte-prog-blip {
    position: absolute;
    z-index: 6;
    border-radius: 50%;
    animation: vteBlipFade 3s ease-out infinite;
}
.vte-prog-blip::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: .5;
    animation: vteBlipRing 3s ease-out infinite;
}
.vte-prog-blip--1 { width: 7px; height: 7px; top: 22%; left: 63%; background: #06b6d4; color: #06b6d4; box-shadow: 0 0 10px #06b6d4; animation-delay: 0s; }
.vte-prog-blip--2 { width: 5px; height: 5px; top: 58%; left: 79%; background: #8b5cf6; color: #8b5cf6; box-shadow: 0 0 8px #8b5cf6;  animation-delay: .72s; }
.vte-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; }
.vte-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; }
.vte-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; }
.vte-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); }
}

.vte-prog-bracket {
    position: absolute;
    z-index: 7;
    width: 13px;
    height: 13px;
    pointer-events: none;
    animation: vteCornerGlow 2.2s ease-in-out infinite;
}
.vte-prog-bracket::before,
.vte-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;
}
.vte-prog-bracket::before { width: 100%; height: 2px; }
.vte-prog-bracket::after  { width: 2px;  height: 100%; }
.vte-prog-bracket--tl { top: 4%; left: 4%; }
.vte-prog-bracket--tl::before, .vte-prog-bracket--tl::after { top: 0; left: 0; }
.vte-prog-bracket--tr { top: 4%; right: 4%; }
.vte-prog-bracket--tr::before, .vte-prog-bracket--tr::after { top: 0; right: 0; }
.vte-prog-bracket--bl { bottom: 4%; left: 4%; }
.vte-prog-bracket--bl::before, .vte-prog-bracket--bl::after { bottom: 0; left: 0; }
.vte-prog-bracket--br { bottom: 4%; right: 4%; }
.vte-prog-bracket--br::before, .vte-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. */
.vte-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;
}

.vte-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"]) .vte-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"]) .vte-prog::before {
    background: radial-gradient(ellipse, rgba(37, 99, 235, .14), transparent 68%);
}
html:not([data-theme="dark"]) .vte-prog-scope-col {
    background: rgba(37, 99, 235, .04);
    border-right: 1px solid var(--border);
}
html:not([data-theme="dark"]) .vte-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"]) .vte-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"]) .vte-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"]) .vte-prog-title  { color: var(--foreground); }
html:not([data-theme="dark"]) .vte-prog-subtitle { color: var(--primary); }
html:not([data-theme="dark"]) .vte-prog-badge {
    background: rgba(37, 99, 235, .1);
    border-color: rgba(37, 99, 235, .25);
    color: var(--primary);
}
html:not([data-theme="dark"]) .vte-pstep { color: var(--muted-foreground); }
html:not([data-theme="dark"]) .vte-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"]) .vte-pstep.is-done { color: var(--muted-foreground); }
html:not([data-theme="dark"]) .vte-pstep-icon { border-color: var(--border); }
html:not([data-theme="dark"]) .vte-pstep.is-active .vte-pstep-icon {
    border-color: rgba(37, 99, 235, .28);
    border-top-color: var(--primary);
}
html:not([data-theme="dark"]) .vte-pstep.is-done .vte-pstep-icon {
    background: var(--gradient-scanner);
    border-color: transparent;
}
html:not([data-theme="dark"]) .vte-pstep.is-done .vte-pstep-icon::after { border-color: #fff; }
html:not([data-theme="dark"]) .vte-prog-bar-wrap .tp-track { background: var(--border); }
html:not([data-theme="dark"]) .vte-prog-note { color: var(--muted-foreground); }
html:not([data-theme="dark"]) .vte-prog-pct  { color: var(--primary); }
html:not([data-theme="dark"]) .vte-prog-footer {
    background: var(--secondary);
    border-top: 1px solid var(--border);
}
html:not([data-theme="dark"]) .vte-prog-gets-label,
html:not([data-theme="dark"]) .vte-prog-privacy { color: var(--muted-foreground); }
html:not([data-theme="dark"]) .vte-prog-chip {
    background: var(--card);
    border-color: var(--border);
    color: var(--muted-foreground);
}
html:not([data-theme="dark"]) .vte-prog-cancel {
    background: rgba(220, 38, 38, .07);
    border-color: rgba(220, 38, 38, .25);
    color: #dc2626;
}
html:not([data-theme="dark"]) .vte-prog-cancel:hover { background: rgba(220, 38, 38, .14); color: #991b1b; }

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