/* ═══════════════════════════════════════════════════════════════════
   VIDEO METADATA VIEWER

   Tool-specific styles only. The shared system (hero canvas, panel,
   inputs, drop zone, switch, buttons, stats, empty state, captcha)
   lives in assets/css/tool-page.css under the tp- prefix; the control
   panel's shell comes from styles.css, because the same user asked for
   the tool box to look exactly like the homepage's.

   Every tint used here is declared as a token for BOTH themes at the
   top. There is no bare hex below that only works in light mode — a
   rule this project learned the hard way, and one worth keeping.

   Layout note: none of the grids below use the "1px gap over a tinted
   background" trick for their rules. It paints the leftover cell of a
   partial last row as a solid block, and merges rows when the grid
   wraps on mobile. Each cell draws its own borders instead.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --vmv-res-bg:      linear-gradient(180deg, #F5F8FF 0%, #FFFFFF 55%);
    --vmv-res-glow:    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(37, 99, 235, .16), transparent 70%);
    --vmv-res-shadow:  0 28px 64px -34px rgba(37, 99, 235, .45), 0 4px 16px rgba(15, 23, 42, .06);

    --vmv-inset:       #F8FAFC;
    --vmv-inset-line:  rgba(15, 23, 42, .07);
    --vmv-code-bg:     rgba(15, 23, 42, .05);
    --vmv-code-fg:     #334155;

    /* Signal levels. Deliberately distinct hues rather than a single
       accent at three opacities — a warning has to be legible as a
       warning at a glance, not as "a slightly stronger notice". */
    --vmv-info:        #0891B2;
    --vmv-info-bg:     rgba(8, 145, 178, .08);
    --vmv-notice:      #B45309;
    --vmv-notice-bg:   rgba(245, 158, 11, .09);
    --vmv-warn:        #DC2626;
    --vmv-warn-bg:     rgba(220, 38, 38, .08);

    /* Pass / warn / fail for the platform matrix. Green is honest here:
       it is a real binary about whether an upload survives, not a
       similarity score dressed up as safety. */
    --vmv-pass:        #059669;
    --vmv-pass-bg:     rgba(5, 150, 105, .09);
    --vmv-fail:        #DC2626;
    --vmv-fail-bg:     rgba(220, 38, 38, .08);

    --vmv-high:        #DC2626;
    --vmv-medium:      #B45309;
    --vmv-low:         #0891B2;

    --vmv-bar:         linear-gradient(180deg, #60A5FA, #2563EB);
    --vmv-key:         #06B6D4;
    --vmv-chart-bg:    rgba(15, 23, 42, .03);
}

[data-theme="dark"] {
    --vmv-res-bg:      linear-gradient(180deg, #0B1220 0%, #0F172A 55%);
    --vmv-res-glow:    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(59, 130, 246, .20), transparent 70%);
    --vmv-res-shadow:  0 28px 64px -34px rgba(0, 0, 0, .7), 0 4px 16px rgba(0, 0, 0, .35);

    --vmv-inset:       #0B1220;
    --vmv-inset-line:  rgba(148, 163, 184, .14);
    --vmv-code-bg:     rgba(148, 163, 184, .12);
    --vmv-code-fg:     #CBD5E1;

    --vmv-info:        #22D3EE;
    --vmv-info-bg:     rgba(34, 211, 238, .10);
    --vmv-notice:      #FBBF24;
    --vmv-notice-bg:   rgba(251, 191, 36, .11);
    --vmv-warn:        #F87171;
    --vmv-warn-bg:     rgba(248, 113, 113, .11);

    --vmv-pass:        #34D399;
    --vmv-pass-bg:     rgba(52, 211, 153, .11);
    --vmv-fail:        #F87171;
    --vmv-fail-bg:     rgba(248, 113, 113, .11);

    --vmv-high:        #F87171;
    --vmv-medium:      #FBBF24;
    --vmv-low:         #22D3EE;

    --vmv-bar:         linear-gradient(180deg, #93C5FD, #3B82F6);
    --vmv-key:         #22D3EE;
    --vmv-chart-bg:    rgba(148, 163, 184, .07);
}

/* ═══════════════════════════════════════════════════════════════════
   CONTROL PANEL EXTRAS
   ═══════════════════════════════════════════════════════════════════ */

/* The one option on the panel. Sits between the mode stage and the
   button, so it must not change height when the mode switches. */
.vmv-timeline-opt {
    margin-top: 14px;
}

/* ── Letting the tool box shrink below its content ────────────────────
   A grid or flex item defaults to `min-width: auto`, meaning it refuses
   to shrink below its own min-content width. Both input modes share one
   grid cell (`.tp-mode-stage`), so the track was sized by the WIDER of
   the two — the drop zone — and at 320px that pushed the whole panel
   340px wide and 39px to the right, carrying the Paste button clean off
   the screen where it could not be tapped.

   `min-width: 0` lets the track shrink to the space actually available.
   Scoped to this page's workspace on purpose: the same latent bug exists
   on the sibling tool pages, but widening the fix to shared classes
   would change three already-live pages. */
#vmvWorkspace .tp-mode-stage,
#vmvWorkspace .search-panel,
#vmvWorkspace .search-panels,
#vmvWorkspace .search-input-field,
#vmvWorkspace .drop-zone,
#vmvWorkspace .search-box {
    min-width: 0;
}

