/* ════════════════════════════════════════════════════════════
   TOOL SECTION — v3  Cinematic Command Center
   Palette: --primary #1a6b8a  --light #0d9fb5
            --accent #e8a838   --navy #040d1a
════════════════════════════════════════════════════════════ */

/* ── Section ────────────────────────────────────────────────── */
.rvs-tool-section {
    background: linear-gradient(145deg, #04080f 0%, #080f22 35%, #0a1d3a 65%, #082840 100%);
    padding: 0 0 80px;
    position: relative;
    overflow: hidden;
}

/* ── Aurora background ──────────────────────────────────────── */
.rvs-aurora {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 130% 80% at 50% -15%, rgba(13,159,181,.28) 0%, transparent 52%),
        radial-gradient(ellipse 70%  55% at 92% 15%,  rgba(26,107,138,.18) 0%, transparent 48%),
        radial-gradient(ellipse 55%  45% at 8%  30%,  rgba(59,130,246,.1)  0%, transparent 48%),
        radial-gradient(ellipse 90%  35% at 50% 105%, rgba(232,168,56,.06) 0%, transparent 48%);
    animation: auroraShift 10s ease-in-out infinite alternate;
}
@keyframes auroraShift {
    from { opacity:.7; transform:scaleY(1) translateY(0); }
    to   { opacity:1;  transform:scaleY(1.06) translateY(-10px); }
}

/* ── Scan beam (the "live gif" sweep) ───────────────────────── */
.rvs-scan-beam {
    position: absolute; top:0; bottom:0; left:-60%; width:40%;
    pointer-events: none; z-index: 1;
    background: linear-gradient(90deg,
        transparent 0%, rgba(13,159,181,.035) 40%,
        rgba(13,159,181,.08) 50%,
        rgba(13,159,181,.035) 60%, transparent 100%);
    animation: scanSwoop 5s linear infinite;
}
@keyframes scanSwoop { to { left: 120%; } }

/* ── Radar rings ────────────────────────────────────────────── */
.rvs-radar-rings {
    position: absolute; bottom: -60px; left: 50%;
    transform: translateX(-50%); pointer-events: none; z-index: 0;
}
.rvs-rr {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(13,159,181,.14);
    animation: radarExpand 6s ease-out infinite;
}
.rvs-rr-1 { width:300px; height:300px; top:-150px; left:-150px; animation-delay:0s; }
.rvs-rr-2 { width:300px; height:300px; top:-150px; left:-150px; animation-delay:1.2s; }
.rvs-rr-3 { width:300px; height:300px; top:-150px; left:-150px; animation-delay:2.4s; }
.rvs-rr-4 { width:300px; height:300px; top:-150px; left:-150px; animation-delay:3.6s; }
.rvs-rr-5 { width:300px; height:300px; top:-150px; left:-150px; animation-delay:4.8s; }
@keyframes radarExpand {
    0%   { transform:scale(.3); opacity:.75; }
    100% { transform:scale(4.5); opacity:0; }
}

/* ── Ghost video frames (floating "gif" effect) ─────────────── */
.rvs-ghost-frames {
    position: absolute; inset: 0; overflow: hidden;
    pointer-events: none; z-index: 0;
}
.rvs-gf {
    position: absolute;
    border: 1px solid rgba(13,159,181,.09);
    border-radius: 6px;
    background: rgba(13,159,181,.03);
    animation: ghostFloat linear infinite;
}
.rvs-gf::after {
    content: '';
    position: absolute; top:50%; left:50%;
    transform: translate(-42%,-50%);
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent rgba(13,159,181,.22);
}
.rvs-gf-1  { width:140px; height:79px;  left:5%;  bottom:-90px;  animation-duration:22s; animation-delay:0s;    opacity:.7; }
.rvs-gf-2  { width:110px; height:62px;  left:18%; bottom:-75px;  animation-duration:28s; animation-delay:-8s;   opacity:.5; }
.rvs-gf-3  { width:165px; height:93px;  left:34%; bottom:-100px; animation-duration:18s; animation-delay:-3s;   opacity:.6; }
.rvs-gf-4  { width:120px; height:68px;  left:55%; bottom:-80px;  animation-duration:24s; animation-delay:-12s;  opacity:.55; }
.rvs-gf-5  { width:88px;  height:50px;  left:70%; bottom:-62px;  animation-duration:20s; animation-delay:-5s;   opacity:.5; }
.rvs-gf-6  { width:150px; height:85px;  left:78%; bottom:-95px;  animation-duration:30s; animation-delay:-18s;  opacity:.45; }
.rvs-gf-7  { width:100px; height:56px;  left:44%; bottom:-68px;  animation-duration:16s; animation-delay:-6s;   opacity:.6; }
.rvs-gf-8  { width:128px; height:72px;  left:88%; bottom:-85px;  animation-duration:26s; animation-delay:-14s;  opacity:.4; }
/* Extra frames for a denser background */
.rvs-gf-9  { width:116px; height:65px;  left:11%; bottom:-78px;  animation-duration:23s; animation-delay:-4s;   opacity:.45; }
.rvs-gf-10 { width:94px;  height:53px;  left:27%; bottom:-62px;  animation-duration:19s; animation-delay:-16s;  opacity:.5; }
.rvs-gf-11 { width:138px; height:78px;  left:62%; bottom:-88px;  animation-duration:25s; animation-delay:-10s;  opacity:.42; }
.rvs-gf-12 { width:105px; height:59px;  left:93%; bottom:-72px;  animation-duration:21s; animation-delay:-22s;  opacity:.44; }
@keyframes ghostFloat {
    0%   { transform: translateY(0)      rotate(0deg);   }
    100% { transform: translateY(-110vh) rotate(2deg);   }
}

