/* ==========================================================================
   resources/views/home/pages/tool/video-frame-extractor.blade.php — moved verbatim from the view's <style> block(s) (2026-09-11)
   ========================================================================== */
            /* ── Bigger tool box: this page has no tab row (upload-only), so give
                       the card more room instead of the shared 660px default. ── */
            .tool-card.tool-card--single-mode {
                max-width: 860px;
            }

            .tool-card--single-mode .tool-body {
                padding: 44px 48px;
            }

            .tool-card--single-mode .upload-zone {
                padding: 56px 32px;
            }

            .tool-card--single-mode .upload-zone .upload-icon-wrap {
                width: 64px;
                height: 64px;
                border-radius: 16px;
            }

            .tool-card--single-mode .upload-zone .upload-icon-wrap svg {
                width: 28px;
                height: 28px;
            }

            .tool-card--single-mode #mode-file {
                min-height: 220px;
            }

            @media (max-width: 900px) {
                .tool-card.tool-card--single-mode {
                    max-width: 660px;
                }

                .tool-card--single-mode .tool-body {
                    padding: 28px;
                }

                .tool-card--single-mode .upload-zone {
                    padding: 32px 24px;
                }

                .tool-card--single-mode .upload-zone .upload-icon-wrap {
                    width: 48px;
                    height: 48px;
                    border-radius: 12px;
                }

                .tool-card--single-mode .upload-zone .upload-icon-wrap svg {
                    width: 22px;
                    height: 22px;
                }

                .tool-card--single-mode #mode-file {
                    min-height: 152px;
                }
            }

            .video-note {
                display: flex;
                align-items: flex-start;
                gap: 8px;
                background-color: var(--rv-surface-4);
                border: 1px solid var(--rv-primary-pale);
                border-left: 4px solid var(--rv-primary);
                border-radius: 8px;
                padding: 10px 14px;
                margin-top: 10px;
                color: #4338ca;
                font-size: 13px;
                line-height: 1.5;
                text-align: left;
            }

            .video-note::before {
                content: "ℹ️";
                flex-shrink: 0;
                font-size: 14px;
                margin-top: 1px;
            }

            /* ── Consent + Loader overlay / box / scanner styles → main.css ── */

            /* ── All consent/loader/scanner/mode-panel/vt-loading CSS → main.css ── */

            #search-container {
                position: relative;
                max-width: 700px;
                margin: 24px auto 0;
                background: var(--white, #fff);
                border: 1px dashed var(--border, var(--rv-border));
                border-radius: 16px;
                padding: 28px 24px 24px;
                text-align: center;
                transition: border-color .2s ease, box-shadow .2s ease;
            }

            #search-container.file-mode-active {
                cursor: pointer;
            }

            #search-container.file-mode-active:hover {
                border-color: var(--blue, var(--rv-primary));
                box-shadow: 0 0 0 4px rgba(109, 92, 230, .06);
            }

            /* .search-modes-wrap, .mode-panel, .mode-panel.active → main.css */

            #mode-file {
                justify-content: center;
                min-height: 152px;
            }

            /* ── File preview strip ── */
            #file-preview {
                display: none;
                align-items: center;
                gap: 8px;
                margin-top: 14px;
                background: var(--blue-light, var(--rv-surface-4));
                border: 1px solid var(--blue-mid, var(--rv-primary-pale));
                border-radius: 8px;
                padding: 10px 14px;
                width: 100%;
                max-width: 100%;
                overflow: hidden;
                box-sizing: border-box;
                min-width: 0;
            }

            #file-preview svg {
                width: 18px;
                height: 18px;
                flex-shrink: 0;
                stroke: var(--blue, var(--rv-primary));
            }

            #file-name {
                font-size: .85rem;
                font-weight: 600;
                color: var(--blue, var(--rv-primary));
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                flex: 1;
                min-width: 0;
            }

            #file-size {
                font-size: .78rem;
                color: var(--muted, var(--rv-muted));
                flex-shrink: 0;
                white-space: nowrap;
            }

            @media (max-width: 480px) {
                #file-preview {
                    gap: 6px;
                    padding: 8px 10px;
                }

                #file-name {
                    font-size: .78rem;
                    max-width: calc(100% - 80px);
                }

                #file-size {
                    display: none;
                }
            }

            #file-clear {
                background: none;
                border: none;
                cursor: pointer;
                color: var(--muted, var(--rv-muted));
                padding: 2px;
                line-height: 1;
                font-size: 1rem;
            }

            /* ── Search button: hidden by default in upload mode ── */
            #btn-search-main.btn-hidden {
                visibility: hidden;
                pointer-events: none;
            }

            /* .mode-url-body → main.css */

            /* Icon wrap — gradient background for depth */
            .mode-icon-wrap {
                width: 56px;
                height: 56px;
                border-radius: 16px;
                display: grid;
                place-items: center;
                margin-bottom: 12px;
                flex-shrink: 0;
                position: relative;
            }

            .mode-icon-wrap--url {
                background: linear-gradient(135deg, var(--rv-surface-4) 0%, var(--rv-surface-4) 100%);
                border: 1px solid var(--rv-primary-pale);
                color: var(--blue, var(--rv-primary));
                box-shadow: 0 2px 8px rgba(109, 92, 230, .1);
            }

            .mode-icon-wrap svg {
                width: 24px;
                height: 24px;
            }

            /* .mode-panel-title, .mode-hint, .mode-input-wrap, .url-paste-btn → main.css */

            /* .url-paste-btn.copied, .mode-input, .mode-input--has-action → main.css */

            /* ── URL panel: platform chips (home-specific) ── */
            .mode-platforms {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-top: 14px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .mode-platforms-label {
                font-size: .68rem;
                color: var(--muted2, var(--rv-muted));
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: .06em;
                margin-right: 2px;
            }

            .platform-chip {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 3px 10px 3px 7px;
                border-radius: 99px;
                font-size: .7rem;
                font-weight: 600;
                background: var(--bg2, var(--rv-surface-2));
                border: 1px solid var(--border, var(--rv-border));
                color: var(--muted, var(--rv-muted));
                letter-spacing: .01em;
                transition: background .15s, border-color .15s;
            }

            .platform-chip:hover {
                background: var(--blue-light, var(--rv-surface-4));
                border-color: var(--blue-mid, var(--rv-primary-pale));
                color: var(--blue, var(--rv-primary));
            }

            .platform-chip-dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                flex-shrink: 0;
            }

            /* #vt-results, #vt-error → main.css */
            /* Alert modal CSS → main.css */
            /* Captcha modal CSS → main.css */
            /* #vt-loading, #vt-progress-track, #vt-progress, #captchaLoad → main.css */

            .vt-results-wrap {
                background: var(--white, #fff);
                border: 1px solid var(--border, var(--rv-border));
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 4px 24px rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .04);
            }

            .vt-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 12px;
                padding: 18px 24px;
                background: var(--bg, var(--rv-surface-2));
                border-bottom: 1px solid var(--border, var(--rv-border));
            }

            .vt-header-left,
            .vt-header-right {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
            }

            .vt-count-badge {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                font-size: .9rem;
                font-weight: 800;
                color: var(--text, var(--rv-ink));
                font-family: var(--font-h, inherit);
            }

            .vt-count-badge svg {
                width: 15px;
                height: 15px;
                color: var(--blue, var(--rv-primary));
                flex-shrink: 0;
            }

            .vt-hchip {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                border-radius: 99px;
                padding: 5px 13px;
                font-size: .72rem;
                font-weight: 700;
                border: 1px solid transparent;
                white-space: nowrap;
            }

            .vt-hchip svg {
                width: 12px;
                height: 12px;
                flex-shrink: 0;
            }

            .vt-hchip--mode {
                background: var(--blue-light, var(--rv-surface-4));
                color: var(--blue, var(--rv-primary));
                border-color: var(--blue-mid, var(--rv-primary-pale));
            }

            .vt-hchip--blue {
                background: var(--rv-surface-4);
                color: var(--rv-primary);
                border-color: var(--rv-primary-pale);
            }

            .vt-hchip--gray {
                background: var(--bg2, var(--rv-surface-2));
                color: var(--muted, var(--rv-muted));
                border-color: var(--border, var(--rv-border));
            }

            .vt-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 16px;
                padding: 20px;
                background: var(--bg, var(--rv-surface-2));
            }

            .vt-card {
                display: flex;
                flex-direction: column;
                text-decoration: none;
                color: inherit;
                background: var(--white, #fff);
                border: 1px solid var(--border, var(--rv-border));
                border-radius: 14px;
                overflow: hidden;
                transition: box-shadow .2s ease, transform .2s ease;
            }

            .vt-card:hover {
                box-shadow: 0 8px 28px rgba(109, 92, 230, .13), 0 2px 8px rgba(0, 0, 0, .06);
                transform: translateY(-3px);
            }

            .vt-card:hover .vt-title {
                color: var(--blue, var(--rv-primary));
            }

            .vt-card:hover .vt-thumb-img {
                transform: scale(1.05);
            }

            .vt-card:hover .vt-thumb-hover {
                opacity: 1;
            }

            .vt-card:hover .vt-url {
                color: var(--blue, var(--rv-primary));
            }

            .vt-card:hover .vt-arrow {
                opacity: 1;
                transform: translateX(0);
            }

            .vt-thumb {
                position: relative;
                width: 100%;
                padding-top: 56.25%;
                background: #dde3ec;
                overflow: hidden;
                flex-shrink: 0;
            }

            .vt-thumb>* {
                position: absolute;
            }

            .vt-thumb-img {
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
                transition: transform .35s ease;
            }

            .vt-thumb-fallback {
                inset: 0;
                background: linear-gradient(135deg, var(--rv-border) 0%, var(--rv-border) 100%);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .vt-thumb-favicon {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                opacity: .4;
                position: relative !important;
            }

            .vt-thumb-hover {
                inset: 0;
                background: rgba(22, 22, 29, .42);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: opacity .2s ease;
            }

            .vt-play-btn {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                background: rgba(255, 255, 255, .92);
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 2px 12px rgba(0, 0, 0, .22);
                transition: transform .15s ease;
                position: relative;
            }

            .vt-card:hover .vt-play-btn {
                transform: scale(1.1);
            }

            .vt-play-btn svg {
                width: 15px;
                height: 15px;
                margin-left: 3px;
                color: #111;
            }

            .vt-thumb-overlays {
                inset: 0;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                padding: 8px;
                gap: 4px;
                pointer-events: none;
            }

            .vt-thumb-overlays-right {
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .vt-rank {
                background: rgba(0, 0, 0, .65);
                color: #fff;
                font-size: .62rem;
                font-weight: 800;
                padding: 3px 7px;
                border-radius: 5px;
                font-family: var(--font-h, inherit);
                letter-spacing: .03em;
                backdrop-filter: blur(4px);
            }

            .vt-duration {
                background: rgba(0, 0, 0, .68);
                color: #fff;
                font-size: .62rem;
                font-weight: 700;
                padding: 3px 7px;
                border-radius: 5px;
                letter-spacing: .02em;
                backdrop-filter: blur(4px);
            }

            .vt-score {
                font-size: .65rem;
                font-weight: 800;
                padding: 3px 8px;
                border-radius: 99px;
                border: 1.5px solid;
                font-family: var(--font-h, inherit);
                backdrop-filter: blur(6px);
            }

            .vt-score--high {
                background: rgba(240, 253, 244, .92);
                color: var(--rv-success-deep);
                border-color: #86efac;
            }

            .vt-score--mid {
                background: rgba(255, 251, 235, .92);
                color: var(--rv-warning);
                border-color: var(--rv-warning-soft);
            }

            .vt-score--low {
                background: rgba(248, 250, 252, .92);
                color: #596879;
                border-color: var(--rv-border);
            }

            .vt-body {
                padding: 13px 14px 8px;
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .vt-platform {
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .vt-platform-dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                flex-shrink: 0;
            }

            .vt-platform-name {
                font-size: .68rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .05em;
            }

            .vt-title {
                font-family: var(--font-h, inherit);
                font-size: .865rem;
                font-weight: 700;
                line-height: 1.42;
                color: var(--text, var(--rv-ink));
                margin: 0;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                transition: color .15s;
            }

            .vt-meta {
                display: flex;
                flex-direction: column;
                gap: 4px;
                margin-top: 2px;
            }

            .vt-meta-item {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-size: .71rem;
                color: var(--muted, var(--rv-muted));
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .vt-meta-item svg {
                width: 11px;
                height: 11px;
                flex-shrink: 0;
            }

            .vt-meta-item--blue {
                color: var(--blue, var(--rv-primary));
            }

            .vt-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 8px 14px 11px;
                border-top: 1px solid var(--border, var(--rv-border));
                margin-top: auto;
                gap: 6px;
            }

            .vt-url {
                font-size: .67rem;
                color: var(--muted2, var(--rv-muted));
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-family: monospace;
                flex: 1;
                transition: color .15s;
            }

            .vt-arrow {
                display: flex;
                align-items: center;
                flex-shrink: 0;
                color: var(--blue, var(--rv-primary));
                opacity: 0;
                transform: translateX(-5px);
                transition: opacity .18s, transform .18s;
            }

            .vt-arrow svg {
                width: 13px;
                height: 13px;
            }

            .vt-empty {
                padding: 64px 24px;
                text-align: center;
                background: var(--white, #fff);
                border: 1px solid var(--border, var(--rv-border));
                border-radius: 20px;
                box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
            }

            .vt-empty-icon {
                width: 64px;
                height: 64px;
                border-radius: 18px;
                background: var(--bg2, var(--rv-surface-2));
                border: 1px solid var(--border, var(--rv-border));
                display: grid;
                place-items: center;
                margin: 0 auto 18px;
                color: var(--muted2, var(--rv-muted));
            }

            .vt-empty-icon svg {
                width: 28px;
                height: 28px;
            }

            .vt-empty-title {
                font-family: var(--font-h, inherit);
                font-size: 1.05rem;
                font-weight: 800;
                color: var(--text, var(--rv-ink));
                margin-bottom: 7px;
            }

            .vt-empty-sub {
                font-size: .875rem;
                color: var(--muted, var(--rv-muted));
                max-width: 340px;
                margin: 0 auto;
                line-height: 1.6;
            }

            @media (max-width: 860px) {
                .vt-grid {
                    grid-template-columns: repeat(3, 1fr);
                }
            }

            @media (max-width: 700px) {
                .vt-grid {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 12px;
                    padding: 14px;
                }
            }

            @media (max-width: 560px) {

                #captcha-modal-box {
                    padding: 22px 18px 20px;
                }
            }

            @media (max-width: 400px) {
                .vt-grid {
                    grid-template-columns: 1fr;
                    gap: 10px;
                    padding: 12px;
                }
            }

            /* ══════════════ STATS BAR ══════════════ */
            .vt-stats-bar {
                width: 100%;
                background: #0f1923;
                padding: 38px 40px;
                box-sizing: border-box;
            }

            .vt-stats-inner {
                max-width: 1200px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 24px 0;
            }

            .vt-stat-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                flex: 1;
                min-width: 140px;
            }

            .vt-stat-number {
                display: block;
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 2rem;
                font-weight: 900;
                color: #ffffff;
                line-height: 1.1;
                margin-bottom: 7px;
                letter-spacing: -0.01em;
                white-space: nowrap;
            }

            .vt-stat-suffix {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                color: var(--rv-primary-soft);
                font-size: 2rem;
                font-weight: 900;
            }

            .vt-stat-label {
                display: block;
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.6rem;
                font-weight: 700;
                color: #6b7f94;
                letter-spacing: 0.13em;
                text-transform: uppercase;
            }

            @media (max-width: 768px) {
                .vt-stats-inner {
                    justify-content: center;
                    gap: 20px 0;
                }

                .vt-stat-item {
                    flex: 0 0 50%;
                }
            }

            @media (max-width: 420px) {
                .vt-stat-item {
                    flex: 0 0 100%;
                }
            }

            /* ══════════════ LIVE EXAMPLE SECTION ══════════════ */
            .vt-live-section {
                width: 100%;
                background: var(--rv-ink-panel);
                padding: 80px 40px;
                box-sizing: border-box;
            }

            .vt-live-inner {
                max-width: 1200px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 60px;
            }

            /* ── Left Column ── */
            .vt-live-left {
                flex: 0 0 42%;
                max-width: 42%;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }

            .vt-live-eyebrow {
                display: inline-block;
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.7rem;
                font-weight: 700;
                color: var(--rv-primary-soft);
                letter-spacing: 0.13em;
                text-transform: uppercase;
                margin-bottom: 14px;
            }

            .vt-live-heading {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 2.15rem;
                font-weight: 800;
                color: #ffffff;
                line-height: 1.22;
                margin: 0 0 20px;
                letter-spacing: -0.02em;
            }

            .vt-live-desc {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.95rem;
                font-weight: 400;
                color: #8899b0;
                line-height: 1.7;
                margin: 0 0 32px;
            }

            .vt-live-checks {
                list-style: none;
                padding: 0;
                margin: 0 0 36px;
                display: flex;
                flex-direction: column;
                gap: 13px;
            }

            .vt-live-checks li {
                display: flex;
                align-items: center;
                gap: 10px;
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.9rem;
                font-weight: 500;
                color: #ccd6e8;
            }

            .vt-live-check-icon {
                color: var(--rv-primary);
                font-size: 1rem;
                font-weight: 700;
                flex-shrink: 0;
                line-height: 1;
            }

            .vt-live-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 13px 28px;
                background: transparent;
                border: 1.5px solid #ffffff;
                border-radius: 8px;
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.9rem;
                font-weight: 700;
                color: #ffffff;
                cursor: pointer;
                text-decoration: none;
                transition: background 0.18s ease, color 0.18s ease;
                white-space: nowrap;
            }

            .vt-live-btn:hover {
                background: rgba(255, 255, 255, 0.08);
            }

            /* ── Right Column ── */
            .vt-live-right {
                flex: 0 0 52%;
                max-width: 52%;
            }

            .vt-live-image-wrap {
                width: 100%;
                border-radius: 14px;
                overflow: hidden;
                border: 1px solid rgba(255, 255, 255, 0.08);
                box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
                background: #111e2f;
            }

            .vt-live-image-wrap img,
            .vt-live-image-wrap video {
                width: 100%;
                height: auto;
                display: block;
            }

            /* ── Responsive ── */
            @media (max-width: 900px) {
                .vt-live-inner {
                    flex-direction: column;
                    gap: 40px;
                }

                .vt-live-left,
                .vt-live-right {
                    flex: 0 0 100%;
                    max-width: 100%;
                }

                .vt-live-heading {
                    font-size: 1.75rem;
                }
            }

            @media (max-width: 560px) {
                .vt-live-section {
                    padding: 56px 20px;
                }

                .vt-live-heading {
                    font-size: 1.5rem;
                }

                .vt-live-desc {
                    font-size: 0.875rem;
                }
            }

            /* ══════════════ COMPARISON SECTION ══════════════ */
            .vt-comparison-section {
                width: 100%;
                background: #ffffff;
                padding: 80px 40px;
                box-sizing: border-box;
            }

            .vt-comparison-inner {
                max-width: 1100px;
                margin: 0 auto;
            }

            .vt-comparison-head {
                text-align: center;
                margin-bottom: 48px;
                padding: 0 20px;
            }

            .vt-comparison-eyebrow {
                display: block;
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.65rem;
                font-weight: 700;
                color: var(--rv-primary);
                letter-spacing: 0.15em;
                text-transform: uppercase;
                margin-bottom: 16px;
                text-align: center;
            }

            .vt-comparison-title {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 2.45rem;
                font-weight: 800;
                color: var(--rv-ink);
                line-height: 1.18;
                margin: 0 0 18px;
                letter-spacing: -0.025em;
                text-align: center;
                white-space: nowrap;
            }

            .vt-comparison-sub {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.95rem;
                font-weight: 400;
                color: var(--rv-muted);
                line-height: 1.65;
                margin: 0 auto;
                max-width: 500px;
                text-align: center;
            }

            /* Scroll wrapper for mobile */
            .vt-comparison-scroll {
                width: 88%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                border-radius: 12px;
            }

            /* Table wrapper — matches blog post table style */
            .vt-comparison-table-wrap {
                width: 100%;
                border-radius: 16px;
                overflow: hidden;
                border: 1.5px solid var(--rv-border);
                box-shadow: 0 4px 24px rgba(22, 22, 29, .07), 0 1px 4px rgba(22, 22, 29, .04);
                background: #fff;
                overflow-x: auto;
            }

            .vt-comparison-table {
                width: 100%;
                min-width: 600px;
                border-collapse: collapse;
                table-layout: fixed;
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: .925rem;
                min-width: 620px;
                border-radius: 16px;
                overflow: hidden;
            }

            /* ── Header row ── */
            .vt-comparison-table thead tr {
                background: var(--rv-primary);
            }

            .vt-comparison-table thead th {
                padding: 16px 18px;
                height: 52px;
                font-size: .72rem;
                font-weight: 700;
                color: #ffffff;
                text-align: center;
                text-transform: uppercase;
                letter-spacing: .09em;
                border: none;
                white-space: normal;
                overflow: hidden;
                position: relative;
            }

            .vt-comparison-table thead th:not(:last-child)::after {
                content: '';
                position: absolute;
                right: 0;
                top: 20%;
                bottom: 20%;
                width: 1px;
                background: rgba(255, 255, 255, .25);
            }

            .vt-comparison-table thead th:first-child {
                text-align: left;
                padding-left: 22px;
                width: 18%;
            }

            .vt-comparison-table thead th.th-revideo {
                width: 21%;
            }

            .vt-comparison-table thead th:not(:first-child):not(.th-revideo) {
                width: 20.3%;
            }

            /* ── Body rows ── */
            .vt-comparison-table tbody td {
                padding: 16px 18px;
                height: 52px;
                font-size: 0.875rem;
                color: var(--rv-body);
                font-weight: 500;
                text-align: center;
                vertical-align: middle;
                line-height: 1.55;
                border-bottom: 1px solid #e8edf4;
                transition: background .14s, color .14s;
            }

            .vt-comparison-table tbody tr:nth-child(even) td {
                background: var(--rv-surface-2);
            }

            .vt-comparison-table tbody tr:last-child td {
                border-bottom: none;
            }

            .vt-comparison-table tbody tr:hover td {
                background: var(--rv-surface-4);
                color: var(--rv-ink);
            }

            .vt-comparison-table tbody td:first-child {
                text-align: left;
                font-weight: 600;
                color: var(--rv-ink);
                padding-left: 22px;
            }

            /* ── Icon / value styles — circular chips like blog tables ── */
            .vt-check-yes {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: var(--rv-success-wash);
                color: var(--rv-success-deep);
                font-size: .8rem;
                font-weight: 700;
                line-height: 1;
            }

            .vt-check-no {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: #fee2e2;
                color: var(--rv-danger);
                font-size: .8rem;
                font-weight: 600;
                line-height: 1;
            }

            [data-theme="dark"] .vt-check-yes {
                background: #052e16;
                color: var(--rv-success-soft);
            }

            [data-theme="dark"] .vt-check-no {
                background: #450a0a;
                color: #f87171;
            }

            .vt-check-paid {
                display: inline-block;
                color: var(--rv-warning);
                font-size: 0.82rem;
                font-weight: 700;
            }

            .vt-check-cyan {
                display: inline-block;
                color: var(--rv-primary);
                font-size: 0.85rem;
                font-weight: 700;
            }

            /* ── Responsive ── */
            @media (max-width: 820px) {
                .vt-comparison-title {
                    white-space: normal;
                    font-size: 1.85rem;
                }
            }

            @media (max-width: 768px) {
                .vt-comparison-section {
                    padding: 56px 16px;
                }

                .vt-comparison-scroll {
                    width: 100%;
                }

                .vt-comparison-title {
                    font-size: 1.55rem;
                }

                .vt-comparison-sub {
                    font-size: 0.875rem;
                }

                .vt-comparison-table thead th,
                .vt-comparison-table tbody td {
                    padding: 11px 8px;
                    font-size: 0.72rem;
                }

                .vt-comparison-table tbody td:first-child,
                .vt-comparison-table thead th:first-child {
                    padding-left: 12px;
                }
            }

            @media (max-width: 480px) {
                .vt-comparison-title {
                    font-size: 1.3rem;
                }

                .vt-comparison-head {
                    padding: 0;
                }
            }

            /* ══════════════ SEARCH COVERAGE SECTION ══════════════ */
            .vt-coverage-section {
                width: 100%;
                background: var(--rv-ink-panel);
                padding: 90px 40px;
                box-sizing: border-box;
            }

            .vt-coverage-inner {
                max-width: 1100px;
                margin: 0 auto;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 64px;
            }

            /* ── Left Column ── */
            .vt-coverage-left {
                flex: 0 0 44%;
                max-width: 44%;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }

            .vt-coverage-eyebrow {
                display: inline-block;
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.62rem;
                font-weight: 700;
                color: var(--rv-primary-soft);
                letter-spacing: 0.16em;
                text-transform: uppercase;
                margin-bottom: 16px;
            }

            .vt-coverage-heading {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 2.6rem;
                font-weight: 800;
                color: #ffffff;
                line-height: 1.18;
                margin: 0 0 24px;
                letter-spacing: -0.025em;
            }

            .vt-coverage-desc {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.9rem;
                font-weight: 400;
                color: #7a8fa8;
                line-height: 1.75;
                margin: 0 0 16px;
            }

            .vt-coverage-desc:last-of-type {
                margin-bottom: 28px;
            }

            /* Advantage card */
            .vt-advantage-card {
                width: 100%;
                background: #111e30;
                border: 1px solid rgba(255, 255, 255, 0.07);
                border-top: 2px solid var(--rv-primary-soft);
                border-radius: 10px;
                padding: 20px 24px;
                box-sizing: border-box;
            }

            .vt-advantage-label {
                display: block;
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.58rem;
                font-weight: 700;
                color: var(--rv-primary-soft);
                letter-spacing: 0.16em;
                text-transform: uppercase;
                margin-bottom: 10px;
            }

            .vt-advantage-text {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.9rem;
                font-weight: 700;
                color: #ffffff;
                line-height: 1.55;
                margin: 0;
                text-align: center;
            }

            /* ── Right Column ── */
            .vt-coverage-right {
                flex: 0 0 50%;
                max-width: 50%;
            }

            .vt-platform-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }

            .vt-platform-card {
                background: #111e30;
                border: 1px solid rgba(255, 255, 255, 0.07);
                border-radius: 12px;
                padding: 22px 16px 18px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                gap: 8px;
                transition: border-color 0.18s ease, background 0.18s ease;
            }

            .vt-platform-card:hover {
                border-color: rgba(255, 255, 255, 0.15);
                background: #162035;
            }

            .vt-platform-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 4px;
                line-height: 1;
            }

            .vt-platform-icon svg {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                display: block;
            }

            .vt-platform-name {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.875rem;
                font-weight: 700;
                color: #ffffff;
                line-height: 1.2;
                margin: 0;
            }

            .vt-platform-sub {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.7rem;
                font-weight: 400;
                color: #8fa5be;
                line-height: 1.4;
                margin: 0;
            }

            /* ── Responsive ── */
            @media (max-width: 820px) {
                .vt-coverage-inner {
                    flex-direction: column;
                    gap: 48px;
                }

                .vt-coverage-left,
                .vt-coverage-right {
                    flex: 0 0 100%;
                    max-width: 100%;
                }

                .vt-coverage-heading {
                    font-size: 2rem;
                }
            }

            @media (max-width: 560px) {
                .vt-coverage-section {
                    padding: 60px 20px;
                }

                .vt-coverage-heading {
                    font-size: 1.65rem;
                }

                .vt-platform-grid {
                    gap: 8px;
                }

                .vt-platform-card {
                    padding: 18px 12px 14px;
                }
            }

            .vt-testimonials-section {
                width: 100%;
                background: white;
                padding: 90px 40px;
                box-sizing: border-box;
            }

            .vt-testimonials-inner {
                max-width: 1100px;
                margin: 0 auto;
            }

            /* ── Head ── */
            .vt-testimonials-head {
                text-align: center;
                margin-bottom: 52px;
            }

            .vt-testimonials-eyebrow {
                display: block;
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.62rem;
                font-weight: 700;
                color: var(--rv-primary-soft);
                letter-spacing: 0.16em;
                text-transform: uppercase;
                margin-bottom: 14px;
            }

            .vt-testimonials-title {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 2.4rem;
                font-weight: 800;
                color: #ffffff;
                line-height: 1.18;
                margin: 0 0 14px;
                letter-spacing: -0.025em;
            }

            .vt-testimonials-sub {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.9rem;
                font-weight: 400;
                color: #7a8fa8;
                line-height: 1.6;
                margin: 0;
            }

            /* ── Cards grid ── */
            .vt-testimonials-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 14px;
            }

            /* ── Single card ── */
            .vt-tcard {
                background: white;
                border: 1px solid #e2e5f0;
                border-radius: 12px;
                padding: 28px 26px 24px;
                display: flex;
                flex-direction: column;
                gap: 0;
                box-sizing: border-box;
                transform: translateY(0px);
                transition: opacity 0.45s, transform 0.45s;
            }

            .vt-tcard:hover {
                box-shadow: var(--shadow);
            }

            /* Stars */
            .vt-tcard-stars {
                display: flex;
                align-items: center;
                gap: 3px;
                margin-bottom: 16px;
            }

            .vt-tcard-stars span {
                color: var(--rv-warning);
                font-size: 1rem;
                line-height: 1;
            }

            /* Quote */
            .vt-tcard-quote {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.875rem;
                font-weight: 400;
                font-style: italic;
                color: var(--rv-ink);
                line-height: 1.68;
                margin: 0 0 22px;
                flex: 1;
            }

            /* CSS-injected curly quotes — works whether value is plain text or <p>HTML</p> */
            .vt-tcard-quote::before {
                content: '\201C';
            }

            .vt-tcard-quote::after {
                content: '\201D';
            }

            /* When value is wrapped in a <p>, keep the quotes glued to the text */
            .vt-tcard-quote p {
                display: inline;
                font-style: inherit;
            }

            /* Divider */
            .vt-tcard-divider {
                width: 100%;
                height: 1px;
                background: rgba(255, 255, 255, 0.07);
                margin-bottom: 18px;
            }

            /* Author row */
            .vt-tcard-author {
                display: flex;
                align-items: center;
                gap: 11px;
            }

            .vt-tcard-avatar {
                width: 38px;
                height: 38px;
                min-width: 38px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.72rem;
                font-weight: 700;
                color: #ffffff;
                letter-spacing: 0.02em;
                flex-shrink: 0;
            }

            .vt-tcard-avatar--purple {
                background: var(--rv-primary);
            }

            .vt-tcard-avatar--blue {
                background: var(--rv-primary-deep);
            }

            .vt-tcard-avatar--teal {
                background: #0f766e;
            }

            .vt-tcard-info {
                display: flex;
                flex-direction: column;
                gap: 3px;
            }

            .vt-tcard-name {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.875rem;
                font-weight: 700;
                color: var(--rv-ink);
                line-height: 1.2;
                margin: 0;
            }

            .vt-tcard-role {
                font-family: var(--font-h, 'Plus Jakarta Sans', 'Inter', sans-serif);
                font-size: 0.74rem;
                font-weight: 400;
                color: var(--rv-ink);
                line-height: 1.2;
                margin: 0;
            }

            /* ── Responsive ── */
            @media (max-width: 900px) {
                .vt-testimonials-grid {
                    grid-template-columns: 1fr;
                    gap: 12px;
                }

                .vt-testimonials-title {
                    font-size: 1.85rem;
                }
            }

            @media (max-width: 560px) {
                .vt-testimonials-section {
                    padding: 60px 20px;
                }

                .vt-testimonials-title {
                    font-size: 1.5rem;
                }

                .vt-testimonials-sub {
                    font-size: 0.85rem;
                }

                .vt-tcard {
                    padding: 22px 20px 20px;
                }
            }

            /* ══════════════ LATEST BLOGS SECTION ══════════════ */
            .vt-blogs-section {
                padding: 90px 24px;
                background: var(--white);
            }

            .vt-blogs-inner {
                max-width: 1100px;
                margin: 0 auto;
            }

            .vt-blogs-head {
                text-align: center;
                margin-bottom: 52px;
            }

            .vt-blogs-eyebrow {
                display: inline-block;
                font-size: 0.65rem;
                font-weight: 700;
                color: var(--blue);
                letter-spacing: 0.15em;
                text-transform: uppercase;
                margin-bottom: 14px;
            }

            .vt-blogs-title {
                font-family: var(--font-h);
                font-size: 2.2rem;
                font-weight: 800;
                color: var(--text);
                letter-spacing: -0.03em;
                margin: 0 0 14px;
            }

            .vt-blogs-sub {
                font-size: 1rem;
                color: var(--muted);
                max-width: 480px;
                margin: 0 auto;
            }

            .vt-blogs-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 28px;
                margin-bottom: 48px;
            }

            .vt-blog-card {
                background: var(--white);
                border: 1.5px solid var(--border);
                border-radius: 16px;
                overflow: hidden;
                text-decoration: none;
                color: inherit;
                display: flex;
                flex-direction: column;
                transition: border-color .2s, box-shadow .2s, transform .2s;
                box-shadow: var(--shadow-sm);
            }

            .vt-blog-card:hover {
                border-color: var(--blue);
                box-shadow: var(--shadow-lg);
                transform: translateY(-4px);
            }

            .vt-blog-card-img {
                width: 100%;
                aspect-ratio: 16/9;
                overflow: hidden;
                background: var(--bg2);
                flex-shrink: 0;
            }

            .vt-blog-card-img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform .3s;
            }

            .vt-blog-card:hover .vt-blog-card-img img {
                transform: scale(1.04);
            }

            .vt-blog-card-img-placeholder {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--blue-light);
            }

            .vt-blog-card-img-placeholder svg {
                width: 40px;
                height: 40px;
                color: var(--blue);
                opacity: .4;
            }

            .vt-blog-card-body {
                padding: 22px 24px 24px;
                display: flex;
                flex-direction: column;
                flex: 1;
            }

            .vt-blog-card-cat {
                display: inline-block;
                font-size: .68rem;
                font-weight: 700;
                letter-spacing: .08em;
                text-transform: uppercase;
                color: var(--blue);
                background: var(--blue-light);
                border-radius: 99px;
                padding: 3px 10px;
                margin-bottom: 12px;
                width: fit-content;
            }

            .vt-blog-card-title {
                font-family: var(--font-h);
                font-size: 1.05rem;
                font-weight: 700;
                color: var(--text);
                line-height: 1.4;
                margin: 0 0 10px;
                letter-spacing: -.02em;
            }

            .vt-blog-card-excerpt {
                font-size: .865rem;
                color: var(--muted);
                line-height: 1.6;
                margin: 0 0 auto;
                padding-bottom: 16px;
            }

            .vt-blog-card-meta {
                display: flex;
                align-items: center;
                gap: 5px;
                font-size: .775rem;
                color: var(--muted2);
                padding-top: 14px;
                border-top: 1px solid var(--border);
                flex-wrap: wrap;
            }

            .vt-blog-card-author {
                color: var(--muted);
                font-weight: 600;
            }

            .vt-blog-card-dot {
                color: var(--border2);
            }

            .vt-blogs-footer {
                text-align: center;
            }

            .vt-blogs-btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 11px 28px;
                border-radius: 10px;
                border: 1.5px solid var(--border2);
                background: var(--white);
                color: var(--text2);
                font-size: .9rem;
                font-weight: 600;
                font-family: var(--font-h);
                text-decoration: none;
                transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
            }

            .vt-blogs-btn svg {
                width: 16px;
                height: 16px;
                transition: transform .18s;
            }

            .vt-blogs-btn:hover {
                border-color: var(--blue);
                color: var(--blue);
                background: var(--blue-light);
                box-shadow: var(--shadow);
            }

            .vt-blogs-btn:hover svg {
                transform: translateX(4px);
            }

            @media (max-width: 900px) {
                .vt-blogs-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            @media (max-width: 560px) {
                .vt-blogs-section {
                    padding: 60px 20px;
                }

                .vt-blogs-grid {
                    grid-template-columns: 1fr;
                }

                .vt-blogs-title {
                    font-size: 1.6rem;
                }
            }

            /* Dark mode */
            [data-theme="dark"] .vt-blogs-section {
                background: var(--rv-page);
            }

            [data-theme="dark"] .vt-blog-card {
                background: var(--white);
                border-color: var(--border);
            }

            [data-theme="dark"] .vt-blog-card:hover {
                border-color: var(--blue);
            }

            [data-theme="dark"] .vt-blog-card-img {
                background: var(--bg2);
            }

            [data-theme="dark"] .vt-blog-card-img-placeholder {
                background: var(--blue-light);
            }

            [data-theme="dark"] .vt-blog-card-title {
                color: var(--text);
            }

            [data-theme="dark"] .vt-blog-card-excerpt {
                color: var(--muted);
            }

            [data-theme="dark"] .vt-blog-card-meta {
                border-top-color: var(--border);
            }

            [data-theme="dark"] .vt-blog-card-cat {
                background: var(--blue-light);
                color: var(--blue);
            }

            [data-theme="dark"] .vt-blogs-btn {
                background: var(--bg);
                border-color: var(--border2);
                color: var(--text2);
            }

            [data-theme="dark"] .vt-blogs-btn:hover {
                background: var(--blue-light);
                border-color: var(--blue);
                color: var(--blue);
            }

            /* ══════════════ DARK MODE OVERRIDES ══════════════ */
            /* mode-panel/search-modes-wrap/mode-input/mode-panel-title/mode-hint/
                                       url-paste-btn/vt-consent-*/
            vt-loader-* → main.css */ [data-theme="dark"] .platform-chip {
                background: var(--bg);
                border-color: var(--border);
                color: var(--text2);
            }

            /* Alert modal dark mode → main.css */
            /* Captcha modal dark mode → main.css */

            /* Live example section */
            [data-theme="dark"] .vt-live-section {
                background: var(--bg) !important;
            }

            [data-theme="dark"] .vt-live-image-wrap {
                background: var(--bg2);
                border-color: var(--border);
            }

            /* Comparison section */
            [data-theme="dark"] .vt-comparison-section {
                background: var(--rv-page) !important;
            }

            [data-theme="dark"] .vt-comparison-title {
                color: var(--text) !important;
            }

            [data-theme="dark"] .vt-comparison-sub {
                color: var(--muted) !important;
            }

            [data-theme="dark"] .vt-comparison-table-wrap {
                background: var(--rv-surface);
                border-color: var(--rv-border);
                box-shadow: 0 4px 24px rgba(0, 0, 0, .45);
            }

            [data-theme="dark"] .vt-comparison-table thead tr {
                background: var(--rv-primary-deep) !important;
            }

            [data-theme="dark"] .vt-comparison-table thead th {
                color: #ffffff !important;
            }

            [data-theme="dark"] .vt-comparison-table tbody td {
                border-color: var(--rv-surface-3) !important;
                color: #b6c4d8 !important;
            }

            [data-theme="dark"] .vt-comparison-table tbody td:first-child {
                color: var(--rv-ink) !important;
            }

            [data-theme="dark"] .vt-comparison-table tbody tr:nth-child(odd) td {
                background: var(--rv-surface) !important;
            }

            [data-theme="dark"] .vt-comparison-table tbody tr:nth-child(even) td {
                background: var(--rv-surface-2) !important;
            }

            [data-theme="dark"] .vt-comparison-table tbody tr:hover td {
                background: var(--rv-surface-2) !important;
                color: var(--rv-ink) !important;
            }

            /* Coverage section */
            [data-theme="dark"] .vt-coverage-section {
                background: var(--white) !important;
            }

            [data-theme="dark"] .vt-coverage-heading {
                color: var(--text) !important;
            }

            [data-theme="dark"] .vt-coverage-desc {
                color: var(--muted) !important;
            }

            [data-theme="dark"] .vt-advantage-card {
                background: var(--bg) !important;
                border-color: var(--border) !important;
            }

            [data-theme="dark"] .vt-advantage-label {
                color: var(--text) !important;
            }

            [data-theme="dark"] .vt-advantage-text {
                color: var(--muted) !important;
            }

            [data-theme="dark"] .vt-platform-card {
                background: var(--bg) !important;
                border-color: var(--border) !important;
            }

            [data-theme="dark"] .vt-platform-name {
                color: var(--text) !important;
            }

            [data-theme="dark"] .vt-platform-sub {
                color: var(--muted) !important;
            }

            /* Testimonials section */
            [data-theme="dark"] .vt-testimonials-section {
                background: var(--rv-page) !important;
            }

            [data-theme="dark"] .vt-testimonials-title {
                color: var(--text) !important;
            }

            [data-theme="dark"] .vt-testimonials-sub {
                color: var(--muted) !important;
            }

            [data-theme="dark"] .vt-tcard {
                background: var(--white) !important;
                border-color: var(--border) !important;
            }

            [data-theme="dark"] .vt-tcard-quote p {
                color: var(--text2) !important;
            }

            [data-theme="dark"] .vt-tcard-name {
                color: var(--text) !important;
            }

            [data-theme="dark"] .vt-tcard-role {
                color: var(--muted) !important;
            }

            [data-theme="dark"] .vt-tcard-divider {
                background: var(--border) !important;
            }

            /* Features / how-it-works sections */
            [data-theme="dark"] .vt-features-section,
            [data-theme="dark"] .vt-how-section,
            [data-theme="dark"] .vt-trust-section {
                background: var(--white) !important;
            }

            [data-theme="dark"] [class*="-section"] {
                background: var(--white);
            }

            /* Inline button overrides (hardcoded white bg in blade) */
            [data-theme="dark"] a[style*="background:white"],
            [data-theme="dark"] a[style*="background: white"] {
                background: var(--bg) !important;
                color: var(--blue) !important;
                border-color: var(--border2) !important;
            }

            .dc-banner-wrap {
                display: flex;
                justify-content: center;
                padding-bottom: 8px;
                padding-left: 12px;
                padding-right: 12px;
                padding-top: 13px;
            }

            .dc-pill {
                display: inline-flex;
                align-items: center;
                gap: 0;
                padding: 7px 8px 7px 7px;
                border-radius: 999px;
                border: 1.5px solid var(--rv-primary-pale);
                background: #fff;
                box-shadow: 0 2px 12px rgba(88, 101, 242, 0.12);
                text-decoration: none;
                transition: box-shadow .2s, border-color .2s, transform .15s;
                max-width: 100%;
                min-width: 0;
            }

            .dc-pill:hover {
                box-shadow: 0 8px 28px rgba(88, 101, 242, 0.22);
                border-color: #818cf8;
                transform: translateY(-2px);
            }

            .dc-pill-icon {
                flex-shrink: 0;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #5865f2;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                margin-right: 14px;
                box-shadow: 0 2px 8px rgba(88, 101, 242, 0.35);
            }

            .dc-pill-text {
                font-size: .875rem;
                font-weight: 500;
                color: var(--rv-body);
                letter-spacing: -.01em;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .dc-pill-divider {
                width: 1px;
                height: 20px;
                background: var(--rv-primary-pale);
                margin: 0 16px;
                flex-shrink: 0;
            }

            .dc-pill-action {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: .875rem;
                font-weight: 700;
                color: #fff;
                letter-spacing: -.01em;
                background: var(--rv-primary);
                padding: 8px 16px;
                border-radius: 999px;
                white-space: nowrap;
            }

            /* Dark theme */
            [data-theme="dark"] .dc-pill {
                background: var(--rv-ink-panel);
                border-color: var(--rv-primary);
                box-shadow: 0 2px 12px rgba(88, 101, 242, 0.2);
            }

            [data-theme="dark"] .dc-pill:hover {
                border-color: #818cf8;
                box-shadow: 0 8px 28px rgba(88, 101, 242, 0.35);
            }

            [data-theme="dark"] .dc-pill-text {
                color: var(--rv-muted);
            }

            [data-theme="dark"] .dc-pill-divider {
                background: var(--rv-primary);
            }

            [data-theme="dark"] .dc-pill-action {
                color: #fff;
                background: var(--rv-primary);
            }

            @media (max-width: 480px) {
                .dc-pill {
                    padding: 5px 6px 5px 5px;
                }

                .dc-pill-icon {
                    width: 32px;
                    height: 32px;
                    margin-right: 8px;
                }

                .dc-pill-text {
                    font-size: .75rem;
                }

                .dc-pill-divider {
                    margin: 0 8px;
                }

                .dc-pill-action {
                    font-size: .78rem;
                    padding: 6px 10px;
                    gap: 4px;
                }
            }

            @media (max-width: 360px) {
                .dc-pill-text {
                    display: none;
                }

                .dc-pill-divider {
                    display: none;
                }
            }

            /* ═══════════════════════════════════════════════════════════════
                           "How It Works" SEO/CMS content — $toolContent['content']['value']
                           Rich text from the admin's WYSIWYG editor, rendered via the same
                           premium typography system used for blog posts (.sp-content in
                           resources/views/home/pages/blog/show.blade.php), forked here so
                           this page has no dependency on the blog view — headings, lists,
                           links, blockquotes, code, tables, images, and a self-building FAQ
                           accordion for the "questions answered" list pattern the editor
                           emits.
                        ═══════════════════════════════════════════════════════════════ */
            .sp-content {
                font-family: var(--font-b);
                font-size: 1.025rem;
                color: var(--text2);
                line-height: 1.88;
                overflow-wrap: break-word;
                word-break: break-word;
                min-width: 0;
            }

            /* ── Headings ── */
            .sp-content h1,
            .sp-content h2,
            .sp-content h3,
            .sp-content h4,
            .sp-content h5,
            .sp-content h6 {
                font-family: var(--font-h);
                color: var(--text);
                letter-spacing: -.03em;
                line-height: 1.2;
                margin: 1.4em 0 .75em;
                scroll-margin-top: calc(var(--nav-height, 64px) + 16px);
            }

            .sp-content h1 {
                font-size: 1.95rem;
                font-weight: 800;
                border-bottom: 2px solid var(--border);
                padding-bottom: .4em;
            }

            .sp-content h2 {
                font-size: 1.45rem;
                font-weight: 800;
                padding-bottom: .45em;
                border-bottom: 1.5px solid var(--border);
                display: flex;
                align-items: flex-start;
                gap: 10px;
            }

            .sp-content h2::before {
                content: '';
                display: inline-block;
                width: 4px;
                height: 1.2em;
                background: linear-gradient(180deg, var(--blue) 0%, var(--rv-primary-bright) 100%);
                border-radius: 3px;
                flex-shrink: 0;
                margin-bottom: -1px;
            }

            .sp-content h3 {
                font-size: 1.18rem;
                font-weight: 700;
                color: var(--text);
                display: flex;
                align-items: flex-start;
                gap: 9px;
            }

            .sp-content h3::before {
                content: '';
                display: inline-block;
                width: 3px;
                height: 1em;
                background: linear-gradient(180deg, var(--blue) 0%, var(--rv-primary-bright) 100%);
                border-radius: 2px;
                flex-shrink: 0;
                opacity: .6;
            }

            /* Headings nested inside a <li> (ul/ol) — the editor sometimes wraps
                           a list item's text in <h1>-<h6>. Their block margins + flex layout
                           + decorative::before bar blow the list item up into a huge empty
                           box with the number/bullet floating alone at top. Render them as
                           plain inline bold text flowing next to the bullet/number instead. */
            .sp-content li h1,
            .sp-content li h2,
            .sp-content li h3,
            .sp-content li h4,
            .sp-content li h5,
            .sp-content li h6 {
                display: inline;
                margin: 0;
                padding: 0;
                font-size: inherit;
                font-weight: 700;
                color: inherit;
                line-height: inherit;
                border: none !important;
                background: none !important;
            }

            .sp-content li h1::before,
            .sp-content li h2::before,
            .sp-content li h3::before,
            .sp-content li h4::before,
            .sp-content li h5::before,
            .sp-content li h6::before {
                content: none !important;
            }

            .sp-content h4 {
                font-size: 1.02rem;
                font-weight: 700;
                color: var(--text);
                padding-left: 14px;
                border-left: 3px solid var(--blue-mid);
                margin-left: 0;
            }

            .sp-content h5 {
                font-size: .82rem;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: .1em;
                color: var(--blue);
                background: var(--blue-light);
                border: 1px solid var(--blue-mid);
                border-radius: 6px;
                display: inline-block;
                padding: 4px 12px;
                margin-bottom: .6em;
            }

            .sp-content h6 {
                font-family: var(--font-h);
                font-size: .82rem;
                font-weight: 700;
                color: var(--muted);
                letter-spacing: .04em;
                text-transform: uppercase;
                margin: 1.8em 0 .5em;
                line-height: 1.3;
            }

            /* ── Paragraphs ── */
            .sp-content p {
                margin: 0 0 1em;
            }

            .sp-content>*+* {
                margin-top: 0;
            }

            /* ── Links ── */
            .sp-content a {
                color: var(--blue);
                text-decoration: none;
                background-image: linear-gradient(var(--blue), var(--blue));
                background-size: 0 1.5px;
                background-repeat: no-repeat;
                background-position: 0 100%;
                font-weight: 600;
                transition: background-size .25s ease, color .15s;
            }

            .sp-content a:hover {
                color: var(--blue-dark);
                background-size: 100% 1.5px;
            }

            /* ── Strong / em ── */
            .sp-content strong {
                color: var(--text);
                font-weight: 700;
            }

            .sp-content thead strong {
                color: #fff;
            }

            .sp-content em {
                color: var(--text2);
                font-style: italic;
            }

            /* ── Unordered lists ── */
            .sp-content ul {
                list-style: none;
                margin: 0 0 1.75em;
                padding: 0;
            }

            .sp-content ul li {
                position: relative;
                padding: 5px 0 5px 28px;
                color: var(--text2);
                line-height: 1.7;
                margin: 0;
            }

            .sp-content ul li::before {
                content: '';
                position: absolute;
                left: 0;
                top: 14px;
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--blue) 0%, var(--rv-primary-bright) 100%);
                box-shadow: 0 0 0 3px var(--blue-light);
            }

            .sp-content ul ul {
                margin: 6px 0 6px 12px;
            }

            .sp-content ul ul li::before {
                width: 5px;
                height: 5px;
                background: var(--muted2);
                box-shadow: none;
                top: 13px;
            }

            /* ── Ordered lists ── */
            .sp-content ol {
                list-style: none;
                margin: 0 0 1.75em;
                padding: 0;
                counter-reset: sp-ol;
            }

            .sp-content ol li {
                position: relative;
                padding: 6px 0 6px 40px;
                color: var(--text2);
                line-height: 1.7;
                margin: 0;
                counter-increment: sp-ol;
            }

            .sp-content ol li::before {
                content: counter(sp-ol);
                position: absolute;
                left: 0;
                top: 7px;
                width: 24px;
                height: 24px;
                border-radius: 7px;
                background: var(--blue);
                color: #fff;
                font-size: .72rem;
                font-weight: 800;
                font-family: var(--font-h);
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
            }

            .sp-content ol ol {
                margin: 6px 0 6px 12px;
                counter-reset: sp-ol-sub;
            }

            .sp-content ol ol li {
                counter-increment: sp-ol-sub;
            }

            .sp-content ol ol li::before {
                content: counter(sp-ol-sub, lower-alpha);
                background: var(--bg2);
                color: var(--muted);
                font-size: .68rem;
            }

            /* ── Blockquote ── */
            .sp-content blockquote {
                position: relative;
                margin: 2.4em 0;
                padding: 28px 28px 28px 36px;
                background: linear-gradient(135deg, var(--blue-light) 0%, rgba(139, 92, 246, .04) 100%);
                border-radius: 0 16px 16px 0;
                border-left: 4px solid var(--blue);
                font-style: italic;
                color: var(--text2);
                font-size: 1.06rem;
                line-height: 1.75;
                overflow: hidden;
            }

            .sp-content blockquote::before {
                content: '\201C';
                position: absolute;
                top: -10px;
                right: 20px;
                font-size: 6rem;
                line-height: 1;
                color: var(--blue);
                opacity: .1;
                font-family: Georgia, serif;
                pointer-events: none;
            }

            .sp-content blockquote p {
                margin: 0;
            }

            .sp-content blockquote cite {
                display: block;
                margin-top: 12px;
                font-size: .82rem;
                font-style: normal;
                font-weight: 600;
                color: var(--muted);
                letter-spacing: .01em;
            }

            .sp-content blockquote cite::before {
                content: '— ';
            }

            /* ── Inline code ── */
            .sp-content code {
                background: var(--bg2);
                border: 1px solid var(--border);
                border-radius: 6px;
                padding: 2px 8px;
                font-size: .86em;
                font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
                color: var(--rv-primary-bright);
                font-weight: 500;
                white-space: nowrap;
            }

            /* ── Code blocks ── */
            .sp-content pre {
                position: relative;
                background: var(--rv-ink-panel);
                color: #e8e8f2;
                border-radius: 14px;
                padding: 24px 28px;
                overflow-x: auto;
                font-size: .87em;
                margin: 2em 0;
                line-height: 1.72;
                border: 1px solid rgba(255, 255, 255, .06);
                box-shadow: 0 8px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .04);
            }

            .sp-content pre::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: linear-gradient(90deg, var(--rv-primary), var(--rv-primary-bright), var(--rv-primary-soft));
                border-radius: 14px 14px 0 0;
            }

            .sp-content pre code {
                background: none;
                border: none;
                padding: 0;
                color: inherit;
                font-size: inherit;
                white-space: pre;
            }

            /* ── Images ── */
            .sp-content img {
                max-width: 100%;
                border-radius: 14px;
                margin: 2em 0;
                box-shadow: 0 8px 40px rgba(22, 22, 29, .14);
                display: block;
                border: 1px solid var(--border);
            }

            /* ── HR ── */
            .sp-content hr {
                border: none;
                margin: 3em 0;
                height: 1px;
                position: relative;
                background: transparent;
            }

            .sp-content hr::before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 80px;
                height: 2px;
                background: linear-gradient(90deg, transparent, var(--blue), var(--rv-primary-bright), transparent);
                border-radius: 2px;
            }

            .sp-content hr::after {
                content: '✦';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: var(--muted2);
                font-size: .7rem;
                background: var(--white);
                padding: 0 8px;
            }

            /* ── Tables ── */
            .sp-content .sp-table-wrap {
                overflow-x: auto;
                margin: 2.2em 0;
                border-radius: 16px;
                border: 1.5px solid var(--border);
                box-shadow: 0 4px 24px rgba(22, 22, 29, .07), 0 1px 4px rgba(22, 22, 29, .04);
                background: var(--white);
            }

            .sp-content table {
                width: 100%;
                border-collapse: collapse;
                font-size: .925rem;
                margin: 0;
                border-radius: 16px;
                overflow: hidden;
            }

            .sp-content thead tr {
                background: var(--rv-primary);
            }

            .sp-content th {
                padding: 16px 18px;
                height: 52px;
                text-align: center;
                font-family: var(--font-h);
                font-weight: 700;
                font-size: .72rem;
                color: #fff !important;
                text-transform: uppercase;
                letter-spacing: .09em;
                border-bottom: none;
                white-space: nowrap;
                position: relative;
                background: transparent !important;
            }

            .sp-content th:first-child {
                text-align: left;
            }

            .sp-content th:not(:last-child)::after {
                content: '';
                position: absolute;
                right: 0;
                top: 20%;
                bottom: 20%;
                width: 1px;
                background: rgba(255, 255, 255, .25);
            }

            .sp-content tr {
                vertical-align: middle;
            }

            .sp-content td {
                padding: 16px 18px;
                height: 52px;
                text-align: center;
                border-bottom: 1px solid var(--border);
                color: var(--text2);
                vertical-align: middle !important;
                line-height: 1.55;
                transition: background .14s, color .14s;
            }

            .sp-content td:first-child {
                text-align: left;
                font-weight: 600;
                color: var(--text);
            }

            .sp-content td p,
            .sp-content th p,
            .sp-content td h1,
            .sp-content td h2,
            .sp-content td h3,
            .sp-content td h4,
            .sp-content td h5,
            .sp-content td h6,
            .sp-content th h1,
            .sp-content th h2,
            .sp-content th h3,
            .sp-content th h4,
            .sp-content th h5,
            .sp-content th h6 {
                margin: 0 !important;
                padding: 0 !important;
                line-height: inherit;
                font-size: inherit;
                font-weight: inherit;
                color: inherit;
                display: inline;
                border: none !important;
            }

            .sp-content td h1::before,
            .sp-content td h2::before,
            .sp-content td h3::before,
            .sp-content th h1::before,
            .sp-content th h2::before,
            .sp-content th h3::before {
                content: none !important;
            }

            .sp-content tbody tr:last-child td {
                border-bottom: none;
            }

            .sp-content tbody tr:nth-child(even) td {
                background: var(--bg);
            }

            .sp-content tbody tr:hover td {
                background: var(--blue-light) !important;
                color: var(--text);
            }

            .sp-content thead tr:hover th {
                background: transparent !important;
            }

            /* Tables authored without a real <thead>/<th> — the JS below
                       promotes the first row to header styling via .sp-thead-row/
                       .sp-th (same pattern blog posts already use), otherwise a
                       plain first-row-of-<td>s table renders with no header
                       treatment at all — no blue bar, no wrap container, no
                       overflow scroll on narrow screens. */
            .sp-content tr.sp-thead-row {
                background: var(--rv-primary);
            }

            .sp-content td.sp-th {
                padding: 16px 18px;
                height: 52px;
                text-align: center;
                font-family: var(--font-h);
                font-weight: 700;
                font-size: .72rem;
                color: #fff !important;
                text-transform: uppercase;
                letter-spacing: .09em;
                border-bottom: none;
                white-space: nowrap;
                position: relative;
                background: transparent !important;
            }

            .sp-content td.sp-th:first-child {
                text-align: left;
            }

            .sp-content td.sp-th:not(:last-child)::after {
                content: '';
                position: absolute;
                right: 0;
                top: 20%;
                bottom: 20%;
                width: 1px;
                background: rgba(255, 255, 255, .25);
            }

            .sp-content tr.sp-thead-row:hover td.sp-th {
                background: transparent !important;
            }

            .sp-content tr.sp-thead-row:nth-child(even) td {
                background: transparent !important;
            }

            .sp-content thead strong,
            .sp-content .sp-thead-row strong {
                color: #fff;
            }

            /* ✓ / ✗ tick-cross styling inside cells */
            .sp-tbl-check {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                font-size: .8rem;
                font-weight: 700;
                flex-shrink: 0;
            }

            .sp-tbl-check--yes {
                background: var(--rv-success-wash);
                color: var(--rv-success-deep);
            }

            .sp-tbl-check--no {
                background: #fee2e2;
                color: var(--rv-danger);
            }

            @media (max-width: 640px) {
                .sp-content .sp-table-wrap {
                    border-radius: 12px;
                    margin: 1.6em 0;
                }

                .sp-content table {
                    font-size: .82rem;
                }

                .sp-content th,
                .sp-content td,
                .sp-content td.sp-th {
                    padding: 10px 12px;
                    white-space: normal;
                }

                .sp-content th,
                .sp-content td.sp-th {
                    font-size: .68rem;
                }
            }

            /* ── "Problem"/"Mistake" callout headings — auto-detected by JS ── */
            .sp-content h2.sp-problem-heading,
            .sp-content h3.sp-problem-heading {
                background: linear-gradient(135deg, var(--rv-danger-wash) 0%, #fff7ed 100%);
                border: 1.5px solid var(--rv-danger-pale);
                border-radius: 14px;
                padding: 14px 20px;
                color: var(--rv-danger);
            }

            .sp-content h2.sp-mistake-heading,
            .sp-content h3.sp-mistake-heading {
                background: linear-gradient(135deg, var(--rv-warning-wash) 0%, #fff7ed 100%);
                border: 1.5px solid var(--rv-warning-soft);
                border-radius: 14px;
                padding: 14px 20px;
                color: #92400e;
            }

            .sp-content .sp-problem-card {
                border: 1.5px solid var(--rv-danger-pale);
                border-radius: 16px;
                padding: 0 24px 26px;
                margin: 2.4em 0;
                background: var(--white);
                box-shadow: 0 6px 24px rgba(220, 38, 38, .07);
                overflow: hidden;
            }

            .sp-content .sp-mistake-card {
                border: 1.5px solid var(--rv-warning-soft);
                border-radius: 16px;
                padding: 0 24px 26px;
                margin: 2.4em 0;
                background: var(--white);
                box-shadow: 0 6px 24px rgba(217, 119, 6, .07);
                overflow: hidden;
            }

            .sp-content .sp-problem-card>.sp-problem-heading,
            .sp-content .sp-mistake-card>.sp-mistake-heading {
                margin: 0 -24px 20px;
                border: none;
                border-radius: 0;
            }

            .sp-content .sp-problem-card>.sp-problem-heading {
                border-bottom: 1.5px solid var(--rv-danger-pale);
            }

            .sp-content .sp-mistake-card>.sp-mistake-heading {
                border-bottom: 1.5px solid var(--rv-warning-soft);
            }

            .sp-content .sp-problem-card>*:first-child,
            .sp-content .sp-mistake-card>*:first-child {
                margin-top: 0 !important;
            }

            .sp-content .sp-problem-card>*:last-child,
            .sp-content .sp-mistake-card>*:last-child {
                margin-bottom: 0 !important;
            }

            /* ── FAQ accordion — built by JS from the numbered-list + heading +
                             answer pattern the rich-text editor emits under a Q&A section ── */
            .sp-content .sp-faq-list {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin: 1.6em 0 2em;
            }

            .sp-content .sp-faq-item {
                border: 1.5px solid var(--border);
                border-radius: 14px;
                background: var(--white);
                overflow: hidden;
                transition: border-color .2s, box-shadow .2s;
            }

            .sp-content .sp-faq-item.active {
                border-color: var(--blue-mid);
                box-shadow: 0 4px 20px rgba(109, 92, 230, .08);
            }

            .sp-content .sp-faq-q {
                display: flex;
                align-items: center;
                gap: 14px;
                width: 100%;
                padding: 16px 20px;
                background: none;
                border: none;
                text-align: left;
                cursor: pointer;
                font-family: inherit;
            }

            .sp-content .sp-faq-num {
                width: 28px;
                height: 28px;
                border-radius: 8px;
                background: var(--blue);
                color: #fff;
                font-family: var(--font-h);
                font-weight: 800;
                font-size: .8rem;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                transition: background .2s;
            }

            .sp-content .sp-faq-item.active .sp-faq-num {
                background: linear-gradient(135deg, var(--blue) 0%, var(--rv-primary-bright) 100%);
            }

            .sp-content .sp-faq-q-text {
                flex: 1;
                font-family: var(--font-h);
                font-weight: 700;
                font-size: 1rem;
                color: var(--text);
                line-height: 1.4;
            }

            .sp-content .sp-faq-chevron {
                width: 18px;
                height: 18px;
                color: var(--muted2);
                flex-shrink: 0;
                transition: transform .25s ease, color .2s;
            }

            .sp-content .sp-faq-item.active .sp-faq-chevron {
                transform: rotate(180deg);
                color: var(--blue);
            }

            .sp-content .sp-faq-a {
                max-height: 0;
                overflow: hidden;
                padding: 0 20px;
                transition: max-height .3s ease, padding .3s ease;
            }

            .sp-content .sp-faq-item.active .sp-faq-a {
                padding: 0 20px 26px 62px;
            }

            .sp-content .sp-faq-a p {
                margin: 0 0 .6em;
                color: var(--text2);
                font-size: .95rem;
                line-height: 1.75;
            }

            [data-theme="dark"] .sp-content .sp-table-wrap {
                background: var(--rv-surface);
                border-color: var(--rv-border);
                box-shadow: 0 4px 24px rgba(0, 0, 0, .45);
            }

            [data-theme="dark"] .sp-content thead tr,
            [data-theme="dark"] .sp-content tr.sp-thead-row {
                background: var(--rv-primary-deep);
            }

            [data-theme="dark"] .sp-content thead tr:hover th,
            [data-theme="dark"] .sp-content tr.sp-thead-row:hover td.sp-th {
                background: transparent !important;
            }

            [data-theme="dark"] .sp-content tr.sp-thead-row:nth-child(even) td {
                background: transparent !important;
            }

            [data-theme="dark"] .sp-content td {
                border-bottom-color: var(--rv-surface-3);
            }

            [data-theme="dark"] .sp-content tbody tr:nth-child(even) td {
                background: var(--rv-surface-2);
            }

            [data-theme="dark"] .sp-content tbody tr:hover td {
                background: var(--rv-surface-2);
                color: var(--rv-ink);
            }

            [data-theme="dark"] .sp-tbl-check--yes {
                background: #052e16;
                color: var(--rv-success-soft);
            }

            [data-theme="dark"] .sp-tbl-check--no {
                background: #450a0a;
                color: #f87171;
            }

            [data-theme="dark"] .sp-content thead strong,
            [data-theme="dark"] .sp-content .sp-thead-row strong {
                color: #fff;
            }

            [data-theme="dark"] .sp-content h2.sp-problem-heading,
            [data-theme="dark"] .sp-content h3.sp-problem-heading {
                background: linear-gradient(135deg, rgba(220, 38, 38, .12) 0%, rgba(249, 115, 22, .08) 100%);
                border-color: rgba(248, 113, 113, .35);
                color: #fca5a5;
            }

            [data-theme="dark"] .sp-content h2.sp-mistake-heading,
            [data-theme="dark"] .sp-content h3.sp-mistake-heading {
                background: linear-gradient(135deg, rgba(217, 119, 6, .14) 0%, rgba(249, 115, 22, .08) 100%);
                border-color: rgba(252, 211, 77, .35);
                color: var(--rv-warning-soft);
            }

            [data-theme="dark"] .sp-content .sp-problem-card,
            [data-theme="dark"] .sp-content .sp-mistake-card {
                background: var(--rv-surface);
            }

            [data-theme="dark"] .sp-content .sp-problem-card {
                box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
                border-color: rgba(248, 113, 113, .35);
            }

            [data-theme="dark"] .sp-content .sp-mistake-card {
                box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
                border-color: rgba(252, 211, 77, .35);
            }

            [data-theme="dark"] .sp-content .sp-problem-card>.sp-problem-heading {
                border-bottom-color: rgba(248, 113, 113, .35);
            }

            [data-theme="dark"] .sp-content .sp-mistake-card>.sp-mistake-heading {
                border-bottom-color: rgba(252, 211, 77, .35);
            }

            [data-theme="dark"] .sp-content .sp-faq-item {
                background: var(--rv-surface);
                border-color: var(--rv-border);
            }

            [data-theme="dark"] .sp-content .sp-faq-item.active {
                border-color: var(--rv-primary);
                box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
            }

            /* ═══════════════════════════════════════════════════════════
                       VIDEO-TO-FRAMES TOOL — self-contained, local-processing UI.
                       Prefixed vfe- (video-frame-extractor) so nothing here leans
                       on the reverse-video-search .tool-card/#search-container
                       component tree — this tool has completely different states
                       (no server round-trip, no captcha/quota) so it gets its own
                       small design system built from the site's shared tokens.
                       ═══════════════════════════════════════════════════════════ */
            /* Default: single centered column — just the tool box, same as
                       before any results exist. Once a frame lands, JS adds
                       .vfe-has-results and the layout expands into a sidebar
                       (settings) + results grid — see the media query far below
                       for the mobile collapse of that expanded state. */
            .vfe-wrap {
                display: flex;
                flex-direction: column;
                gap: 20px;
                max-width: 820px;
                margin: 28px auto 0;
            }

            .vfe-wrap.vfe-has-results {
                display: grid;
                grid-template-columns: 360px 1fr;
                max-width: 1180px;
                align-items: stretch;
            }

            .vfe-panel {
                background: var(--white);
                border: 1px solid var(--border);
                border-radius: 20px;
                box-shadow: var(--shadow);
                padding: 22px;
                box-sizing: border-box;
            }

            /* Site nav is position:sticky (65px tall on mobile) — without
                       this, "Start Over"'s scrollIntoView({block:'start'}) on
                       mobile lands the panel's top edge exactly under the nav,
                       clipping its heading. */
            #vfe-tool-box {
                scroll-margin-top: 80px;
            }

            /* ── Dropzone ── */
            .vfe-drop {
                border: 2px dashed var(--border2);
                border-radius: 16px;
                padding: 44px 20px;
                text-align: center;
                cursor: pointer;
                transition: border-color .2s ease, background .2s ease;
            }

            .vfe-drop:hover,
            .vfe-drop.vfe-dragover {
                border-color: var(--blue);
                background: var(--blue-light);
            }

            .vfe-drop-icon {
                width: 56px;
                height: 56px;
                margin: 0 auto 14px;
                border-radius: 16px;
                background: linear-gradient(135deg, var(--blue-light), var(--blue-mid));
                border: 1px solid var(--blue-mid);
                display: grid;
                place-items: center;
                color: var(--blue);
            }

            .vfe-drop-icon svg {
                width: 24px;
                height: 24px;
            }

            .vfe-drop-title {
                font-family: var(--font-h);
                font-size: 1rem;
                font-weight: 800;
                color: var(--text);
                margin: 0 0 4px;
            }

            .vfe-drop-sub {
                font-size: .85rem;
                color: var(--muted);
                margin: 0 0 16px;
            }

            .vfe-drop-sub strong {
                color: var(--blue);
            }

            /* ── Loaded state ── */
            .vfe-preview {
                position: relative;
                border-radius: 14px;
                overflow: hidden;
                background: var(--rv-ink-panel);
            }

            .vfe-preview video {
                width: 100%;
                max-height: 220px;
                display: block;
                background: var(--rv-ink-panel);
            }

            .vfe-preview-close {
                position: absolute;
                top: 8px;
                right: 8px;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                border: none;
                background: rgba(22, 22, 29, .6);
                color: #fff;
                font-size: .85rem;
                cursor: pointer;
                display: grid;
                place-items: center;
                backdrop-filter: blur(4px);
            }

            .vfe-preview-close:hover {
                background: rgba(22, 22, 29, .85);
            }

            .vfe-file-meta {
                display: flex;
                align-items: center;
                gap: 6px;
                margin: 10px 0 18px;
                font-size: .76rem;
                color: var(--muted);
                flex-wrap: wrap;
            }

            .vfe-file-meta svg {
                width: 13px;
                height: 13px;
                color: var(--blue);
                flex-shrink: 0;
            }

            .vfe-file-name {
                font-weight: 700;
                color: var(--text);
                max-width: 150px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .vfe-file-sep {
                color: var(--border2);
            }

            .vfe-section-label {
                font-size: .72rem;
                font-weight: 800;
                letter-spacing: .04em;
                text-transform: uppercase;
                color: var(--text2);
            }

            .vfe-label-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 10px;
            }

            /* ── Segmented controls ── */
            .vfe-seg {
                display: flex;
                background: var(--bg2);
                border-radius: 10px;
                padding: 3px;
                gap: 3px;
                margin-bottom: 16px;
            }

            .vfe-seg button {
                flex: 1;
                border: none;
                background: transparent;
                padding: 9px 8px;
                border-radius: 8px;
                font-family: var(--font-h);
                font-weight: 700;
                font-size: .82rem;
                color: var(--muted);
                cursor: pointer;
                transition: background .15s, color .15s, box-shadow .15s;
            }

            .vfe-seg button.active {
                background: var(--white);
                color: var(--blue);
                box-shadow: var(--shadow-sm);
            }

            /* ── Toggle switch ── */
            .vfe-switch {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                font-size: .8rem;
                font-weight: 700;
                color: var(--text2);
            }

            .vfe-switch input {
                position: absolute;
                width: 1px;
                height: 1px;
                opacity: 0;
            }

            .vfe-switch-track {
                width: 34px;
                height: 19px;
                border-radius: 999px;
                background: var(--border2);
                position: relative;
                transition: background .15s;
                flex-shrink: 0;
            }

            .vfe-switch-knob {
                position: absolute;
                top: 2px;
                left: 2px;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: #fff;
                transition: transform .15s;
                box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
            }

            .vfe-switch input:checked+.vfe-switch-track {
                background: var(--blue);
            }

            .vfe-switch input:checked+.vfe-switch-track .vfe-switch-knob {
                transform: translateX(15px);
            }

            /* ── Time range inputs ──
                       display lives on:not([hidden]) — see the .vfe-loader-overlay
                       comment above for why setting display directly here would
                       fight the `hidden` attribute once its ancestor becomes
                       visible. */
            .vfe-range-inputs:not([hidden]) {
                display: block;
                padding: 16px 16px 14px;
                background: var(--bg);
                border: 1px solid var(--border);
                border-radius: 14px;
                margin-bottom: 16px;
            }

            .vfe-range-drag-label {
                display: block;
                text-align: center;
                font-size: .64rem;
                font-weight: 700;
                letter-spacing: .08em;
                text-transform: uppercase;
                color: var(--muted2);
                margin-bottom: 14px;
            }

            /* ── Dual-thumb range slider (two overlaid <input type=range>,
                       pointer-events re-enabled only on the thumb via the
                       vendor pseudo-elements — the standard dual-range trick) ── */
            .vfe-range-slider {
                position: relative;
                height: 32px;
                margin: 0 16px 18px;
            }

            .vfe-range-track,
            .vfe-range-track-fill {
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                height: 6px;
                border-radius: 3px;
                transform: translateY(-50%);
            }

            .vfe-range-track {
                background: var(--border);
            }

            .vfe-range-track-fill {
                background: var(--blue);
                right: auto;
            }

            .vfe-range-thumb {
                position: absolute;
                top: 50%;
                left: -16px;
                width: calc(100% + 32px);
                margin: 0;
                transform: translateY(-50%);
                background: transparent;
                pointer-events: none;
                -webkit-appearance: none;
                appearance: none;
                /* Without this, starting a drag on the thumb on a touch
                           device gets interpreted as a page-scroll/pinch gesture
                           instead of a slider drag — the classic "slider doesn't
                           respond on mobile" symptom for custom-styled range
                           inputs. */
                touch-action: none;
            }

            .vfe-range-thumb::-webkit-slider-runnable-track {
                background: transparent;
                height: 6px;
            }

            .vfe-range-thumb::-moz-range-track {
                background: transparent;
                height: 6px;
            }

            /* Handles render as a filled circle with an inline "‹ ›" drag
                       glyph baked into the background image — native range thumbs
                       can't host child elements, so the glyph has to be an image. */
            .vfe-range-thumb::-webkit-slider-thumb {
                pointer-events: auto;
                -webkit-appearance: none;
                appearance: none;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background-color: var(--blue);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 4 12 9 18'/%3E%3Cpolyline points='15 6 20 12 15 18'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: center;
                background-size: 15px 15px;
                border: 3px solid var(--card, #fff);
                box-shadow: 0 2px 6px rgba(0, 0, 0, .22), 0 0 0 1px var(--border);
                cursor: grab;
                /* Chrome doesn't auto-center the thumb on the track like
                           Firefox does — without this it renders top-aligned to the
                           track instead of straddling it. -(thumb Ø incl. border −
                           track height) / 2 = -(38 − 6) / 2. */
                margin-top: -16px;
                transition: transform .12s ease;
            }

            .vfe-range-thumb::-moz-range-thumb {
                pointer-events: auto;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                background-color: var(--blue);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 4 12 9 18'/%3E%3Cpolyline points='15 6 20 12 15 18'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: center;
                background-size: 13px 13px;
                border: 3px solid var(--card, #fff);
                box-shadow: 0 2px 6px rgba(0, 0, 0, .22), 0 0 0 1px var(--border);
                cursor: grab;
            }

            .vfe-range-thumb:hover::-webkit-slider-thumb,
            .vfe-range-thumb:focus-visible::-webkit-slider-thumb {
                transform: scale(1.08);
            }

            .vfe-range-thumb:active::-webkit-slider-thumb,
            .vfe-range-thumb:active::-moz-range-thumb {
                cursor: grabbing;
            }

            .vfe-range-fields {
                display: flex;
                align-items: flex-end;
                gap: 8px;
                margin-bottom: 10px;
            }

            .vfe-range-field {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
                gap: 4px;
            }

            .vfe-range-field-label {
                font-size: .68rem;
                font-weight: 600;
                color: var(--muted2);
            }

            .vfe-range-fields input {
                width: 100%;
                min-width: 0;
                border: 1px solid var(--border);
                border-radius: 8px;
                background: var(--bg);
                color: var(--text);
                font-family: var(--font-b);
                font-weight: 700;
                font-size: .82rem;
                text-align: center;
                padding: 8px 4px;
            }

            .vfe-range-fields input:focus {
                outline: none;
                border-color: var(--blue);
            }

            .vfe-range-sep {
                font-size: .72rem;
                color: var(--muted2);
                flex-shrink: 0;
                padding-bottom: 9px;
            }

            .vfe-range-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: .76rem;
                color: var(--muted2);
            }

            .vfe-range-footer strong {
                color: var(--text);
            }

            .vfe-range-footer button {
                border: none;
                background: none;
                color: var(--blue);
                font-weight: 700;
                font-size: .76rem;
                cursor: pointer;
                padding: 0;
            }

            /* ── Stepper ── */
            .vfe-stepper {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 10px;
            }

            .vfe-stepper button {
                width: 38px;
                height: 38px;
                flex-shrink: 0;
                border-radius: 10px;
                border: 1px solid var(--border);
                background: var(--bg);
                color: var(--text);
                font-size: 1.1rem;
                font-weight: 700;
                cursor: pointer;
                display: grid;
                place-items: center;
                transition: background .15s, border-color .15s;
            }

            .vfe-stepper button:hover {
                border-color: var(--blue);
                color: var(--blue);
            }

            .vfe-step-value {
                flex: 1;
                display: flex;
                align-items: baseline;
                justify-content: center;
                gap: 6px;
                background: var(--bg);
                border: 1px solid var(--border);
                border-radius: 10px;
                padding: 8px;
            }

            #vfe-step-num {
                font-family: var(--font-h);
                font-size: 1.15rem;
                font-weight: 800;
                color: var(--text);
            }

            .vfe-step-unit {
                font-size: .72rem;
                font-weight: 700;
                color: var(--muted);
                text-transform: uppercase;
            }

            .vfe-estimate {
                display: flex;
                align-items: flex-start;
                gap: 6px;
                font-size: .72rem;
                color: var(--muted);
                line-height: 1.5;
                margin: 0 0 18px;
            }

            .vfe-estimate svg {
                width: 13px;
                height: 13px;
                color: var(--blue);
                flex-shrink: 0;
                margin-top: 1px;
            }

            .vfe-estimate strong {
                color: var(--blue);
            }

            /* ── Manual mode ── */
            .vfe-manual-hint {
                font-size: .82rem;
                color: var(--text2);
                line-height: 1.55;
                margin: 0 0 14px;
            }

            .vfe-manual-count {
                text-align: center;
                font-size: .78rem;
                color: var(--muted);
                margin: 12px 0 18px;
            }

            .vfe-manual-count strong {
                color: var(--blue);
                font-size: .95rem;
            }

            /* ── Output format ── */
            .vfe-format-block {
                margin-bottom: 18px;
            }

            .vfe-format-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                margin-top: 10px;
            }

            .vfe-format-card {
                position: relative;
                text-align: left;
                border: 1.5px solid var(--border);
                border-radius: 12px;
                background: var(--bg);
                padding: 12px 14px;
                cursor: pointer;
                transition: border-color .15s, background .15s;
            }

            .vfe-format-card.active {
                border-color: var(--blue);
                background: var(--blue-light);
            }

            .vfe-format-check {
                position: absolute;
                top: 10px;
                right: 10px;
                width: 17px;
                height: 17px;
                border-radius: 50%;
                border: 1.5px solid var(--border2);
                background: var(--white);
                display: grid;
                place-items: center;
                color: transparent;
                transition: background .15s, border-color .15s, color .15s;
            }

            .vfe-format-card.active .vfe-format-check {
                background: var(--blue);
                border-color: var(--blue);
                color: #fff;
            }

            .vfe-format-check svg {
                width: 10px;
                height: 10px;
            }

            .vfe-format-name {
                display: block;
                font-family: var(--font-h);
                font-weight: 800;
                font-size: .92rem;
                color: var(--text);
            }

            .vfe-format-sub {
                display: block;
                font-size: .7rem;
                color: var(--muted);
                margin-top: 2px;
            }

            /* ── Quality slider ── */
            .vfe-quality {
                margin-bottom: 18px;
            }

            .vfe-quality-value {
                font-family: var(--font-h);
                font-weight: 800;
                font-size: .82rem;
                color: var(--blue);
            }

            .vfe-quality input[type="range"] {
                width: 100%;
                accent-color: var(--blue);
                height: 4px;
                cursor: pointer;
            }

            .vfe-quality-ends {
                display: flex;
                justify-content: space-between;
                font-size: .68rem;
                color: var(--muted2);
                margin-top: 4px;
            }

            /* ── CTA + note ──
                       #vfe-extract-btn (this class) gets hidden/shown by JS when
                       switching Auto/Manual mode — display must live on:not([hidden]), same reasoning as .vfe-loader-overlay above. */
            .vfe-btn-primary {
                width: 100%;
                align-items: center;
                justify-content: center;
                gap: 8px;
                border: none;
                border-radius: 12px;
                padding: 14px;
                background: linear-gradient(135deg, var(--blue) 0%, var(--rv-primary) 100%);
                color: #fff;
                font-family: var(--font-h);
                font-weight: 800;
                font-size: .92rem;
                cursor: pointer;
                box-shadow: 0 6px 20px rgba(109, 92, 230, .28);
                transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
            }

            .vfe-btn-primary:not([hidden]) {
                display: flex;
            }

            .vfe-btn-primary:hover {
                transform: translateY(-1px);
                box-shadow: 0 10px 26px rgba(109, 92, 230, .34);
            }

            .vfe-btn-primary:disabled {
                opacity: .55;
                cursor: not-allowed;
                transform: none;
                box-shadow: none;
            }

            .vfe-btn-primary svg {
                width: 16px;
                height: 16px;
            }

            .vfe-btn-secondary {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                border: 1.5px solid var(--blue);
                border-radius: 12px;
                padding: 13px;
                background: var(--blue-light);
                color: var(--blue);
                font-family: var(--font-h);
                font-weight: 800;
                font-size: .9rem;
                cursor: pointer;
                margin-bottom: 12px;
            }

            .vfe-btn-secondary svg {
                width: 16px;
                height: 16px;
            }

            /* Was `display:flex` with the icon + a bare text node as its two
                       children — flexbox treats a raw text node as its own
                       anonymous item, and with no explicit width it wraps onto 2
                       lines on mobile while the icon (a separate flex item) stays
                       pinned to the row's start, so the icon sat top-left of the
                       paragraph instead of centered against it, and the wrapped
                       second line was left-aligned under the first instead of
                       centered. Block + text-align:center treats the icon as an
                       inline element that flows WITH the text, so both wrapped
                       lines (and the icon on however many of them it shares) center
                       as one unit at any width. */
            .vfe-local-note {
                display: block;
                text-align: center;
                font-size: .7rem;
                color: var(--muted2);
                margin: 12px 0 0;
            }

            .vfe-local-note svg {
                width: 11px;
                height: 11px;
                margin-right: 5px;
                vertical-align: -1px;
            }

            /* ── Results panel — sits beside the settings sidebar at all
                       times (never hidden), so the reader can tweak a setting and
                       re-extract without losing their place. ── */
            /* #vfe-results-section toggles via the `hidden` attribute — the
                       display value has to live on:not([hidden]), same reasoning
                       as .vfe-loader-overlay's comment above (a plain .vfe-results{
                       display:flex} rule would tie in specificity with the
                       browser's own [hidden]{display:none} and win by source
                       order, defeating `hidden` entirely). */
            /* max-height caps the panel's own contribution to the grid
                       row's stretch computation — without it, .vfe-grid-scroll's
                       flex:1 (no cap of its own, by design, so it fills whatever
                       space it's given) has unbounded natural content height with
                       many frames, which balloons this panel's "auto" size, and
                       align-items:stretch on the parent grid then stretches the
                       SIDEBAR to match that same huge height too. Capping here
                       keeps both columns reasonable while .vfe-grid-scroll's
                       flex:1 + overflow-y:auto still fills 100% of the space
                       inside that cap — no leftover gap, no runaway growth. */
            .vfe-results {
                min-height: 480px;
                max-height: 820px;
                flex-direction: column;
                padding: 0;
                overflow: hidden;
            }

            .vfe-results:not([hidden]) {
                display: flex;
            }

            /* Accent strip across the top of the panel — Revideo's own
                       marker for "results/output" state used elsewhere on this
                       page (see .vt-advantage-card's cyan top-border motif in the
                       marketing sections below), not the flat green success-banner
                       pattern other tools use for this. */
            .vfe-results::before {
                content: '';
                display: block;
                height: 4px;
                background: linear-gradient(90deg, var(--blue) 0%, var(--rv-primary) 55%, var(--rv-primary-soft) 100%);
                flex-shrink: 0;
            }

            /* Placeholder shown once a video is loaded but before the user
                       has clicked "Extract Frames" — #vfe-results-body (the actual
                       stat header + grid) is what swaps in once frames exist.
                       display lives on:not([hidden]) — same reasoning as
                       .vfe-loader-overlay's comment further up. */
            .vfe-results-empty:not([hidden]) {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                gap: 16px;
                padding: 40px 32px;
                color: var(--muted2);
            }

            .vfe-results-empty-icon {
                width: 60px;
                height: 60px;
                border-radius: 16px;
                background: var(--bg);
                border: 1px solid var(--border);
                display: grid;
                place-items: center;
                color: var(--muted2);
            }

            .vfe-results-empty-icon svg {
                width: 28px;
                height: 28px;
            }

            .vfe-results-empty-text {
                font-size: .86rem;
                line-height: 1.55;
                max-width: 260px;
            }

            /* Must carry the flex column context down to .vfe-results-content
                       — without it, that child's `flex:1; min-height:0` (which is
                       what caps .vfe-grid-scroll to the panel's max-height and makes
                       it the thing that scrolls) does nothing, since flex properties
                       only apply to a flex item whose *parent* is a flex container.
                       A plain block div here silently grows to full content height
                       instead, and the overflow just gets hard-clipped by
                       .vfe-results' own `overflow: hidden` with no way to reach it —
                       the "no scroll on results" bug. display lives on :not([hidden])
                       for the same specificity-tie reason as .vfe-loader-overlay. */
            .vfe-results-body:not([hidden]) {
                display: flex;
                flex-direction: column;
                flex: 1;
                min-height: 0;
            }

            .vfe-results-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                flex-wrap: wrap;
                padding: 20px 22px 0;
            }

            .vfe-results-stat {
                display: flex;
                align-items: baseline;
                flex-wrap: wrap;
                gap: 8px;
                row-gap: 2px;
            }

            .vfe-results-stat-num {
                font-family: var(--font-h);
                font-weight: 900;
                font-size: 1.7rem;
                line-height: 1;
                background: linear-gradient(135deg, var(--blue), var(--rv-primary));
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
            }

            .vfe-results-stat-label {
                font-size: .82rem;
                font-weight: 700;
                color: var(--text2);
            }

            .vfe-results-stat-dot {
                color: var(--border2);
                font-size: .7rem;
            }

            .vfe-results-meta {
                font-size: .78rem;
                font-weight: 600;
                color: var(--muted);
            }

            /* ── Loader popup — shown as a modal while Auto extraction runs ── */
            /* display:none is the base state and [hidden] is left to the
                       browser's own UA rule; the:not([hidden]) variant is what
                       actually turns the popup into a centered flex box. Setting
                       display:flex directly on .vfe-loader-overlay would tie in
                       specificity with the UA's own [hidden]{display:none} rule —
                       and since author styles win ties over UA styles, that flex
                       rule would override `hidden` and show the popup on load. */
            .vfe-loader-overlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(10, 14, 26, .55);
                backdrop-filter: blur(2px);
                align-items: center;
                justify-content: center;
                z-index: 400;
                padding: 20px;
            }

            .vfe-loader-overlay:not([hidden]) {
                display: flex;
            }

            .vfe-loader-box {
                width: 100%;
                max-width: 360px;
                background: var(--white);
                border-radius: 20px;
                box-shadow: var(--shadow-lg);
                padding: 32px 28px;
                text-align: center;
            }

            .vfe-loader-spinner {
                width: 52px;
                height: 52px;
                margin: 0 auto 18px;
                border-radius: 50%;
                border: 4px solid var(--blue-mid);
                border-top-color: var(--blue);
                animation: vfe-spin 0.85s linear infinite;
            }

            @keyframes vfe-spin {
                to {
                    transform: rotate(360deg);
                }
            }

            .vfe-loader-title {
                font-family: var(--font-h);
                font-weight: 800;
                font-size: 1rem;
                color: var(--text);
                margin: 0 0 4px;
            }

            .vfe-loader-sub {
                font-size: .82rem;
                color: var(--muted);
                margin: 0 0 18px;
            }

            .vfe-progress-track {
                height: 8px;
                border-radius: 999px;
                background: var(--bg2);
                overflow: hidden;
            }

            .vfe-progress-fill {
                height: 100%;
                width: 0%;
                border-radius: 999px;
                background: linear-gradient(90deg, var(--blue), var(--rv-primary));
                transition: width .2s ease;
            }

            .vfe-progress-pct {
                display: block;
                margin-top: 8px;
                font-size: .78rem;
                font-weight: 700;
                color: var(--text2);
            }

            .vfe-cancel-link {
                margin-top: 16px;
                border: none;
                background: none;
                color: var(--muted);
                font-size: .78rem;
                font-weight: 700;
                text-decoration: underline;
                cursor: pointer;
            }

            /* ── Frame preview lightbox — same fixed-overlay pattern as
                       .vfe-loader-overlay (display lives on:not([hidden]) for the
                       same specificity-tie reason documented on that rule). Sits
                       above it (z-index) since the two never show at once but this
                       should win if they somehow did. ── */
            .vfe-lightbox {
                display: none;
                position: fixed;
                inset: 0;
                align-items: center;
                justify-content: center;
                z-index: 410;
                padding: 24px;
            }

            .vfe-lightbox:not([hidden]) {
                display: flex;
            }

            .vfe-lightbox-backdrop {
                position: absolute;
                inset: 0;
                background: rgba(10, 14, 26, .72);
                backdrop-filter: blur(2px);
            }

            .vfe-lightbox-box {
                position: relative;
                display: flex;
                flex-direction: column;
                max-width: min(640px, 100%);
                max-height: 100%;
                background: var(--white);
                border-radius: 16px;
                box-shadow: var(--shadow-lg);
                overflow: hidden;
            }

            .vfe-lightbox-close {
                position: absolute;
                top: 10px;
                right: 10px;
                width: 34px;
                height: 34px;
                border: none;
                border-radius: 50%;
                background: rgba(10, 14, 26, .55);
                color: #fff;
                display: grid;
                place-items: center;
                cursor: pointer;
            }

            .vfe-lightbox-close svg {
                width: 16px;
                height: 16px;
            }

            .vfe-lightbox-close:hover {
                background: rgba(10, 14, 26, .75);
            }

            .vfe-lightbox-img {
                display: block;
                width: 100%;
                max-height: 70vh;
                object-fit: contain;
                background: #0a0e1a;
            }

            .vfe-lightbox-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                padding: 14px 18px;
                border-top: 1px solid var(--border);
            }

            .vfe-lightbox-name {
                font-size: .8rem;
                font-weight: 700;
                color: var(--text2);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .vfe-lightbox-footer .vfe-btn-solid {
                flex-shrink: 0;
            }

            .vfe-results-content {
                padding: 16px 22px 22px;
                display: flex;
                flex-direction: column;
                flex: 1;
                min-height: 0;
            }

            .vfe-success-actions {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
            }

            .vfe-btn-outline,
            .vfe-btn-solid {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                border-radius: 9px;
                padding: 9px 14px;
                font-family: var(--font-h);
                font-weight: 700;
                font-size: .78rem;
                cursor: pointer;
                white-space: nowrap;
            }

            .vfe-btn-outline svg,
            .vfe-btn-solid svg {
                width: 14px;
                height: 14px;
            }

            .vfe-btn-outline {
                border: 1.5px solid var(--blue);
                background: var(--white);
                color: var(--blue);
            }

            .vfe-btn-outline:hover {
                background: var(--blue-light);
            }

            .vfe-btn-solid {
                border: none;
                background: linear-gradient(135deg, var(--blue) 0%, var(--rv-primary) 100%);
                color: #fff;
                box-shadow: 0 4px 14px rgba(109, 92, 230, .28);
            }

            .vfe-btn-solid:hover {
                box-shadow: 0 6px 18px rgba(109, 92, 230, .34);
            }

            /* ── Grid ── */
            .vfe-grid-head {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-bottom: 10px;
            }

            .vfe-grid-hint {
                font-size: .72rem;
                color: var(--muted2);
            }

            /* Scrolling lives on this plain wrapper, NOT on .vfe-grid
                       itself — putting max-height + overflow directly on a CSS
                       grid whose rows are auto-sized (verified empirically:
                       removing max-height alone took card height from 12.9px back
                       to 113.75px) makes the browser's track-sizing algorithm
                       squeeze every row to fit inside max-height instead of
                       overflowing it, collapsing every card to a sliver with only
                       its label bar visible. A plain block wrapper doesn't
                       participate in the grid's track-sizing at all, so it can
                       clip/scroll freely while the grid inside lays out at its
                       natural, correct row height. */
            .vfe-grid-scroll {
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                padding-right: 2px;
            }

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

            /* aspect-ratio lives on the <img>, not this wrapper — a
                       wrapper div with aspect-ratio inside an auto-sized CSS grid
                       row produced a row track shorter than the card's own
                       rendered height (measured: 102px track vs 111px card), so
                       every card overflowed into the next row and ate the gap.
                       Sizing the ratio on the img itself gives the grid a single,
                       correctly-measured intrinsic height to auto-size rows from. */
            .vfe-frame-card {
                position: relative;
                border: 1px solid var(--border);
                border-radius: 10px;
                overflow: hidden;
                cursor: pointer;
                background: var(--bg2);
            }

            .vfe-frame-card img {
                width: 100%;
                aspect-ratio: 4 / 3;
                object-fit: cover;
                display: block;
            }

            .vfe-frame-label {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(0deg, rgba(0, 0, 0, .72), transparent);
                color: #fff;
                font-size: .62rem;
                font-weight: 700;
                padding: 12px 6px 5px;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .vfe-frame-zoom {
                position: absolute;
                inset: 0;
                display: grid;
                place-items: center;
                background: rgba(22, 22, 29, .38);
                opacity: 0;
                transition: opacity .15s;
            }

            .vfe-frame-zoom svg {
                width: 22px;
                height: 22px;
                color: #fff;
            }

            .vfe-frame-card:hover .vfe-frame-zoom {
                opacity: 1;
            }

            /* ── Dark theme ── */
            [data-theme="dark"] .vfe-preview,
            [data-theme="dark"] .vfe-preview video {
                background: #000;
            }


            [data-theme="dark"] .vfe-btn-outline {
                background: var(--blue-light);
            }

            [data-theme="dark"] .vfe-btn-outline:hover {
                background: var(--blue-mid);
            }

            /* Time-range track: light-mode --border (#e2e5f0) reads fine on
                       the light-mode --bg (#f7f8fc), but the dark-mode pair
                       (var(--rv-border) on var(--rv-surface-2)) is too close in luminance — the track
                       all but disappears behind the thumbs/handles. --muted2
                       (#4a6080) gives it real contrast against the panel. */
            [data-theme="dark"] .vfe-range-track {
                background: var(--muted2);
            }

            /* The real bug: main.css's global "[data-theme=dark] input"
                       rule (specificity 0,1,1 — one attribute selector + one type
                       selector) beats .vfe-range-thumb's plain-class "background:
                       transparent" (0,1,0) regardless of source order, painting
                       each <input type=range> itself with an OPAQUE var(--bg) box.
                       Since the two range inputs sit in the DOM after (i.e. on top
                       of) .vfe-range-track/-track-fill, that opaque box fully
                       hid them — no amount of recoloring the track div underneath
                       could have shown through it. Re-asserting transparent here
                       at (0,2,0) wins outright. */
            [data-theme="dark"] .vfe-range-thumb {
                background: transparent;
            }

            /* ── Responsive ── */
            @media (max-width: 960px) {
                .vfe-wrap.vfe-has-results {
                    grid-template-columns: 1fr;
                    max-width: 820px;
                }
            }

            @media (max-width: 480px) {
                .vfe-panel {
                    padding: 16px;
                    border-radius: 16px;
                }

                .vfe-grid {
                    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
                }
            }