/* The URL row is a flex row; its text input must be the part that gives,
   not the Paste button next to it. */
#vmvWorkspace .search-input-field input {
    min-width: 0;
    flex: 1 1 auto;
}

#vmvWorkspace .tp-inline-btn { flex: 0 0 auto; }

/* The drop zone lays out icon + text in a row; below this the text needs
   to be allowed to wrap under the icon rather than force the row wide. */
@media (max-width: 400px) {
    #vmvWorkspace .drop-zone {
        flex-wrap: wrap;
        row-gap: 6px;
        padding: 14px 14px;
    }

    #vmvWorkspace .drop-zone > span { min-width: 0; }
}

/* The chosen file, drawn INSIDE the drop zone rather than as a strip
   below it — the homepage widget's behaviour. Keeping the dashed box
   where it is means the panel height never moves. */
.vmv-chosen {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.vmv-chosen-name {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    color: var(--foreground);
    /* Clamped to one line: a wrapped filename would reintroduce exactly
       the height change this layout exists to prevent. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 34ch;
}

.vmv-chosen-size {
    font-size: .78rem;
    color: var(--muted-foreground);
}

.vmv-chosen-clear {
    margin-left: auto;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--tp-line);
    background: var(--card);
    color: var(--muted-foreground);
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}

.vmv-chosen-clear:hover {
    background: var(--tp-err-bg);
    border-color: var(--tp-err-line);
    color: var(--tp-err);
}

/* ═══════════════════════════════════════════════════════════════════
   RESULTS SECTION
   ═══════════════════════════════════════════════════════════════════ */
.vmv-results-section {
    position: relative;
    padding: 72px 0 88px;
    background: var(--vmv-res-bg);
    border-top: 1px solid var(--tp-line);
    /* scroll-margin so the sticky site header does not cover the head
       when the page scrolls itself down to the results. */
    scroll-margin-top: 84px;

    /* THE INNER GUTTER — the one number every block inside the panel
       aligns to.
       `.tp-panel` is a bare card with NO padding of its own: the shared
       system expects each direct child to be a full-bleed BAND carrying
       its own padding (see .tp-result-head and .tp-stats). Dropping a
       bordered card straight into it therefore leaves that card flush
       against a 24px-rounded border, which is what made this panel look
       broken. Head and stats stay full-bleed because they are bands;
       everything below them is inset by this token instead. */
    --vmv-gutter: 30px;
}

.vmv-results-section::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 340px;
    background: var(--vmv-res-glow);
    filter: blur(26px);
    pointer-events: none;
}

.vmv-results-section > .container { position: relative; }

.vmv-results-section .tp-panel {
    position: relative;
    /* Capped and centred so the report does not sprawl into unreadable
       line lengths on a wide monitor — the same ceiling the frames tool
       uses for its results panel. */
    max-width: 1180px;
    margin: 0 auto;
    border-radius: 24px;
    box-shadow: var(--vmv-res-shadow);
    /* Visible, not hidden: the Export menu drops out of the panel's top
       edge and would otherwise be clipped. The corners stay clean because
       no band that meets a corner paints its own background. */
    overflow: visible;
}

/* The scanner hairline every panel in this system wears. Clipped to the
   panel's own radius so it does not square off the top corners. */
.vmv-results-section .tp-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 24px 24px 0 0;
    background: var(--gradient-scanner);
    z-index: 3;
}

/* ── Bands ────────────────────────────────────────────────────────────
   Full-bleed, each with its own padding, aligned to the gutter so the
   title sits on the same left edge as everything below it. */
.vmv-results-section .tp-result-head {
    padding: 22px var(--vmv-gutter);
    gap: 14px;
}

/* The overview is always EIGHT stats (see renderStats), so the column
   count is set explicitly to a divisor of 8 at every width. The shared
   `auto-fit, minmax(120px, 1fr)` resolved to SEVEN columns here, which
   left a single orphan cell trailing six empty slots — the partial-last-
   row problem this file warns about at the top. If the stat count ever
   changes, these divisors have to change with it.
   `minmax(0, 1fr)` rather than `1fr` so a long value truncates inside its
   cell instead of forcing the track wider. */
.vmv-results-section .tp-stats {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    border-top: 1px solid var(--tp-line);
    border-bottom: 1px solid var(--tp-line);
}

/* The band draws its own top and bottom rule; the cells only need to
   separate themselves from each other. */
.vmv-results-section .tp-stat { border-bottom: 0; }

.vmv-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Export menu ──────────────────────────────────────────────────── */
.vmv-export { position: relative; }

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