/* ── Floating dot particles ─────────────────────────────────── */
.rvs-dots { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.rvs-dot  { position:absolute; bottom:-6px; border-radius:50%;
            background:rgba(13,159,181,.7); animation:dotFloat linear infinite; }
@keyframes dotFloat {
    0%   { transform:translateY(0) scale(1);   opacity:0;  }
    7%   { opacity:.75; }
    86%  { opacity:.45; }
    100% { transform:translateY(-90vh) scale(.5); opacity:0; }
}
.rvs-dot-1  { width:3px;  height:3px;  left:7%;  animation-duration:15s; animation-delay:-2s;  }
.rvs-dot-2  { width:2px;  height:2px;  left:14%; animation-duration:18s; animation-delay:-7s;  }
.rvs-dot-3  { width:4px;  height:4px;  left:26%; animation-duration:12s; animation-delay:-4s;  }
.rvs-dot-4  { width:2px;  height:2px;  left:38%; animation-duration:20s; animation-delay:-11s; }
.rvs-dot-5  { width:3px;  height:3px;  left:50%; animation-duration:14s; animation-delay:-3s;  }
.rvs-dot-6  { width:2px;  height:2px;  left:64%; animation-duration:17s; animation-delay:-8s;  background:rgba(232,168,56,.55); }
.rvs-dot-7  { width:4px;  height:4px;  left:74%; animation-duration:13s; animation-delay:-5s;  }
.rvs-dot-8  { width:2px;  height:2px;  left:83%; animation-duration:16s; animation-delay:-9s;  }
.rvs-dot-9  { width:3px;  height:3px;  left:21%; animation-duration:19s; animation-delay:-14s; background:rgba(232,168,56,.5); }
.rvs-dot-10 { width:2px;  height:2px;  left:91%; animation-duration:11s; animation-delay:-1s;  }

/* ── Platform icons — rise from the bottom exactly like ghost frames ── */
.rvs-platforms-bg {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.rvs-plat-icon {
    position: absolute;
    bottom: -60px;       /* start below the visible area */
    opacity: 0;          /* keyframe fades in/out */
    filter: drop-shadow(0 4px 18px rgba(0,0,0,.4));
    animation: platFloat linear infinite;
    will-change: transform, opacity;
}
@keyframes platFloat {
    0%   { transform: translateY(0)       rotate(0deg);   opacity: 0;   }
    4%   { opacity: .18; }
    88%  { opacity: .14; }
    100% { transform: translateY(-110vh)  rotate(3deg);   opacity: 0;   }
}
@media(max-width: 860px) { .rvs-platforms-bg { display: none; } }

/* ── Selected-file state inside upload drop zone ──────────────── */
/* These replace the default dz-* content once a file is chosen.  */
.up-icon { font-size: 1.9rem; line-height: 1; margin-bottom: 3px; }
.up-main { font-size: .87rem; color: rgba(255,255,255,.82); margin: 0; line-height: 1.5;
           word-break: break-all; max-width: 100%; }
.up-main strong { color: rgba(122,232,248,.95); font-weight: 700; }
.up-hint { font-size: .67rem; color: rgba(255,255,255,.52); margin: 0; }

/* ════════════════════════════════════════════════════════════
   HEADER — compact, just h1 + subtitle
════════════════════════════════════════════════════════════ */
.rvs-header-wrap { position: relative; z-index: 2; }

.rvs-tool-section .section-header {
    padding: 56px 0 28px;
    text-align: center;
}

.rvs-tool-section .section-header h1 {
    color: #ffffff;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    margin-bottom: 13px; line-height: 1.1; letter-spacing: -.02em;
    white-space: nowrap;
}
.rvs-tool-section .section-header h1 em {
    font-style: italic;
    background: linear-gradient(135deg, #e8a838 0%, #f5c96a 50%, #0d9fb5 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.rvs-tool-section .section-header p {
    color: rgba(255,255,255,.72);
    font-size: .97rem; max-width: 480px; margin: 0 auto; line-height: 1.65;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.rvs-tool-section .section-header p strong { color: #f5c96a; font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   CARD WRAP + GLASS WIDGET
════════════════════════════════════════════════════════════ */
.rvs-card-wrap { position: relative; z-index: 2; }

/* Ambient outer glow behind widget */
.rvs-widget-aurora {
    position: absolute; inset: -40px; border-radius: 40px;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(13,159,181,.18) 0%, transparent 70%);
    filter: blur(30px); pointer-events: none; z-index: 0;
    animation: wAurora 7s ease-in-out infinite alternate;
}
@keyframes wAurora { from{opacity:.7} to{opacity:1} }

/* The glass search widget */
.rvs-search-widget {
    max-width: 980px; margin: 0 auto;
    position: relative; z-index: 2;
    background: rgba(5, 16, 35, 0.72);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-radius: 24px;
    border: 1px solid rgba(13,159,181,.32);
    box-shadow:
        0 40px 90px rgba(0,0,0,.45),
        0 12px 32px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.1),
        inset 0 0 50px rgba(13,159,181,.04),
        0 0 0 1px rgba(13,159,181,.08);
    overflow: hidden;
}

/* Animated shimmer line at top of widget */
.rvs-search-widget::before {
    content: '';
    position: absolute; top:0; left:0; right:0; height:2px; z-index:10;
    background: linear-gradient(90deg,
        transparent 0%, #1a6b8a 20%, #0d9fb5 38%, #3bc9e0 50%,
        #e8a838 65%, #f5c96a 78%, transparent 100%);
    background-size: 200% auto;
    animation: wBorderShimmer 4s linear infinite;
}
@keyframes wBorderShimmer { to { background-position: 200% center; } }

/* ════════════════════════════════════════════════════════════
   MODE TILES — single row, 5 tiles
════════════════════════════════════════════════════════════ */
.rvs-mode-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(13,159,181,.1);
}

/* ── Tile base ──────────────────────────────────────────── */
.rvs-mode-tile {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 16px 14px;
    background: transparent; border: none; cursor: pointer;
    transition: background .18s ease;
    position: relative; overflow: hidden; text-align: left;
    min-width: 0;
}
.rvs-mode-tile::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #1a6b8a, #0d9fb5);
    transform: scaleX(0); transition: transform .22s ease;
    transform-origin: left;
}
.rvs-mode-tile:hover  { background: rgba(13,159,181,.05); }
.rvs-mode-tile.active { background: rgba(13,159,181,.09); }
.rvs-mode-tile.active::after { transform: scaleX(1); }

/* Premium tile — gold active accent */
.rvs-prem-tile.active::after  { background: linear-gradient(90deg, #c8860a, #e8a838); }
.rvs-prem-tile.active         { background: rgba(200,134,10,.06); }

/* ── Icon ───────────────────────────────────────────────── */
.rvs-mt-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(13,159,181,.08);
    color: rgba(255,255,255,.35);
    transition: all .18s ease;
}
.rvs-mode-tile.active .rvs-mt-icon {
    background: linear-gradient(135deg, rgba(26,107,138,.55), rgba(13,159,181,.45));
    color: #7ae8f8;
    box-shadow: 0 0 14px rgba(13,159,181,.28);
}
.rvs-prem-tile.active .rvs-mt-icon {
    background: linear-gradient(135deg, rgba(200,134,10,.5), rgba(232,168,56,.45));
    color: #fde68a;
    box-shadow: 0 0 14px rgba(200,134,10,.25);
}
.rvs-mode-tile:hover .rvs-mt-icon { color: rgba(255,255,255,.72); }

/* ── Text ───────────────────────────────────────────────── */
.rvs-mt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rvs-mt-label {
    font-size: .8rem; font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    color: rgba(255,255,255,.65);
    transition: color .18s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rvs-mode-tile.active .rvs-mt-label { color: #a8f0ff; }
.rvs-prem-tile.active .rvs-mt-label { color: #fde68a; }
.rvs-mode-tile:hover  .rvs-mt-label { color: rgba(255,255,255,.92); }
.rvs-mt-sub {
    font-size: .62rem; color: rgba(255,255,255,.32);
    font-family: 'DM Sans', sans-serif; white-space: nowrap;
}
.rvs-mode-tile.active .rvs-mt-sub { color: rgba(13,159,181,.65); }
.rvs-prem-tile.active .rvs-mt-sub { color: rgba(232,168,56,.55); }

/* ── Separator ──────────────────────────────────────────── */
.rvs-mode-sep { width: 1px; background: rgba(255,255,255,.06); flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   SEARCH STAGE — fixed height, zero layout shift
════════════════════════════════════════════════════════════ */
.rvs-search-stage {
    position: relative;
    height: 148px;   /* tall enough for upload zone, same for all modes */
    margin: 18px 22px 0;
    overflow: visible;
}

/* All panels absolutely stacked — opacity hides/shows, no height change */
.rvs-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    display: flex;
    flex-direction: column;
}
.rvs-panel.active {
    opacity: 1;
    pointer-events: auto;
}
#rvs-panel-url    { justify-content: flex-start; gap: 10px; }
#rvs-panel-upload { justify-content: stretch; }
#rvs-panel-keyword { justify-content: flex-start; }

/* Command row: icon + input */
.rvs-cmd-row {
    display: flex; align-items: center;
    background: rgba(255,255,255,.055);
    border: 1.5px solid rgba(13,159,181,.25);
    border-radius: 14px; overflow: hidden;
    transition: border-color .22s, box-shadow .22s, background .22s;
}
.rvs-cmd-row:focus-within {
    border-color: rgba(13,159,181,.6);
    background: rgba(255,255,255,.07);
    box-shadow: 0 0 0 4px rgba(13,159,181,.12), 0 6px 24px rgba(0,0,0,.25);
}

.rvs-cmd-icon {
    padding: 0 14px; color: rgba(13,159,181,.45);
    flex-shrink:0; display:flex; align-items:center;
    transition: color .2s;
}
.rvs-cmd-row:focus-within .rvs-cmd-icon { color: #0d9fb5; }

.rvs-cmd-input {
    flex: 1; background: transparent; border: none; outline: none;
    padding: 16px 10px;
    font-size: .95rem; font-family: 'DM Sans', sans-serif;
    color: rgba(255,255,255,.92); caret-color: #0d9fb5;
}
.rvs-cmd-input::placeholder { color: rgba(255,255,255,.38); }

.rvs-cmd-btn {
    background: linear-gradient(135deg,#d4920e 0%,#e8a838 30%,#f5c040 55%,#e8a838 80%,#d4920e 100%);
    background-size: 250% auto;
    color: #06172a; border: none;
    padding: 11px 20px;
    font-size: .86rem; font-weight: 800; font-family: 'DM Sans', sans-serif;
    cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    transition: all .2s; white-space: nowrap;
    position: relative; overflow: hidden;
    margin: 4px; border-radius: 11px; flex-shrink: 0;
    box-shadow: 0 4px 18px rgba(232,168,56,.38), inset 0 1px 0 rgba(255,255,255,.3);
    animation: cmdBtnPulse 3.5s ease-in-out infinite;
}
.rvs-btn-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
    background-size: 250% auto; border-radius: inherit;
    animation: shimmerSweep 3s linear infinite; pointer-events: none;
}
@keyframes shimmerSweep { 0%{background-position:200% center} 100%{background-position:-100% center} }
@keyframes cmdBtnPulse {
    0%,100% { box-shadow:0 4px 18px rgba(232,168,56,.38),inset 0 1px 0 rgba(255,255,255,.3); }
    50%      { box-shadow:0 4px 28px rgba(232,168,56,.7),0 0 0 6px rgba(232,168,56,.09),inset 0 1px 0 rgba(255,255,255,.3); }
}
.rvs-cmd-btn:hover {
    background-position: right center; transform: scale(1.03);
    box-shadow: 0 6px 28px rgba(232,168,56,.6), inset 0 1px 0 rgba(255,255,255,.3);
    animation: none;
}
.rvs-cmd-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; animation:none; }

/* ── Full-width search button (sits below the input stage) ──── */
.rvs-search-full {
    width: 100%;
    /* Deep amber — noticeably darker than the old blazing gold */
    background: linear-gradient(135deg, #6b3d06 0%, #9a5c0a 26%, #ae6c0d 50%, #9a5c0a 74%, #6b3d06 100%);
    background-size: 250% auto;
    color: #f5d07a;   /* light gold text — readable on dark fill */
    border: 1px solid rgba(232,168,56,.22);
    border-radius: 14px;
    padding: 14px 32px;
    font-size: .97rem; font-weight: 800; font-family: 'DM Sans', sans-serif;
    letter-spacing: .025em;
    white-space: nowrap;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: relative; overflow: hidden;
    transition: all .25s ease;
    /* Glow replaces brightness — the button "shines" outward */
    box-shadow:
        0 0 22px rgba(232,168,56,.45),
        0 0 48px rgba(232,168,56,.15),
        0 6px 20px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.1);
    animation: fullBtnPulse 3s ease-in-out infinite;
    margin-top: 0;
}
.rvs-search-full .rvs-btn-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(105deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);
    background-size: 250% auto; border-radius: inherit;
    animation: shimmerSweep 3.5s linear infinite; pointer-events: none;
}
.rvs-search-full-arr { font-size: 1.05rem; transition: transform .2s; font-weight: 400; }
.rvs-search-full:hover {
    background-position: right center; transform: translateY(-2px); animation: none;
    box-shadow:
        0 0 38px rgba(232,168,56,.78),
        0 0 80px rgba(232,168,56,.28),
        0 6px 20px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.14);
}
.rvs-search-full:hover .rvs-search-full-arr { transform: translateX(5px); }
.rvs-search-full:disabled { opacity:.55; cursor:not-allowed; transform:none; animation:none; }
@keyframes fullBtnPulse {
    0%,100% {
        box-shadow: 0 0 18px rgba(232,168,56,.4),  0 0 38px rgba(232,168,56,.12), 0 6px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1);
    }
    50% {
        box-shadow: 0 0 32px rgba(232,168,56,.72), 0 0 70px rgba(232,168,56,.25), 0 6px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1);
    }
}

/* ── Platform badges ────────────────────────────────────────── */
.rvs-plat-row {
    display: flex; align-items: center; gap: 5px;
    flex-wrap: wrap; margin-top: 8px; flex-shrink: 0;
}
.plat-lbl {
    font-size:.62rem; color:rgba(255,255,255,.5); font-weight:700;
    text-transform:uppercase; letter-spacing:.08em;
}
.rvs-pbadge {
    font-size:.68rem; font-weight:600; padding:4px 11px; border-radius:50px;
    background:rgba(13,159,181,.1); color:rgba(122,232,248,.82);
    border:1px solid rgba(13,159,181,.25); transition:all .15s; cursor:default;
}
.rvs-pbadge:hover {
    background:rgba(13,159,181,.16); border-color:rgba(13,159,181,.32);
    transform:translateY(-1px);
}
.rvs-pbadge-more {
    background:rgba(232,168,56,.07); color:rgba(232,168,56,.7);
    border-color:rgba(232,168,56,.2);
}
.rvs-pbadge-more:hover { background:rgba(232,168,56,.14); border-color:rgba(232,168,56,.32); }

/* ── Drop zone (upload panel) ───────────────────────────────── */
.rvs-drop-zone {
    border: 1.5px dashed rgba(13,159,181,.32); border-radius: 14px;
    text-align: center; cursor: pointer;
    background: rgba(13,159,181,.05); transition: all .22s;
    padding: 0 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    height: 100%; /* fill panel height */
    box-sizing: border-box;
}
.rvs-drop-zone:hover, .rvs-drop-zone.over {
    border-color: rgba(13,159,181,.6); background: rgba(13,159,181,.09);
    box-shadow: 0 0 0 4px rgba(13,159,181,.08);
}
.rvs-dz-icon { margin-bottom:2px; transition:transform .3s; flex-shrink:0; }
.rvs-drop-zone:hover .rvs-dz-icon { transform: translateY(-3px); }
.dz-main { font-size:.87rem; color:rgba(255,255,255,.75); margin:0; line-height:1.5; }
.dz-main strong { color:rgba(122,232,248,.9); font-weight:700; }
.dz-hint { font-size:.67rem; color:rgba(255,255,255,.48); margin:0; }
.dz-btn { margin-top:8px !important; }

/* ── Screenshot drop zone ───────────────────────────────────── */
.rvs-dz-secondary {
    border: 1.5px dashed rgba(13,159,181,.28); border-radius: 14px;
    text-align: center; cursor: pointer;
    background: rgba(13,159,181,.04); transition: all .22s;
    padding: 0 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    height: 100%; box-sizing: border-box;
}
.rvs-dz-secondary:hover, .rvs-dz-secondary.dragover {
    border-color: rgba(13,159,181,.6); background: rgba(13,159,181,.09);
    box-shadow: 0 0 0 4px rgba(13,159,181,.08);
}
/* Green rim flash when clipboard image is pasted */
.rvs-dz-secondary.paste-flash {
    border-color: rgba(34,197,94,.75) !important;
    background: rgba(34,197,94,.07) !important;
    box-shadow: 0 0 0 4px rgba(34,197,94,.12) !important;
}
.rvs-dz-secondary-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.rvs-dz-secondary-main { font-size: .87rem; color: rgba(255,255,255,.75); margin: 0; line-height: 1.5; }
.rvs-dz-secondary-main strong { color: rgba(122,232,248,.9); font-weight: 700; }
.rvs-dz-secondary-hint { font-size: .67rem; color: rgba(255,255,255,.45); margin: 0; }
.rvs-dz-secondary-paste-hint {
    font-size: .62rem; color: rgba(13,159,181,.6); margin: 0;
    letter-spacing: .03em;
}
.rvs-dz-secondary-selected { font-size: .78rem; color: rgba(122,232,248,.85); margin: 0;
    font-weight: 600; word-break: break-all; max-width: 100%; }

/* ── Screenshot multi-frame thumbnail grid ───────────────── */
.rvs-ss-thumbs-wrap {
    display: flex; flex-direction: column; height: 100%;
    gap: 8px; padding: 10px 14px 10px; box-sizing: border-box;
}
.rvs-ss-thumbs {
    display: flex; flex-wrap: wrap; gap: 7px; flex: 1; align-content: flex-start;
    overflow-y: auto;
}
.rvs-ss-thumb {
    position: relative; width: 72px; height: 60px; border-radius: 8px;
    overflow: hidden; border: 1.5px solid rgba(13,159,181,.3);
    background: rgba(13,159,181,.07); flex-shrink: 0;
    transition: border-color .15s;
}
.rvs-ss-thumb:hover { border-color: rgba(13,159,181,.6); }
.rvs-ss-thumb-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.rvs-ss-thumb-remove {
    position: absolute; top: 3px; right: 3px;
    width: 17px; height: 17px;
    background: rgba(0,0,0,.68); border: none; border-radius: 50%;
    color: #fff; font-size: .55rem; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; transition: background .15s; z-index: 2;
}
.rvs-ss-thumb-remove:hover { background: rgba(220,50,50,.85); }
.rvs-ss-tip {
    font-size: .62rem; color: rgba(13,159,181,.65); line-height: 1.5;
    display: flex; align-items: flex-start; gap: 5px;
    background: rgba(13,159,181,.06); border-radius: 7px;
    padding: 6px 9px; flex-shrink: 0;
}
.rvs-ss-tip-icon { font-size: .78rem; flex-shrink: 0; margin-top: 1px; }
.rvs-ss-add-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.rvs-ss-add-btn {
    background: rgba(13,159,181,.09); border: 1px dashed rgba(13,159,181,.35);
    border-radius: 8px; color: rgba(122,232,248,.78);
    font-size: .72rem; font-weight: 600; cursor: pointer;
    padding: 5px 14px; transition: all .15s;
    font-family: 'DM Sans', sans-serif;
}
.rvs-ss-add-btn:hover {
    background: rgba(13,159,181,.18); border-color: rgba(13,159,181,.6);
    color: #a8f0ff;
}
.rvs-ss-count {
    font-size: .66rem; color: rgba(255,255,255,.38);
    font-family: 'DM Sans', sans-serif;
}

/* ── Keyword sample chips ───────────────────────────────────── */
.rvs-kw-chips {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: 10px; flex-shrink: 0;
}
.rvs-kw-chip-lbl {
    font-size: .62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(255,255,255,.38);
    font-family: 'DM Sans', sans-serif; white-space: nowrap;
    margin-right: 2px;
}
.rvs-kw-chip {
    background: rgba(13,159,181,.09);
    color: rgba(122,232,248,.78);
    border: 1px solid rgba(13,159,181,.22);
    border-radius: 50px;
    padding: 5px 13px;
    font-size: .7rem; font-weight: 600; font-family: 'DM Sans', sans-serif;
    cursor: pointer; white-space: nowrap;
    transition: all .16s ease;
}
.rvs-kw-chip:hover {
    background: rgba(13,159,181,.2);
    border-color: rgba(13,159,181,.5);
    color: #a8f0ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13,159,181,.2);
}

/* ── Keyword select ─────────────────────────────────────────── */
.rvs-cmd-select {
    background: rgba(255,255,255,.04); border:none;
    border-left: 1px solid rgba(13,159,181,.15);
    padding: 14px 12px;
    font-size:.84rem; font-family:'DM Sans',sans-serif;
    color:rgba(255,255,255,.62); cursor:pointer; outline:none; flex-shrink:0;
}
.rvs-cmd-select option { background:#0a1e38; color:#fff; }

/* ── Search button wrapper ──────────────────────────────────── */
/* position:relative + z-index ensures the wrapper sits above the stage so
   overflow:hidden (added at mobile breakpoints) clips only upward shadow bleed */
.rvs-search-btn-wrap { padding: 14px 22px 18px; position: relative; z-index: 2; }

/* ── Widget footer ──────────────────────────────────────────── */
.rvs-widget-foot {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 10px;
    padding: 11px 22px 14px;
    border-top: 1px solid rgba(255,255,255,.05);
}
.rvs-wf-badge {
    display:inline-flex; align-items:center; gap:5px;
    font-size:.65rem; font-weight:700;
    color:rgba(13,159,181,.75);
    background:rgba(13,159,181,.08); border:1px solid rgba(13,159,181,.18);
    padding:4px 12px; border-radius:50px;
}
.rvs-wf-sep { color:rgba(255,255,255,.25); font-size:.7rem; }
.rvs-wf-text { font-size:.68rem; color:rgba(255,255,255,.52); font-family:'DM Sans',sans-serif; }

/* ── URL error ──────────────────────────────────────────────── */
.rvs-url-err {
    display:flex; align-items:center; gap:10px;
    margin: 0 22px 14px;
    padding:11px 14px;
    background:rgba(220,50,50,.1); border:1.5px solid rgba(220,50,50,.25);
    border-radius:10px; font-size:.83rem; color:#ffaaaa;
    animation:rvsFadeIn .2s ease;
}
@keyframes rvsFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.rvs-url-err-icon{font-size:1.1rem;flex-shrink:0}
.rvs-url-err-text{flex:1;line-height:1.45}
.rvs-url-err-text strong{display:block;font-weight:700;color:#ffbbbb;margin-bottom:1px}
.rvs-url-err-link{background:none;border:none;padding:0;font:inherit;color:#7ae8f8;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.rvs-url-err-link:hover{color:#ffaaaa}
.rvs-url-err-close{background:none;border:none;padding:2px 4px;font-size:.78rem;color:#e05252;cursor:pointer;line-height:1;border-radius:4px;flex-shrink:0;transition:color .15s}
.rvs-url-err-close:hover{color:#ffaaaa}

/* ════════════════════════════════════════════════════════════
   CAPTCHA WRAP
════════════════════════════════════════════════════════════ */
.rvs-captcha-wrap{overflow:hidden;max-height:0;opacity:0;margin-bottom:0;transition:max-height .28s ease,opacity .22s ease,margin-bottom .28s ease}
.rvs-captcha-wrap.visible{max-height:80px;opacity:1;margin-bottom:12px}
.rvs-captcha-wrap>div{display:flex;justify-content:center}

/* ════════════════════════════════════════════════════════════
   RESULTS CARD — white panel below the glass widget
════════════════════════════════════════════════════════════ */
#rvs-results {
    display: none;
    max-width: 860px; margin: 14px auto 0;
    background: #fff; border-radius: 18px;
    border: 1px solid #e2e8f0; overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
}

#rvs-loading { padding:46px 28px 40px; text-align:center; display:none; }
.rvs-spinner{width:48px;height:48px;border:3.5px solid #eef4f8;border-top-color:#1a6b8a;border-radius:50%;animation:spin .72s linear infinite;margin:0 auto 18px}
@keyframes spin{to{transform:rotate(360deg)}}
#rvs-loading h4{font-size:1.03rem;color:#0b3248;font-family:'DM Sans',sans-serif;font-weight:700;margin-bottom:5px}
#rvs-loading p{font-size:.86rem;color:#7a9aaa;margin:0 0 18px}
.rvs-prog-wrap{max-width:300px;margin:0 auto;background:#eef4f8;border-radius:50px;height:5px;overflow:hidden}
.rvs-prog-bar{height:100%;background:linear-gradient(90deg,#1a6b8a,#e8a838);border-radius:50px;width:0%;transition:width .38s ease}

#rvs-results-body{padding:22px 28px 28px;display:none}

.rvs-sum-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #eef4f8}
.rvs-sum-left{display:flex;align-items:center;gap:12px}
.rvs-sum-icon{width:40px;height:40px;min-width:40px;border-radius:50%;background:rgba(34,197,94,.1);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.rvs-sum-left strong{display:block;font-size:1.02rem;color:#0b3248;font-family:'DM Sans',sans-serif;font-weight:700}
.rvs-sum-left span{font-size:.76rem;color:#8aaabb}
.rvs-reset-btn{background:#eef4f8;border:1px solid #cddde8;border-radius:8px;padding:8px 14px;font-size:.8rem;font-weight:600;color:#3a5a6a;font-family:'DM Sans',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .18s}
.rvs-reset-btn:hover{background:#dde8f0;color:#0b3248}

.rvs-meta-strip{background:#f4f9fc;border:1px solid #d8eaf3;border-radius:12px;padding:14px 16px;margin-bottom:16px}
.rvs-meta-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#0b3248;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.rvs-meta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:8px}
.rvs-meta-chip{background:#fff;border:1px solid #daeaf3;border-radius:8px;padding:7px 11px}
.rvs-meta-chip strong{display:block;font-size:.63rem;font-weight:700;color:#8aaabb;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.rvs-meta-chip span{font-size:.81rem;font-weight:600;color:#0b3248}

#rvs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px;padding:2px 0 4px}
.rvs-res-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s,border-color .18s;animation:rvsCardIn .35s ease both;position:relative;cursor:pointer}
.rvs-res-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.1);transform:translateY(-2px);border-color:#cbd5e1}
@keyframes rvsCardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.rvs-thumb-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#f1f5f9;overflow:hidden;flex-shrink:0}
.rvs-thumb-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.rvs-res-card:hover .rvs-thumb-img{transform:scale(1.05)}
.rvs-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem}
.rvs-score-badge{position:absolute;top:6px;right:6px;padding:2px 7px;border-radius:99px;font-size:.64rem;font-weight:800;letter-spacing:.3px;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.4)}
.rvs-score-badge.s-high{background:#dcfce7dd;color:#15803d}
.rvs-score-badge.s-mid{background:#fef9c3dd;color:#92400e}
.rvs-score-badge.s-low{background:#f1f5f9dd;color:#64748b}
.rvs-plat-pill{position:absolute;bottom:6px;left:6px;padding:2px 7px;border-radius:99px;font-size:.59rem;font-weight:700;background:rgba(255,255,255,.88);border:1px solid rgba(0,0,0,.08);backdrop-filter:blur(4px);display:flex;align-items:center;gap:3px;max-width:120px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rvs-dur-badge{position:absolute;bottom:6px;right:6px;padding:2px 6px;border-radius:4px;font-size:.59rem;font-weight:700;background:rgba(0,0,0,.62);color:#fff;letter-spacing:.3px}
.rvs-card-body{padding:10px 11px;display:flex;flex-direction:column;gap:7px;flex:1}
.rvs-card-title{font-size:.78rem;font-weight:700;color:#1e293b;margin:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rvs-card-channel{display:flex;align-items:center;gap:5px;font-size:.68rem;color:#64748b;font-weight:500;overflow:hidden;white-space:nowrap}
.rvs-chan-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.rvs-bar-row{display:flex;align-items:center;gap:6px}
.rvs-bar-track{flex:1;height:4px;background:#f1f5f9;border-radius:99px;overflow:hidden}
.rvs-bar-fill{height:100%;border-radius:99px;transition:width .5s ease}
.rvs-bar-label{font-size:.61rem;color:#94a3b8;white-space:nowrap}
.rvs-bar-pct{font-size:.66rem;font-weight:800;white-space:nowrap;min-width:28px;text-align:right}
.rvs-bar-pct.s-high{color:#15803d}.rvs-bar-pct.s-mid{color:#92400e}.rvs-bar-pct.s-low{color:#94a3b8}
.rvs-info-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.rvs-info-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:99px;font-size:.61rem;font-weight:600;white-space:nowrap}
.ic-date{background:#eff6ff;color:#3b82f6}.ic-date.unknown{background:#f8fafc;color:#94a3b8}
.ic-frames{background:#f5f3ff;color:#7c3aed}.ic-views{background:#fff7ed;color:#c2410c}
.rvs-card-foot{display:flex;align-items:center;justify-content:space-between;padding-top:6px;border-top:1px solid #f1f5f9;margin-top:auto;gap:6px}
.rvs-card-domain{font-size:.61rem;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.rvs-card-link{flex-shrink:0;display:inline-flex;align-items:center;gap:3px;padding:4px 10px;background:#1a6b8a;color:#fff!important;border-radius:6px;font-size:.65rem;font-weight:700;text-decoration:none;transition:background .15s,transform .12s;white-space:nowrap}
.rvs-card-link:hover{background:#0d4f68;transform:translateY(-1px)}

.rvs-no-res{text-align:center;padding:32px 20px;display:none}
.rvs-no-res .nri{font-size:3rem;display:block;margin-bottom:14px;opacity:.3}
.rvs-no-res h4{color:#0b3248;font-size:1.1rem;margin-bottom:6px;font-family:'DM Sans',sans-serif}
.rvs-no-res p{color:#7a9aaa;font-size:.87rem;max-width:360px;margin:0 auto 16px}

/* Keep .rvs-btn for 'Try Keyword Search' inside results */
.rvs-btn{background:linear-gradient(135deg,#d4920e 0%,#e8a838 30%,#f5c040 55%,#e8a838 80%,#d4920e 100%);background-size:250% auto;color:#06172a;border:none;border-radius:14px;padding:13px 26px;font-size:.93rem;font-weight:800;font-family:'DM Sans',sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:all .24s ease;white-space:nowrap;position:relative;overflow:hidden;box-shadow:0 6px 28px rgba(232,168,56,.42),inset 0 1px 0 rgba(255,255,255,.3)}
.rvs-btn:hover{background-position:right center;transform:translateY(-2px);box-shadow:0 14px 44px rgba(232,168,56,.56),inset 0 1px 0 rgba(255,255,255,.3)}

/* Origin card */
.rvs-origin-card{display:flex;align-items:flex-start;gap:16px;background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);border:1.5px solid #86efac;border-radius:14px;padding:16px 18px;margin-bottom:18px;animation:rvsCardIn .35s ease both;text-decoration:none;color:inherit;transition:box-shadow .18s,transform .18s}
.rvs-origin-card:hover{box-shadow:0 6px 24px rgba(34,197,94,.18);transform:translateY(-2px)}
.rvs-origin-thumb{width:120px;min-width:120px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#bbf7d0;flex-shrink:0}
.rvs-origin-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rvs-origin-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:#bbf7d0}
.rvs-origin-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rvs-origin-label{display:inline-flex;align-items:center;gap:5px;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#15803d;background:#dcfce7;border:1px solid #86efac;border-radius:99px;padding:2px 9px;width:fit-content}
.rvs-origin-title{font-size:.9rem;font-weight:700;color:#14532d;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0}
.rvs-origin-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rvs-origin-chip{font-size:.67rem;font-weight:600;color:#166534;background:rgba(255,255,255,.7);border:1px solid #86efac;border-radius:99px;padding:2px 8px;white-space:nowrap}
.rvs-origin-link{display:inline-flex;align-items:center;gap:4px;font-size:.71rem;font-weight:700;color:#15803d;text-decoration:none;margin-top:2px;width:fit-content;transition:color .15s}
.rvs-origin-link:hover{color:#0b3248}
.rvs-origin-submitted{font-size:.64rem;color:#4ade80;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — precision mobile-first
════════════════════════════════════════════════════════════ */

/* ── ≤ 860px  Tablet landscape ─────────────────────────── */
@media(max-width:860px){
    .rvs-mode-tile { padding:14px 10px; gap:8px; }
    .rvs-mt-sub    { display:none; }
    .rvs-mt-icon   { width:30px; height:30px; }
    .rvs-mt-label  { font-size:.75rem; }
}

/* ── ≤ 640px  Small tablet / large phone landscape ───── */
@media(max-width:640px){

    /* ── Section header ─────────────────────────────── */
    .rvs-tool-section .section-header { padding:30px 0 16px; }
    .rvs-tool-section .section-header h1 {
        white-space:normal;
        font-size:clamp(1.6rem,5.5vw,2.2rem);
        line-height:1.15;
    }
    .rvs-tool-section .section-header p { font-size:.87rem; }

    /* ── Widget shell ───────────────────────────────── */
    .rvs-search-widget { border-radius:18px; }

    /* ── Mode tiles — icon-only, centred ────────────── */
    .rvs-mode-tile  { padding:12px 6px; gap:0; justify-content:center; }
    .rvs-mt-text    { display:none; }
    .rvs-mt-icon    { width:34px; height:34px; border-radius:10px; }

    /* ── Search stage — right-edge fade overlay ─────── */
    .rvs-search-stage { margin:12px 14px 0; height:150px; overflow:visible; position:relative; }
    /* Gradient overlay sits on top of scroll content — always works unlike mask-image */
    .rvs-search-stage::after {
        content:'';
        position:absolute;
        top:0; right:0; bottom:0;
        width:36px;
        background:linear-gradient(to right, transparent, rgba(8,20,50,0.94));
        pointer-events:none;
        z-index:8;
    }

    /* ── Inputs ─────────────────────────────────────── */
    .rvs-cmd-row    { border-radius:12px; }
    .rvs-cmd-icon   { padding:0 12px; }
    .rvs-cmd-input  { padding:13px 8px; font-size:16px; }

    /* Keyword: keep select inline, let it shrink gracefully */
    .rvs-cmd-select { padding:13px 8px; font-size:14px; max-width:110px; }

    /* Transcript textarea: 2 lines max on mobile */
    #rvsTranscript  { height:56px; min-height:unset; resize:none; }

    /* ── Platform badges — compact + single scrollable row ─ */
    .rvs-plat-row {
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        padding-bottom:3px;
        padding-right:40px; /* breathing room before the fade overlay */
        scrollbar-width:none;
    }
    .rvs-plat-row::-webkit-scrollbar { display:none; }
    /* Smaller badges so more fit before the fade */
    .rvs-plat-row .rvs-pbadge { font-size:.6rem; padding:3px 8px; flex-shrink:0; }
    .rvs-plat-row .plat-lbl   { font-size:.58rem; white-space:nowrap; }

    /* ── Keyword chips — single scrollable row ────── */
    .rvs-kw-chips {
        flex-wrap:nowrap !important;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        padding-bottom:3px;
        padding-right:40px;
        margin-top:8px;
        gap:6px;
        scrollbar-width:none;
    }
    .rvs-kw-chips::-webkit-scrollbar { display:none; }
    .rvs-kw-chip { flex-shrink:0; }

    /* ── Button wrap — clip the upward amber glow ───── */
    /* overflow:hidden prevents the box-shadow from bleeding into the stage above */
    .rvs-search-btn-wrap {
        padding:10px 14px 14px;
        overflow:hidden;
    }
    /* Replace omnidirectional glow with downward-only shadow on mobile */
    .rvs-search-full {
        padding:13px 28px;
        font-size:.94rem;
        border-radius:12px;
        box-shadow:
            0 4px 18px rgba(232,168,56,.5),
            0 8px 24px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.12) !important;
        animation:none !important;
    }

    /* ── Widget footer ──────────────────────────────── */
    .rvs-widget-foot { padding:9px 14px 12px; gap:6px; }
    .rvs-wf-badge    { font-size:.6rem; padding:3px 10px; }
    .rvs-wf-text     { font-size:.62rem; }

    /* ── Results ────────────────────────────────────── */
    #rvs-results-body  { padding:16px 14px 18px; }
    #rvs-grid          { grid-template-columns:1fr 1fr; gap:8px; }
    .rvs-meta-grid     { grid-template-columns:1fr 1fr; }
}

/* ── ≤ 480px  Phone portrait ──────────────────────────── */
@media(max-width:480px){

    /* Section */
    .rvs-tool-section { padding-bottom:44px; }
    .rvs-tool-section .section-header { padding:24px 0 14px; }
    .rvs-tool-section .section-header h1 { font-size:clamp(1.4rem,6.5vw,1.85rem); }
    .rvs-tool-section .section-header p  { font-size:.83rem; }

    /* Widget */
    .rvs-search-widget { border-radius:14px; }

    /* Mode tiles */
    .rvs-mode-tile  { padding:11px 4px; }
    .rvs-mt-icon    { width:30px; height:30px; border-radius:9px; }
    .rvs-mt-icon svg{ width:16px; height:16px; }

    /* Stage */
    .rvs-search-stage   { margin:10px 10px 0; height:145px; overflow:visible; }
    .rvs-cmd-icon       { padding:0 10px; }
    .rvs-cmd-input      { padding:12px 6px; }
    .rvs-cmd-select     { max-width:96px; font-size:13px; padding:12px 6px; }
    #rvsTranscript      { height:52px; }

    /* Platform badges — hide low-priority platforms so all fit on one line */
    /* child order: 1=label 2=YouTube 3=TikTok 4=Vimeo 5=Facebook 6=Instagram 7=Twitter 8=Dailymotion 9=+more */
    .rvs-plat-row { overflow-x:visible; padding-right:0; flex-wrap:nowrap; }
    .rvs-plat-row .rvs-pbadge:nth-child(6),
    .rvs-plat-row .rvs-pbadge:nth-child(7),
    .rvs-plat-row .rvs-pbadge:nth-child(8) { display:none; }
    /* Also kill the stage fade overlay — not needed when badges fit */
    .rvs-search-stage::after { display:none; }

    /* Button */
    .rvs-search-btn-wrap { padding:9px 10px 13px; overflow:hidden; }
    .rvs-search-full {
        padding:12px 20px;
        font-size:.9rem;
        gap:8px;
        border-radius:11px;
    }

    /* Footer */
    .rvs-widget-foot  { padding:8px 10px 11px; gap:5px; flex-wrap:wrap; }
    .rvs-wf-sep       { display:none; }

    /* Drop zone browse btn */
    .dz-btn { width:100%; justify-content:center; border-radius:10px!important; margin:8px 0 0; }

    /* Results */
    #rvs-grid          { grid-template-columns:1fr; }
    .rvs-sum-bar       { flex-direction:column; align-items:flex-start; gap:10px; }
    .rvs-reset-btn     { align-self:stretch; justify-content:center; min-height:40px; }
    .rvs-meta-grid     { grid-template-columns:1fr; }
    .rvs-origin-card   { flex-direction:column; }
    .rvs-origin-thumb  { width:100%; min-width:unset; }
    .rvs-cmd-btn       { font-size:.84rem; padding:12px; min-height:46px; }
}

/* ── ≤ 375px  iPhone SE / Galaxy A series ─────────────── */
@media(max-width:375px){
    .rvs-tool-section .section-header { padding:20px 0 12px; }
    .rvs-tool-section .section-header h1 { font-size:clamp(1.28rem,7vw,1.65rem); }
    .rvs-tool-section .section-header p  { font-size:.79rem; }

    .rvs-search-widget  { border-radius:12px; }
    .rvs-search-stage   { margin:8px 8px 0; height:140px; overflow:visible; }
    .rvs-search-btn-wrap{ padding:8px 8px 12px; overflow:hidden; }

    .rvs-mode-tile  { padding:10px 3px; }
    .rvs-mt-icon    { width:28px; height:28px; border-radius:8px; }
    .rvs-mt-icon svg{ width:15px; height:15px; }

    .rvs-cmd-select { max-width:80px; font-size:12px; padding:11px 5px; }
    #rvsTranscript  { height:89px; }

    .rvs-search-full { padding:11px 16px; font-size:.87rem; gap:7px; }

    .rvs-widget-foot { padding:7px 8px 10px; }
    .rvs-kw-chip     { padding:4px 10px; font-size:.67rem; }
    .rvs-pbadge      { padding:3px 8px; font-size:.62rem; }

    /* Badges: also hide Vimeo + "Supports:" label — YouTube TikTok Facebook +more fits on 320px */
    .rvs-plat-row .plat-lbl { display:none; }
    .rvs-plat-row .rvs-pbadge:nth-child(4) { display:none; }
}