.vmv-export-menu button {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--foreground);
    font-size: .88rem;
    text-align: left;
    cursor: pointer;
    transition: background .16s;
}

.vmv-export-menu button:hover { background: var(--primary-soft); }

/* ═══════════════════════════════════════════════════════════════════
   THE VERDICT

   The headline finding. It gets a full-width plate and the largest
   type in the results, because it is the answer the visitor came for
   and everything else is supporting detail.
   ═══════════════════════════════════════════════════════════════════ */
.vmv-verdict {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    /* Inset by the gutter: this is a card, not a band. */
    margin: 20px var(--vmv-gutter);
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid var(--tp-line);
    background: var(--vmv-inset);
    position: relative;
    overflow: hidden;
}

/* A gradient edge carries the verdict's character without colouring the
   whole plate, which would shout. */
.vmv-verdict::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--gradient-primary);
}

.vmv-verdict[data-verdict="platform_download"]::before,
.vmv-verdict[data-verdict="platform_copy"]::before { background: linear-gradient(180deg, #F59E0B, #B45309); }
.vmv-verdict[data-verdict="editor_export"]::before  { background: linear-gradient(180deg, #A78BFA, #7C3AED); }
.vmv-verdict[data-verdict="screen_capture"]::before { background: linear-gradient(180deg, #F472B6, #DB2777); }
.vmv-verdict[data-verdict="camera_original"]::before{ background: linear-gradient(180deg, #34D399, #059669); }
.vmv-verdict[data-verdict="stripped"]::before       { background: linear-gradient(180deg, #94A3B8, #475569); }

.vmv-verdict-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    box-shadow: 0 6px 18px -6px var(--tp-badge-glow, rgba(37, 99, 235, .55));
}

.vmv-verdict-text { min-width: 0; flex: 1; }

.vmv-verdict-label {
    margin: 0 0 4px;
    font-family: var(--font-display), var(--font-sans);
    font-size: 1.16rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.25;
}

.vmv-verdict-summary {
    margin: 0;
    font-size: .93rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.vmv-verdict-conf {
    flex: none;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--tp-line);
    background: var(--card);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.vmv-verdict-conf[data-conf="high"]   { color: var(--vmv-pass); border-color: var(--vmv-pass); }
.vmv-verdict-conf[data-conf="medium"] { color: var(--vmv-medium); }

/* ═══════════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════════ */
.vmv-tabs {
    display: flex;
    gap: 4px;
    margin: 22px var(--vmv-gutter) 0;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--tp-line);
    /* Scrolls rather than wraps: seven tabs will not fit a phone, and a
       wrapped second row reads as a different control. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* A wrapping tab row would push the panes down unpredictably; keep the
   strip one line tall and let it scroll. */
.vmv-tabs::-webkit-scrollbar { height: 3px; }
.vmv-tabs::-webkit-scrollbar-thumb {
    background: var(--tp-line);
    border-radius: 999px;
}

.vmv-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--muted-foreground);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s, border-color .18s;
}

.vmv-tab:hover { color: var(--foreground); }

.vmv-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.vmv-tab-count {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--vmv-code-bg);
    color: var(--muted-foreground);
    font-size: .7rem;
    font-weight: 700;
}

.vmv-tab.active .vmv-tab-count {
    background: var(--primary);
    color: #fff;
}

.vmv-panes {
    padding: 24px var(--vmv-gutter) calc(var(--vmv-gutter) + 4px);
}

.vmv-pane[hidden] { display: none; }

/* ── Section furniture, shared by every pane ──────────────────────── */
.vmv-sec-title {
    margin: 0 0 6px;
    font-family: var(--font-display), var(--font-sans);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--foreground);
}

.vmv-recovered .vmv-sec-title,
.vmv-ai .vmv-sec-title,
.vmv-timeline-wrap .vmv-sec-title { margin-top: 30px; }

.vmv-sec-lead {
    margin: 0 0 18px;
    font-size: .89rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    max-width: 72ch;
}

.vmv-none {
    margin: 0;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px dashed var(--tp-line);
    background: var(--vmv-inset);
    font-size: .89rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

/* ═══════════════════════════════════════════════════════════════════
   THE PROVENANCE CHAIN

   A vertical rail with numbered stops. The connector is drawn by the
   dot's ::after rather than a background on the row, so it stays
   aligned however much the copy in each step wraps.
   ═══════════════════════════════════════════════════════════════════ */
.vmv-chain { display: flex; flex-direction: column; }

.vmv-step {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding-bottom: 18px;
}

.vmv-step:last-child { padding-bottom: 0; }

.vmv-step-rail { position: relative; }

.vmv-step-dot {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
}

/* The connector down to the next stop. */
.vmv-step:not(:last-child) .vmv-step-dot::after {
    content: '';
    position: absolute;
    top: 32px;
    left: 50%;
    width: 2px;
    height: calc(100% + 100px);
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--primary), transparent);
    opacity: .35;
}

.vmv-step[data-kind="device"]   .vmv-step-dot { background: linear-gradient(135deg, #34D399, #059669); }
.vmv-step[data-kind="platform"] .vmv-step-dot { background: linear-gradient(135deg, #F59E0B, #B45309); }
.vmv-step[data-kind="editor"]   .vmv-step-dot { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.vmv-step[data-kind="capture"]  .vmv-step-dot { background: linear-gradient(135deg, #F472B6, #DB2777); }
.vmv-step[data-kind="codec"]    .vmv-step-dot { background: linear-gradient(135deg, #22D3EE, #0891B2); }

.vmv-step-body {
    min-width: 0;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--tp-line);
    background: var(--card);
}

.vmv-step-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.vmv-step-actor {
    font-size: .97rem;
    font-weight: 700;
    color: var(--foreground);
}

.vmv-step-kind,
.vmv-step-era {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--vmv-code-bg);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.vmv-step-role {
    margin: 0 0 8px;
    font-size: .88rem;
    color: var(--muted-foreground);
}

.vmv-step-evidence { margin: 0; }

.vmv-step-evidence code,
.vmv-artifact-value,
.vmv-finding-value,
.vmv-signal-evidence code,
.vmv-kv code,
.vmv-raw-key,
.vmv-raw-val,
.vmv-box-type,
.vmv-map-coords code,
.vmv-finding-tag code,
.vmv-ai-src code {
    display: inline-block;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 7px;
    background: var(--vmv-code-bg);
    color: var(--vmv-code-fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.vmv-step-note {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--tp-line);
    font-size: .85rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

/* ═══════════════════════════════════════════════════════════════════
   RECOVERED IDENTIFIERS

   The block that only appears when the file carried something nothing
   else would have found, so it is allowed to look like a find.
   ═══════════════════════════════════════════════════════════════════ */
.vmv-recovered-platform {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    font-size: .88rem;
    color: var(--muted-foreground);
}

.vmv-platform-pill {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}

.vmv-artifacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.vmv-artifact {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--tp-line);
    background: var(--card);
}

.vmv-artifact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.vmv-artifact-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.vmv-artifact-copy {
    padding: 3px 9px;
    border-radius: 7px;
    border: 1px solid var(--tp-line);
    background: var(--card);
    color: var(--muted-foreground);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s, color .16s;
}

.vmv-artifact-copy:hover { background: var(--primary-soft); color: var(--primary); }

.vmv-artifact-detail {
    margin: 8px 0 0;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.vmv-search-cta { margin-top: 16px; }

/* ── AI disclosure ────────────────────────────────────────────────── */
.vmv-ai-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--tp-line);
    background: var(--vmv-inset);
}

.vmv-ai-row[data-declared="yes"] {
    border-color: var(--vmv-notice);
    background: var(--vmv-notice-bg);
}

.vmv-ai-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--vmv-code-bg);
    font-size: 1.05rem;
}

.vmv-ai-row[data-declared="yes"] .vmv-ai-mark {
    background: var(--vmv-notice);
    color: #fff;
}

.vmv-ai-summary {
    margin: 0 0 6px;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--foreground);
}

.vmv-ai-caveat,
.vmv-ai-src {
    margin: 0;
    font-size: .81rem;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.vmv-ai-src { margin-top: 6px; }

/* ── Recorded edit history ────────────────────────────────────────────
   A record the editing software wrote itself, as opposed to the chain
   above which is our reading of the evidence. Styled as a plain ordered
   list so it does not compete with the chain for attention. */
.vmv-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vmv-history-step {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--tp-line);
    background: var(--card);
}

.vmv-history-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--vmv-code-bg);
    color: var(--muted-foreground);
    font-size: .72rem;
    font-weight: 700;
}

.vmv-history-agent {
    font-size: .9rem;
    font-weight: 600;
    color: var(--foreground);
}

.vmv-history-action {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .72rem;
    font-weight: 600;
}

/* ── Embedded telemetry ───────────────────────────────────────────────
   Rare, and when present it is the most serious thing on the privacy
   tab — a continuous position track rather than one coordinate. It gets
   the warning treatment rather than the ordinary finding treatment. */
.vmv-telemetry {
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--vmv-warn);
    background: var(--vmv-warn-bg);
}

.vmv-telemetry-head {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.vmv-telemetry-badge {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--vmv-warn);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.vmv-telemetry-detail {
    margin: 0;
    flex: 1 1 240px;
    min-width: 0;
    font-size: .87rem;
    line-height: 1.55;
    color: var(--foreground);
}

.vmv-telemetry-warning {
    margin: 0 0 12px;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--vmv-warn);
}

.vmv-telemetry-sample {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--card);
}

/* ── Which readers ran ───────────────────────────────────────────── */
.vmv-engines {
    margin: 16px 0 0;
    padding: 11px 14px;
    border-radius: 11px;
    border: 1px dashed var(--tp-line);
    background: var(--vmv-inset);
    font-size: .82rem;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.vmv-engines strong { color: var(--foreground); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   INTEGRITY SIGNALS
   ═══════════════════════════════════════════════════════════════════ */
.vmv-distance {
    margin-bottom: 20px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--tp-line);
    background: var(--vmv-inset);
}

.vmv-distance-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.vmv-distance-label {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.vmv-distance-value {
    font-size: .92rem;
    font-weight: 700;
    color: var(--foreground);
}

.vmv-distance-track {
    height: 8px;
    border-radius: 999px;
    background: var(--vmv-code-bg);
    overflow: hidden;
}

.vmv-distance-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--vmv-pass);
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.vmv-distance-fill[data-tone="low"]    { background: var(--vmv-info); }
.vmv-distance-fill[data-tone="medium"] { background: var(--vmv-notice); }
.vmv-distance-fill[data-tone="high"]   { background: var(--vmv-warn); }

.vmv-distance-hint {
    margin: 9px 0 0;
    font-size: .81rem;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.vmv-signals { display: flex; flex-direction: column; gap: 10px; }

.vmv-signal {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--tp-line);
    border-left: 3px solid var(--vmv-info);
    background: var(--card);
}

.vmv-signal[data-level="info"]    { border-left-color: var(--vmv-info); }
.vmv-signal[data-level="notice"]  { border-left-color: var(--vmv-notice); }
.vmv-signal[data-level="warning"] { border-left-color: var(--vmv-warn); background: var(--vmv-warn-bg); }

.vmv-signal-level {
    align-self: start;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--vmv-info-bg);
    color: var(--vmv-info);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vmv-signal[data-level="notice"]  .vmv-signal-level { background: var(--vmv-notice-bg); color: var(--vmv-notice); }
.vmv-signal[data-level="warning"] .vmv-signal-level { background: var(--vmv-warn-bg); color: var(--vmv-warn); }

.vmv-signal-title {
    margin: 0 0 4px;
    font-size: .94rem;
    font-weight: 700;
    color: var(--foreground);
}

.vmv-signal-detail {
    margin: 0;
    font-size: .87rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.vmv-signal-evidence { margin: 9px 0 0; }

/* The honesty caveat. Set apart from the signals so it reads as the
   frame around them rather than as one more finding. */
.vmv-caveat {
    margin: 20px 0 0;
    padding: 15px 18px;
    border-radius: 14px;
    border: 1px dashed var(--tp-line);
    background: var(--vmv-inset);
    font-size: .86rem;
    line-height: 1.65;
    color: var(--muted-foreground);
}

/* ═══════════════════════════════════════════════════════════════════
   PRIVACY
   ═══════════════════════════════════════════════════════════════════ */
.vmv-exposure {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--tp-line);
    background: var(--vmv-inset);
}

.vmv-exposure-mark {
    flex: none;
    width: 12px;
    height: 12px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--vmv-pass);
    box-shadow: 0 0 0 4px var(--vmv-pass-bg);
}

.vmv-exposure[data-exposure="low"]    .vmv-exposure-mark { background: var(--vmv-low); box-shadow: 0 0 0 4px var(--vmv-info-bg); }
.vmv-exposure[data-exposure="medium"] .vmv-exposure-mark { background: var(--vmv-medium); box-shadow: 0 0 0 4px var(--vmv-notice-bg); }
.vmv-exposure[data-exposure="high"]   .vmv-exposure-mark { background: var(--vmv-high); box-shadow: 0 0 0 4px var(--vmv-warn-bg); }

.vmv-exposure[data-exposure="high"] {
    border-color: var(--vmv-warn);
    background: var(--vmv-warn-bg);
}

.vmv-exposure-label {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
}

.vmv-exposure-summary {
    margin: 0;
    font-size: .87rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

/* ── The map row ──────────────────────────────────────────────────── */
.vmv-map {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid var(--vmv-warn);
    background: var(--vmv-warn-bg);
}

.vmv-map-coords {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vmv-map-alt {
    font-size: .8rem;
    color: var(--muted-foreground);
}

/* ── Findings ─────────────────────────────────────────────────────── */
.vmv-findings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 12px;
}

.vmv-finding {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--tp-line);
    border-left: 3px solid var(--vmv-low);
    background: var(--card);
}

.vmv-finding[data-sev="medium"] { border-left-color: var(--vmv-medium); }
.vmv-finding[data-sev="high"]   { border-left-color: var(--vmv-high); }

.vmv-finding-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.vmv-finding-label {
    font-size: .92rem;
    font-weight: 700;
    color: var(--foreground);
}

.vmv-finding-sev {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--vmv-info-bg);
    color: var(--vmv-low);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.vmv-finding[data-sev="medium"] .vmv-finding-sev { background: var(--vmv-notice-bg); color: var(--vmv-medium); }
.vmv-finding[data-sev="high"]   .vmv-finding-sev { background: var(--vmv-warn-bg); color: var(--vmv-high); }

.vmv-finding-reveals {
    margin: 9px 0 0;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.vmv-finding-tag { margin: 9px 0 0; }
.vmv-finding-tag code { font-size: .72rem; opacity: .8; }

/* ── The fix ──────────────────────────────────────────────────────── */
.vmv-clean {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid var(--primary);
    background: var(--primary-soft);
}

.vmv-clean-text { flex: 1 1 340px; min-width: 0; }

.vmv-clean-hint {
    margin: 0;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--foreground);
}

/* ═══════════════════════════════════════════════════════════════════
   PLATFORM READINESS
   ═══════════════════════════════════════════════════════════════════ */
.vmv-platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.vmv-platform {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--tp-line);
    border-top: 3px solid var(--vmv-pass);
    background: var(--card);
}

.vmv-platform[data-state="warn"] { border-top-color: var(--vmv-notice); }
.vmv-platform[data-state="fail"] { border-top-color: var(--vmv-fail); }

.vmv-platform-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.vmv-platform-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
}

.vmv-platform-state {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--vmv-pass-bg);
    color: var(--vmv-pass);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.vmv-platform[data-state="warn"] .vmv-platform-state { background: var(--vmv-notice-bg); color: var(--vmv-notice); }
.vmv-platform[data-state="fail"] .vmv-platform-state { background: var(--vmv-fail-bg); color: var(--vmv-fail); }

.vmv-platform-note {
    margin: 0 0 12px;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.vmv-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vmv-check {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 9px;
    align-items: start;
}

.vmv-check-mark {
    position: relative;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--vmv-pass-bg);
}

.vmv-check-mark::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: .62rem;
    font-weight: 700;
    color: var(--vmv-pass);
}

.vmv-check[data-state="warn"] .vmv-check-mark { background: var(--vmv-notice-bg); }
.vmv-check[data-state="warn"] .vmv-check-mark::after { content: '!'; color: var(--vmv-notice); }
.vmv-check[data-state="fail"] .vmv-check-mark { background: var(--vmv-fail-bg); }
.vmv-check[data-state="fail"] .vmv-check-mark::after { content: '✕'; color: var(--vmv-fail); }

.vmv-check-text {
    font-size: .83rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}

.vmv-check-text strong { color: var(--foreground); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   STREAMS
   ═══════════════════════════════════════════════════════════════════ */
.vmv-streams {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.vmv-stream {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--tp-line);
    background: var(--card);
}

.vmv-stream-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
}

.vmv-stream-type {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.vmv-stream[data-type="audio"] .vmv-stream-type { background: linear-gradient(135deg, #22D3EE, #0891B2); }
.vmv-stream[data-type="subtitle"] .vmv-stream-type,
.vmv-stream[data-type="data"] .vmv-stream-type { background: linear-gradient(135deg, #94A3B8, #475569); }

.vmv-stream-codec {
    font-size: .95rem;
    font-weight: 700;
    color: var(--foreground);
}

.vmv-stream-index {
    margin-left: auto;
    font-size: .76rem;
    color: var(--muted-foreground);
}

.vmv-stream-long {
    margin: 0 0 12px;
    font-size: .81rem;
    color: var(--muted-foreground);
}

.vmv-facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 13px;
}

.vmv-fact {
    padding: 10px 12px;
    border-radius: 11px;
    border-left: 3px solid var(--vmv-info);
    background: var(--vmv-info-bg);
}

.vmv-fact[data-level="notice"]  { border-left-color: var(--vmv-notice); background: var(--vmv-notice-bg); }
.vmv-fact[data-level="warning"] { border-left-color: var(--vmv-warn); background: var(--vmv-warn-bg); }

.vmv-fact-label {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: var(--foreground);
}

.vmv-fact-detail {
    display: block;
    margin-top: 3px;
    font-size: .81rem;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.vmv-kvs { display: flex; flex-direction: column; }

.vmv-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--vmv-inset-line);
    font-size: .84rem;
}

.vmv-kv:last-child { border-bottom: 0; }

.vmv-kv > span {
    flex: none;
    color: var(--muted-foreground);
}

.vmv-kv code {
    text-align: right;
    background: none;
    padding: 0;
    color: var(--foreground);
    font-size: .81rem;
}

/* ═══════════════════════════════════════════════════════════════════
   THE BITRATE CHART

   Plain divs sized as percentages — no charting library, because the
   site's CSP blocks a CDN request and a bar chart does not need one.
   ═══════════════════════════════════════════════════════════════════ */
.vmv-timeline-wrap { margin-top: 6px; }

.vmv-chart {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 140px;
    padding: 10px 12px 0;
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--tp-line);
    border-bottom: 0;
    background: var(--vmv-chart-bg);
    overflow: hidden;
}

.vmv-bar {
    flex: 1 1 0;
    min-width: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--vmv-bar);
    opacity: .85;
    transition: opacity .15s;
}

.vmv-bar:hover { opacity: 1; }

/* The keyframe rail, on the same axis so the marks line up with the
   bars above them. */
.vmv-chart-keys {
    position: relative;
    height: 16px;
    border-radius: 0 0 14px 14px;
    border: 1px solid var(--tp-line);
    border-top: 0;
    background: var(--vmv-chart-bg);
}

.vmv-key {
    position: absolute;
    top: 3px;
    width: 2px;
    height: 10px;
    border-radius: 1px;
    background: var(--vmv-key);
    transform: translateX(-1px);
}

.vmv-chart-legend {
    margin-top: 9px;
    font-size: .81rem;
    color: var(--muted-foreground);
}

/* ═══════════════════════════════════════════════════════════════════
   STRUCTURE TREE
   ═══════════════════════════════════════════════════════════════════ */
.vmv-flags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.vmv-flag {
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--tp-line);
    background: var(--card);
    font-size: .78rem;
    color: var(--muted-foreground);
}

.vmv-flag[data-on="1"] {
    border-color: var(--vmv-info);
    background: var(--vmv-info-bg);
    color: var(--vmv-info);
    font-weight: 600;
}

.vmv-tree {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--tp-line);
    background: var(--vmv-inset);
    overflow-x: auto;
}

.vmv-box-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    /* The nesting depth becomes the indent, so the tree reads as a tree
       without a wrapper element per level. */
    padding-left: calc(var(--d, 0) * 18px);
}

.vmv-box-type {
    flex: none;
    font-weight: 700;
    background: var(--card);
}

.vmv-box-repeat {
    flex: none;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .7rem;
    font-weight: 700;
}

.vmv-box-meaning {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .82rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vmv-box-size {
    flex: none;
    margin-left: auto;
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
}

/* ═══════════════════════════════════════════════════════════════════
   RAW TAGS
   ═══════════════════════════════════════════════════════════════════ */
.vmv-raw-search {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 9px 13px;
    border-radius: 11px;
    border: 1px solid var(--tp-line);
    background: var(--card);
    color: var(--muted-foreground);
}

.vmv-raw-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    color: var(--foreground);
    font-family: inherit;
    font-size: .88rem;
}

.vmv-raw {
    border-radius: 14px;
    border: 1px solid var(--tp-line);
    background: var(--card);
    overflow: hidden;
}

.vmv-raw-row {
    display: grid;
    grid-template-columns: minmax(140px, 34%) 1fr;
    gap: 14px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--vmv-inset-line);
}

.vmv-raw-row:last-child { border-bottom: 0; }
.vmv-raw-row:nth-child(odd) { background: var(--vmv-inset); }
.vmv-raw-row[hidden] { display: none; }

.vmv-raw-key { background: none; padding: 0; font-weight: 600; color: var(--foreground); }
.vmv-raw-val { background: none; padding: 0; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE

   The gutter steps down with the viewport, and every grid inside the
   panel is given a real floor — `auto-fit minmax(300px, 1fr)` silently
   overflows once the panel is narrower than its own minimum, which is
   how a "responsive" grid ends up wider than the phone holding it.
   ═══════════════════════════════════════════════════════════════════ */

/* Laptop — the panel stops being the widest thing on screen, and eight
   stats across becomes too tight to read. Four columns, two rows. */
@media (max-width: 1100px) {
    .vmv-results-section { --vmv-gutter: 26px; }

    .vmv-results-section .tp-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* With two rows, the row above needs a rule under it. */
    .vmv-results-section .tp-stat:nth-child(-n+4) {
        border-bottom: 1px solid var(--tp-line);
    }

    /* The 4th cell ends its row, so its right border would sit on the
       panel edge. */
    .vmv-results-section .tp-stat:nth-child(4n) { border-right: none; }
}

/* Tablet */
@media (max-width: 860px) {
    .vmv-results-section {
        --vmv-gutter: 22px;
        padding: 52px 0 64px;
    }

    .vmv-results-section .tp-panel { border-radius: 20px; }
    .vmv-results-section .tp-panel::before { border-radius: 20px 20px 0 0; }

    .vmv-verdict {
        flex-wrap: wrap;
        padding: 16px 18px;
        gap: 13px;
    }

    /* The confidence pill drops under the text rather than squeezing it. */
    .vmv-verdict-conf { order: 3; margin-left: 60px; }

    .vmv-verdict-label { font-size: 1.08rem; }

    .vmv-artifacts,
    .vmv-findings,
    .vmv-platforms,
    .vmv-streams {
        grid-template-columns: 1fr;
    }
}

/* Large phone / small tablet */
@media (max-width: 620px) {
    .vmv-results-section {
        --vmv-gutter: 16px;
        padding: 40px 0 52px;
    }

    .vmv-results-section .tp-result-head { padding: 18px var(--vmv-gutter); }

    /* The action row becomes its own line, full width. */
    .vmv-head-actions { width: 100%; }
    .vmv-head-actions .tp-btn,
    .vmv-head-actions .vmv-export { flex: 1 1 auto; }
    .vmv-head-actions .vmv-export .tp-btn { width: 100%; justify-content: center; }
    .vmv-export-menu { left: 0; right: auto; width: 100%; }

    .vmv-verdict {
        margin: 16px var(--vmv-gutter);
        padding: 15px 16px;
        gap: 12px;
    }

    .vmv-verdict-mark { width: 38px; height: 38px; font-size: 1.1rem; }
    .vmv-verdict-conf { margin-left: 50px; }

    .vmv-panes { padding: 20px var(--vmv-gutter) 24px; }

    .vmv-step {
        grid-template-columns: 30px 1fr;
        gap: 10px;
    }

    .vmv-step-dot { width: 26px; height: 26px; font-size: .75rem; }
    .vmv-step:not(:last-child) .vmv-step-dot::after { top: 26px; }
    .vmv-step-body { padding: 12px 13px; }

    /* The signal level pill moves above its text — side by side it leaves
       barely 200px for the sentence. */
    .vmv-signal { grid-template-columns: 1fr; gap: 7px; }
    .vmv-signal-level { justify-self: start; }

    .vmv-raw-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .vmv-chart { height: 104px; }

    .vmv-clean { padding: 15px 16px; gap: 13px; }
    .vmv-clean .tp-btn { width: 100%; justify-content: center; }

    .vmv-map { padding: 13px 15px; }
    .vmv-map .tp-btn { width: 100%; justify-content: center; }

    .vmv-chosen-name { max-width: 20ch; }

    .vmv-sec-title { font-size: .97rem; }
    .vmv-sec-lead  { font-size: .86rem; margin-bottom: 15px; }

    /* Two columns, four rows — still an even division of eight. */
    .vmv-results-section .tp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vmv-results-section .tp-stat:nth-child(-n+6) {
        border-bottom: 1px solid var(--tp-line);
    }

    .vmv-results-section .tp-stat:nth-child(2n) { border-right: none; }
    .vmv-results-section .tp-stat:nth-child(4n) { border-right: none; }
}

/* Small phone (360px and under) — the floor this has to survive. */
@media (max-width: 400px) {
    .vmv-results-section { --vmv-gutter: 13px; }

    .vmv-verdict { flex-wrap: wrap; }
    .vmv-verdict-mark { width: 34px; height: 34px; }
    .vmv-verdict-conf { margin-left: 0; }
    .vmv-verdict-label { font-size: 1rem; }

    .vmv-step { grid-template-columns: 24px 1fr; gap: 8px; }
    .vmv-step-dot { width: 22px; height: 22px; font-size: .68rem; }
    .vmv-step:not(:last-child) .vmv-step-dot::after { top: 22px; }

    .vmv-tab { padding: 10px 10px; font-size: .84rem; }

    /* The tree indents by depth; on a narrow screen that indent is what
       forces the horizontal scroll, so halve it. */
    .vmv-box-row { padding-left: calc(var(--d, 0) * 10px); }
    .vmv-tree { padding: 12px 13px; }

    .vmv-chart { height: 88px; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* SHA-256 checksum card, under the stats row */
.vmv-hash { margin: 14px 0 4px; }

/* ═══════════════════════════════════════════════════════════════════
   FACT vs INTERPRETATION TAGS
   Fact = read straight off the file (green). Interpretation = our reading
   of it, neutral so an inference never looks like a finding.
   ═══════════════════════════════════════════════════════════════════ */
.vmv-basis-tag {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.6;
    vertical-align: 1px;
    white-space: nowrap;
}

.vmv-basis-tag[data-basis="fact"] {
    background: var(--vmv-pass-bg);
    color: var(--vmv-pass);
}

.vmv-basis-tag[data-basis="interp"] {
    background: var(--vmv-code-bg);
    color: var(--muted-foreground);
    border: 1px dashed var(--tp-line);
}

.vmv-basis-tag[data-basis="interp"][data-conf="low"] { opacity: .8; }

.vmv-signal-detail + .vmv-signal-detail { margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════
   ADVANCED TECHNICAL DETAILS (collapsed by default)
   ═══════════════════════════════════════════════════════════════════ */
.vmv-adv {
    margin-top: 12px;
    border-top: 1px dashed var(--tp-line);
    padding-top: 10px;
}

.vmv-adv > summary {
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    color: var(--primary);
    list-style: none;
}

.vmv-adv > summary::-webkit-details-marker { display: none; }
.vmv-adv > summary::before { content: '▸ '; }
.vmv-adv[open] > summary::before { content: '▾ '; }

.vmv-adv > .vmv-kvs { margin-top: 10px; }

.vmv-container-adv .vmv-adv {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--tp-line);
    border-radius: 14px;
    background: var(--card);
}

.vmv-adv-sub {
    margin: 12px 0 6px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.vmv-hex {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--vmv-code-bg);
    color: var(--vmv-code-fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}