/* =====================================================
   RAGO VIDEO COMPRESSOR
   STYLE.CSS
   PART 01 / 10

   CORE FOUNDATION
   RESET + VARIABLES + APP SHELL + BASE UTILITIES
===================================================== */


/* =====================================================
   ROOT DESIGN TOKENS
===================================================== */

:root {

    /* ---------------------------------
       CORE BACKGROUNDS
    --------------------------------- */

    --rvc-bg-deep: #050711;
    --rvc-bg-main: #080b16;
    --rvc-bg-soft: #0d1120;
    --rvc-bg-panel: #101523;
    --rvc-bg-panel-2: #13192a;
    --rvc-bg-card: #171d2e;
    --rvc-bg-card-hover: #1c2337;
    --rvc-bg-input: #0b0f1b;
    --rvc-bg-overlay: rgba(2, 4, 10, 0.82);


    /* ---------------------------------
       PURPLE BRAND SYSTEM
    --------------------------------- */

    --rvc-purple: #8b5cf6;
    --rvc-purple-2: #7c3aed;
    --rvc-purple-3: #a78bfa;
    --rvc-purple-soft: rgba(139, 92, 246, 0.14);
    --rvc-purple-medium: rgba(139, 92, 246, 0.28);
    --rvc-purple-border: rgba(139, 92, 246, 0.42);
    --rvc-purple-glow: rgba(139, 92, 246, 0.34);


    /* ---------------------------------
       STATUS COLORS
    --------------------------------- */

    --rvc-success: #34d399;
    --rvc-success-soft: rgba(52, 211, 153, 0.14);

    --rvc-warning: #fbbf24;
    --rvc-warning-soft: rgba(251, 191, 36, 0.14);

    --rvc-danger: #fb7185;
    --rvc-danger-soft: rgba(251, 113, 133, 0.14);

    --rvc-info: #38bdf8;
    --rvc-info-soft: rgba(56, 189, 248, 0.14);


    /* ---------------------------------
       TEXT SYSTEM
    --------------------------------- */

    --rvc-text-main: #f7f8fc;
    --rvc-text-soft: #c4cad8;
    --rvc-text-muted: #858da2;
    --rvc-text-faint: #5f687d;
    --rvc-text-dark: #090b12;


    /* ---------------------------------
       BORDER SYSTEM
    --------------------------------- */

    --rvc-border: rgba(255, 255, 255, 0.08);
    --rvc-border-soft: rgba(255, 255, 255, 0.055);
    --rvc-border-strong: rgba(255, 255, 255, 0.13);


    /* ---------------------------------
       SHADOW SYSTEM
    --------------------------------- */

    --rvc-shadow-sm:
        0 4px 14px rgba(0, 0, 0, 0.18);

    --rvc-shadow-md:
        0 12px 34px rgba(0, 0, 0, 0.28);

    --rvc-shadow-lg:
        0 24px 70px rgba(0, 0, 0, 0.42);

    --rvc-shadow-purple:
        0 0 0 1px rgba(139, 92, 246, 0.12),
        0 14px 36px rgba(76, 29, 149, 0.18);


    /* ---------------------------------
       RADIUS SYSTEM
    --------------------------------- */

    --rvc-radius-xs: 6px;
    --rvc-radius-sm: 9px;
    --rvc-radius-md: 13px;
    --rvc-radius-lg: 18px;
    --rvc-radius-xl: 24px;
    --rvc-radius-pill: 999px;


    /* ---------------------------------
       SPACING SYSTEM
    --------------------------------- */

    --rvc-space-1: 4px;
    --rvc-space-2: 8px;
    --rvc-space-3: 12px;
    --rvc-space-4: 16px;
    --rvc-space-5: 20px;
    --rvc-space-6: 24px;
    --rvc-space-7: 28px;
    --rvc-space-8: 32px;


    /* ---------------------------------
       TYPOGRAPHY
    --------------------------------- */

    --rvc-font:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;


    /* ---------------------------------
       LAYOUT
    --------------------------------- */

    --rvc-header-height: 76px;

    --rvc-left-width: 300px;
    --rvc-right-width: 360px;

    --rvc-app-min-width: 0px;


    /* ---------------------------------
       TRANSITIONS
    --------------------------------- */

    --rvc-transition-fast: 140ms ease;
    --rvc-transition: 220ms ease;
    --rvc-transition-slow: 360ms ease;


    /* ---------------------------------
       Z-INDEX SYSTEM
    --------------------------------- */

    --rvc-z-base: 1;
    --rvc-z-sticky: 30;
    --rvc-z-dropdown: 80;
    --rvc-z-modal: 500;
    --rvc-z-toast: 800;
}


/* =====================================================
   GLOBAL RESET
===================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(124, 58, 237, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 12%,
            rgba(56, 189, 248, 0.045),
            transparent 22%
        ),
        var(--rvc-bg-deep);

    color-scheme: dark;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    scroll-behavior: smooth;
}


body {
    width: 100%;
    min-width: 0;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.012),
            transparent 180px
        ),
        transparent;

    color: var(--rvc-text-main);

    font-family: var(--rvc-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    margin: 0;
    padding: 0;

    color: inherit;

    background: none;
    border: 0;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}


input,
select,
textarea {
    color: var(--rvc-text-main);
}


select {
    color-scheme: dark;
}


img,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}


video {
    background: #000;
}


a {
    color: inherit;
    text-decoration: none;
}


h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}


ul,
ol {
    margin: 0;
    padding: 0;

    list-style: none;
}


fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;

    border: 0;
}


table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* =====================================================
   SELECTION
===================================================== */

::selection {
    color: #ffffff;
    background: rgba(139, 92, 246, 0.72);
}


/* =====================================================
   SCROLLBAR
===================================================== */

* {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(139, 92, 246, 0.48)
        rgba(255, 255, 255, 0.035);
}


*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}


*::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.025);
}


*::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            rgba(139, 92, 246, 0.62),
            rgba(124, 58, 237, 0.44)
        );

    border: 2px solid rgba(5, 7, 17, 0.72);
    border-radius: var(--rvc-radius-pill);
}


*::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            rgba(167, 139, 250, 0.82),
            rgba(139, 92, 246, 0.64)
        );
}


/* =====================================================
   FOCUS SYSTEM
===================================================== */

:focus {
    outline: none;
}


:focus-visible {
    outline: 2px solid var(--rvc-purple-3);
    outline-offset: 3px;
}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    box-shadow:
        0 0 0 3px rgba(139, 92, 246, 0.18);
}


/* =====================================================
   HIDDEN ELEMENTS
===================================================== */

[hidden] {
    display: none !important;
}


.rvc-hidden-input {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   MAIN APPLICATION SHELL
===================================================== */

.rvc-app {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: var(--rvc-app-min-width);
    min-height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 8%,
            rgba(124, 58, 237, 0.08),
            transparent 24%
        ),
        radial-gradient(
            circle at 84% 16%,
            rgba(139, 92, 246, 0.055),
            transparent 22%
        ),
        linear-gradient(
            180deg,
            #080b15 0%,
            #070a13 46%,
            #050711 100%
        );
}


/* SUBTLE FUTURISTIC GRID */

.rvc-app::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;
}


/* TOP PURPLE AMBIENT GLOW */

.rvc-app::after {
    content: "";

    position: fixed;
    top: -240px;
    left: 50%;

    width: 720px;
    height: 420px;

    z-index: -1;

    pointer-events: none;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(124, 58, 237, 0.16),
            rgba(124, 58, 237, 0.04) 44%,
            transparent 72%
        );

    filter: blur(18px);
}


/* =====================================================
   GENERIC PANEL FOUNDATION
===================================================== */

.rvc-panel {
    position: relative;

    min-width: 0;

    background:
        linear-gradient(
            180deg,
            rgba(19, 25, 42, 0.96),
            rgba(12, 16, 29, 0.97)
        );

    border: 1px solid var(--rvc-border);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        var(--rvc-shadow-sm);
}


/* =====================================================
   GENERIC SECTION TITLES
===================================================== */

.rvc-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-width: 0;
}


.rvc-section-title {
    color: var(--rvc-text-main);

    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.075em;
    text-transform: uppercase;
}


.rvc-mini-label {
    color: var(--rvc-text-muted);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =====================================================
   GENERIC ICON BUTTON FOUNDATION
===================================================== */

.rvc-header-icon-btn,
.rvc-camera-icon-btn,
.rvc-player-btn,
.rvc-video-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast);
}


.rvc-header-icon-btn:hover,
.rvc-camera-icon-btn:hover,
.rvc-player-btn:hover,
.rvc-video-menu-btn:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.065);
}


.rvc-header-icon-btn:active,
.rvc-camera-icon-btn:active,
.rvc-player-btn:active,
.rvc-video-menu-btn:active {
    transform: scale(0.96);
}


/* =====================================================
   GENERIC TEXT HELPERS
===================================================== */

.rvc-text-success {
    color: var(--rvc-success) !important;
}


.rvc-text-warning {
    color: var(--rvc-warning) !important;
}


.rvc-text-danger {
    color: var(--rvc-danger) !important;
}


.rvc-text-muted {
    color: var(--rvc-text-muted) !important;
}


/* =====================================================
   GENERIC INTERACTIVE STATES
===================================================== */

.is-disabled {
    pointer-events: none;
    opacity: 0.46;
}


.is-busy {
    cursor: progress;
}


.is-hidden {
    display: none !important;
}


.is-visible {
    display: block !important;
}


/* =====================================================
   REDUCED MOTION ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
    }

}


/* =====================================================
   PART 01 END

   NEXT:
   PART 02 / 10

   - TOP HEADER
   - RAGO BRAND
   - TOOL IDENTITY
   - WORKFLOW STEPS
   - HEADER ACTIONS
===================================================== */


























/* =====================================================
   RAGO VIDEO COMPRESSOR
   STYLE.CSS
   PART 02 / 10

   TOP HEADER
   BRAND + TOOL IDENTITY + WORKFLOW + ACTIONS
===================================================== */


/* =====================================================
   MAIN HEADER
===================================================== */

.rvc-header {
    position: relative;
    z-index: var(--rvc-z-sticky);

    display: grid;
    grid-template-columns:
        minmax(320px, 1fr)
        minmax(420px, 1.15fr)
        minmax(320px, 1fr);

    align-items: center;

    width: 100%;
    min-width: 0;
    min-height: var(--rvc-header-height);

    padding:
        10px
        clamp(14px, 1.5vw, 26px);

    gap:
        clamp(14px, 1.6vw, 30px);

    background:
        linear-gradient(
            180deg,
            rgba(12, 15, 28, 0.985),
            rgba(8, 11, 21, 0.975)
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.075);

    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.22),
        inset 0 -1px 0 rgba(139, 92, 246, 0.035);

    backdrop-filter:
        blur(18px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(120%);
}


/* SUBTLE PURPLE HEADER LINE */

.rvc-header::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -1px;

    width: min(52%, 760px);
    height: 1px;

    transform: translateX(-50%);

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(139, 92, 246, 0.18),
            rgba(167, 139, 250, 0.48),
            rgba(139, 92, 246, 0.18),
            transparent
        );

    box-shadow:
        0 0 18px rgba(139, 92, 246, 0.18);
}


/* =====================================================
   HEADER BRAND AREA
===================================================== */

.rvc-header-brand {
    display: flex;
    align-items: center;

    min-width: 0;

    gap:
        clamp(12px, 1.2vw, 20px);
}


/* =====================================================
   RAGO LOGO
===================================================== */

.rvc-logo {
    position: relative;

    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 84px;

    padding:
        4px
        2px;

    transition:
        transform var(--rvc-transition-fast),
        filter var(--rvc-transition-fast);
}


.rvc-logo:hover {
    transform: translateY(-1px);

    filter:
        drop-shadow(
            0 0 12px
            rgba(139, 92, 246, 0.22)
        );
}


.rvc-logo-main {
    display: block;

    color: #f9f8ff;

    font-size:
        clamp(20px, 1.5vw, 27px);

    font-weight: 900;
    line-height: 0.94;

    letter-spacing: -0.055em;
}


.rvc-logo-accent {
    color: var(--rvc-purple-3);

    text-shadow:
        0 0 16px
        rgba(139, 92, 246, 0.26);
}


.rvc-logo-sub {
    display: block;

    margin-top: 5px;
    margin-left: 2px;

    color: var(--rvc-text-muted);

    font-size: 8px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.34em;
}


/* =====================================================
   HEADER DIVIDER
===================================================== */

.rvc-header-divider {
    width: 1px;
    height: 38px;

    flex: 0 0 auto;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 255, 255, 0.14),
            rgba(139, 92, 246, 0.22),
            transparent
        );
}


/* =====================================================
   TOOL IDENTITY
===================================================== */

.rvc-tool-identity {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 11px;
}


.rvc-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    color: var(--rvc-purple-3);

    font-size: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.18),
            rgba(124, 58, 237, 0.07)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.24);

    border-radius: 11px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.04),
        0 8px 22px
        rgba(76, 29, 149, 0.10);
}


.rvc-tool-title-wrap {
    min-width: 0;
}


.rvc-tool-title {
    overflow: hidden;

    color: var(--rvc-text-main);

    font-size:
        clamp(12px, 0.92vw, 15px);

    font-weight: 850;
    line-height: 1.2;

    letter-spacing: 0.055em;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.rvc-tool-subtitle {
    overflow: hidden;

    max-width: 250px;

    margin-top: 4px;

    color: var(--rvc-text-muted);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   WORKFLOW
===================================================== */

.rvc-workflow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;

    padding:
        0
        4px;
}


/* =====================================================
   WORKFLOW STEP
===================================================== */

.rvc-workflow-step {
    position: relative;

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 58px;

    color: var(--rvc-text-muted);

    transition:
        color var(--rvc-transition),
        transform var(--rvc-transition-fast);
}


.rvc-workflow-step:hover {
    color: var(--rvc-text-soft);

    transform: translateY(-1px);
}


/* =====================================================
   STEP NUMBER
===================================================== */

.rvc-step-number {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    color: #9ca4b8;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 50%;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.035);

    transition:
        color var(--rvc-transition),
        background var(--rvc-transition),
        border-color var(--rvc-transition),
        box-shadow var(--rvc-transition),
        transform var(--rvc-transition);
}


/* =====================================================
   STEP LABEL
===================================================== */

.rvc-step-label {
    display: block;

    margin-top: 5px;

    color: currentColor;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.025em;
}


/* =====================================================
   STEP CHECK ICON
===================================================== */

.rvc-step-check {
    position: absolute;
    top: 7px;
    left: 50%;

    z-index: 2;

    color: #ffffff;

    font-size: 8px;

    transform:
        translate(-50%, -50%);

    pointer-events: none;
}


/* HIDE NUMBER TEXT WHEN COMPLETE */

.rvc-workflow-step.is-complete
.rvc-step-number {
    color: transparent;

    background:
        linear-gradient(
            145deg,
            #9d75ff,
            #7447ef
        );

    border-color:
        rgba(167, 139, 250, 0.68);

    box-shadow:
        0 0 0 3px
        rgba(139, 92, 246, 0.10),
        0 0 20px
        rgba(139, 92, 246, 0.22);
}


.rvc-workflow-step.is-complete {
    color: var(--rvc-text-soft);
}


/* =====================================================
   ACTIVE STEP
===================================================== */

.rvc-workflow-step.is-active {
    color: var(--rvc-purple-3);
}


.rvc-workflow-step.is-active
.rvc-step-number {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #9b70ff,
            #6d3ee8
        );

    border-color:
        rgba(167, 139, 250, 0.76);

    box-shadow:
        0 0 0 4px
        rgba(139, 92, 246, 0.11),
        0 0 22px
        rgba(139, 92, 246, 0.25);

    transform: scale(1.04);
}


/* =====================================================
   WORKFLOW CONNECTOR LINE
===================================================== */

.rvc-workflow-line {
    position: relative;

    flex:
        1
        1
        54px;

    min-width: 28px;
    max-width: 78px;

    height: 1px;

    margin:
        0
        2px
        14px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.085);
}


.rvc-workflow-line::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            rgba(139, 92, 246, 0.34),
            rgba(167, 139, 250, 0.92)
        );

    transform:
        scaleX(0);

    transform-origin: left center;

    transition:
        transform var(--rvc-transition-slow),
        opacity var(--rvc-transition);
}


.rvc-workflow-line.is-complete::after {
    opacity: 1;

    transform:
        scaleX(1);
}


/* =====================================================
   HEADER ACTIONS
===================================================== */

.rvc-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    min-width: 0;

    gap: 6px;
}


/* =====================================================
   NORMAL HEADER BUTTON
===================================================== */

.rvc-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 36px;

    padding:
        0
        10px;

    gap: 7px;

    color: var(--rvc-text-muted);

    font-size: 10px;
    font-weight: 700;

    background:
        transparent;

    border:
        1px solid
        transparent;

    border-radius: 9px;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast);
}


.rvc-header-btn i {
    font-size: 12px;
}


.rvc-header-btn:hover {
    color: var(--rvc-text-main);

    background:
        rgba(255, 255, 255, 0.045);

    border-color:
        rgba(255, 255, 255, 0.065);
}


.rvc-header-btn:active {
    transform: scale(0.97);
}


/* =====================================================
   HEADER ICON BUTTON
===================================================== */

.rvc-header-icon-btn {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    color: var(--rvc-text-muted);

    font-size: 12px;

    background:
        transparent;

    border:
        1px solid
        transparent;

    border-radius: 9px;
}


.rvc-header-icon-btn:hover {
    border-color:
        rgba(255, 255, 255, 0.065);
}


/* =====================================================
   LANGUAGE BUTTON
===================================================== */

.rvc-language-btn {
    min-width: 62px;
}


.rvc-small-chevron {
    margin-left: 1px;

    color: var(--rvc-text-faint);

    font-size: 8px !important;
}


/* =====================================================
   PREMIUM BUTTON
===================================================== */

.rvc-premium-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 36px;

    padding:
        0
        14px;

    gap: 7px;

    overflow: hidden;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #8b5cf6 0%,
            #7c3aed 52%,
            #6d28d9 100%
        );

    border:
        1px solid
        rgba(196, 181, 253, 0.26);

    border-radius: 9px;

    box-shadow:
        0 8px 22px
        rgba(109, 40, 217, 0.22),
        inset 0 1px 0
        rgba(255, 255, 255, 0.18);

    transition:
        transform var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast),
        filter var(--rvc-transition-fast);
}


.rvc-premium-btn::before {
    content: "";

    position: absolute;
    top: -60%;
    left: -45%;

    width: 32%;
    height: 220%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.24),
            transparent
        );

    transform:
        rotate(18deg)
        translateX(-160%);
}


.rvc-premium-btn:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(1.07);

    box-shadow:
        0 11px 28px
        rgba(109, 40, 217, 0.30),
        0 0 22px
        rgba(139, 92, 246, 0.12),
        inset 0 1px 0
        rgba(255, 255, 255, 0.20);
}


.rvc-premium-btn:hover::before {
    animation:
        rvcPremiumShine
        900ms
        ease
        forwards;
}


.rvc-premium-btn:active {
    transform:
        translateY(0)
        scale(0.98);
}


.rvc-premium-btn i {
    font-size: 11px;
}


/* =====================================================
   PREMIUM SHINE ANIMATION
===================================================== */

@keyframes rvcPremiumShine {

    from {
        transform:
            rotate(18deg)
            translateX(-160%);
    }

    to {
        transform:
            rotate(18deg)
            translateX(520%);
    }

}


/* =====================================================
   HEADER ACTIVE ACTION STATE
===================================================== */

.rvc-header-btn.is-active,
.rvc-header-icon-btn.is-active {
    color: var(--rvc-purple-3);

    background:
        rgba(139, 92, 246, 0.10);

    border-color:
        rgba(139, 92, 246, 0.20);
}


/* =====================================================
   HEADER BUSY STATE
===================================================== */

.rvc-header.is-busy
.rvc-workflow-step.is-active
.rvc-step-number {
    animation:
        rvcHeaderPulse
        1.5s
        ease-in-out
        infinite;
}


@keyframes rvcHeaderPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px
            rgba(139, 92, 246, 0.10),
            0 0 18px
            rgba(139, 92, 246, 0.20);
    }

    50% {
        box-shadow:
            0 0 0 7px
            rgba(139, 92, 246, 0.045),
            0 0 28px
            rgba(139, 92, 246, 0.34);
    }

}


/* =====================================================
   LARGE HEADER SAFETY
   FULL RESPONSIVE TRANSFORMATION COMES IN PART 10
===================================================== */

@media (max-width: 1450px) {

    .rvc-header {
        grid-template-columns:
            minmax(285px, 0.95fr)
            minmax(390px, 1.1fr)
            minmax(285px, 0.95fr);

        gap: 12px;
    }


    .rvc-tool-subtitle {
        max-width: 190px;
    }


    .rvc-header-btn {
        padding:
            0
            8px;
    }


    .rvc-premium-btn {
        padding:
            0
            11px;
    }

}


@media (max-width: 1240px) {

    .rvc-header {
        grid-template-columns:
            minmax(250px, 0.9fr)
            minmax(350px, 1.1fr)
            minmax(250px, 0.9fr);
    }


    .rvc-tool-subtitle {
        display: none;
    }


    .rvc-header-btn span {
        display: none;
    }


    .rvc-header-btn {
        width: 36px;
        min-width: 36px;

        padding: 0;
    }


    .rvc-language-btn span {
        display: inline;
    }


    .rvc-language-btn {
        width: auto;
        min-width: 58px;

        padding:
            0
            8px;
    }


    .rvc-premium-btn span {
        display: none;
    }


    .rvc-premium-btn {
        width: 38px;
        min-width: 38px;

        padding: 0;
    }

}


/* =====================================================
   PART 02 END

   NEXT:
   PART 03 / 10

   - MAIN 3-COLUMN STUDIO GRID
   - LEFT PANEL SHELL
   - IMPORT SECTION
   - DEVICE / CAMERA TABS
   - DROP ZONE
   - BROWSE BUTTON
   - QUICK ACCESS
===================================================== */






























/* =====================================================
   RAGO VIDEO COMPRESSOR
   STYLE.CSS
   PART 03 / 10

   STUDIO GRID
   LEFT PANEL
   IMPORT + SOURCE TABS + DROP ZONE + QUICK ACCESS
===================================================== */


/* =====================================================
   MAIN STUDIO GRID
===================================================== */

.rvc-studio {
    position: relative;
    z-index: var(--rvc-z-base);

    display: grid;

    grid-template-columns:
        minmax(270px, var(--rvc-left-width))
        minmax(0, 1fr)
        minmax(330px, var(--rvc-right-width));

    align-items: stretch;

    width: 100%;
    min-width: 0;

    min-height:
        calc(
            100vh -
            var(--rvc-header-height)
        );

    gap: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.008),
            transparent 220px
        );
}


/* =====================================================
   LEFT PANEL SHELL
===================================================== */

.rvc-left-panel {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(15, 20, 35, 0.985),
            rgba(9, 13, 24, 0.99)
        );

    border-top: 0;
    border-left: 0;
    border-bottom: 0;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius: 0;

    box-shadow:
        12px 0 34px
        rgba(0, 0, 0, 0.12);
}


/* SUBTLE LEFT PANEL AMBIENT GLOW */

.rvc-left-panel::before {
    content: "";

    position: absolute;
    top: -120px;
    left: -100px;

    width: 280px;
    height: 280px;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.09),
            transparent 68%
        );

    filter: blur(12px);
}


/* =====================================================
   LEFT PANEL SECTIONS
===================================================== */

.rvc-left-section {
    position: relative;

    min-width: 0;
}


.rvc-import-section {
    flex: 0 0 auto;

    padding:
        18px
        16px
        16px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.065);
}


.rvc-import-section
.rvc-section-heading {
    margin-bottom: 13px;
}


/* =====================================================
   SOURCE TABS
===================================================== */

.rvc-source-tabs {
    position: relative;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: center;

    width: 100%;

    padding: 3px;

    gap: 3px;

    background:
        rgba(4, 7, 14, 0.64);

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        var(--rvc-radius-sm);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.018);
}


/* =====================================================
   SOURCE TAB BUTTON
===================================================== */

.rvc-source-tab {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 36px;

    padding:
        0
        10px;

    gap: 8px;

    overflow: hidden;

    color:
        var(--rvc-text-muted);

    font-size: 11px;
    font-weight: 750;
    line-height: 1;

    background:
        transparent;

    border:
        1px solid
        transparent;

    border-radius: 7px;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast),
        transform var(--rvc-transition-fast);
}


.rvc-source-tab i {
    flex: 0 0 auto;

    font-size: 12px;
}


.rvc-source-tab:hover {
    color:
        var(--rvc-text-soft);

    background:
        rgba(255, 255, 255, 0.035);
}


.rvc-source-tab:active {
    transform:
        scale(0.98);
}


/* ACTIVE TAB */

.rvc-source-tab.is-active {
    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.22),
            rgba(124, 58, 237, 0.10)
        );

    border-color:
        rgba(139, 92, 246, 0.28);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.055),
        0 6px 18px
        rgba(76, 29, 149, 0.11);
}


.rvc-source-tab.is-active i {
    color:
        var(--rvc-purple-3);

    text-shadow:
        0 0 12px
        rgba(139, 92, 246, 0.24);
}


/* =====================================================
   SOURCE CONTENT
===================================================== */

.rvc-source-content {
    position: relative;

    width: 100%;
    min-width: 0;

    margin-top: 12px;
}


.rvc-source-content.is-active {
    animation:
        rvcSourcePanelIn
        220ms
        ease;
}


@keyframes rvcSourcePanelIn {

    from {
        opacity: 0;

        transform:
            translateY(4px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =====================================================
   DRAG & DROP ZONE
===================================================== */

.rvc-drop-zone {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    min-height: 194px;

    padding:
        20px
        14px
        16px;

    overflow: hidden;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(139, 92, 246, 0.035),
            rgba(255, 255, 255, 0.012)
        );

    border:
        1px dashed
        rgba(139, 92, 246, 0.34);

    border-radius:
        var(--rvc-radius-md);

    cursor: pointer;

    transition:
        background var(--rvc-transition),
        border-color var(--rvc-transition),
        box-shadow var(--rvc-transition),
        transform var(--rvc-transition-fast);
}


/* DROP ZONE INNER GLOW */

.rvc-drop-zone::before {
    content: "";

    position: absolute;
    top: -90px;
    left: 50%;

    width: 220px;
    height: 180px;

    pointer-events: none;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(139, 92, 246, 0.10),
            transparent 68%
        );

    opacity: 0.78;

    transition:
        opacity var(--rvc-transition),
        transform var(--rvc-transition);
}


/* SUBTLE BOTTOM FADE */

.rvc-drop-zone::after {
    content: "";

    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;

    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(139, 92, 246, 0.20),
            transparent
        );
}


/* HOVER */

.rvc-drop-zone:hover {
    background:
        linear-gradient(
            180deg,
            rgba(139, 92, 246, 0.075),
            rgba(139, 92, 246, 0.018)
        );

    border-color:
        rgba(167, 139, 250, 0.58);

    box-shadow:
        0 0 0 3px
        rgba(139, 92, 246, 0.055),
        inset 0 1px 0
        rgba(255, 255, 255, 0.025),
        0 12px 30px
        rgba(76, 29, 149, 0.10);
}


.rvc-drop-zone:hover::before {
    opacity: 1;

    transform:
        translateX(-50%)
        scale(1.08);
}


/* ACTIVE DRAG STATE
   JS WILL ADD .is-dragover
*/

.rvc-drop-zone.is-dragover {
    background:
        linear-gradient(
            180deg,
            rgba(139, 92, 246, 0.16),
            rgba(124, 58, 237, 0.06)
        );

    border-color:
        var(--rvc-purple-3);

    border-style:
        solid;

    box-shadow:
        0 0 0 4px
        rgba(139, 92, 246, 0.10),
        0 0 34px
        rgba(139, 92, 246, 0.17),
        inset 0 1px 0
        rgba(255, 255, 255, 0.06);

    transform:
        translateY(-1px);
}


/* =====================================================
   UPLOAD ICON
===================================================== */

.rvc-upload-icon {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 11px;

    color:
        var(--rvc-purple-3);

    font-size: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.18),
            rgba(124, 58, 237, 0.065)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.25);

    border-radius:
        15px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.055),
        0 9px 24px
        rgba(76, 29, 149, 0.13);

    transition:
        transform var(--rvc-transition),
        box-shadow var(--rvc-transition);
}


.rvc-drop-zone:hover
.rvc-upload-icon {
    transform:
        translateY(-2px);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.07),
        0 11px 28px
        rgba(76, 29, 149, 0.19),
        0 0 18px
        rgba(139, 92, 246, 0.10);
}


.rvc-drop-zone.is-dragover
.rvc-upload-icon {
    animation:
        rvcUploadIconPulse
        900ms
        ease-in-out
        infinite;
}


@keyframes rvcUploadIconPulse {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-3px)
            scale(1.06);
    }

}


/* =====================================================
   DROP TEXT
===================================================== */

.rvc-drop-title {
    position: relative;
    z-index: 1;

    color:
        var(--rvc-text-main);

    font-size: 12px;
    font-weight: 750;
    line-height: 1.3;
}


.rvc-drop-or {
    position: relative;
    z-index: 1;

    margin:
        5px
        0;

    color:
        var(--rvc-text-faint);

    font-size: 9px;
    font-weight: 600;
    line-height: 1;
}


/* =====================================================
   BROWSE FILES BUTTON
===================================================== */

.rvc-browse-btn {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding:
        0
        14px;

    gap: 7px;

    color:
        #ffffff;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #7139e8
        );

    border:
        1px solid
        rgba(196, 181, 253, 0.24);

    border-radius:
        8px;

    box-shadow:
        0 7px 18px
        rgba(109, 40, 217, 0.20),
        inset 0 1px 0
        rgba(255, 255, 255, 0.16);

    transition:
        transform var(--rvc-transition-fast),
        filter var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-browse-btn:hover {
    filter:
        brightness(1.08);

    transform:
        translateY(-1px);

    box-shadow:
        0 9px 22px
        rgba(109, 40, 217, 0.27),
        0 0 18px
        rgba(139, 92, 246, 0.10),
        inset 0 1px 0
        rgba(255, 255, 255, 0.18);
}


.rvc-browse-btn:active {
    transform:
        translateY(0)
        scale(0.98);
}


.rvc-browse-btn i {
    font-size: 11px;
}


/* =====================================================
   UPLOAD INFORMATION
===================================================== */

.rvc-upload-info {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 11px;

    gap: 2px;

    color:
        var(--rvc-text-faint);

    font-size: 8px;
    font-weight: 600;
    line-height: 1.35;
}


/* =====================================================
   CAMERA SOURCE CARD
===================================================== */

.rvc-camera-source-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 194px;

    padding:
        18px
        14px;

    overflow: hidden;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(139, 92, 246, 0.055),
            rgba(255, 255, 255, 0.012)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.22);

    border-radius:
        var(--rvc-radius-md);
}


.rvc-camera-source-card::before {
    content: "";

    position: absolute;
    top: -100px;
    left: 50%;

    width: 230px;
    height: 190px;

    transform:
        translateX(-50%);

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(139, 92, 246, 0.11),
            transparent 68%
        );
}


/* =====================================================
   CAMERA SOURCE ICON
===================================================== */

.rvc-camera-source-icon {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 10px;

    color:
        var(--rvc-purple-3);

    font-size: 18px;

    background:
        rgba(139, 92, 246, 0.12);

    border:
        1px solid
        rgba(139, 92, 246, 0.24);

    border-radius:
        15px;

    box-shadow:
        0 8px 22px
        rgba(76, 29, 149, 0.12);
}


.rvc-camera-source-title {
    position: relative;
    z-index: 1;

    color:
        var(--rvc-text-main);

    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}


.rvc-camera-source-text {
    position: relative;
    z-index: 1;

    max-width: 220px;

    margin-top: 5px;

    color:
        var(--rvc-text-muted);

    font-size: 9px;
    font-weight: 500;
    line-height: 1.45;
}


/* =====================================================
   OPEN CAMERA BUTTON
===================================================== */

.rvc-open-camera-btn {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    margin-top: 12px;

    padding:
        0
        15px;

    gap: 7px;

    color:
        #ffffff;

    font-size: 10px;
    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #7139e8
        );

    border:
        1px solid
        rgba(196, 181, 253, 0.24);

    border-radius:
        8px;

    box-shadow:
        0 8px 20px
        rgba(109, 40, 217, 0.20),
        inset 0 1px 0
        rgba(255, 255, 255, 0.16);

    transition:
        transform var(--rvc-transition-fast),
        filter var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-open-camera-btn:hover {
    filter:
        brightness(1.08);

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 24px
        rgba(109, 40, 217, 0.28);
}


.rvc-open-camera-btn:active {
    transform:
        scale(0.98);
}


/* =====================================================
   CAMERA PERMISSION NOTE
===================================================== */

.rvc-camera-permission-note {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 9px;

    gap: 5px;

    color:
        var(--rvc-text-faint);

    font-size: 8px;
    font-weight: 600;
    line-height: 1.3;
}


.rvc-camera-permission-note i {
    color:
        var(--rvc-success);

    font-size: 8px;
}


/* =====================================================
   QUICK ACCESS
===================================================== */

.rvc-quick-access {
    margin-top: 15px;
}


.rvc-quick-access
.rvc-mini-label {
    margin-bottom: 8px;
}


/* =====================================================
   QUICK ACCESS GRID
===================================================== */

.rvc-quick-access-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}


/* =====================================================
   QUICK ACCESS BUTTON
===================================================== */

.rvc-quick-access-btn {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 62px;

    padding:
        9px
        6px;

    gap: 6px;

    overflow: hidden;

    color:
        var(--rvc-text-muted);

    font-size: 9px;
    font-weight: 700;
    line-height: 1.15;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.032),
            rgba(255, 255, 255, 0.014)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius:
        var(--rvc-radius-sm);

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-quick-access-btn i {
    color:
        var(--rvc-purple-3);

    font-size: 15px;

    transition:
        transform var(--rvc-transition-fast),
        color var(--rvc-transition-fast);
}


.rvc-quick-access-btn:hover {
    color:
        var(--rvc-text-main);

    background:
        linear-gradient(
            180deg,
            rgba(139, 92, 246, 0.095),
            rgba(139, 92, 246, 0.035)
        );

    border-color:
        rgba(139, 92, 246, 0.26);

    box-shadow:
        0 8px 20px
        rgba(76, 29, 149, 0.10);

    transform:
        translateY(-1px);
}


.rvc-quick-access-btn:hover i {
    color:
        #c4b5fd;

    transform:
        scale(1.05);
}


.rvc-quick-access-btn:active {
    transform:
        translateY(0)
        scale(0.98);
}


/* =====================================================
   LEFT PANEL IMPORT BUSY STATE
   JS MAY ADD .is-importing
===================================================== */

.rvc-import-section.is-importing
.rvc-drop-zone {
    pointer-events: none;

    border-style:
        solid;

    border-color:
        rgba(139, 92, 246, 0.48);

    background:
        linear-gradient(
            180deg,
            rgba(139, 92, 246, 0.10),
            rgba(124, 58, 237, 0.035)
        );
}


.rvc-import-section.is-importing
.rvc-upload-icon {
    animation:
        rvcImportBusy
        1.1s
        ease-in-out
        infinite;
}


@keyframes rvcImportBusy {

    0%,
    100% {
        transform:
            translateY(0);

        opacity:
            0.72;
    }

    50% {
        transform:
            translateY(-4px);

        opacity:
            1;
    }

}


/* =====================================================
   LAPTOP GRID SAFETY
   FULL RESPONSIVE SYSTEM COMES IN PART 10
===================================================== */

@media (max-width: 1450px) {

    :root {
        --rvc-left-width: 280px;
        --rvc-right-width: 340px;
    }


    .rvc-studio {
        grid-template-columns:
            minmax(255px, var(--rvc-left-width))
            minmax(0, 1fr)
            minmax(315px, var(--rvc-right-width));
    }


    .rvc-import-section {
        padding:
            16px
            14px
            14px;
    }


    .rvc-drop-zone,
    .rvc-camera-source-card {
        min-height:
            184px;
    }

}


@media (max-width: 1240px) {

    :root {
        --rvc-left-width: 260px;
        --rvc-right-width: 320px;
    }


    .rvc-studio {
        grid-template-columns:
            minmax(240px, var(--rvc-left-width))
            minmax(0, 1fr)
            minmax(300px, var(--rvc-right-width));
    }


    .rvc-drop-zone {
        min-height:
            176px;

        padding:
            17px
            11px
            14px;
    }


    .rvc-camera-source-card {
        min-height:
            176px;
    }


    .rvc-upload-icon,
    .rvc-camera-source-icon {
        width:
            44px;

        height:
            44px;
    }

}


/* =====================================================
   PART 03 END

   NEXT:
   PART 04 / 10

   - VIDEO LIBRARY SECTION
   - MY VIDEOS HEADER
   - VIDEO COUNT
   - CLEAR ALL
   - VIDEO LIST
   - VIDEO CARDS
   - SELECT STATE
   - THUMBNAILS
   - STORAGE STATUS
===================================================== */


































/* =====================================================
   RAGO VIDEO COMPRESSOR
   STYLE.CSS
   PART 04 / 10

   VIDEO LIBRARY
   VIDEO CARDS + SELECT STATES + STORAGE STATUS
===================================================== */


/* =====================================================
   VIDEO LIBRARY SECTION
===================================================== */

.rvc-library-section {
    display: flex;
    flex-direction: column;

    flex:
        1
        1
        auto;

    min-width: 0;
    min-height: 0;

    padding:
        15px
        12px
        13px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.008),
            rgba(0, 0, 0, 0.035)
        );
}


/* =====================================================
   LIBRARY HEADER
===================================================== */

.rvc-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex: 0 0 auto;

    min-width: 0;

    margin-bottom: 10px;

    padding:
        0
        3px;

    gap: 10px;
}


/* =====================================================
   VIDEO COUNT
===================================================== */

.rvc-video-count {
    margin-left: 3px;

    color:
        var(--rvc-text-muted);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0;
    text-transform: none;
}


/* =====================================================
   CLEAR ALL BUTTON
===================================================== */

.rvc-clear-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 28px;

    padding:
        0
        8px;

    color:
        var(--rvc-text-muted);

    font-size: 9px;
    font-weight: 750;
    line-height: 1;

    background:
        transparent;

    border:
        1px solid
        transparent;

    border-radius:
        7px;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast);
}


.rvc-clear-all-btn:hover {
    color:
        var(--rvc-danger);

    background:
        var(--rvc-danger-soft);

    border-color:
        rgba(251, 113, 133, 0.18);
}


.rvc-clear-all-btn:active {
    transform:
        scale(0.97);
}


/* =====================================================
   VIDEO LIST
===================================================== */

.rvc-video-list {
    position: relative;

    display: flex;
    flex-direction: column;

    flex:
        1
        1
        auto;

    min-width: 0;
    min-height: 0;

    padding:
        1px
        3px
        5px;

    gap: 7px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior:
        contain;

    scroll-behavior:
        smooth;
}


/* =====================================================
   VIDEO ITEM
===================================================== */

.rvc-video-item {
    position: relative;

    display: grid;

    grid-template-columns:
        22px
        54px
        minmax(0, 1fr)
        26px;

    align-items: center;

    flex: 0 0 auto;

    width: 100%;
    min-width: 0;
    min-height: 64px;

    padding:
        6px
        5px
        6px
        6px;

    gap: 7px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.027),
            rgba(255, 255, 255, 0.012)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.065);

    border-radius:
        10px;

    cursor: pointer;

    transition:
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast),
        transform var(--rvc-transition-fast);
}


/* LEFT ACCENT */

.rvc-video-item::before {
    content: "";

    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;

    width: 2px;

    opacity: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            var(--rvc-purple-3),
            var(--rvc-purple-2)
        );

    border-radius:
        0
        var(--rvc-radius-pill)
        var(--rvc-radius-pill)
        0;

    box-shadow:
        0 0 12px
        rgba(139, 92, 246, 0.30);

    transition:
        opacity var(--rvc-transition-fast);
}


/* HOVER */

.rvc-video-item:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.048),
            rgba(255, 255, 255, 0.020)
        );

    border-color:
        rgba(255, 255, 255, 0.10);

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, 0.12);
}


/* =====================================================
   SELECTED VIDEO ITEM
===================================================== */

.rvc-video-item.is-selected {
    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.16),
            rgba(124, 58, 237, 0.055)
        );

    border-color:
        rgba(139, 92, 246, 0.38);

    box-shadow:
        0 0 0 2px
        rgba(139, 92, 246, 0.045),
        0 8px 22px
        rgba(76, 29, 149, 0.10),
        inset 0 1px 0
        rgba(255, 255, 255, 0.035);
}


.rvc-video-item.is-selected::before {
    opacity: 1;
}


/* =====================================================
   VIDEO SELECT BUTTON
===================================================== */

.rvc-video-select {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    justify-self: center;

    flex: 0 0 17px;

    color:
        transparent;

    font-size: 7px;

    background:
        rgba(3, 5, 11, 0.55);

    border:
        1px solid
        rgba(255, 255, 255, 0.17);

    border-radius:
        50%;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast),
        transform var(--rvc-transition-fast);
}


.rvc-video-select:hover {
    border-color:
        rgba(167, 139, 250, 0.68);

    transform:
        scale(1.08);
}


.rvc-video-select.is-selected,
.rvc-video-item.is-selected
.rvc-video-select {
    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #9d75ff,
            #7542ec
        );

    border-color:
        rgba(196, 181, 253, 0.74);

    box-shadow:
        0 0 0 3px
        rgba(139, 92, 246, 0.09),
        0 0 12px
        rgba(139, 92, 246, 0.20);
}


/* =====================================================
   VIDEO THUMBNAIL
===================================================== */

.rvc-video-thumb {
    position: relative;

    width: 54px;
    height: 48px;

    min-width: 54px;

    overflow: hidden;

    background:
        #080b13;

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius:
        7px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);
}


/* =====================================================
   THUMBNAIL PLACEHOLDER
===================================================== */

.rvc-thumb-placeholder {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 9px;

    background:
        linear-gradient(
            145deg,
            #1b2440,
            #0d1220
        );
}


/* CINEMATIC LIGHT OVERLAY */

.rvc-thumb-placeholder::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.13),
            transparent 32%,
            rgba(0, 0, 0, 0.16)
        );
}


/* BOTTOM SHADE */

.rvc-thumb-placeholder::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 48%;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 0, 0, 0.34)
        );
}


.rvc-thumb-placeholder i {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    padding-left: 1px;

    color:
        #ffffff;

    font-size: 7px;

    background:
        rgba(5, 7, 14, 0.62);

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius:
        50%;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.24);

    opacity: 0.88;

    transition:
        transform var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        opacity var(--rvc-transition-fast);
}


.rvc-video-item:hover
.rvc-thumb-placeholder i {
    opacity: 1;

    background:
        rgba(124, 58, 237, 0.82);

    transform:
        scale(1.08);
}


/* =====================================================
   SAMPLE THUMBNAIL THEMES
===================================================== */

.rvc-thumb-mountain {
    background:
        radial-gradient(
            circle at 74% 24%,
            rgba(255, 210, 128, 0.74),
            transparent 18%
        ),
        linear-gradient(
            145deg,
            #6d7c8e 0%,
            #31445b 43%,
            #152436 64%,
            #0b111c 100%
        );
}


.rvc-thumb-ocean {
    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(255, 220, 150, 0.58),
            transparent 20%
        ),
        linear-gradient(
            145deg,
            #5c8ea8 0%,
            #285f7d 42%,
            #143b55 66%,
            #091521 100%
        );
}


.rvc-thumb-city {
    background:
        radial-gradient(
            circle at 25% 30%,
            rgba(244, 114, 182, 0.58),
            transparent 19%
        ),
        radial-gradient(
            circle at 78% 55%,
            rgba(56, 189, 248, 0.50),
            transparent 18%
        ),
        linear-gradient(
            145deg,
            #37204d,
            #17213e 48%,
            #090d18
        );
}


.rvc-thumb-forest {
    background:
        radial-gradient(
            circle at 68% 18%,
            rgba(190, 242, 100, 0.28),
            transparent 22%
        ),
        linear-gradient(
            145deg,
            #416a52,
            #203f34 48%,
            #0c1b18
        );
}


.rvc-thumb-sunset {
    background:
        radial-gradient(
            circle at 68% 28%,
            rgba(255, 232, 160, 0.82),
            transparent 18%
        ),
        linear-gradient(
            145deg,
            #f07c6a 0%,
            #a3476d 43%,
            #3b2450 70%,
            #121222
        );
}


.rvc-thumb-travel {
    background:
        radial-gradient(
            circle at 28% 25%,
            rgba(125, 211, 252, 0.48),
            transparent 20%
        ),
        linear-gradient(
            145deg,
            #55728b,
            #32465d 46%,
            #192638 70%,
            #0a101b
        );
}


/* =====================================================
   VIDEO INFORMATION
===================================================== */

.rvc-video-info {
    min-width: 0;

    overflow: hidden;
}


.rvc-video-name {
    display: block;

    width: 100%;

    overflow: hidden;

    color:
        var(--rvc-text-soft);

    font-size: 10px;
    font-weight: 750;
    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;

    transition:
        color var(--rvc-transition-fast);
}


.rvc-video-item:hover
.rvc-video-name,
.rvc-video-item.is-selected
.rvc-video-name {
    color:
        #ffffff;
}


/* =====================================================
   VIDEO META
===================================================== */

.rvc-video-meta {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;

    margin-top: 5px;

    gap: 4px;

    overflow: hidden;

    color:
        var(--rvc-text-faint);

    font-size: 7.5px;
    font-weight: 600;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.rvc-video-meta span {
    color:
        rgba(255, 255, 255, 0.18);

    font-size: 6px;
}


/* =====================================================
   VIDEO MENU BUTTON
===================================================== */

.rvc-video-menu-btn {
    width: 26px;
    height: 30px;

    justify-self: end;

    color:
        var(--rvc-text-faint);

    font-size: 10px;

    border-radius:
        7px;
}


.rvc-video-menu-btn:hover {
    color:
        var(--rvc-text-main);

    background:
        rgba(255, 255, 255, 0.055);
}


/* =====================================================
   VIDEO ITEM BUSY STATE
===================================================== */

.rvc-video-item.is-processing {
    pointer-events: none;
}


.rvc-video-item.is-processing::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 5;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(139, 92, 246, 0.10),
            transparent
        );

    transform:
        translateX(-100%);

    animation:
        rvcVideoItemProcessing
        1.35s
        linear
        infinite;
}


@keyframes rvcVideoItemProcessing {

    to {
        transform:
            translateX(100%);
    }

}


/* =====================================================
   EMPTY VIDEO LIBRARY STATE
   READY FOR JS
===================================================== */

.rvc-video-list.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}


.rvc-video-list.is-empty::before {
    content: "No videos imported yet";

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 110px;

    padding:
        16px;

    color:
        var(--rvc-text-faint);

    font-size: 10px;
    font-weight: 650;

    text-align: center;

    border:
        1px dashed
        rgba(255, 255, 255, 0.075);

    border-radius:
        var(--rvc-radius-sm);
}


/* =====================================================
   STORAGE STATUS
===================================================== */

.rvc-storage-status {
    flex: 0 0 auto;

    margin-top: 10px;

    padding:
        10px
        4px
        1px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.055);
}


/* =====================================================
   STORAGE ROW
===================================================== */

.rvc-storage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    gap: 10px;
}


/* =====================================================
   STORAGE LABEL
===================================================== */

.rvc-storage-label {
    display: inline-flex;
    align-items: center;

    min-width: 0;

    gap: 6px;

    color:
        var(--rvc-text-muted);

    font-size: 8px;
    font-weight: 650;
    line-height: 1;
}


/* =====================================================
   STORAGE DOT
===================================================== */

.rvc-storage-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    background:
        var(--rvc-purple-3);

    border-radius:
        50%;

    box-shadow:
        0 0 8px
        rgba(139, 92, 246, 0.46);
}


/* =====================================================
   STORAGE VALUE
===================================================== */

.rvc-storage-value {
    flex: 0 0 auto;

    color:
        var(--rvc-text-soft);

    font-size: 8px;
    font-weight: 750;
    line-height: 1;
}


/* =====================================================
   STORAGE TRACK
===================================================== */

.rvc-storage-track {
    position: relative;

    width: 100%;
    height: 5px;

    margin-top: 8px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid
        rgba(255, 255, 255, 0.025);

    border-radius:
        var(--rvc-radius-pill);
}


/* =====================================================
   STORAGE FILL
===================================================== */

.rvc-storage-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    min-width: 2px;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #a78bfa
        );

    border-radius:
        inherit;

    box-shadow:
        0 0 10px
        rgba(139, 92, 246, 0.28);

    transition:
        width
        var(--rvc-transition-slow);
}


/* STORAGE FILL HIGHLIGHT */

.rvc-storage-fill::after {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.30);
}


/* =====================================================
   STORAGE WARNING STATES
   JS MAY ADD THESE CLASSES
===================================================== */

.rvc-storage-status.is-warning
.rvc-storage-dot {
    background:
        var(--rvc-warning);

    box-shadow:
        0 0 8px
        rgba(251, 191, 36, 0.42);
}


.rvc-storage-status.is-warning
.rvc-storage-fill {
    background:
        linear-gradient(
            90deg,
            #f59e0b,
            #fbbf24
        );

    box-shadow:
        0 0 10px
        rgba(251, 191, 36, 0.24);
}


.rvc-storage-status.is-danger
.rvc-storage-dot {
    background:
        var(--rvc-danger);

    box-shadow:
        0 0 8px
        rgba(251, 113, 133, 0.42);
}


.rvc-storage-status.is-danger
.rvc-storage-fill {
    background:
        linear-gradient(
            90deg,
            #e11d48,
            #fb7185
        );

    box-shadow:
        0 0 10px
        rgba(251, 113, 133, 0.24);
}


/* =====================================================
   COMPACT LAPTOP SAFETY
   FULL RESPONSIVE SYSTEM COMES IN PART 10
===================================================== */

@media (max-width: 1450px) {

    .rvc-library-section {
        padding:
            14px
            10px
            12px;
    }


    .rvc-video-item {
        grid-template-columns:
            20px
            50px
            minmax(0, 1fr)
            24px;

        min-height:
            60px;

        gap:
            6px;
    }


    .rvc-video-thumb {
        width:
            50px;

        min-width:
            50px;

        height:
            44px;
    }

}


@media (max-width: 1240px) {

    .rvc-video-item {
        grid-template-columns:
            18px
            46px
            minmax(0, 1fr)
            22px;

        min-height:
            57px;

        padding:
            5px
            4px;

        gap:
            5px;
    }


    .rvc-video-thumb {
        width:
            46px;

        min-width:
            46px;

        height:
            41px;
    }


    .rvc-video-name {
        font-size:
            9px;
    }


    .rvc-video-meta {
        font-size:
            7px;

        gap:
            3px;
    }


    .rvc-video-menu-btn {
        width:
            22px;
    }

}


/* =====================================================
   PART 04 END

   NEXT:
   PART 05 / 10

   - CENTER WORKSPACE SHELL
   - PREVIEW PANEL
   - FILE INFO HEADER
   - VIDEO META
   - ORIGINAL / COMPRESSED MONITOR
   - VIDEO LAYERS
   - COMPARE REVEAL
   - DIVIDER
   - DRAG HANDLE
   - CENTER PLAY BUTTON
===================================================== */































/* =====================================================
   RAGO VIDEO COMPRESSOR
   STYLE.CSS
   PART 05 / 10

   CENTER WORKSPACE
   PREVIEW HEADER + COMPARE MONITOR + VIDEO LAYERS
===================================================== */


/* =====================================================
   CENTER WORKSPACE SHELL
===================================================== */

.rvc-center-workspace {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(139, 92, 246, 0.055),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            rgba(10, 14, 25, 0.97),
            rgba(6, 9, 17, 0.99)
        );
}


/* FUTURISTIC CENTER GRID */

.rvc-center-workspace::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: 0.16;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );

    background-size:
        34px 34px;
}


/* CENTER AMBIENT GLOW */

.rvc-center-workspace::after {
    content: "";

    position: absolute;
    top: 70px;
    left: 50%;

    z-index: -1;

    width: min(70%, 720px);
    height: 320px;

    pointer-events: none;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(124, 58, 237, 0.10),
            transparent 70%
        );

    filter:
        blur(18px);
}


/* =====================================================
   PREVIEW PANEL
===================================================== */

.rvc-preview-panel {
    position: relative;

    display: flex;
    flex-direction: column;

    flex:
        1
        1
        auto;

    min-width: 0;
    min-height: 0;

    padding:
        18px
        clamp(16px, 1.6vw, 26px)
        16px;

    overflow: hidden;
}


/* =====================================================
   PREVIEW HEADER
===================================================== */

.rvc-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex:
        0
        0
        auto;

    min-width: 0;

    margin-bottom: 14px;

    gap: 16px;
}


/* =====================================================
   PREVIEW FILE INFO
===================================================== */

.rvc-preview-file-info {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 11px;
}


/* =====================================================
   FILE ICON
===================================================== */

.rvc-preview-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    color:
        var(--rvc-purple-3);

    font-size: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.17),
            rgba(124, 58, 237, 0.055)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.24);

    border-radius:
        11px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.05),
        0 8px 20px
        rgba(76, 29, 149, 0.10);
}


/* =====================================================
   FILE TEXT
===================================================== */

.rvc-preview-file-text {
    min-width: 0;
}


.rvc-preview-file-name {
    display: block;

    max-width:
        min(36vw, 430px);

    overflow: hidden;

    color:
        var(--rvc-text-main);

    font-size:
        clamp(11px, 0.9vw, 14px);

    font-weight: 800;
    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.rvc-preview-file-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    min-width: 0;

    margin-top: 4px;

    gap:
        4px
        6px;

    color:
        var(--rvc-text-muted);

    font-size: 8.5px;
    font-weight: 600;
    line-height: 1.2;
}


.rvc-preview-file-meta
.rvc-meta-separator {
    color:
        rgba(255, 255, 255, 0.18);

    font-size: 6px;
}


/* =====================================================
   PREVIEW HEADER ACTIONS
===================================================== */

.rvc-preview-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex:
        0
        0
        auto;

    gap: 7px;
}


/* =====================================================
   PREVIEW ACTION BUTTON
===================================================== */

.rvc-preview-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding:
        0
        10px;

    gap: 7px;

    color:
        var(--rvc-text-muted);

    font-size: 9px;
    font-weight: 750;
    line-height: 1;

    background:
        rgba(255, 255, 255, 0.025);

    border:
        1px solid
        rgba(255, 255, 255, 0.065);

    border-radius:
        8px;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-preview-action-btn i {
    font-size: 10px;
}


.rvc-preview-action-btn:hover {
    color:
        #ffffff;

    background:
        rgba(139, 92, 246, 0.09);

    border-color:
        rgba(139, 92, 246, 0.22);

    box-shadow:
        0 7px 18px
        rgba(76, 29, 149, 0.09);
}


.rvc-preview-action-btn:active {
    transform:
        scale(0.97);
}


.rvc-preview-action-btn.is-active {
    color:
        var(--rvc-purple-3);

    background:
        rgba(139, 92, 246, 0.11);

    border-color:
        rgba(139, 92, 246, 0.28);
}


/* =====================================================
   COMPARE MONITOR WRAPPER
===================================================== */

.rvc-compare-monitor {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    flex:
        1
        1
        auto;

    width: 100%;
    min-width: 0;
    min-height: 320px;

    overflow: hidden;

    background:
        #03050a;

    border:
        1px solid
        rgba(255, 255, 255, 0.085);

    border-radius:
        var(--rvc-radius-lg);

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.34),
        0 0 0 1px
        rgba(139, 92, 246, 0.025),
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);
}


/* MONITOR TOP LIGHT */

.rvc-compare-monitor::before {
    content: "";

    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;

    z-index: 12;

    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(167, 139, 250, 0.34),
            transparent
        );
}


/* MONITOR VIGNETTE */

.rvc-compare-monitor::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 10;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 54%,
            rgba(0, 0, 0, 0.17) 100%
        );
}


/* =====================================================
   VIDEO STAGE
===================================================== */

.rvc-video-stage {
    position: absolute;
    inset: 0;

    overflow: hidden;

    background:
        #000;
}


/* =====================================================
   VIDEO LAYER FOUNDATION
===================================================== */

.rvc-video-layer {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* =====================================================
   ORIGINAL VIDEO LAYER
===================================================== */

.rvc-original-layer {
    z-index: 1;
}


/* =====================================================
   COMPRESSED VIDEO LAYER
===================================================== */

.rvc-compressed-layer {
    z-index: 2;

    width: 50%;

    overflow: hidden;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.76);

    box-shadow:
        8px 0 24px
        rgba(0, 0, 0, 0.10);

    transition:
        width 0ms linear;
}


/* =====================================================
   VIDEO ELEMENTS
===================================================== */

.rvc-original-video,
.rvc-compressed-video {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: contain;
    object-position: center;

    background:
        #000;
}


/*
   IMPORTANT FOR COMPARE MODE:

   Compressed layer width changes.
   Video itself must stay full monitor width.

   JS may set:
   --rvc-monitor-width
*/

.rvc-compressed-layer
.rvc-compressed-video {
    width:
        var(--rvc-monitor-width, 100%);

    min-width:
        var(--rvc-monitor-width, 100%);
}


/* =====================================================
   OPTIONAL COVER MODE
===================================================== */

.rvc-compare-monitor.is-cover
.rvc-original-video,
.rvc-compare-monitor.is-cover
.rvc-compressed-video {
    object-fit:
        cover;
}


/* =====================================================
   BEFORE / AFTER BADGES
===================================================== */

.rvc-compare-label {
    position: absolute;
    top: 14px;

    z-index: 18;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 26px;

    padding:
        0
        9px;

    gap: 6px;

    color:
        rgba(255, 255, 255, 0.90);

    font-size: 8px;
    font-weight: 850;
    line-height: 1;

    letter-spacing: 0.07em;
    text-transform: uppercase;

    background:
        rgba(5, 7, 13, 0.68);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        7px;

    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, 0.20);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    pointer-events: none;
}


.rvc-compare-label i {
    font-size: 8px;
}


/* BEFORE LABEL */

.rvc-before-label {
    left: 14px;
}


/* AFTER LABEL */

.rvc-after-label {
    right: 14px;

    color:
        #ddd6fe;

    background:
        rgba(76, 29, 149, 0.52);

    border-color:
        rgba(167, 139, 250, 0.26);
}


/* =====================================================
   COMPARE DIVIDER
===================================================== */

.rvc-compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;

    z-index: 24;

    width: 2px;

    transform:
        translateX(-50%);

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.30),
            rgba(255, 255, 255, 0.92) 18%,
            rgba(196, 181, 253, 0.98) 50%,
            rgba(255, 255, 255, 0.92) 82%,
            rgba(255, 255, 255, 0.30)
        );

    box-shadow:
        0 0 8px
        rgba(255, 255, 255, 0.20),
        0 0 18px
        rgba(139, 92, 246, 0.22);
}


/* =====================================================
   COMPARE DRAG HANDLE
===================================================== */

.rvc-compare-handle {
    position: absolute;
    top: 50%;
    left: 50%;

    z-index: 28;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    transform:
        translate(-50%, -50%);

    color:
        #ffffff;

    font-size: 11px;

    background:
        linear-gradient(
            145deg,
            #9b70ff,
            #7139e8
        );

    border:
        2px solid
        rgba(255, 255, 255, 0.76);

    border-radius:
        50%;

    box-shadow:
        0 0 0 4px
        rgba(139, 92, 246, 0.10),
        0 8px 24px
        rgba(0, 0, 0, 0.34),
        0 0 22px
        rgba(139, 92, 246, 0.28);

    cursor:
        ew-resize;

    touch-action:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;

    transition:
        width var(--rvc-transition-fast),
        height var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast),
        filter var(--rvc-transition-fast);
}


/* HANDLE INNER GRIP */

.rvc-compare-handle::before {
    content: "";

    width: 13px;
    height: 13px;

    background:
        linear-gradient(
            90deg,
            transparent 0 2px,
            rgba(255, 255, 255, 0.88) 2px 4px,
            transparent 4px 9px,
            rgba(255, 255, 255, 0.88) 9px 11px,
            transparent 11px
        );

    opacity: 0.92;
}


.rvc-compare-handle:hover {
    width: 46px;
    height: 46px;

    filter:
        brightness(1.08);

    box-shadow:
        0 0 0 5px
        rgba(139, 92, 246, 0.12),
        0 10px 28px
        rgba(0, 0, 0, 0.38),
        0 0 30px
        rgba(139, 92, 246, 0.38);
}


/* DRAGGING STATE */

.rvc-compare-monitor.is-dragging
.rvc-compare-handle {
    width: 48px;
    height: 48px;

    box-shadow:
        0 0 0 7px
        rgba(139, 92, 246, 0.11),
        0 12px 30px
        rgba(0, 0, 0, 0.40),
        0 0 36px
        rgba(139, 92, 246, 0.44);
}


/* =====================================================
   CENTER PLAY BUTTON
===================================================== */

.rvc-monitor-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;

    z-index: 20;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;

    padding-left: 3px;

    transform:
        translate(-50%, -50%);

    color:
        #ffffff;

    font-size: 20px;

    background:
        rgba(7, 9, 17, 0.68);

    border:
        1px solid
        rgba(255, 255, 255, 0.20);

    border-radius:
        50%;

    box-shadow:
        0 12px 34px
        rgba(0, 0, 0, 0.32),
        0 0 0 5px
        rgba(255, 255, 255, 0.035);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        transform var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-monitor-play-btn:hover {
    background:
        linear-gradient(
            145deg,
            rgba(155, 112, 255, 0.96),
            rgba(113, 57, 232, 0.96)
        );

    border-color:
        rgba(255, 255, 255, 0.62);

    transform:
        translate(-50%, -50%)
        scale(1.06);

    box-shadow:
        0 14px 38px
        rgba(0, 0, 0, 0.36),
        0 0 0 7px
        rgba(139, 92, 246, 0.10),
        0 0 30px
        rgba(139, 92, 246, 0.28);
}


.rvc-monitor-play-btn:active {
    transform:
        translate(-50%, -50%)
        scale(0.97);
}


/* PLAYING STATE */

.rvc-compare-monitor.is-playing
.rvc-monitor-play-btn {
    opacity: 0;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        scale(0.88);
}


/* =====================================================
   MONITOR EMPTY STATE
===================================================== */

.rvc-monitor-empty {
    position: absolute;
    inset: 0;

    z-index: 32;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        28px;

    text-align:
        center;

    background:
        radial-gradient(
            circle at center,
            rgba(139, 92, 246, 0.065),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #080b14,
            #04060b
        );
}


.rvc-monitor-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin-bottom: 14px;

    color:
        var(--rvc-purple-3);

    font-size: 21px;

    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.17),
            rgba(124, 58, 237, 0.055)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.25);

    border-radius:
        19px;

    box-shadow:
        0 12px 30px
        rgba(76, 29, 149, 0.13),
        inset 0 1px 0
        rgba(255, 255, 255, 0.05);
}


.rvc-monitor-empty strong {
    color:
        var(--rvc-text-main);

    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}


.rvc-monitor-empty span {
    max-width: 330px;

    margin-top: 6px;

    color:
        var(--rvc-text-muted);

    font-size: 9px;
    font-weight: 500;
    line-height: 1.5;
}


/* =====================================================
   MONITOR LOADING STATE
===================================================== */

.rvc-monitor-loading {
    position: absolute;
    inset: 0;

    z-index: 36;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        24px;

    background:
        rgba(4, 6, 12, 0.88);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* LOADER RING */

.rvc-monitor-loader-ring {
    width: 46px;
    height: 46px;

    border:
        3px solid
        rgba(255, 255, 255, 0.08);

    border-top-color:
        var(--rvc-purple-3);

    border-right-color:
        rgba(139, 92, 246, 0.46);

    border-radius:
        50%;

    animation:
        rvcMonitorSpin
        850ms
        linear
        infinite;
}


@keyframes rvcMonitorSpin {

    to {
        transform:
            rotate(360deg);
    }

}


.rvc-monitor-loading strong {
    margin-top:
        13px;

    color:
        var(--rvc-text-soft);

    font-size:
        10px;

    font-weight:
        750;
}


.rvc-monitor-loading span {
    margin-top:
        4px;

    color:
        var(--rvc-text-faint);

    font-size:
        8px;

    font-weight:
        600;
}


/* =====================================================
   MONITOR ERROR STATE
===================================================== */

.rvc-monitor-error {
    position: absolute;
    inset: 0;

    z-index: 38;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        28px;

    text-align:
        center;

    background:
        linear-gradient(
            180deg,
            rgba(26, 9, 16, 0.96),
            rgba(8, 6, 11, 0.98)
        );
}


.rvc-monitor-error i {
    color:
        var(--rvc-danger);

    font-size:
        25px;
}


.rvc-monitor-error strong {
    margin-top:
        11px;

    color:
        var(--rvc-text-main);

    font-size:
        12px;

    font-weight:
        800;
}


.rvc-monitor-error span {
    max-width:
        330px;

    margin-top:
        5px;

    color:
        var(--rvc-text-muted);

    font-size:
        9px;

    line-height:
        1.5;
}


/* =====================================================
   COMPARE MODE DISABLED
===================================================== */

.rvc-compare-monitor.is-single-view
.rvc-compressed-layer,
.rvc-compare-monitor.is-single-view
.rvc-compare-divider,
.rvc-compare-monitor.is-single-view
.rvc-compare-handle,
.rvc-compare-monitor.is-single-view
.rvc-after-label {
    display:
        none;
}


/* =====================================================
   FULL AFTER VIEW
===================================================== */

.rvc-compare-monitor.is-after-view
.rvc-compressed-layer {
    width:
        100% !important;

    border-right:
        0;
}


.rvc-compare-monitor.is-after-view
.rvc-compare-divider,
.rvc-compare-monitor.is-after-view
.rvc-compare-handle,
.rvc-compare-monitor.is-after-view
.rvc-before-label {
    display:
        none;
}


/* =====================================================
   FULL BEFORE VIEW
===================================================== */

.rvc-compare-monitor.is-before-view
.rvc-compressed-layer,
.rvc-compare-monitor.is-before-view
.rvc-compare-divider,
.rvc-compare-monitor.is-before-view
.rvc-compare-handle,
.rvc-compare-monitor.is-before-view
.rvc-after-label {
    display:
        none;
}


/* =====================================================
   MONITOR HOVER CONTROL REVEAL
===================================================== */

.rvc-compare-monitor
.rvc-monitor-play-btn,
.rvc-compare-monitor
.rvc-compare-label {
    transition:
        opacity var(--rvc-transition-fast),
        transform var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


/* =====================================================
   COMPACT DESKTOP SAFETY
   FULL RESPONSIVE SYSTEM COMES IN PART 10
===================================================== */

@media (max-width: 1450px) {

    .rvc-preview-panel {
        padding:
            16px
            18px
            14px;
    }


    .rvc-preview-header {
        margin-bottom:
            12px;
    }


    .rvc-preview-file-icon {
        width:
            35px;

        height:
            35px;

        flex-basis:
            35px;
    }


    .rvc-compare-monitor {
        min-height:
            300px;
    }


    .rvc-monitor-play-btn {
        width:
            60px;

        height:
            60px;

        font-size:
            18px;
    }


    .rvc-compare-handle {
        width:
            39px;

        height:
            39px;
    }

}


@media (max-width: 1240px) {

    .rvc-preview-panel {
        padding:
            14px
            14px
            12px;
    }


    .rvc-preview-header {
        gap:
            10px;
    }


    .rvc-preview-file-name {
        max-width:
            270px;
    }


    .rvc-preview-action-btn span {
        display:
            none;
    }


    .rvc-preview-action-btn {
        width:
            34px;

        padding:
            0;
    }


    .rvc-compare-monitor {
        min-height:
            280px;

        border-radius:
            15px;
    }


    .rvc-compare-label {
        top:
            11px;

        min-height:
            24px;

        padding:
            0
            8px;
    }


    .rvc-before-label {
        left:
            11px;
    }


    .rvc-after-label {
        right:
            11px;
    }


    .rvc-monitor-play-btn {
        width:
            56px;

        height:
            56px;

        font-size:
            17px;
    }

}


/* =====================================================
   PART 05 END

   NEXT:
   PART 06 / 10

   - PLAYER CONTROLS
   - TIMELINE / SEEK BAR
   - TIME DISPLAY
   - VOLUME
   - FULLSCREEN
   - COMPRESSION RESULT CARDS
   - 71% SAVING RING
   - ORIGINAL / COMPRESSED SIZE
   - OUTPUT ESTIMATE
   - PREMIUM SMART QUALITY BANNER
===================================================== */






















/* =====================================================
   RAGO VIDEO COMPRESSOR
   STYLE.CSS
   PART 06 / 10

   PLAYER CONTROLS
   RESULT CARDS + SAVING RING + SMART QUALITY BANNER
===================================================== */


/* =====================================================
   PLAYER CONTROLS SHELL
===================================================== */

.rvc-player-controls {
    position: relative;

    display: flex;
    flex-direction: column;

    flex: 0 0 auto;

    width: 100%;
    min-width: 0;

    margin-top: 10px;

    padding:
        10px
        12px
        11px;

    gap: 9px;

    background:
        linear-gradient(
            180deg,
            rgba(17, 22, 37, 0.94),
            rgba(10, 14, 25, 0.97)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        12px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025),
        0 10px 26px
        rgba(0, 0, 0, 0.14);
}


/* =====================================================
   SEEK AREA
===================================================== */

.rvc-seek-wrap {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;

    height: 14px;

    cursor: pointer;

    touch-action: none;
}


/* =====================================================
   SEEK TRACK
===================================================== */

.rvc-seek-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;

    height: 4px;

    overflow: hidden;

    transform:
        translateY(-50%);

    background:
        rgba(255, 255, 255, 0.075);

    border-radius:
        var(--rvc-radius-pill);

    box-shadow:
        inset 0 1px 2px
        rgba(0, 0, 0, 0.26);
}


/* =====================================================
   BUFFERED PROGRESS
===================================================== */

.rvc-seek-buffered {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 0%;

    background:
        rgba(255, 255, 255, 0.14);

    border-radius:
        inherit;

    transition:
        width 160ms linear;
}


/* =====================================================
   PLAYED PROGRESS
===================================================== */

.rvc-seek-progress {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 0%;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #a78bfa
        );

    border-radius:
        inherit;

    box-shadow:
        0 0 10px
        rgba(139, 92, 246, 0.30);

    transition:
        width 80ms linear;
}


/* =====================================================
   SEEK INPUT
===================================================== */

.rvc-seek-input {
    position: absolute;
    inset: 0;

    z-index: 4;

    width: 100%;
    height: 100%;

    margin: 0;

    opacity: 0;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    touch-action: none;
}


/* =====================================================
   SEEK THUMB VISUAL
===================================================== */

.rvc-seek-thumb {
    position: absolute;
    top: 50%;
    left: 0%;

    z-index: 3;

    width: 12px;
    height: 12px;

    transform:
        translate(-50%, -50%);

    pointer-events: none;

    background:
        #ffffff;

    border:
        2px solid
        var(--rvc-purple);

    border-radius:
        50%;

    box-shadow:
        0 0 0 3px
        rgba(139, 92, 246, 0.10),
        0 0 12px
        rgba(139, 92, 246, 0.28);

    transition:
        width var(--rvc-transition-fast),
        height var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-seek-wrap:hover
.rvc-seek-thumb {
    width: 14px;
    height: 14px;

    box-shadow:
        0 0 0 4px
        rgba(139, 92, 246, 0.12),
        0 0 16px
        rgba(139, 92, 246, 0.36);
}


/* =====================================================
   PLAYER BOTTOM ROW
===================================================== */

.rvc-player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    gap: 12px;
}


/* =====================================================
   PLAYER LEFT / RIGHT GROUPS
===================================================== */

.rvc-player-left,
.rvc-player-right {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 5px;
}


.rvc-player-right {
    justify-content: flex-end;
}


/* =====================================================
   PLAYER BUTTON
===================================================== */

.rvc-player-btn {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    color:
        var(--rvc-text-muted);

    font-size: 11px;

    background:
        transparent;

    border:
        1px solid
        transparent;

    border-radius:
        8px;
}


.rvc-player-btn:hover {
    color:
        #ffffff;

    background:
        rgba(255, 255, 255, 0.055);

    border-color:
        rgba(255, 255, 255, 0.055);
}


.rvc-player-btn.is-active {
    color:
        var(--rvc-purple-3);

    background:
        rgba(139, 92, 246, 0.10);

    border-color:
        rgba(139, 92, 246, 0.20);
}


/* =====================================================
   MAIN PLAY BUTTON
===================================================== */

.rvc-player-play-btn {
    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #8b5cf6,
            #7139e8
        );

    border-color:
        rgba(196, 181, 253, 0.24);

    box-shadow:
        0 7px 18px
        rgba(109, 40, 217, 0.20),
        inset 0 1px 0
        rgba(255, 255, 255, 0.15);
}


.rvc-player-play-btn:hover {
    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #9b70ff,
            #7c3aed
        );

    border-color:
        rgba(196, 181, 253, 0.34);

    box-shadow:
        0 9px 22px
        rgba(109, 40, 217, 0.27),
        0 0 16px
        rgba(139, 92, 246, 0.10);
}


/* =====================================================
   TIME DISPLAY
===================================================== */

.rvc-player-time {
    display: inline-flex;
    align-items: center;

    min-width: 0;

    margin-left: 4px;

    gap: 4px;

    color:
        var(--rvc-text-muted);

    font-size: 8.5px;
    font-weight: 650;
    line-height: 1;

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;
}


.rvc-current-time {
    color:
        var(--rvc-text-soft);

    font-weight:
        750;
}


.rvc-time-separator {
    color:
        var(--rvc-text-faint);
}


/* =====================================================
   VOLUME CONTROL
===================================================== */

.rvc-volume-wrap {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 5px;
}


.rvc-volume-slider {
    width: 72px;
    height: 4px;

    margin: 0;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    background:
        linear-gradient(
            90deg,
            var(--rvc-purple-3) 0%,
            var(--rvc-purple-3) 70%,
            rgba(255, 255, 255, 0.09) 70%,
            rgba(255, 255, 255, 0.09) 100%
        );

    border-radius:
        var(--rvc-radius-pill);
}


.rvc-volume-slider::-webkit-slider-thumb {
    width: 11px;
    height: 11px;

    appearance: none;
    -webkit-appearance: none;

    background:
        #ffffff;

    border:
        2px solid
        var(--rvc-purple);

    border-radius:
        50%;

    box-shadow:
        0 0 8px
        rgba(139, 92, 246, 0.28);
}


.rvc-volume-slider::-moz-range-thumb {
    width: 9px;
    height: 9px;

    background:
        #ffffff;

    border:
        2px solid
        var(--rvc-purple);

    border-radius:
        50%;

    box-shadow:
        0 0 8px
        rgba(139, 92, 246, 0.28);
}


/* =====================================================
   PLAYBACK SPEED
===================================================== */

.rvc-speed-btn {
    min-width: 34px;

    padding:
        0
        5px;

    color:
        var(--rvc-text-muted);

    font-size:
        8px;

    font-weight:
        800;
}


/* =====================================================
   RESULT AREA
===================================================== */

.rvc-results-area {
    position: relative;

    flex:
        0
        0
        auto;

    min-width: 0;

    padding:
        0
        clamp(16px, 1.6vw, 26px)
        18px;
}


/* =====================================================
   RESULTS GRID
===================================================== */

.rvc-results-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(150px, 0.72fr)
        minmax(0, 1fr);

    align-items: stretch;

    width: 100%;
    min-width: 0;

    gap: 10px;
}


/* =====================================================
   RESULT CARD FOUNDATION
===================================================== */

.rvc-result-card {
    position: relative;

    min-width: 0;
    min-height: 112px;

    padding:
        13px
        14px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(20, 26, 43, 0.94),
            rgba(12, 17, 30, 0.97)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        13px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025),
        0 9px 24px
        rgba(0, 0, 0, 0.13);
}


/* =====================================================
   ORIGINAL SIZE CARD
===================================================== */

.rvc-original-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* =====================================================
   COMPRESSED SIZE CARD
===================================================== */

.rvc-compressed-card {
    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.12),
            rgba(17, 22, 38, 0.96)
        );

    border-color:
        rgba(139, 92, 246, 0.23);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.035),
        0 9px 24px
        rgba(76, 29, 149, 0.08);
}


/* =====================================================
   RESULT CARD HEADER
===================================================== */

.rvc-result-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    gap: 10px;
}


/* =====================================================
   RESULT LABEL
===================================================== */

.rvc-result-label {
    display: inline-flex;
    align-items: center;

    min-width: 0;

    gap: 7px;

    color:
        var(--rvc-text-muted);

    font-size: 8px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.065em;
    text-transform: uppercase;
}


.rvc-result-label i {
    color:
        var(--rvc-purple-3);

    font-size: 10px;
}


/* =====================================================
   RESULT BADGE
===================================================== */

.rvc-result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 22px;

    padding:
        0
        7px;

    color:
        var(--rvc-text-muted);

    font-size: 7px;
    font-weight: 800;
    line-height: 1;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        var(--rvc-radius-pill);
}


.rvc-result-badge.is-success {
    color:
        var(--rvc-success);

    background:
        var(--rvc-success-soft);

    border-color:
        rgba(52, 211, 153, 0.17);
}


/* =====================================================
   RESULT SIZE
===================================================== */

.rvc-result-size {
    display: block;

    margin-top: 9px;

    overflow: hidden;

    color:
        var(--rvc-text-main);

    font-size:
        clamp(18px, 1.55vw, 26px);

    font-weight: 900;
    line-height: 1;

    letter-spacing:
        -0.035em;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-variant-numeric:
        tabular-nums;
}


.rvc-compressed-card
.rvc-result-size {
    color:
        #ddd6fe;

    text-shadow:
        0 0 18px
        rgba(139, 92, 246, 0.10);
}


/* =====================================================
   RESULT META
===================================================== */

.rvc-result-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    min-width: 0;

    margin-top: 7px;

    gap:
        4px
        6px;

    color:
        var(--rvc-text-faint);

    font-size: 7.5px;
    font-weight: 600;
    line-height: 1.25;
}


.rvc-result-meta
.rvc-meta-separator {
    color:
        rgba(255, 255, 255, 0.16);
}


/* =====================================================
   SAVING CARD
===================================================== */

.rvc-saving-card {
    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        10px;

    background:
        radial-gradient(
            circle at center,
            rgba(139, 92, 246, 0.10),
            transparent 66%
        ),
        linear-gradient(
            180deg,
            rgba(18, 23, 39, 0.96),
            rgba(10, 14, 25, 0.98)
        );
}


/* =====================================================
   SAVING RING
===================================================== */

.rvc-saving-ring {
    --rvc-saving: 71;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 88px;
    height: 88px;

    flex:
        0
        0
        88px;

    border-radius:
        50%;

    background:
        conic-gradient(
            var(--rvc-purple-3)
            calc(var(--rvc-saving) * 1%),

            rgba(255, 255, 255, 0.07)
            0
        );

    box-shadow:
        0 0 24px
        rgba(139, 92, 246, 0.10);
}


/* INNER RING */

.rvc-saving-ring::before {
    content: "";

    position: absolute;
    inset: 7px;

    background:
        linear-gradient(
            180deg,
            #121727,
            #0b0f1b
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.055);

    border-radius:
        50%;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);
}


/* =====================================================
   SAVING RING CONTENT
===================================================== */

.rvc-saving-ring-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}


.rvc-saving-value {
    color:
        #ffffff;

    font-size: 20px;
    font-weight: 900;
    line-height: 1;

    letter-spacing:
        -0.045em;

    font-variant-numeric:
        tabular-nums;
}


.rvc-saving-text {
    margin-top: 4px;

    color:
        var(--rvc-text-muted);

    font-size: 6.5px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* =====================================================
   OUTPUT ESTIMATE CARD
===================================================== */

.rvc-output-estimate {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    margin-top: 10px;

    padding:
        10px
        12px;

    gap: 12px;

    background:
        rgba(255, 255, 255, 0.022);

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        10px;
}


/* =====================================================
   OUTPUT ESTIMATE LEFT
===================================================== */

.rvc-output-estimate-left {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 9px;
}


.rvc-output-estimate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    flex:
        0
        0
        32px;

    color:
        var(--rvc-purple-3);

    font-size: 11px;

    background:
        rgba(139, 92, 246, 0.10);

    border:
        1px solid
        rgba(139, 92, 246, 0.18);

    border-radius:
        9px;
}


.rvc-output-estimate-text {
    min-width: 0;
}


.rvc-output-estimate-text
strong {
    display: block;

    color:
        var(--rvc-text-soft);

    font-size: 9px;
    font-weight: 750;
    line-height: 1.2;
}


.rvc-output-estimate-text
span {
    display: block;

    margin-top: 3px;

    color:
        var(--rvc-text-faint);

    font-size: 7.5px;
    font-weight: 600;
    line-height: 1.2;
}


/* =====================================================
   OUTPUT ESTIMATE VALUE
===================================================== */

.rvc-output-estimate-value {
    flex:
        0
        0
        auto;

    color:
        #ddd6fe;

    font-size: 13px;
    font-weight: 850;
    line-height: 1;

    font-variant-numeric:
        tabular-nums;
}


/* =====================================================
   SMART QUALITY BANNER
===================================================== */

.rvc-smart-quality-banner {
    position: relative;

    display: flex;
    align-items: center;

    min-width: 0;

    margin-top: 10px;

    padding:
        11px
        12px;

    gap: 10px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.115),
            rgba(56, 189, 248, 0.035)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.20);

    border-radius:
        11px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);
}


/* BANNER AMBIENT LIGHT */

.rvc-smart-quality-banner::before {
    content: "";

    position: absolute;
    top: -70px;
    left: 18%;

    width: 180px;
    height: 130px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(139, 92, 246, 0.15),
            transparent 68%
        );
}


/* =====================================================
   SMART QUALITY ICON
===================================================== */

.rvc-smart-quality-icon {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex:
        0
        0
        34px;

    color:
        var(--rvc-purple-3);

    font-size: 12px;

    background:
        rgba(139, 92, 246, 0.12);

    border:
        1px solid
        rgba(139, 92, 246, 0.22);

    border-radius:
        10px;

    box-shadow:
        0 7px 18px
        rgba(76, 29, 149, 0.10);
}


/* =====================================================
   SMART QUALITY CONTENT
===================================================== */

.rvc-smart-quality-content {
    position: relative;
    z-index: 1;

    flex:
        1
        1
        auto;

    min-width: 0;
}


.rvc-smart-quality-content
strong {
    display: block;

    color:
        var(--rvc-text-soft);

    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
}


.rvc-smart-quality-content
span {
    display: block;

    margin-top: 3px;

    color:
        var(--rvc-text-muted);

    font-size: 7.5px;
    font-weight: 550;
    line-height: 1.35;
}


/* =====================================================
   SMART QUALITY STATUS
===================================================== */

.rvc-smart-quality-status {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex:
        0
        0
        auto;

    min-height: 24px;

    padding:
        0
        8px;

    gap: 5px;

    color:
        var(--rvc-success);

    font-size: 7px;
    font-weight: 800;
    line-height: 1;

    background:
        var(--rvc-success-soft);

    border:
        1px solid
        rgba(52, 211, 153, 0.16);

    border-radius:
        var(--rvc-radius-pill);
}


.rvc-smart-quality-status::before {
    content: "";

    width: 5px;
    height: 5px;

    flex:
        0
        0
        5px;

    background:
        var(--rvc-success);

    border-radius:
        50%;

    box-shadow:
        0 0 7px
        rgba(52, 211, 153, 0.46);
}


/* =====================================================
   RESULT PROCESSING STATE
===================================================== */

.rvc-results-area.is-processing
.rvc-result-card {
    overflow: hidden;
}


.rvc-results-area.is-processing
.rvc-result-card::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            100deg,
            transparent 20%,
            rgba(139, 92, 246, 0.08) 48%,
            transparent 76%
        );

    transform:
        translateX(-120%);

    animation:
        rvcResultShimmer
        1.5s
        linear
        infinite;
}


@keyframes rvcResultShimmer {

    to {
        transform:
            translateX(120%);
    }

}


/* =====================================================
   RESULT SUCCESS ANIMATION
===================================================== */

.rvc-results-area.is-complete
.rvc-saving-ring {
    animation:
        rvcSavingRingPop
        520ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


@keyframes rvcSavingRingPop {

    0% {
        transform:
            scale(0.88);

        opacity:
            0.45;
    }

    70% {
        transform:
            scale(1.05);

        opacity:
            1;
    }

    100% {
        transform:
            scale(1);
    }

}


/* =====================================================
   COMPACT DESKTOP SAFETY
   FULL RESPONSIVE SYSTEM COMES IN PART 10
===================================================== */

@media (max-width: 1450px) {

    .rvc-player-controls {
        margin-top:
            9px;

        padding:
            9px
            10px
            10px;
    }


    .rvc-results-area {
        padding:
            0
            18px
            15px;
    }


    .rvc-results-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(138px, 0.68fr)
            minmax(0, 1fr);

        gap:
            8px;
    }


    .rvc-result-card {
        min-height:
            104px;

        padding:
            11px
            12px;
    }


    .rvc-saving-ring {
        width:
            80px;

        height:
            80px;

        flex-basis:
            80px;
    }


    .rvc-saving-value {
        font-size:
            18px;
    }

}


@media (max-width: 1240px) {

    .rvc-volume-slider {
        width:
            54px;
    }


    .rvc-player-btn {
        width:
            30px;

        height:
            30px;

        flex-basis:
            30px;
    }


    .rvc-results-area {
        padding:
            0
            14px
            13px;
    }


    .rvc-results-grid {
        grid-template-columns:
            minmax(0, 1fr)
            118px
            minmax(0, 1fr);

        gap:
            7px;
    }


    .rvc-result-card {
        min-height:
            98px;

        padding:
            10px;
    }


    .rvc-result-size {
        font-size:
            18px;
    }


    .rvc-saving-ring {
        width:
            74px;

        height:
            74px;

        flex-basis:
            74px;
    }


    .rvc-saving-ring::before {
        inset:
            6px;
    }


    .rvc-saving-value {
        font-size:
            16px;
    }


    .rvc-smart-quality-banner {
        padding:
            9px
            10px;
    }

}


/* =====================================================
   PART 06 END

   NEXT:
   PART 07 / 10

   - RIGHT SETTINGS PANEL
   - SETTINGS HEADER
   - PRESET CARDS
   - COMPRESSION LEVEL SLIDER
   - SMART ADVICE
   - RESOLUTION SELECT
   - OUTPUT FORMAT GRID
   - ADVANCED OPTIONS
   - SWITCH CONTROLS
===================================================== */



























/* =====================================================
   RAGO VIDEO COMPRESSOR
   STYLE.CSS
   PART 07 / 10

   RIGHT SETTINGS PANEL
   PRESETS + COMPRESSION LEVEL + RESOLUTION
   OUTPUT FORMAT + ADVANCED OPTIONS + SWITCHES
===================================================== */


/* =====================================================
   RIGHT SETTINGS PANEL SHELL
===================================================== */

.rvc-right-panel {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(15, 20, 35, 0.985),
            rgba(9, 13, 24, 0.995)
        );

    border-left:
        1px solid
        rgba(255, 255, 255, 0.075);

    box-shadow:
        -12px 0 34px
        rgba(0, 0, 0, 0.12);
}


/* AMBIENT RIGHT GLOW */

.rvc-right-panel::before {
    content: "";

    position: absolute;
    top: -110px;
    right: -110px;

    z-index: -1;

    width: 290px;
    height: 290px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.09),
            transparent 68%
        );

    filter:
        blur(14px);
}


/* =====================================================
   SETTINGS HEADER
===================================================== */

.rvc-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex: 0 0 auto;

    min-width: 0;

    min-height: 58px;

    padding:
        12px
        15px;

    gap: 10px;

    background:
        rgba(255, 255, 255, 0.012);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.065);
}


/* =====================================================
   SETTINGS TITLE AREA
===================================================== */

.rvc-settings-title-wrap {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 10px;
}


.rvc-settings-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    color:
        var(--rvc-purple-3);

    font-size: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.16),
            rgba(124, 58, 237, 0.055)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.23);

    border-radius:
        10px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.045),
        0 7px 18px
        rgba(76, 29, 149, 0.10);
}


.rvc-settings-title-text {
    min-width: 0;
}


.rvc-settings-title {
    display: block;

    overflow: hidden;

    color:
        var(--rvc-text-main);

    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.rvc-settings-subtitle {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color:
        var(--rvc-text-muted);

    font-size: 7.5px;
    font-weight: 600;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   RESET SETTINGS BUTTON
===================================================== */

.rvc-reset-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    color:
        var(--rvc-text-muted);

    font-size: 10px;

    background:
        transparent;

    border:
        1px solid
        transparent;

    border-radius:
        8px;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast);
}


.rvc-reset-settings-btn:hover {
    color:
        #ffffff;

    background:
        rgba(255, 255, 255, 0.05);

    border-color:
        rgba(255, 255, 255, 0.065);
}


.rvc-reset-settings-btn:active {
    transform:
        rotate(-18deg)
        scale(0.96);
}


/* =====================================================
   SETTINGS SCROLL AREA
===================================================== */

.rvc-settings-scroll {
    flex:
        1
        1
        auto;

    min-width: 0;
    min-height: 0;

    padding:
        14px
        13px
        18px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior:
        contain;

    scroll-behavior:
        smooth;
}


/* =====================================================
   SETTINGS SECTION
===================================================== */

.rvc-settings-section {
    position: relative;

    min-width: 0;

    padding-bottom: 15px;

    margin-bottom: 15px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.055);
}


.rvc-settings-section:last-child {
    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: 0;
}


/* =====================================================
   SETTINGS SECTION HEADER
===================================================== */

.rvc-settings-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    margin-bottom: 10px;

    gap: 10px;
}


.rvc-settings-section-title {
    display: inline-flex;
    align-items: center;

    min-width: 0;

    gap: 7px;

    color:
        var(--rvc-text-soft);

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.025em;
}


.rvc-settings-section-title i {
    color:
        var(--rvc-purple-3);

    font-size: 9px;
}


/* =====================================================
   SMALL AUTO BADGE
===================================================== */

.rvc-auto-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 20px;

    padding:
        0
        7px;

    color:
        var(--rvc-purple-3);

    font-size: 6.5px;
    font-weight: 850;
    line-height: 1;

    letter-spacing: 0.05em;
    text-transform: uppercase;

    background:
        rgba(139, 92, 246, 0.10);

    border:
        1px solid
        rgba(139, 92, 246, 0.19);

    border-radius:
        var(--rvc-radius-pill);
}


/* =====================================================
   COMPRESSION PRESET GRID
===================================================== */

.rvc-preset-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    width: 100%;
    min-width: 0;

    gap: 7px;
}


/* =====================================================
   PRESET CARD
===================================================== */

.rvc-preset-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    min-width: 0;
    min-height: 70px;

    padding:
        10px
        9px;

    overflow: hidden;

    text-align: left;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.032),
            rgba(255, 255, 255, 0.014)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        10px;

    cursor: pointer;

    transition:
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


/* PRESET TOP LIGHT */

.rvc-preset-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;

    height: 1px;

    opacity: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(167, 139, 250, 0.56),
            transparent
        );

    transition:
        opacity var(--rvc-transition-fast);
}


.rvc-preset-card:hover {
    background:
        linear-gradient(
            180deg,
            rgba(139, 92, 246, 0.08),
            rgba(139, 92, 246, 0.025)
        );

    border-color:
        rgba(139, 92, 246, 0.23);

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(76, 29, 149, 0.09);
}


.rvc-preset-card:hover::before {
    opacity: 1;
}


/* =====================================================
   ACTIVE PRESET
===================================================== */

.rvc-preset-card.is-active {
    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.19),
            rgba(124, 58, 237, 0.065)
        );

    border-color:
        rgba(167, 139, 250, 0.42);

    box-shadow:
        0 0 0 2px
        rgba(139, 92, 246, 0.045),
        0 9px 22px
        rgba(76, 29, 149, 0.12),
        inset 0 1px 0
        rgba(255, 255, 255, 0.045);
}


.rvc-preset-card.is-active::before {
    opacity: 1;
}


/* =====================================================
   PRESET ICON
===================================================== */

.rvc-preset-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    margin-bottom: 7px;

    color:
        var(--rvc-text-muted);

    font-size: 9px;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        8px;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast);
}


.rvc-preset-card.is-active
.rvc-preset-icon,
.rvc-preset-card:hover
.rvc-preset-icon {
    color:
        var(--rvc-purple-3);

    background:
        rgba(139, 92, 246, 0.11);

    border-color:
        rgba(139, 92, 246, 0.19);
}


/* =====================================================
   PRESET TEXT
===================================================== */

.rvc-preset-name {
    display: block;

    width: 100%;

    overflow: hidden;

    color:
        var(--rvc-text-soft);

    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.15;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.rvc-preset-card.is-active
.rvc-preset-name {
    color:
        #ffffff;
}


.rvc-preset-description {
    display: block;

    width: 100%;

    margin-top: 3px;

    overflow: hidden;

    color:
        var(--rvc-text-faint);

    font-size: 6.5px;
    font-weight: 600;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   RECOMMENDED PRESET BADGE
===================================================== */

.rvc-preset-recommended {
    position: absolute;
    top: 6px;
    right: 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 17px;

    padding:
        0
        5px;

    color:
        #ddd6fe;

    font-size: 5.5px;
    font-weight: 850;
    line-height: 1;

    letter-spacing: 0.035em;
    text-transform: uppercase;

    background:
        rgba(124, 58, 237, 0.28);

    border:
        1px solid
        rgba(167, 139, 250, 0.20);

    border-radius:
        var(--rvc-radius-pill);
}


/* =====================================================
   COMPRESSION LEVEL
===================================================== */

.rvc-compression-level {
    min-width: 0;
}


/* =====================================================
   COMPRESSION VALUE ROW
===================================================== */

.rvc-compression-value-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    min-width: 0;

    margin-bottom: 10px;

    gap: 10px;
}


.rvc-compression-value-wrap {
    min-width: 0;
}


.rvc-compression-value {
    color:
        #ffffff;

    font-size: 20px;
    font-weight: 900;
    line-height: 1;

    letter-spacing:
        -0.04em;

    font-variant-numeric:
        tabular-nums;
}


.rvc-compression-value-label {
    margin-left: 3px;

    color:
        var(--rvc-text-muted);

    font-size: 7px;
    font-weight: 700;
}


/* =====================================================
   QUALITY STATUS
===================================================== */

.rvc-quality-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 23px;

    padding:
        0
        8px;

    gap: 5px;

    color:
        var(--rvc-success);

    font-size: 6.5px;
    font-weight: 800;
    line-height: 1;

    background:
        var(--rvc-success-soft);

    border:
        1px solid
        rgba(52, 211, 153, 0.16);

    border-radius:
        var(--rvc-radius-pill);
}


.rvc-quality-status::before {
    content: "";

    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    background:
        var(--rvc-success);

    border-radius:
        50%;

    box-shadow:
        0 0 7px
        rgba(52, 211, 153, 0.42);
}


/* =====================================================
   COMPRESSION SLIDER WRAP
===================================================== */

.rvc-compression-slider-wrap {
    position: relative;

    width: 100%;
    min-width: 0;

    padding:
        5px
        0
        2px;
}


/* =====================================================
   CUSTOM RANGE INPUT
===================================================== */

.rvc-compression-slider {
    width: 100%;
    height: 5px;

    margin: 0;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    background:
        linear-gradient(
            90deg,
            #7c3aed 0%,
            #a78bfa 65%,
            rgba(255, 255, 255, 0.08) 65%,
            rgba(255, 255, 255, 0.08) 100%
        );

    border-radius:
        var(--rvc-radius-pill);

    outline: none;
}


.rvc-compression-slider::-webkit-slider-thumb {
    width: 16px;
    height: 16px;

    appearance: none;
    -webkit-appearance: none;

    background:
        #ffffff;

    border:
        3px solid
        var(--rvc-purple);

    border-radius:
        50%;

    box-shadow:
        0 0 0 4px
        rgba(139, 92, 246, 0.10),
        0 0 14px
        rgba(139, 92, 246, 0.28);

    transition:
        transform var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-compression-slider::-webkit-slider-thumb:hover {
    transform:
        scale(1.08);

    box-shadow:
        0 0 0 5px
        rgba(139, 92, 246, 0.12),
        0 0 18px
        rgba(139, 92, 246, 0.38);
}


.rvc-compression-slider::-moz-range-thumb {
    width: 11px;
    height: 11px;

    background:
        #ffffff;

    border:
        3px solid
        var(--rvc-purple);

    border-radius:
        50%;

    box-shadow:
        0 0 0 4px
        rgba(139, 92, 246, 0.10),
        0 0 14px
        rgba(139, 92, 246, 0.28);
}


/* =====================================================
   COMPRESSION SCALE LABELS
===================================================== */

.rvc-compression-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 7px;

    color:
        var(--rvc-text-faint);

    font-size: 6px;
    font-weight: 650;
    line-height: 1;
}


/* =====================================================
   SMART ADVICE CARD
===================================================== */

.rvc-smart-advice {
    position: relative;

    display: flex;
    align-items: flex-start;

    min-width: 0;

    margin-top: 11px;

    padding:
        10px;

    gap: 9px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.10),
            rgba(56, 189, 248, 0.025)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.18);

    border-radius:
        10px;
}


.rvc-smart-advice::before {
    content: "";

    position: absolute;
    top: -65px;
    right: -35px;

    width: 130px;
    height: 120px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(139, 92, 246, 0.14),
            transparent 68%
        );
}


/* =====================================================
   SMART ADVICE ICON
===================================================== */

.rvc-smart-advice-icon {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    color:
        var(--rvc-purple-3);

    font-size: 9px;

    background:
        rgba(139, 92, 246, 0.11);

    border:
        1px solid
        rgba(139, 92, 246, 0.19);

    border-radius:
        8px;
}


/* =====================================================
   SMART ADVICE CONTENT
===================================================== */

.rvc-smart-advice-content {
    position: relative;
    z-index: 1;

    min-width: 0;
}


.rvc-smart-advice-content
strong {
    display: block;

    color:
        var(--rvc-text-soft);

    font-size: 8px;
    font-weight: 800;
    line-height: 1.25;
}


.rvc-smart-advice-content
span {
    display: block;

    margin-top: 3px;

    color:
        var(--rvc-text-muted);

    font-size: 6.8px;
    font-weight: 550;
    line-height: 1.4;
}


/* =====================================================
   FIELD GROUP
===================================================== */

.rvc-field-group {
    min-width: 0;
}


.rvc-field-group + .rvc-field-group {
    margin-top: 11px;
}


/* =====================================================
   FIELD LABEL ROW
===================================================== */

.rvc-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    margin-bottom: 7px;

    gap: 8px;
}


.rvc-field-label {
    color:
        var(--rvc-text-muted);

    font-size: 7.5px;
    font-weight: 750;
    line-height: 1;
}


.rvc-field-hint {
    color:
        var(--rvc-text-faint);

    font-size: 6px;
    font-weight: 600;
}


/* =====================================================
   CUSTOM SELECT WRAP
===================================================== */

.rvc-select-wrap {
    position: relative;

    width: 100%;
    min-width: 0;
}


.rvc-select-wrap::after {
    content: "\f078";

    position: absolute;
    top: 50%;
    right: 11px;

    pointer-events: none;

    color:
        var(--rvc-text-faint);

    font-family:
        "Font Awesome 6 Free";

    font-size: 7px;
    font-weight: 900;

    transform:
        translateY(-50%);
}


/* =====================================================
   SELECT FIELD
===================================================== */

.rvc-select {
    width: 100%;
    min-width: 0;
    height: 38px;

    padding:
        0
        34px
        0
        11px;

    color:
        var(--rvc-text-soft);

    font-size: 8.5px;
    font-weight: 700;

    background:
        rgba(5, 8, 15, 0.62);

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius:
        9px;

    outline: none;

    appearance: none;
    -webkit-appearance: none;

    transition:
        border-color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-select:hover {
    border-color:
        rgba(255, 255, 255, 0.12);
}


.rvc-select:focus {
    background:
        rgba(7, 10, 19, 0.86);

    border-color:
        rgba(139, 92, 246, 0.48);

    box-shadow:
        0 0 0 3px
        rgba(139, 92, 246, 0.08);
}


.rvc-select option {
    color:
        #e8eaf1;

    background:
        #111624;
}


/* =====================================================
   OUTPUT FORMAT GRID
===================================================== */

.rvc-format-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    width: 100%;
    min-width: 0;

    gap: 6px;
}


/* =====================================================
   FORMAT BUTTON
===================================================== */

.rvc-format-btn {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 58px;

    padding:
        8px
        4px;

    gap: 5px;

    overflow: hidden;

    color:
        var(--rvc-text-muted);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.013)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        9px;

    cursor: pointer;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-format-btn i {
    font-size: 11px;

    transition:
        color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast);
}


.rvc-format-btn span {
    font-size: 7px;
    font-weight: 800;
    line-height: 1;
}


.rvc-format-btn:hover {
    color:
        var(--rvc-text-main);

    background:
        rgba(139, 92, 246, 0.075);

    border-color:
        rgba(139, 92, 246, 0.22);

    transform:
        translateY(-1px);
}


.rvc-format-btn:hover i {
    color:
        var(--rvc-purple-3);

    transform:
        scale(1.05);
}


/* =====================================================
   ACTIVE FORMAT
===================================================== */

.rvc-format-btn.is-active {
    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.18),
            rgba(124, 58, 237, 0.06)
        );

    border-color:
        rgba(167, 139, 250, 0.38);

    box-shadow:
        0 0 0 2px
        rgba(139, 92, 246, 0.04),
        0 7px 18px
        rgba(76, 29, 149, 0.09);
}


.rvc-format-btn.is-active i {
    color:
        var(--rvc-purple-3);
}


/* =====================================================
   ADVANCED OPTIONS
===================================================== */

.rvc-advanced-options {
    min-width: 0;
}


/* =====================================================
   ADVANCED TOGGLE HEADER
===================================================== */

.rvc-advanced-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-width: 0;
    min-height: 36px;

    padding:
        0
        2px;

    gap: 10px;

    color:
        var(--rvc-text-soft);

    font-size: 8.5px;
    font-weight: 800;

    background:
        transparent;

    border: 0;

    cursor: pointer;
}


.rvc-advanced-toggle-left {
    display: inline-flex;
    align-items: center;

    min-width: 0;

    gap: 7px;
}


.rvc-advanced-toggle-left i {
    color:
        var(--rvc-purple-3);

    font-size: 9px;
}


.rvc-advanced-chevron {
    color:
        var(--rvc-text-faint);

    font-size: 7px;

    transition:
        transform var(--rvc-transition-fast),
        color var(--rvc-transition-fast);
}


.rvc-advanced-options.is-open
.rvc-advanced-chevron {
    color:
        var(--rvc-purple-3);

    transform:
        rotate(180deg);
}


/* =====================================================
   ADVANCED CONTENT
===================================================== */

.rvc-advanced-content {
    display: none;

    padding-top: 8px;
}


.rvc-advanced-options.is-open
.rvc-advanced-content {
    display: block;

    animation:
        rvcAdvancedOpen
        220ms
        ease;
}


@keyframes rvcAdvancedOpen {

    from {
        opacity: 0;

        transform:
            translateY(-4px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =====================================================
   SWITCH ROW
===================================================== */

.rvc-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    min-height: 46px;

    padding:
        8px
        0;

    gap: 12px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.045);
}


.rvc-switch-row:last-child {
    border-bottom: 0;
}


/* =====================================================
   SWITCH TEXT
===================================================== */

.rvc-switch-text {
    flex:
        1
        1
        auto;

    min-width: 0;
}


.rvc-switch-text
strong {
    display: block;

    overflow: hidden;

    color:
        var(--rvc-text-soft);

    font-size: 8px;
    font-weight: 750;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.rvc-switch-text
span {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color:
        var(--rvc-text-faint);

    font-size: 6.5px;
    font-weight: 550;
    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   SWITCH CONTROL
===================================================== */

.rvc-switch {
    position: relative;

    display: inline-flex;

    width: 36px;
    height: 20px;

    flex:
        0
        0
        36px;
}


.rvc-switch input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


/* =====================================================
   SWITCH TRACK
===================================================== */

.rvc-switch-track {
    position: absolute;
    inset: 0;

    cursor: pointer;

    background:
        rgba(255, 255, 255, 0.085);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        var(--rvc-radius-pill);

    transition:
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


/* =====================================================
   SWITCH KNOB
===================================================== */

.rvc-switch-track::before {
    content: "";

    position: absolute;
    top: 3px;
    left: 3px;

    width: 12px;
    height: 12px;

    background:
        #9ca3b4;

    border-radius:
        50%;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, 0.30);

    transition:
        transform var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


/* =====================================================
   SWITCH CHECKED STATE
===================================================== */

.rvc-switch input:checked
+ .rvc-switch-track {
    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #8b5cf6
        );

    border-color:
        rgba(167, 139, 250, 0.42);

    box-shadow:
        0 0 12px
        rgba(139, 92, 246, 0.18);
}


.rvc-switch input:checked
+ .rvc-switch-track::before {
    background:
        #ffffff;

    transform:
        translateX(16px);

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, 0.28),
        0 0 8px
        rgba(255, 255, 255, 0.18);
}


/* =====================================================
   SWITCH FOCUS STATE
===================================================== */

.rvc-switch input:focus-visible
+ .rvc-switch-track {
    box-shadow:
        0 0 0 3px
        rgba(139, 92, 246, 0.13);
}


/* =====================================================
   DISABLED SETTINGS STATE
===================================================== */

.rvc-settings-section.is-disabled {
    opacity: 0.42;

    pointer-events: none;

    filter:
        grayscale(0.22);
}


/* =====================================================
   SETTINGS BUSY STATE
===================================================== */

.rvc-right-panel.is-busy
.rvc-settings-scroll {
    pointer-events: none;
}


.rvc-right-panel.is-busy
.rvc-settings-header::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rvc-purple-3),
            transparent
        );

    transform:
        translateX(-100%);

    animation:
        rvcSettingsBusyLine
        1.2s
        linear
        infinite;
}


@keyframes rvcSettingsBusyLine {

    to {
        transform:
            translateX(100%);
    }

}


/* =====================================================
   COMPACT DESKTOP SAFETY
   FULL RESPONSIVE SYSTEM COMES IN PART 10
===================================================== */

@media (max-width: 1450px) {

    .rvc-settings-header {
        min-height:
            54px;

        padding:
            10px
            13px;
    }


    .rvc-settings-scroll {
        padding:
            12px
            11px
            16px;
    }


    .rvc-settings-section {
        padding-bottom:
            13px;

        margin-bottom:
            13px;
    }


    .rvc-preset-card {
        min-height:
            66px;

        padding:
            9px
            8px;
    }


    .rvc-compression-value {
        font-size:
            18px;
    }

}


@media (max-width: 1240px) {

    .rvc-settings-header {
        padding:
            9px
            10px;
    }


    .rvc-settings-title-icon {
        width:
            31px;

        height:
            31px;

        flex-basis:
            31px;
    }


    .rvc-settings-scroll {
        padding:
            11px
            9px
            14px;
    }


    .rvc-preset-grid {
        gap:
            5px;
    }


    .rvc-preset-card {
        min-height:
            62px;

        padding:
            8px
            7px;
    }


    .rvc-preset-icon {
        width:
            24px;

        height:
            24px;

        margin-bottom:
            5px;
    }


    .rvc-format-grid {
        gap:
            5px;
    }


    .rvc-format-btn {
        min-height:
            54px;
    }

}


/* =====================================================
   PART 07 END

   NEXT:
   PART 08 / 10

   - BOTTOM EXPORT ACTION AREA
   - COMPRESS BUTTON
   - PROGRESS STATE
   - CANCEL BUTTON
   - DOWNLOAD CUSTOM SETTINGS
   - DIRECT SHARE AREA
   - WHATSAPP
   - TELEGRAM
   - EMAIL
   - MORE SHARE
   - SOCIAL FORMAT STATUS
===================================================== */































/* =====================================================
   RAGO VIDEO COMPRESSOR
   STYLE.CSS
   PART 08 / 10

   EXPORT + COMPRESS ACTION AREA
   PROGRESS + DOWNLOAD + DIRECT SHARE
===================================================== */


/* =====================================================
   ACTION AREA SHELL
===================================================== */

.rvc-action-area {
    position: relative;

    flex: 0 0 auto;

    min-width: 0;

    padding:
        13px
        13px
        14px;

    background:
        linear-gradient(
            180deg,
            rgba(13, 18, 31, 0.98),
            rgba(8, 12, 22, 0.995)
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);

    box-shadow:
        0 -12px 30px
        rgba(0, 0, 0, 0.12);
}


/* TOP ACCENT */

.rvc-action-area::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 16%;
    right: 16%;

    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(139, 92, 246, 0.34),
            transparent
        );
}


/* =====================================================
   OUTPUT SUMMARY
===================================================== */

.rvc-action-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    margin-bottom: 10px;

    padding:
        0
        2px;

    gap: 10px;
}


/* =====================================================
   SUMMARY LEFT
===================================================== */

.rvc-action-summary-left {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 8px;
}


.rvc-action-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    color:
        var(--rvc-purple-3);

    font-size: 10px;

    background:
        rgba(139, 92, 246, 0.10);

    border:
        1px solid
        rgba(139, 92, 246, 0.18);

    border-radius:
        8px;
}


.rvc-action-summary-text {
    min-width: 0;
}


.rvc-action-summary-text strong {
    display: block;

    overflow: hidden;

    color:
        var(--rvc-text-soft);

    font-size: 8px;
    font-weight: 800;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.rvc-action-summary-text span {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color:
        var(--rvc-text-faint);

    font-size: 6.5px;
    font-weight: 600;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   SUMMARY ESTIMATE
===================================================== */

.rvc-action-estimate {
    flex: 0 0 auto;

    color:
        #ddd6fe;

    font-size: 10px;
    font-weight: 850;
    line-height: 1;

    font-variant-numeric:
        tabular-nums;
}


/* =====================================================
   MAIN COMPRESS BUTTON
===================================================== */

.rvc-compress-btn {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    min-height: 46px;

    padding:
        0
        15px;

    gap: 9px;

    overflow: hidden;

    color:
        #ffffff;

    font-size: 10px;
    font-weight: 850;
    line-height: 1;

    letter-spacing: 0.015em;

    background:
        linear-gradient(
            135deg,
            #9568ff 0%,
            #7c3aed 48%,
            #6426d5 100%
        );

    border:
        1px solid
        rgba(196, 181, 253, 0.34);

    border-radius:
        11px;

    box-shadow:
        0 10px 26px
        rgba(109, 40, 217, 0.28),
        0 0 22px
        rgba(139, 92, 246, 0.08),
        inset 0 1px 0
        rgba(255, 255, 255, 0.19);

    transition:
        transform var(--rvc-transition-fast),
        filter var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-compress-btn::before {
    content: "";

    position: absolute;
    top: -70%;
    left: -48%;

    width: 30%;
    height: 240%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.24),
            transparent
        );

    transform:
        rotate(18deg)
        translateX(-180%);
}


.rvc-compress-btn:hover {
    filter:
        brightness(1.07);

    transform:
        translateY(-1px);

    box-shadow:
        0 13px 31px
        rgba(109, 40, 217, 0.35),
        0 0 28px
        rgba(139, 92, 246, 0.13),
        inset 0 1px 0
        rgba(255, 255, 255, 0.22);
}


.rvc-compress-btn:hover::before {
    animation:
        rvcCompressButtonShine
        850ms
        ease
        forwards;
}


.rvc-compress-btn:active {
    transform:
        translateY(0)
        scale(0.985);
}


.rvc-compress-btn i {
    font-size: 12px;
}


@keyframes rvcCompressButtonShine {

    from {
        transform:
            rotate(18deg)
            translateX(-180%);
    }

    to {
        transform:
            rotate(18deg)
            translateX(560%);
    }

}


/* =====================================================
   COMPRESS BUTTON DISABLED
===================================================== */

.rvc-compress-btn:disabled,
.rvc-compress-btn.is-disabled {
    opacity: 0.44;

    cursor: not-allowed;

    filter: grayscale(0.18);

    transform: none;

    box-shadow:
        0 7px 18px
        rgba(109, 40, 217, 0.12);
}


/* =====================================================
   QUALITY PROTECTION NOTE
===================================================== */

.rvc-quality-protection-note {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    margin-top: 8px;

    gap: 6px;

    color:
        var(--rvc-text-faint);

    font-size: 6.5px;
    font-weight: 650;
    line-height: 1.25;

    text-align: center;
}


.rvc-quality-protection-note i {
    color:
        var(--rvc-success);

    font-size: 7px;
}


/* =====================================================
   COMPRESSION PROGRESS PANEL
===================================================== */

.rvc-progress-panel {
    position: relative;

    display: none;

    min-width: 0;

    padding:
        12px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.10),
            rgba(255, 255, 255, 0.018)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.20);

    border-radius:
        11px;
}


.rvc-action-area.is-processing
.rvc-progress-panel {
    display: block;

    animation:
        rvcProgressPanelIn
        240ms
        ease;
}


.rvc-action-area.is-processing
.rvc-compress-btn,
.rvc-action-area.is-processing
.rvc-quality-protection-note {
    display: none;
}


@keyframes rvcProgressPanelIn {

    from {
        opacity: 0;

        transform:
            translateY(4px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =====================================================
   PROGRESS HEADER
===================================================== */

.rvc-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    gap: 10px;
}


.rvc-progress-title {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 8px;
}


.rvc-progress-spinner {
    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    border:
        2px solid
        rgba(255, 255, 255, 0.10);

    border-top-color:
        var(--rvc-purple-3);

    border-radius:
        50%;

    animation:
        rvcActionSpinner
        760ms
        linear
        infinite;
}


@keyframes rvcActionSpinner {

    to {
        transform:
            rotate(360deg);
    }

}


.rvc-progress-title-text {
    min-width: 0;
}


.rvc-progress-title-text strong {
    display: block;

    overflow: hidden;

    color:
        var(--rvc-text-soft);

    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.rvc-progress-title-text span {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color:
        var(--rvc-text-faint);

    font-size: 6.5px;
    font-weight: 600;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   PROGRESS PERCENT
===================================================== */

.rvc-progress-percent {
    flex: 0 0 auto;

    color:
        #ddd6fe;

    font-size: 12px;
    font-weight: 900;
    line-height: 1;

    font-variant-numeric:
        tabular-nums;
}


/* =====================================================
   PROGRESS TRACK
===================================================== */

.rvc-progress-track {
    position: relative;

    width: 100%;
    height: 7px;

    margin-top: 11px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid
        rgba(255, 255, 255, 0.025);

    border-radius:
        var(--rvc-radius-pill);

    box-shadow:
        inset 0 1px 2px
        rgba(0, 0, 0, 0.25);
}


/* =====================================================
   PROGRESS FILL
===================================================== */

.rvc-progress-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 0%;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #a78bfa
        );

    border-radius:
        inherit;

    box-shadow:
        0 0 13px
        rgba(139, 92, 246, 0.28);

    transition:
        width 220ms ease;
}


.rvc-progress-fill::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    width: 42px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.28),
            transparent
        );

    transform:
        translateX(-50px);

    animation:
        rvcProgressGlow
        1.25s
        linear
        infinite;
}


@keyframes rvcProgressGlow {

    to {
        transform:
            translateX(360px);
    }

}


/* =====================================================
   PROGRESS META
===================================================== */

.rvc-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    margin-top: 8px;

    gap: 8px;

    color:
        var(--rvc-text-faint);

    font-size: 6.5px;
    font-weight: 600;
    line-height: 1.2;
}


/* =====================================================
   CANCEL BUTTON
===================================================== */

.rvc-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 32px;

    margin-top: 10px;

    gap: 6px;

    color:
        var(--rvc-text-muted);

    font-size: 7.5px;
    font-weight: 750;

    background:
        rgba(255, 255, 255, 0.03);

    border:
        1px solid
        rgba(255, 255, 255, 0.065);

    border-radius:
        8px;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast);
}


.rvc-cancel-btn:hover {
    color:
        var(--rvc-danger);

    background:
        var(--rvc-danger-soft);

    border-color:
        rgba(251, 113, 133, 0.17);
}


/* =====================================================
   COMPLETED ACTION PANEL
===================================================== */

.rvc-complete-panel {
    display: none;

    min-width: 0;
}


.rvc-action-area.is-complete
.rvc-complete-panel {
    display: block;

    animation:
        rvcCompletePanelIn
        300ms
        ease;
}


.rvc-action-area.is-complete
.rvc-compress-btn,
.rvc-action-area.is-complete
.rvc-quality-protection-note,
.rvc-action-area.is-complete
.rvc-progress-panel {
    display: none;
}


@keyframes rvcCompletePanelIn {

    from {
        opacity: 0;

        transform:
            translateY(5px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =====================================================
   COMPLETE STATUS
===================================================== */

.rvc-complete-status {
    display: flex;
    align-items: center;

    min-width: 0;

    padding:
        10px;

    gap: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(52, 211, 153, 0.09),
            rgba(139, 92, 246, 0.045)
        );

    border:
        1px solid
        rgba(52, 211, 153, 0.16);

    border-radius:
        10px;
}


/* =====================================================
   COMPLETE CHECK
===================================================== */

.rvc-complete-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    color:
        #ffffff;

    font-size: 10px;

    background:
        linear-gradient(
            145deg,
            #34d399,
            #059669
        );

    border:
        1px solid
        rgba(167, 243, 208, 0.34);

    border-radius:
        50%;

    box-shadow:
        0 0 0 4px
        rgba(52, 211, 153, 0.07),
        0 7px 18px
        rgba(5, 150, 105, 0.16);
}


/* =====================================================
   COMPLETE TEXT
===================================================== */

.rvc-complete-text {
    flex: 1 1 auto;

    min-width: 0;
}


.rvc-complete-text strong {
    display: block;

    overflow: hidden;

    color:
        var(--rvc-text-soft);

    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.rvc-complete-text span {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color:
        var(--rvc-text-muted);

    font-size: 6.5px;
    font-weight: 600;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   COMPLETE SIZE
===================================================== */

.rvc-complete-size {
    flex: 0 0 auto;

    color:
        var(--rvc-success);

    font-size: 10px;
    font-weight: 850;

    font-variant-numeric:
        tabular-nums;
}


/* =====================================================
   DIRECT SHARE AREA
===================================================== */

.rvc-share-area {
    min-width: 0;

    margin-top: 11px;
}


/* =====================================================
   SHARE HEADING
===================================================== */

.rvc-share-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    margin-bottom: 8px;

    gap: 8px;
}


.rvc-share-heading-text {
    display: inline-flex;
    align-items: center;

    min-width: 0;

    gap: 6px;

    color:
        var(--rvc-text-soft);

    font-size: 7.5px;
    font-weight: 800;
    line-height: 1;
}


.rvc-share-heading-text i {
    color:
        var(--rvc-purple-3);

    font-size: 8px;
}


/* =====================================================
   PLATFORM READY BADGE
===================================================== */

.rvc-platform-ready-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 20px;

    padding:
        0
        7px;

    gap: 5px;

    color:
        var(--rvc-success);

    font-size: 6px;
    font-weight: 800;

    background:
        var(--rvc-success-soft);

    border:
        1px solid
        rgba(52, 211, 153, 0.15);

    border-radius:
        var(--rvc-radius-pill);
}


.rvc-platform-ready-badge::before {
    content: "";

    width: 4px;
    height: 4px;

    flex: 0 0 4px;

    background:
        var(--rvc-success);

    border-radius:
        50%;

    box-shadow:
        0 0 6px
        rgba(52, 211, 153, 0.44);
}


/* =====================================================
   SHARE GRID
===================================================== */

.rvc-share-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    width: 100%;
    min-width: 0;

    gap: 6px;
}


/* =====================================================
   SHARE BUTTON
===================================================== */

.rvc-share-btn {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 62px;

    padding:
        8px
        4px;

    gap: 6px;

    overflow: hidden;

    color:
        var(--rvc-text-muted);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.034),
            rgba(255, 255, 255, 0.014)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        10px;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-share-btn:hover {
    color:
        #ffffff;

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, 0.14);
}


.rvc-share-btn:active {
    transform:
        translateY(0)
        scale(0.97);
}


/* =====================================================
   SHARE ICON
===================================================== */

.rvc-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    font-size: 12px;

    border-radius:
        8px;

    transition:
        transform var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-share-btn:hover
.rvc-share-icon {
    transform:
        scale(1.06);
}


.rvc-share-btn span {
    display: block;

    width: 100%;

    overflow: hidden;

    font-size: 6.5px;
    font-weight: 750;
    line-height: 1;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   WHATSAPP
===================================================== */

.rvc-share-whatsapp:hover {
    background:
        rgba(37, 211, 102, 0.075);

    border-color:
        rgba(37, 211, 102, 0.22);
}


.rvc-share-whatsapp
.rvc-share-icon {
    color:
        #25d366;

    background:
        rgba(37, 211, 102, 0.10);

    border:
        1px solid
        rgba(37, 211, 102, 0.17);
}


/* =====================================================
   TELEGRAM
===================================================== */

.rvc-share-telegram:hover {
    background:
        rgba(42, 171, 238, 0.075);

    border-color:
        rgba(42, 171, 238, 0.22);
}


.rvc-share-telegram
.rvc-share-icon {
    color:
        #2aabee;

    background:
        rgba(42, 171, 238, 0.10);

    border:
        1px solid
        rgba(42, 171, 238, 0.17);
}


/* =====================================================
   EMAIL
===================================================== */

.rvc-share-email:hover {
    background:
        rgba(167, 139, 250, 0.075);

    border-color:
        rgba(167, 139, 250, 0.23);
}


.rvc-share-email
.rvc-share-icon {
    color:
        #c4b5fd;

    background:
        rgba(139, 92, 246, 0.11);

    border:
        1px solid
        rgba(139, 92, 246, 0.19);
}


/* =====================================================
   MORE SHARE
===================================================== */

.rvc-share-more:hover {
    background:
        rgba(255, 255, 255, 0.055);

    border-color:
        rgba(255, 255, 255, 0.12);
}


.rvc-share-more
.rvc-share-icon {
    color:
        var(--rvc-text-soft);

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
}


/* =====================================================
   CUSTOM DOWNLOAD AREA
===================================================== */

.rvc-custom-download {
    min-width: 0;

    margin-top: 9px;
}


/* =====================================================
   DOWNLOAD BUTTON
===================================================== */

.rvc-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 40px;

    padding:
        0
        12px;

    gap: 8px;

    color:
        var(--rvc-text-soft);

    font-size: 8px;
    font-weight: 800;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.02)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.085);

    border-radius:
        9px;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-download-btn i {
    color:
        var(--rvc-purple-3);

    font-size: 10px;
}


.rvc-download-btn:hover {
    color:
        #ffffff;

    background:
        rgba(139, 92, 246, 0.09);

    border-color:
        rgba(139, 92, 246, 0.25);

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(76, 29, 149, 0.09);
}


.rvc-download-btn:active {
    transform:
        translateY(0)
        scale(0.985);
}


/* =====================================================
   DOWNLOAD SETTINGS INFO
===================================================== */

.rvc-download-settings-info {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    margin-top: 7px;

    gap: 5px;

    color:
        var(--rvc-text-faint);

    font-size: 6px;
    font-weight: 600;
    line-height: 1.25;

    text-align: center;
}


/* =====================================================
   SHARE BUTTON DISABLED STATE
===================================================== */

.rvc-share-btn:disabled,
.rvc-share-btn.is-disabled,
.rvc-download-btn:disabled,
.rvc-download-btn.is-disabled {
    opacity: 0.38;

    pointer-events: none;

    filter:
        grayscale(0.42);
}


/* =====================================================
   SHARE BUSY STATE
===================================================== */

.rvc-share-btn.is-sharing {
    pointer-events: none;
}


.rvc-share-btn.is-sharing
.rvc-share-icon {
    animation:
        rvcShareBusyPulse
        900ms
        ease-in-out
        infinite;
}


@keyframes rvcShareBusyPulse {

    0%,
    100% {
        transform:
            scale(1);

        opacity:
            0.65;
    }

    50% {
        transform:
            scale(1.10);

        opacity:
            1;
    }

}


/* =====================================================
   SHARE SUCCESS STATE
===================================================== */

.rvc-share-btn.is-success {
    color:
        var(--rvc-success);

    background:
        var(--rvc-success-soft);

    border-color:
        rgba(52, 211, 153, 0.18);
}


/* =====================================================
   ERROR ACTION STATE
===================================================== */

.rvc-action-area.is-error
.rvc-progress-panel {
    display: block;

    background:
        linear-gradient(
            145deg,
            rgba(251, 113, 133, 0.09),
            rgba(255, 255, 255, 0.015)
        );

    border-color:
        rgba(251, 113, 133, 0.18);
}


.rvc-action-area.is-error
.rvc-progress-spinner {
    animation: none;

    border-color:
        rgba(251, 113, 133, 0.16);

    border-top-color:
        var(--rvc-danger);
}


.rvc-action-area.is-error
.rvc-progress-percent {
    color:
        var(--rvc-danger);
}


/* =====================================================
   COMPACT DESKTOP SAFETY
   FULL RESPONSIVE SYSTEM COMES IN PART 10
===================================================== */

@media (max-width: 1450px) {

    .rvc-action-area {
        padding:
            12px
            11px
            13px;
    }


    .rvc-compress-btn {
        min-height:
            44px;
    }


    .rvc-share-btn {
        min-height:
            58px;
    }

}


@media (max-width: 1240px) {

    .rvc-action-area {
        padding:
            10px
            9px
            11px;
    }


    .rvc-action-summary {
        margin-bottom:
            8px;
    }


    .rvc-compress-btn {
        min-height:
            42px;

        font-size:
            9px;
    }


    .rvc-share-grid {
        gap:
            5px;
    }


    .rvc-share-btn {
        min-height:
            54px;

        padding:
            7px
            3px;
    }


    .rvc-share-icon {
        width:
            25px;

        height:
            25px;

        flex-basis:
            25px;

        font-size:
            11px;
    }


    .rvc-download-btn {
        min-height:
            38px;
    }

}


/* =====================================================
   PART 08 END

   NEXT:
   PART 09 / 10

   - CAMERA MODAL
   - LIVE CAMERA PREVIEW
   - FRONT / REAR CAMERA SWITCH
   - RECORD BUTTON
   - RECORDING TIMER
   - FLASH / MIC CONTROLS
   - MOBILE CAMERA UI
   - TOASTS
   - MODALS
   - DROPDOWNS
   - TOOLTIP
===================================================== */


























/* =====================================================
   RAGO VIDEO COMPRESSOR
   STYLE.CSS
   PART 09 / 10

   CAMERA MODAL + LIVE PREVIEW
   RECORDING UI + CAMERA CONTROLS
   TOASTS + MODALS + DROPDOWNS + TOOLTIPS
===================================================== */


/* =====================================================
   CAMERA MODAL OVERLAY
===================================================== */

.rvc-camera-modal {
    position: fixed;
    inset: 0;

    z-index: 99990;

    display: none;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding:
        20px;

    background:
        rgba(2, 4, 9, 0.84);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    overflow:
        auto;

    overscroll-behavior:
        contain;
}


.rvc-camera-modal.is-open {
    display:
        flex;

    animation:
        rvcCameraOverlayIn
        220ms
        ease;
}


@keyframes rvcCameraOverlayIn {

    from {
        opacity:
            0;
    }

    to {
        opacity:
            1;
    }

}


/* =====================================================
   CAMERA DIALOG
===================================================== */

.rvc-camera-dialog {
    position: relative;

    display: flex;
    flex-direction: column;

    width:
        min(100%, 920px);

    max-height:
        calc(100vh - 40px);

    min-width:
        0;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            rgba(16, 21, 36, 0.995),
            rgba(7, 10, 19, 0.995)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        18px;

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.58),
        0 0 0 1px
        rgba(139, 92, 246, 0.04),
        0 0 50px
        rgba(76, 29, 149, 0.12);

    animation:
        rvcCameraDialogIn
        280ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


@keyframes rvcCameraDialogIn {

    from {
        opacity:
            0;

        transform:
            translateY(12px)
            scale(0.985);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* CAMERA TOP LIGHT */

.rvc-camera-dialog::before {
    content: "";

    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;

    z-index: 10;

    height: 1px;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(167, 139, 250, 0.48),
            transparent
        );
}


/* =====================================================
   CAMERA HEADER
===================================================== */

.rvc-camera-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex:
        0
        0
        auto;

    min-width:
        0;

    min-height:
        62px;

    padding:
        12px
        15px;

    gap:
        12px;

    background:
        rgba(255, 255, 255, 0.014);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.07);
}


/* =====================================================
   CAMERA TITLE
===================================================== */

.rvc-camera-title-wrap {
    display: flex;
    align-items: center;

    min-width:
        0;

    gap:
        10px;
}


.rvc-camera-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width:
        36px;

    height:
        36px;

    flex:
        0
        0
        36px;

    color:
        var(--rvc-purple-3);

    font-size:
        12px;

    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.17),
            rgba(124, 58, 237, 0.055)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.24);

    border-radius:
        10px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.05);
}


.rvc-camera-title-text {
    min-width:
        0;
}


.rvc-camera-title-text strong {
    display:
        block;

    overflow:
        hidden;

    color:
        var(--rvc-text-main);

    font-size:
        11px;

    font-weight:
        850;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.rvc-camera-title-text span {
    display:
        block;

    margin-top:
        3px;

    overflow:
        hidden;

    color:
        var(--rvc-text-muted);

    font-size:
        7.5px;

    font-weight:
        600;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =====================================================
   CAMERA HEADER ACTIONS
===================================================== */

.rvc-camera-header-actions {
    display: flex;
    align-items: center;

    flex:
        0
        0
        auto;

    gap:
        7px;
}


/* =====================================================
   CAMERA HEADER BUTTON
===================================================== */

.rvc-camera-header-btn,
.rvc-camera-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width:
        34px;

    height:
        34px;

    flex:
        0
        0
        34px;

    color:
        var(--rvc-text-muted);

    font-size:
        10px;

    background:
        rgba(255, 255, 255, 0.025);

    border:
        1px solid
        rgba(255, 255, 255, 0.065);

    border-radius:
        9px;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast);
}


.rvc-camera-header-btn:hover {
    color:
        #ffffff;

    background:
        rgba(139, 92, 246, 0.09);

    border-color:
        rgba(139, 92, 246, 0.22);
}


.rvc-camera-close-btn:hover {
    color:
        var(--rvc-danger);

    background:
        var(--rvc-danger-soft);

    border-color:
        rgba(251, 113, 133, 0.18);
}


.rvc-camera-header-btn:active,
.rvc-camera-close-btn:active {
    transform:
        scale(0.95);
}


/* =====================================================
   CAMERA BODY
===================================================== */

.rvc-camera-body {
    position: relative;

    flex:
        1
        1
        auto;

    min-width:
        0;

    min-height:
        0;

    padding:
        14px;

    overflow:
        auto;
}


/* =====================================================
   CAMERA STAGE
===================================================== */

.rvc-camera-stage {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width:
        100%;

    min-width:
        0;

    aspect-ratio:
        16 / 9;

    min-height:
        300px;

    overflow:
        hidden;

    background:
        #000000;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius:
        14px;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.018),
        0 18px 44px
        rgba(0, 0, 0, 0.28);
}


/* CAMERA VIGNETTE */

.rvc-camera-stage::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index:
        5;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 52%,
            rgba(0, 0, 0, 0.22) 100%
        );
}


/* =====================================================
   LIVE CAMERA VIDEO
===================================================== */

.rvc-camera-video {
    position: absolute;
    inset: 0;

    z-index:
        1;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    object-position:
        center;

    background:
        #000000;
}


/* FRONT CAMERA MIRROR */

.rvc-camera-stage.is-front-camera
.rvc-camera-video {
    transform:
        scaleX(-1);
}


/* =====================================================
   CAMERA GRID GUIDE
===================================================== */

.rvc-camera-grid {
    position: absolute;
    inset: 0;

    z-index:
        4;

    display:
        none;

    pointer-events:
        none;

    background-image:
        linear-gradient(
            90deg,
            transparent 33.20%,
            rgba(255, 255, 255, 0.18) 33.33%,
            rgba(255, 255, 255, 0.18) 33.48%,
            transparent 33.60%,
            transparent 66.45%,
            rgba(255, 255, 255, 0.18) 66.58%,
            rgba(255, 255, 255, 0.18) 66.73%,
            transparent 66.85%
        ),
        linear-gradient(
            180deg,
            transparent 33.20%,
            rgba(255, 255, 255, 0.18) 33.33%,
            rgba(255, 255, 255, 0.18) 33.48%,
            transparent 33.60%,
            transparent 66.45%,
            rgba(255, 255, 255, 0.18) 66.58%,
            rgba(255, 255, 255, 0.18) 66.73%,
            transparent 66.85%
        );
}


.rvc-camera-stage.is-grid-visible
.rvc-camera-grid {
    display:
        block;
}


/* =====================================================
   RECORDING BADGE
===================================================== */

.rvc-recording-badge {
    position: absolute;
    top:
        13px;

    left:
        13px;

    z-index:
        12;

    display:
        none;

    align-items:
        center;

    min-height:
        28px;

    padding:
        0
        9px;

    gap:
        6px;

    color:
        #ffffff;

    font-size:
        7px;

    font-weight:
        850;

    line-height:
        1;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    background:
        rgba(185, 28, 28, 0.76);

    border:
        1px solid
        rgba(254, 202, 202, 0.24);

    border-radius:
        var(--rvc-radius-pill);

    box-shadow:
        0 7px 20px
        rgba(127, 29, 29, 0.20);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.rvc-camera-stage.is-recording
.rvc-recording-badge {
    display:
        inline-flex;
}


.rvc-recording-badge::before {
    content: "";

    width:
        7px;

    height:
        7px;

    flex:
        0
        0
        7px;

    background:
        #ffffff;

    border-radius:
        50%;

    box-shadow:
        0 0 8px
        rgba(255, 255, 255, 0.52);

    animation:
        rvcRecordingDot
        1s
        ease-in-out
        infinite;
}


@keyframes rvcRecordingDot {

    0%,
    100% {
        opacity:
            1;
    }

    50% {
        opacity:
            0.32;
    }

}


/* =====================================================
   RECORDING TIMER
===================================================== */

.rvc-recording-timer {
    position: absolute;
    top:
        13px;

    left:
        50%;

    z-index:
        12;

    display:
        none;

    align-items:
        center;
    justify-content:
        center;

    min-height:
        28px;

    padding:
        0
        10px;

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        850;

    line-height:
        1;

    font-variant-numeric:
        tabular-nums;

    background:
        rgba(4, 6, 12, 0.66);

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius:
        var(--rvc-radius-pill);

    transform:
        translateX(-50%);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);
}


.rvc-camera-stage.is-recording
.rvc-recording-timer {
    display:
        inline-flex;
}


/* =====================================================
   CAMERA RESOLUTION BADGE
===================================================== */

.rvc-camera-resolution-badge {
    position: absolute;
    top:
        13px;

    right:
        13px;

    z-index:
        12;

    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;

    min-height:
        27px;

    padding:
        0
        8px;

    color:
        rgba(255, 255, 255, 0.88);

    font-size:
        7px;

    font-weight:
        800;

    line-height:
        1;

    background:
        rgba(4, 6, 12, 0.62);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        var(--rvc-radius-pill);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* =====================================================
   CAMERA PERMISSION STATE
===================================================== */

.rvc-camera-permission {
    position: absolute;
    inset: 0;

    z-index:
        30;

    display:
        none;

    flex-direction:
        column;
    align-items:
        center;
    justify-content:
        center;

    padding:
        28px;

    text-align:
        center;

    background:
        radial-gradient(
            circle at center,
            rgba(139, 92, 246, 0.075),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #080b14,
            #03050a
        );
}


.rvc-camera-stage.is-permission-needed
.rvc-camera-permission {
    display:
        flex;
}


/* =====================================================
   PERMISSION ICON
===================================================== */

.rvc-camera-permission-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width:
        62px;

    height:
        62px;

    margin-bottom:
        14px;

    color:
        var(--rvc-purple-3);

    font-size:
        21px;

    background:
        rgba(139, 92, 246, 0.11);

    border:
        1px solid
        rgba(139, 92, 246, 0.22);

    border-radius:
        18px;

    box-shadow:
        0 12px 30px
        rgba(76, 29, 149, 0.12);
}


.rvc-camera-permission strong {
    color:
        var(--rvc-text-main);

    font-size:
        12px;

    font-weight:
        850;

    line-height:
        1.25;
}


.rvc-camera-permission span {
    max-width:
        360px;

    margin-top:
        6px;

    color:
        var(--rvc-text-muted);

    font-size:
        8px;

    font-weight:
        550;

    line-height:
        1.5;
}


/* =====================================================
   ALLOW CAMERA BUTTON
===================================================== */

.rvc-allow-camera-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height:
        38px;

    margin-top:
        14px;

    padding:
        0
        14px;

    gap:
        7px;

    color:
        #ffffff;

    font-size:
        8px;

    font-weight:
        800;

    background:
        linear-gradient(
            145deg,
            #8b5cf6,
            #6d28d9
        );

    border:
        1px solid
        rgba(196, 181, 253, 0.28);

    border-radius:
        9px;

    box-shadow:
        0 9px 22px
        rgba(109, 40, 217, 0.22);
}


.rvc-allow-camera-btn:hover {
    filter:
        brightness(1.08);

    transform:
        translateY(-1px);
}


/* =====================================================
   CAMERA LOADING STATE
===================================================== */

.rvc-camera-loading {
    position: absolute;
    inset: 0;

    z-index:
        28;

    display:
        none;

    flex-direction:
        column;
    align-items:
        center;
    justify-content:
        center;

    background:
        rgba(2, 4, 9, 0.88);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.rvc-camera-stage.is-loading
.rvc-camera-loading {
    display:
        flex;
}


.rvc-camera-loading-ring {
    width:
        44px;

    height:
        44px;

    border:
        3px solid
        rgba(255, 255, 255, 0.08);

    border-top-color:
        var(--rvc-purple-3);

    border-right-color:
        rgba(139, 92, 246, 0.46);

    border-radius:
        50%;

    animation:
        rvcCameraLoadingSpin
        800ms
        linear
        infinite;
}


@keyframes rvcCameraLoadingSpin {

    to {
        transform:
            rotate(360deg);
    }

}


.rvc-camera-loading span {
    margin-top:
        12px;

    color:
        var(--rvc-text-muted);

    font-size:
        8px;

    font-weight:
        650;
}


/* =====================================================
   CAMERA ERROR STATE
===================================================== */

.rvc-camera-error {
    position: absolute;
    inset: 0;

    z-index:
        32;

    display:
        none;

    flex-direction:
        column;
    align-items:
        center;
    justify-content:
        center;

    padding:
        28px;

    text-align:
        center;

    background:
        linear-gradient(
            180deg,
            rgba(29, 9, 17, 0.97),
            rgba(7, 5, 10, 0.99)
        );
}


.rvc-camera-stage.is-error
.rvc-camera-error {
    display:
        flex;
}


.rvc-camera-error i {
    color:
        var(--rvc-danger);

    font-size:
        25px;
}


.rvc-camera-error strong {
    margin-top:
        11px;

    color:
        var(--rvc-text-main);

    font-size:
        11px;

    font-weight:
        850;
}


.rvc-camera-error span {
    max-width:
        360px;

    margin-top:
        6px;

    color:
        var(--rvc-text-muted);

    font-size:
        8px;

    line-height:
        1.5;
}


/* =====================================================
   CAMERA CONTROLS
===================================================== */

.rvc-camera-controls {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items:
        center;

    width:
        100%;

    min-width:
        0;

    margin-top:
        13px;

    padding:
        10px
        12px;

    gap:
        12px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.014)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        12px;
}


/* =====================================================
   CAMERA CONTROL GROUPS
===================================================== */

.rvc-camera-controls-left,
.rvc-camera-controls-right {
    display: flex;
    align-items: center;

    min-width:
        0;

    gap:
        7px;
}


.rvc-camera-controls-right {
    justify-content:
        flex-end;
}


/* =====================================================
   CAMERA CONTROL BUTTON
===================================================== */

.rvc-camera-control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width:
        38px;

    height:
        38px;

    flex:
        0
        0
        38px;

    color:
        var(--rvc-text-muted);

    font-size:
        11px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius:
        10px;

    transition:
        color var(--rvc-transition-fast),
        background var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        transform var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


.rvc-camera-control-btn:hover {
    color:
        #ffffff;

    background:
        rgba(139, 92, 246, 0.09);

    border-color:
        rgba(139, 92, 246, 0.23);

    transform:
        translateY(-1px);
}


.rvc-camera-control-btn:active {
    transform:
        translateY(0)
        scale(0.95);
}


.rvc-camera-control-btn.is-active {
    color:
        var(--rvc-purple-3);

    background:
        rgba(139, 92, 246, 0.12);

    border-color:
        rgba(139, 92, 246, 0.27);

    box-shadow:
        0 0 14px
        rgba(139, 92, 246, 0.10);
}


/* =====================================================
   MIC OFF STATE
===================================================== */

.rvc-camera-control-btn.is-muted {
    color:
        var(--rvc-danger);

    background:
        var(--rvc-danger-soft);

    border-color:
        rgba(251, 113, 133, 0.18);
}


/* =====================================================
   RECORD BUTTON WRAPPER
===================================================== */

.rvc-record-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width:
        76px;
}


/* =====================================================
   RECORD BUTTON
===================================================== */

.rvc-record-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width:
        64px;

    height:
        64px;

    flex:
        0
        0
        64px;

    padding:
        0;

    background:
        rgba(255, 255, 255, 0.075);

    border:
        2px solid
        rgba(255, 255, 255, 0.74);

    border-radius:
        50%;

    box-shadow:
        0 0 0 5px
        rgba(255, 255, 255, 0.035),
        0 10px 28px
        rgba(0, 0, 0, 0.30);

    transition:
        transform var(--rvc-transition-fast),
        border-color var(--rvc-transition-fast),
        box-shadow var(--rvc-transition-fast);
}


/* RECORD INNER */

.rvc-record-btn::before {
    content: "";

    width:
        46px;

    height:
        46px;

    background:
        linear-gradient(
            145deg,
            #fb7185,
            #dc2626
        );

    border-radius:
        50%;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.24),
        0 0 18px
        rgba(239, 68, 68, 0.22);

    transition:
        width var(--rvc-transition-fast),
        height var(--rvc-transition-fast),
        border-radius var(--rvc-transition-fast),
        transform var(--rvc-transition-fast);
}


.rvc-record-btn:hover {
    transform:
        scale(1.04);

    border-color:
        #ffffff;

    box-shadow:
        0 0 0 6px
        rgba(255, 255, 255, 0.045),
        0 12px 32px
        rgba(0, 0, 0, 0.34),
        0 0 24px
        rgba(239, 68, 68, 0.13);
}


.rvc-record-btn:active {
    transform:
        scale(0.96);
}


/* =====================================================
   RECORD BUTTON RECORDING STATE
===================================================== */

.rvc-record-btn.is-recording::before {
    width:
        27px;

    height:
        27px;

    border-radius:
        7px;

    background:
        linear-gradient(
            145deg,
            #fb7185,
            #dc2626
        );

    box-shadow:
        0 0 20px
        rgba(239, 68, 68, 0.28);
}


.rvc-record-btn.is-recording {
    border-color:
        rgba(254, 202, 202, 0.90);

    box-shadow:
        0 0 0 6px
        rgba(239, 68, 68, 0.07),
        0 12px 30px
        rgba(0, 0, 0, 0.34);
}


/* =====================================================
   CAMERA DEVICE INFO
===================================================== */

.rvc-camera-device-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width:
        0;

    margin-top:
        10px;

    padding:
        9px
        11px;

    gap:
        10px;

    color:
        var(--rvc-text-faint);

    font-size:
        6.5px;

    font-weight:
        600;

    background:
        rgba(255, 255, 255, 0.018);

    border:
        1px solid
        rgba(255, 255, 255, 0.05);

    border-radius:
        9px;
}


.rvc-camera-device-info-left {
    display: flex;
    align-items: center;

    min-width:
        0;

    gap:
        6px;
}


.rvc-camera-device-info-left i {
    color:
        var(--rvc-success);

    font-size:
        7px;
}


.rvc-camera-device-name {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =====================================================
   GENERIC MODAL OVERLAY
===================================================== */

.rvc-modal-overlay {
    position: fixed;
    inset: 0;

    z-index:
        99980;

    display:
        none;

    align-items:
        center;
    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(2, 4, 9, 0.78);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.rvc-modal-overlay.is-open {
    display:
        flex;
}


/* =====================================================
   GENERIC MODAL
===================================================== */

.rvc-modal {
    position: relative;

    width:
        min(100%, 480px);

    max-height:
        calc(100vh - 40px);

    overflow:
        auto;

    background:
        linear-gradient(
            180deg,
            #121727,
            #090d18
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius:
        15px;

    box-shadow:
        0 26px 80px
        rgba(0, 0, 0, 0.52),
        0 0 30px
        rgba(76, 29, 149, 0.10);

    animation:
        rvcGenericModalIn
        240ms
        ease;
}


@keyframes rvcGenericModalIn {

    from {
        opacity:
            0;

        transform:
            translateY(8px)
            scale(0.985);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =====================================================
   MODAL HEADER
===================================================== */

.rvc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width:
        0;

    min-height:
        54px;

    padding:
        11px
        13px;

    gap:
        10px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.065);
}


.rvc-modal-title {
    color:
        var(--rvc-text-main);

    font-size:
        10px;

    font-weight:
        850;
}


.rvc-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width:
        31px;

    height:
        31px;

    color:
        var(--rvc-text-muted);

    font-size:
        9px;

    background:
        rgba(255, 255, 255, 0.03);

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        8px;
}


.rvc-modal-close:hover {
    color:
        var(--rvc-danger);

    background:
        var(--rvc-danger-soft);

    border-color:
        rgba(251, 113, 133, 0.17);
}


/* =====================================================
   MODAL BODY
===================================================== */

.rvc-modal-body {
    padding:
        14px;
}


/* =====================================================
   DROPDOWN
===================================================== */

.rvc-dropdown {
    position: absolute;

    z-index:
        99970;

    display:
        none;

    min-width:
        180px;

    padding:
        6px;

    overflow:
        hidden;

    background:
        rgba(15, 20, 34, 0.985);

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius:
        10px;

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.38),
        0 0 20px
        rgba(76, 29, 149, 0.07);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.rvc-dropdown.is-open {
    display:
        block;

    animation:
        rvcDropdownIn
        160ms
        ease;
}


@keyframes rvcDropdownIn {

    from {
        opacity:
            0;

        transform:
            translateY(-4px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


/* =====================================================
   DROPDOWN ITEM
===================================================== */

.rvc-dropdown-item {
    display: flex;
    align-items: center;

    width:
        100%;

    min-height:
        34px;

    padding:
        0
        9px;

    gap:
        8px;

    color:
        var(--rvc-text-muted);

    font-size:
        7.5px;

    font-weight:
        700;

    text-align:
        left;

    background:
        transparent;

    border:
        0;

    border-radius:
        7px;
}


.rvc-dropdown-item i {
    width:
        13px;

    color:
        var(--rvc-purple-3);

    font-size:
        8px;

    text-align:
        center;
}


.rvc-dropdown-item:hover {
    color:
        #ffffff;

    background:
        rgba(139, 92, 246, 0.09);
}


/* =====================================================
   TOAST CONTAINER
===================================================== */

.rvc-toast-container {
    position: fixed;

    right:
        18px;

    bottom:
        18px;

    z-index:
        100000;

    display: flex;
    flex-direction: column;

    width:
        min(360px, calc(100vw - 36px));

    gap:
        8px;

    pointer-events:
        none;
}


/* =====================================================
   TOAST
===================================================== */

.rvc-toast {
    position: relative;

    display: flex;
    align-items: flex-start;

    width:
        100%;

    min-width:
        0;

    padding:
        11px
        12px;

    gap:
        9px;

    overflow:
        hidden;

    color:
        var(--rvc-text-soft);

    background:
        rgba(16, 21, 36, 0.97);

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius:
        11px;

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.38);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    pointer-events:
        auto;

    animation:
        rvcToastIn
        260ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


@keyframes rvcToastIn {

    from {
        opacity:
            0;

        transform:
            translateX(18px)
            scale(0.98);
    }

    to {
        opacity:
            1;

        transform:
            translateX(0)
            scale(1);
    }

}


.rvc-toast.is-leaving {
    animation:
        rvcToastOut
        220ms
        ease
        forwards;
}


@keyframes rvcToastOut {

    to {
        opacity:
            0;

        transform:
            translateX(18px)
            scale(0.98);
    }

}


/* =====================================================
   TOAST ICON
===================================================== */

.rvc-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width:
        28px;

    height:
        28px;

    flex:
        0
        0
        28px;

    color:
        var(--rvc-purple-3);

    font-size:
        9px;

    background:
        rgba(139, 92, 246, 0.11);

    border:
        1px solid
        rgba(139, 92, 246, 0.18);

    border-radius:
        8px;
}


/* =====================================================
   TOAST CONTENT
===================================================== */

.rvc-toast-content {
    flex:
        1
        1
        auto;

    min-width:
        0;
}


.rvc-toast-content strong {
    display:
        block;

    color:
        var(--rvc-text-soft);

    font-size:
        8px;

    font-weight:
        800;

    line-height:
        1.25;
}


.rvc-toast-content span {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--rvc-text-muted);

    font-size:
        6.8px;

    font-weight:
        550;

    line-height:
        1.4;
}


/* =====================================================
   TOAST TYPES
===================================================== */

.rvc-toast.is-success {
    border-color:
        rgba(52, 211, 153, 0.18);
}


.rvc-toast.is-success
.rvc-toast-icon {
    color:
        var(--rvc-success);

    background:
        var(--rvc-success-soft);

    border-color:
        rgba(52, 211, 153, 0.17);
}


.rvc-toast.is-error {
    border-color:
        rgba(251, 113, 133, 0.18);
}


.rvc-toast.is-error
.rvc-toast-icon {
    color:
        var(--rvc-danger);

    background:
        var(--rvc-danger-soft);

    border-color:
        rgba(251, 113, 133, 0.17);
}


.rvc-toast.is-warning {
    border-color:
        rgba(251, 191, 36, 0.18);
}


.rvc-toast.is-warning
.rvc-toast-icon {
    color:
        #fbbf24;

    background:
        rgba(251, 191, 36, 0.09);

    border-color:
        rgba(251, 191, 36, 0.17);
}


/* =====================================================
   TOOLTIP SYSTEM
===================================================== */

[data-rvc-tooltip] {
    position:
        relative;
}


[data-rvc-tooltip]::before {
    content:
        attr(data-rvc-tooltip);

    position:
        absolute;

    left:
        50%;

    bottom:
        calc(100% + 8px);

    z-index:
        100010;

    max-width:
        220px;

    padding:
        6px
        8px;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    color:
        #ffffff;

    font-size:
        6.5px;

    font-weight:
        650;

    line-height:
        1.3;

    text-align:
        center;

    white-space:
        nowrap;

    background:
        rgba(7, 10, 18, 0.96);

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        7px;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.30);

    transform:
        translate(-50%, 4px);

    transition:
        opacity var(--rvc-transition-fast),
        visibility var(--rvc-transition-fast),
        transform var(--rvc-transition-fast);
}


[data-rvc-tooltip]:hover::before {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(-50%, 0);
}


/* =====================================================
   MOBILE CAMERA UI
   FULL GLOBAL RESPONSIVE SYSTEM COMES IN PART 10
===================================================== */

@media (max-width: 768px) {

    .rvc-camera-modal {
        align-items:
            stretch;

        padding:
            0;

        background:
            #03050a;
    }


    .rvc-camera-dialog {
        width:
            100%;

        max-height:
            none;

        min-height:
            100dvh;

        border:
            0;

        border-radius:
            0;

        box-shadow:
            none;
    }


    .rvc-camera-header {
        min-height:
            58px;

        padding:
            max(10px, env(safe-area-inset-top))
            12px
            10px;
    }


    .rvc-camera-title-icon {
        width:
            32px;

        height:
            32px;

        flex-basis:
            32px;
    }


    .rvc-camera-title-text strong {
        font-size:
            10px;
    }


    .rvc-camera-title-text span {
        font-size:
            7px;
    }


    .rvc-camera-body {
        display: flex;
        flex-direction: column;

        padding:
            8px
            8px
            max(10px, env(safe-area-inset-bottom));

        overflow:
            hidden;
    }


    .rvc-camera-stage {
        flex:
            1
            1
            auto;

        min-height:
            0;

        aspect-ratio:
            auto;

        border-radius:
            12px;
    }


    .rvc-camera-controls {
        flex:
            0
            0
            auto;

        margin-top:
            8px;

        padding:
            9px
            8px;

        gap:
            8px;
    }


    .rvc-camera-control-btn {
        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

        border-radius:
            11px;
    }


    .rvc-record-btn-wrap {
        min-width:
            72px;
    }


    .rvc-record-btn {
        width:
            62px;

        height:
            62px;

        flex-basis:
            62px;
    }


    .rvc-record-btn::before {
        width:
            44px;

        height:
            44px;
    }


    .rvc-record-btn.is-recording::before {
        width:
            26px;

        height:
            26px;
    }


    .rvc-camera-device-info {
        display:
            none;
    }


    .rvc-camera-resolution-badge {
        top:
            10px;

        right:
            10px;
    }


    .rvc-recording-badge {
        top:
            10px;

        left:
            10px;
    }


    .rvc-recording-timer {
        top:
            10px;
    }


    .rvc-toast-container {
        right:
            10px;

        bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            );

        width:
            calc(100vw - 20px);
    }


    [data-rvc-tooltip]::before {
        display:
            none;
    }

}


/* =====================================================
   SMALL MOBILE CAMERA SAFETY
===================================================== */

@media (max-width: 480px) {

    .rvc-camera-header-actions
    .rvc-camera-header-btn {
        display:
            none;
    }


    .rvc-camera-controls {
        grid-template-columns:
            1fr
            auto
            1fr;
    }


    .rvc-camera-controls-left,
    .rvc-camera-controls-right {
        gap:
            5px;
    }


    .rvc-camera-control-btn {
        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;
    }


    .rvc-record-btn-wrap {
        min-width:
            66px;
    }


    .rvc-record-btn {
        width:
            58px;

        height:
            58px;

        flex-basis:
            58px;
    }


    .rvc-record-btn::before {
        width:
            41px;

        height:
            41px;
    }


    .rvc-camera-permission {
        padding:
            20px;
    }


    .rvc-camera-permission-icon {
        width:
            54px;

        height:
            54px;

        font-size:
            18px;
    }


    .rvc-camera-permission strong {
        font-size:
            11px;
    }


    .rvc-camera-permission span {
        font-size:
            7.5px;
    }

}


/* =====================================================
   LANDSCAPE MOBILE CAMERA
===================================================== */

@media (
    max-width: 900px
)
and (
    orientation: landscape
)
and (
    max-height: 560px
) {

    .rvc-camera-header {
        min-height:
            48px;

        padding:
            7px
            10px;
    }


    .rvc-camera-title-icon {
        width:
            30px;

        height:
            30px;

        flex-basis:
            30px;
    }


    .rvc-camera-body {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            82px;

        grid-template-rows:
            minmax(0, 1fr);

        gap:
            8px;

        padding:
            7px;
    }


    .rvc-camera-stage {
        min-height:
            0;

        height:
            100%;

        aspect-ratio:
            auto;
    }


    .rvc-camera-controls {
        grid-template-columns:
            1fr;

        grid-template-rows:
            1fr
            auto
            1fr;

        height:
            100%;

        margin-top:
            0;

        padding:
            7px;

        gap:
            6px;
    }


    .rvc-camera-controls-left,
    .rvc-camera-controls-right {
        flex-direction:
            column;

        justify-content:
            center;
    }


    .rvc-camera-control-btn {
        width:
            36px;

        height:
            36px;

        flex-basis:
            36px;
    }


    .rvc-record-btn-wrap {
        min-width:
            0;
    }


    .rvc-record-btn {
        width:
            54px;

        height:
            54px;

        flex-basis:
            54px;
    }


    .rvc-record-btn::before {
        width:
            38px;

        height:
            38px;
    }


    .rvc-camera-device-info {
        display:
            none;
    }

}


/* =====================================================
   REDUCED MOTION SAFETY
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .rvc-camera-modal,
    .rvc-camera-dialog,
    .rvc-modal,
    .rvc-dropdown,
    .rvc-toast,
    .rvc-recording-badge::before,
    .rvc-camera-loading-ring {
        animation:
            none !important;
    }

}


/* =====================================================
   PART 09 END

   NEXT:
   PART 10 / 10

   FINAL RESPONSIVE SYSTEM

   - LARGE DESKTOP
   - LAPTOP
   - TABLET LANDSCAPE
   - TABLET PORTRAIT
   - MOBILE
   - SMALL MOBILE
   - TOUCH TARGETS
   - SAFE AREA
   - MOBILE IMPORT FLOW
   - MOBILE CAMERA FLOW
   - MOBILE COMPRESS FLOW
   - MOBILE DIRECT SHARE
   - LANDSCAPE SAFETY
   - HEIGHT SAFETY
   - FINAL OVERFLOW FIXES
===================================================== */


























/* =====================================================
   RAGO VIDEO COMPRESSOR
   STYLE.CSS
   PART 10 / 10

   FINAL RESPONSIVE SYSTEM

   LARGE DESKTOP
   LAPTOP
   TABLET LANDSCAPE
   TABLET PORTRAIT
   MOBILE
   SMALL MOBILE
   TOUCH TARGETS
   SAFE AREAS
   OVERFLOW SAFETY
   MOBILE IMPORT FLOW
   MOBILE CAMERA FLOW
   MOBILE COMPRESS FLOW
   MOBILE DIRECT SHARE
===================================================== */


/* =====================================================
   GLOBAL RESPONSIVE SAFETY
===================================================== */

.rvc-app,
.rvc-app *,
.rvc-app *::before,
.rvc-app *::after {
    box-sizing: border-box;
}


.rvc-app {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    overflow-x: hidden;
}


.rvc-app img,
.rvc-app video,
.rvc-app canvas,
.rvc-app svg {
    max-width: 100%;
}


.rvc-app button,
.rvc-app input,
.rvc-app select,
.rvc-app textarea {
    font: inherit;
}


.rvc-app button,
.rvc-app [role="button"] {
    -webkit-tap-highlight-color:
        transparent;
}


.rvc-app button {
    touch-action:
        manipulation;
}


.rvc-app input[type="range"] {
    touch-action:
        pan-x;
}


/* =====================================================
   SCROLLBAR FINAL POLISH
===================================================== */

.rvc-app * {
    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(139, 92, 246, 0.32)
        rgba(255, 255, 255, 0.025);
}


.rvc-app *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}


.rvc-app *::-webkit-scrollbar-track {
    background:
        rgba(255, 255, 255, 0.018);
}


.rvc-app *::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            rgba(139, 92, 246, 0.42),
            rgba(109, 40, 217, 0.28)
        );

    border:
        2px solid
        transparent;

    border-radius:
        999px;

    background-clip:
        padding-box;
}


.rvc-app *::-webkit-scrollbar-thumb:hover {
    background:
        rgba(139, 92, 246, 0.56);

    border:
        2px solid
        transparent;

    background-clip:
        padding-box;
}


/* =====================================================
   DESKTOP BASE SAFETY
===================================================== */

.rvc-studio-shell,
.rvc-studio-layout,
.rvc-workspace,
.rvc-main-workspace,
.rvc-center-panel,
.rvc-left-panel,
.rvc-right-panel {
    min-width: 0;
    min-height: 0;
}


/* =====================================================
   LARGE DESKTOP
   1600px AND ABOVE
===================================================== */

@media (min-width: 1600px) {

    .rvc-app {
        --rvc-responsive-side-gap:
            18px;
    }


    .rvc-studio-layout {
        grid-template-columns:
            minmax(250px, 0.82fr)
            minmax(620px, 2.2fr)
            minmax(310px, 0.98fr);
    }


    .rvc-left-panel {
        min-width:
            250px;
    }


    .rvc-right-panel {
        min-width:
            310px;
    }


    .rvc-preview-stage {
        min-height:
            420px;
    }


    .rvc-settings-scroll {
        padding:
            15px
            14px
            19px;
    }

}


/* =====================================================
   ULTRA WIDE DESKTOP
===================================================== */

@media (min-width: 1920px) {

    .rvc-studio-layout {
        grid-template-columns:
            minmax(280px, 0.86fr)
            minmax(760px, 2.35fr)
            minmax(340px, 1fr);
    }


    .rvc-preview-stage {
        min-height:
            500px;
    }


    .rvc-action-area {
        padding:
            15px;
    }

}


/* =====================================================
   STANDARD DESKTOP / LAPTOP
   1281px - 1599px
===================================================== */

@media (
    min-width: 1281px
)
and (
    max-width: 1599px
) {

    .rvc-studio-layout {
        grid-template-columns:
            minmax(220px, 0.78fr)
            minmax(500px, 2fr)
            minmax(285px, 0.96fr);
    }


    .rvc-left-panel {
        min-width:
            0;
    }


    .rvc-right-panel {
        min-width:
            0;
    }


    .rvc-preview-stage {
        min-height:
            350px;
    }

}


/* =====================================================
   COMPACT LAPTOP
   1101px - 1280px
===================================================== */

@media (
    min-width: 1101px
)
and (
    max-width: 1280px
) {

    .rvc-studio-layout {
        grid-template-columns:
            minmax(195px, 0.72fr)
            minmax(430px, 1.8fr)
            minmax(255px, 0.94fr);
    }


    .rvc-left-panel {
        min-width:
            0;
    }


    .rvc-right-panel {
        min-width:
            0;
    }


    .rvc-preview-stage {
        min-height:
            320px;
    }


    .rvc-settings-scroll {
        padding:
            10px
            9px
            14px;
    }


    .rvc-preset-card {
        min-height:
            60px;
    }


    .rvc-format-btn {
        min-height:
            52px;
    }


    .rvc-share-btn {
        min-height:
            52px;
    }

}


/* =====================================================
   TABLET LANDSCAPE / SMALL LAPTOP
   901px - 1100px

   LAYOUT:
   LEFT + CENTER
   RIGHT SETTINGS FULL WIDTH BELOW
===================================================== */

@media (
    min-width: 901px
)
and (
    max-width: 1100px
) {

    .rvc-studio-layout {
        display:
            grid;

        grid-template-columns:
            minmax(210px, 0.72fr)
            minmax(0, 1.8fr);

        grid-template-areas:
            "left center"
            "right right";

        align-items:
            stretch;
    }


    .rvc-left-panel {
        grid-area:
            left;

        min-width:
            0;
    }


    .rvc-center-panel,
    .rvc-main-workspace {
        grid-area:
            center;

        min-width:
            0;
    }


    .rvc-right-panel {
        grid-area:
            right;

        min-width:
            0;

        border-left:
            0;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.07);
    }


    .rvc-settings-scroll {
        overflow:
            visible;
    }


    .rvc-preset-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    .rvc-format-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .rvc-share-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    .rvc-action-area {
        padding:
            14px;
    }

}


/* =====================================================
   TABLET PORTRAIT
   769px - 900px

   SINGLE COLUMN WORKFLOW
===================================================== */

@media (
    min-width: 769px
)
and (
    max-width: 900px
) {

    .rvc-studio-layout {
        display:
            flex;

        flex-direction:
            column;

        width:
            100%;
    }


    .rvc-left-panel,
    .rvc-center-panel,
    .rvc-main-workspace,
    .rvc-right-panel {
        width:
            100%;

        min-width:
            0;
    }


    .rvc-left-panel {
        order:
            1;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.07);
    }


    .rvc-center-panel,
    .rvc-main-workspace {
        order:
            2;
    }


    .rvc-right-panel {
        order:
            3;

        border-left:
            0;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.07);
    }


    .rvc-settings-scroll {
        overflow:
            visible;
    }


    .rvc-preset-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    .rvc-format-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .rvc-share-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    .rvc-preview-stage {
        min-height:
            390px;
    }

}


/* =====================================================
   MOBILE CORE
   768px AND BELOW

   USER FLOW:
   IMPORT
   PREVIEW
   SETTINGS
   COMPRESS
   SHARE
===================================================== */

@media (max-width: 768px) {

    html,
    body {
        max-width:
            100%;

        overflow-x:
            hidden;
    }


    .rvc-app {
        width:
            100%;

        max-width:
            100%;

        min-height:
            100dvh;

        overflow-x:
            hidden;
    }


    /* =================================================
       MOBILE APP SHELL
    ================================================= */

    .rvc-studio-shell {
        width:
            100%;

        max-width:
            100%;

        min-height:
            100dvh;

        overflow:
            visible;
    }


    /* =================================================
       MOBILE MAIN LAYOUT
    ================================================= */

    .rvc-studio-layout {
        display:
            flex;

        flex-direction:
            column;

        width:
            100%;

        min-width:
            0;

        min-height:
            0;

        overflow:
            visible;
    }


    /* =================================================
       MOBILE ORDER
    ================================================= */

    .rvc-left-panel {
        order:
            1;

        width:
            100%;

        min-width:
            0;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.07);
    }


    .rvc-center-panel,
    .rvc-main-workspace {
        order:
            2;

        width:
            100%;

        min-width:
            0;
    }


    .rvc-right-panel {
        order:
            3;

        width:
            100%;

        min-width:
            0;

        overflow:
            visible;

        border-left:
            0;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.07);
    }


    /* =================================================
       MOBILE TOP HEADER
    ================================================= */

    .rvc-header,
    .rvc-studio-header {
        min-height:
            56px;

        padding:
            9px
            11px;
    }


    .rvc-brand-title,
    .rvc-header-title {
        font-size:
            10px;
    }


    .rvc-brand-subtitle,
    .rvc-header-subtitle {
        font-size:
            6.5px;
    }


    /* =================================================
       MOBILE TOOLBAR
    ================================================= */

    .rvc-toolbar {
        width:
            100%;

        min-width:
            0;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }


    .rvc-toolbar::-webkit-scrollbar {
        display:
            none;
    }


    .rvc-toolbar-inner {
        width:
            max-content;

        min-width:
            100%;
    }


    /* =================================================
       MOBILE IMPORT PANEL
    ================================================= */

    .rvc-left-panel {
        max-height:
            none;
    }


    .rvc-import-panel,
    .rvc-source-panel,
    .rvc-upload-panel {
        width:
            100%;

        min-width:
            0;
    }


    /* IMPORT OPTIONS SIDE BY SIDE */

    .rvc-import-options,
    .rvc-source-options,
    .rvc-upload-options {
        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            8px;
    }


    .rvc-import-card,
    .rvc-source-card,
    .rvc-upload-card {
        min-width:
            0;

        min-height:
            92px;
    }


    /* =================================================
       MOBILE FILE / CAMERA TOUCH TARGET
    ================================================= */

    .rvc-import-btn,
    .rvc-camera-open-btn,
    .rvc-file-open-btn {
        min-height:
            46px;
    }


    /* =================================================
       MOBILE PREVIEW
    ================================================= */

    .rvc-preview-stage,
    .rvc-video-stage,
    .rvc-monitor-stage {
        width:
            100%;

        min-width:
            0;

        min-height:
            260px;

        max-height:
            none;

        aspect-ratio:
            16 / 9;
    }


    .rvc-preview-video,
    .rvc-video-preview,
    .rvc-monitor-video {
        width:
            100%;

        height:
            100%;

        object-fit:
            contain;
    }


    /* =================================================
       MOBILE VIDEO CONTROLS
    ================================================= */

    .rvc-video-controls,
    .rvc-preview-controls {
        gap:
            7px;

        padding:
            8px;
    }


    .rvc-video-control-btn,
    .rvc-preview-control-btn {
        min-width:
            40px;

        min-height:
            40px;
    }


    /* =================================================
       MOBILE SETTINGS HEADER
    ================================================= */

    .rvc-settings-header {
        position:
            relative;

        min-height:
            56px;

        padding:
            10px
            12px;
    }


    /* =================================================
       MOBILE SETTINGS
    ================================================= */

    .rvc-settings-scroll {
        width:
            100%;

        min-width:
            0;

        min-height:
            0;

        padding:
            12px;

        overflow:
            visible;
    }


    .rvc-settings-section {
        margin-bottom:
            14px;

        padding-bottom:
            14px;
    }


    /* =================================================
       MOBILE PRESETS
    ================================================= */

    .rvc-preset-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            8px;
    }


    .rvc-preset-card {
        min-height:
            82px;

        padding:
            10px;
    }


    .rvc-preset-icon {
        width:
            30px;

        height:
            30px;

        margin-bottom:
            7px;
    }


    .rvc-preset-name {
        font-size:
            9px;
    }


    .rvc-preset-description {
        font-size:
            6.8px;
    }


    /* =================================================
       MOBILE COMPRESSION SLIDER
    ================================================= */

    .rvc-compression-slider-wrap {
        padding:
            9px
            0
            5px;
    }


    .rvc-compression-slider {
        height:
            7px;
    }


    .rvc-compression-slider::-webkit-slider-thumb {
        width:
            22px;

        height:
            22px;
    }


    .rvc-compression-slider::-moz-range-thumb {
        width:
            16px;

        height:
            16px;
    }


    .rvc-compression-value {
        font-size:
            22px;
    }


    /* =================================================
       MOBILE SELECT
    ================================================= */

    .rvc-select {
        height:
            46px;

        font-size:
            9px;

        border-radius:
            10px;
    }


    /* =================================================
       MOBILE FORMAT GRID
    ================================================= */

    .rvc-format-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap:
            7px;
    }


    .rvc-format-btn {
        min-height:
            66px;
    }


    .rvc-format-btn i {
        font-size:
            13px;
    }


    .rvc-format-btn span {
        font-size:
            7.5px;
    }


    /* =================================================
       MOBILE ADVANCED OPTIONS
    ================================================= */

    .rvc-advanced-toggle {
        min-height:
            44px;
    }


    .rvc-switch-row {
        min-height:
            54px;
    }


    .rvc-switch {
        width:
            42px;

        height:
            24px;

        flex-basis:
            42px;
    }


    .rvc-switch-track::before {
        top:
            3px;

        left:
            3px;

        width:
            16px;

        height:
            16px;
    }


    .rvc-switch input:checked
    + .rvc-switch-track::before {
        transform:
            translateX(18px);
    }


    /* =================================================
       MOBILE ACTION AREA
    ================================================= */

    .rvc-action-area {
        position:
            relative;

        width:
            100%;

        min-width:
            0;

        padding:
            13px
            12px
            max(
                14px,
                env(safe-area-inset-bottom)
            );
    }


    /* =================================================
       MOBILE COMPRESS BUTTON
    ================================================= */

    .rvc-compress-btn {
        min-height:
            52px;

        font-size:
            10px;

        border-radius:
            12px;
    }


    .rvc-compress-btn i {
        font-size:
            13px;
    }


    /* =================================================
       MOBILE PROGRESS
    ================================================= */

    .rvc-progress-panel {
        padding:
            13px;
    }


    .rvc-progress-track {
        height:
            8px;
    }


    .rvc-cancel-btn {
        min-height:
            42px;
    }


    /* =================================================
       MOBILE COMPLETE STATUS
    ================================================= */

    .rvc-complete-status {
        padding:
            11px;
    }


    .rvc-complete-check {
        width:
            36px;

        height:
            36px;

        flex-basis:
            36px;
    }


    /* =================================================
       MOBILE SHARE GRID
    ================================================= */

    .rvc-share-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap:
            7px;
    }


    .rvc-share-btn {
        min-height:
            70px;

        padding:
            9px
            3px;

        border-radius:
            11px;
    }


    .rvc-share-icon {
        width:
            31px;

        height:
            31px;

        flex-basis:
            31px;

        font-size:
            14px;
    }


    .rvc-share-btn span {
        font-size:
            6.5px;
    }


    /* =================================================
       MOBILE DOWNLOAD BUTTON
    ================================================= */

    .rvc-download-btn {
        min-height:
            48px;

        font-size:
            8.5px;

        border-radius:
            10px;
    }


    /* =================================================
       MOBILE SMART ADVICE
    ================================================= */

    .rvc-smart-advice {
        padding:
            11px;
    }


    .rvc-smart-advice-icon {
        width:
            31px;

        height:
            31px;

        flex-basis:
            31px;
    }


    /* =================================================
       MOBILE TOAST
    ================================================= */

    .rvc-toast {
        padding:
            11px;
    }


    /* =================================================
       MOBILE DROPDOWN
    ================================================= */

    .rvc-dropdown {
        max-width:
            calc(100vw - 20px);
    }


    /* =================================================
       MOBILE TOOLTIP DISABLE
    ================================================= */

    [data-rvc-tooltip]::before {
        display:
            none !important;
    }

}


/* =====================================================
   STANDARD MOBILE
   481px - 640px
===================================================== */

@media (
    min-width: 481px
)
and (
    max-width: 640px
) {

    .rvc-preview-stage,
    .rvc-video-stage,
    .rvc-monitor-stage {
        min-height:
            240px;
    }


    .rvc-import-options,
    .rvc-source-options,
    .rvc-upload-options {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .rvc-preset-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .rvc-share-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


/* =====================================================
   SMALL MOBILE
   480px AND BELOW
===================================================== */

@media (max-width: 480px) {

    /* =================================================
       SMALL MOBILE HEADER
    ================================================= */

    .rvc-header,
    .rvc-studio-header {
        min-height:
            52px;

        padding:
            8px
            9px;
    }


    .rvc-brand-title,
    .rvc-header-title {
        font-size:
            9.5px;
    }


    .rvc-brand-subtitle,
    .rvc-header-subtitle {
        display:
            none;
    }


    /* =================================================
       SMALL MOBILE IMPORT
    ================================================= */

    .rvc-import-options,
    .rvc-source-options,
    .rvc-upload-options {
        grid-template-columns:
            1fr;

        gap:
            7px;
    }


    .rvc-import-card,
    .rvc-source-card,
    .rvc-upload-card {
        min-height:
            78px;
    }


    /* =================================================
       SMALL MOBILE PREVIEW
    ================================================= */

    .rvc-preview-stage,
    .rvc-video-stage,
    .rvc-monitor-stage {
        min-height:
            205px;

        aspect-ratio:
            16 / 9;
    }


    /* =================================================
       SMALL MOBILE SETTINGS
    ================================================= */

    .rvc-settings-scroll {
        padding:
            10px
            9px
            13px;
    }


    .rvc-settings-header {
        padding:
            9px
            10px;
    }


    /* =================================================
       SMALL MOBILE PRESETS
    ================================================= */

    .rvc-preset-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            6px;
    }


    .rvc-preset-card {
        min-height:
            76px;

        padding:
            9px
            8px;
    }


    .rvc-preset-recommended {
        top:
            5px;

        right:
            5px;

        font-size:
            5px;
    }


    /* =================================================
       SMALL MOBILE COMPRESSION
    ================================================= */

    .rvc-compression-value {
        font-size:
            20px;
    }


    .rvc-quality-status {
        min-height:
            22px;

        padding:
            0
            7px;
    }


    /* =================================================
       SMALL MOBILE FORMAT
    ================================================= */

    .rvc-format-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap:
            5px;
    }


    .rvc-format-btn {
        min-height:
            60px;

        padding:
            7px
            2px;
    }


    /* =================================================
       SMALL MOBILE ACTION
    ================================================= */

    .rvc-action-area {
        padding:
            11px
            9px
            max(
                12px,
                env(safe-area-inset-bottom)
            );
    }


    .rvc-action-summary {
        gap:
            7px;
    }


    .rvc-action-summary-icon {
        width:
            27px;

        height:
            27px;

        flex-basis:
            27px;
    }


    .rvc-action-estimate {
        font-size:
            9px;
    }


    /* =================================================
       SMALL MOBILE COMPRESS BUTTON
    ================================================= */

    .rvc-compress-btn {
        min-height:
            50px;

        font-size:
            9.5px;
    }


    /* =================================================
       SMALL MOBILE SHARE
    ================================================= */

    .rvc-share-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            7px;
    }


    .rvc-share-btn {
        min-height:
            66px;

        flex-direction:
            row;

        justify-content:
            flex-start;

        padding:
            8px
            10px;

        gap:
            8px;
    }


    .rvc-share-icon {
        width:
            32px;

        height:
            32px;

        flex:
            0
            0
            32px;
    }


    .rvc-share-btn span {
        width:
            auto;

        min-width:
            0;

        font-size:
            7px;

        text-align:
            left;
    }


    /* =================================================
       SMALL MOBILE COMPLETE STATUS
    ================================================= */

    .rvc-complete-status {
        align-items:
            flex-start;
    }


    .rvc-complete-size {
        font-size:
            9px;
    }


    /* =================================================
       SMALL MOBILE SMART ADVICE
    ================================================= */

    .rvc-smart-advice-content span {
        font-size:
            6.6px;
    }

}


/* =====================================================
   EXTRA SMALL MOBILE
   380px AND BELOW
===================================================== */

@media (max-width: 380px) {

    .rvc-settings-title-icon {
        width:
            30px;

        height:
            30px;

        flex-basis:
            30px;
    }


    .rvc-settings-subtitle {
        display:
            none;
    }


    .rvc-preset-grid {
        grid-template-columns:
            1fr;
    }


    .rvc-preset-card {
        min-height:
            68px;
    }


    .rvc-format-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .rvc-format-btn span {
        font-size:
            6.5px;
    }


    .rvc-share-grid {
        grid-template-columns:
            1fr;
    }


    .rvc-share-btn {
        min-height:
            56px;
    }


    .rvc-compression-value-row {
        align-items:
            center;
    }


    .rvc-action-summary-text span {
        display:
            none;
    }

}


/* =====================================================
   TOUCH DEVICE IMPROVEMENTS
===================================================== */

@media (hover: none) and (pointer: coarse) {

    .rvc-app button,
    .rvc-app [role="button"],
    .rvc-app select {
        min-height:
            44px;
    }


    .rvc-preset-card {
        cursor:
            default;
    }


    .rvc-preset-card:hover,
    .rvc-format-btn:hover,
    .rvc-share-btn:hover,
    .rvc-download-btn:hover,
    .rvc-compress-btn:hover {
        transform:
            none;
    }


    .rvc-compress-btn:hover::before {
        animation:
            none;
    }


    .rvc-camera-control-btn {
        min-width:
            44px;

        min-height:
            44px;
    }

}


/* =====================================================
   MOBILE LANDSCAPE
===================================================== */

@media (
    max-width: 900px
)
and (
    orientation: landscape
)
and (
    max-height: 600px
) {

    .rvc-app {
        min-height:
            auto;
    }


    .rvc-preview-stage,
    .rvc-video-stage,
    .rvc-monitor-stage {
        min-height:
            260px;
    }


    .rvc-preset-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    .rvc-share-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    .rvc-settings-scroll {
        overflow:
            visible;
    }

}


/* =====================================================
   SHORT HEIGHT LAPTOP SAFETY
===================================================== */

@media (
    min-width: 901px
)
and (
    max-height: 760px
) {

    .rvc-preview-stage {
        min-height:
            280px;
    }


    .rvc-settings-header {
        min-height:
            50px;
    }


    .rvc-settings-scroll {
        padding-top:
            9px;

        padding-bottom:
            11px;
    }


    .rvc-settings-section {
        margin-bottom:
            10px;

        padding-bottom:
            10px;
    }


    .rvc-preset-card {
        min-height:
            57px;
    }


    .rvc-format-btn {
        min-height:
            50px;
    }


    .rvc-action-area {
        padding-top:
            9px;

        padding-bottom:
            10px;
    }


    .rvc-compress-btn {
        min-height:
            40px;
    }

}


/* =====================================================
   VERY SHORT SCREEN SAFETY
===================================================== */

@media (max-height: 560px) {

    .rvc-modal-overlay {
        align-items:
            flex-start;

        overflow-y:
            auto;
    }


    .rvc-modal {
        margin:
            10px
            0;
    }


    .rvc-toast-container {
        bottom:
            8px;
    }

}


/* =====================================================
   IOS SAFE AREA
===================================================== */

@supports (
    padding:
    max(0px)
) {

    @media (max-width: 768px) {

        .rvc-app {
            padding-left:
                env(safe-area-inset-left);

            padding-right:
                env(safe-area-inset-right);
        }


        .rvc-action-area {
            padding-bottom:
                max(
                    14px,
                    env(safe-area-inset-bottom)
                );
        }


        .rvc-toast-container {
            bottom:
                max(
                    10px,
                    env(safe-area-inset-bottom)
                );
        }

    }

}


/* =====================================================
   MOBILE KEYBOARD SAFETY
===================================================== */

@media (max-width: 768px) {

    .rvc-app:has(
        input:focus
    )
    .rvc-action-area,

    .rvc-app:has(
        select:focus
    )
    .rvc-action-area {
        position:
            relative;
    }

}


/* =====================================================
   FINAL WORD WRAP SAFETY
===================================================== */

.rvc-app strong,
.rvc-app span,
.rvc-app p,
.rvc-app label,
.rvc-app button {
    overflow-wrap:
        anywhere;
}


/* =====================================================
   FINAL FLEX SAFETY
===================================================== */

.rvc-settings-title-wrap,
.rvc-action-summary-left,
.rvc-progress-title,
.rvc-complete-text,
.rvc-switch-text,
.rvc-smart-advice-content {
    min-width:
        0;
}


/* =====================================================
   FINAL GRID CHILD SAFETY
===================================================== */

.rvc-preset-grid > *,
.rvc-format-grid > *,
.rvc-share-grid > * {
    min-width:
        0;
}


/* =====================================================
   FINAL VIDEO SAFETY
===================================================== */

.rvc-preview-video,
.rvc-video-preview,
.rvc-monitor-video,
.rvc-camera-video {
    display:
        block;

    max-width:
        100%;

    max-height:
        100%;
}


/* =====================================================
   FINAL BUTTON TEXT SAFETY
===================================================== */

.rvc-compress-btn,
.rvc-download-btn,
.rvc-cancel-btn {
    white-space:
        normal;

    text-align:
        center;
}


/* =====================================================
   FINAL FOCUS ACCESSIBILITY
===================================================== */

.rvc-app button:focus-visible,
.rvc-app select:focus-visible,
.rvc-app input:focus-visible,
.rvc-app [tabindex]:focus-visible {
    outline:
        2px solid
        rgba(167, 139, 250, 0.78);

    outline-offset:
        2px;
}


/* =====================================================
   HIGH CONTRAST SAFETY
===================================================== */

@media (prefers-contrast: more) {

    .rvc-app {
        --rvc-text-muted:
            #c3c8d5;

        --rvc-text-faint:
            #9da5b7;
    }


    .rvc-preset-card,
    .rvc-format-btn,
    .rvc-share-btn,
    .rvc-select {
        border-color:
            rgba(255, 255, 255, 0.18);
    }

}


/* =====================================================
   REDUCED MOTION FINAL SAFETY
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .rvc-app *,
    .rvc-app *::before,
    .rvc-app *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.001ms !important;
    }

}


/* =====================================================
   PRINT SAFETY
===================================================== */

@media print {

    .rvc-app {
        display:
            none !important;
    }

}


/* =====================================================
   FINAL RESPONSIVE LOCK
===================================================== */

@media (max-width: 768px) {

    .rvc-left-panel,
    .rvc-center-panel,
    .rvc-main-workspace,
    .rvc-right-panel,
    .rvc-settings-scroll,
    .rvc-action-area {
        max-width:
            100% !important;
    }


    .rvc-studio-layout {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .rvc-right-panel {
        height:
            auto !important;

        max-height:
            none !important;
    }


    .rvc-settings-scroll {
        height:
            auto !important;

        max-height:
            none !important;
    }

}


/* =====================================================
   PART 10 END

   STYLE.CSS COMPLETE
   TOTAL: 10 / 10 PARTS

   RAGO VIDEO COMPRESSOR
   FINAL FUTURISTIC DARK UI
   DESKTOP + TABLET + MOBILE READY
===================================================== */




















/* =====================================================
   RAGO VIDEO COMPRESSOR
   QUICK SHARE — ORIGINAL BRAND COLORS
===================================================== */

/* ICON BASE */
.rvc-share-btn i {
    font-size: 26px;
    line-height: 1;
    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}


/* WHATSAPP */
.rvc-share-whatsapp i {
    color: #25D366;
    filter:
        drop-shadow(0 0 6px rgba(37, 211, 102, 0.55));
}


/* INSTAGRAM */
.rvc-share-instagram i {
    color: #E4405F;
    filter:
        drop-shadow(0 0 6px rgba(228, 64, 95, 0.55));
}


/* FACEBOOK */
.rvc-share-facebook i {
    color: #1877F2;
    filter:
        drop-shadow(0 0 6px rgba(24, 119, 242, 0.55));
}


/* YOUTUBE */
.rvc-share-youtube i {
    color: #FF0000;
    filter:
        drop-shadow(0 0 6px rgba(255, 0, 0, 0.55));
}


/* TELEGRAM */
.rvc-share-telegram i {
    color: #229ED9;
    filter:
        drop-shadow(0 0 6px rgba(34, 158, 217, 0.55));
}


/* SNAPCHAT */
.rvc-share-snapchat i {
    color: #FFFC00;
    filter:
        drop-shadow(0 0 6px rgba(255, 252, 0, 0.45));
}


/* EMAIL */
.rvc-share-email i {
    color: #8B5CF6;
    filter:
        drop-shadow(0 0 6px rgba(139, 92, 246, 0.55));
}


/* PINTEREST */
.rvc-share-pinterest i {
    color: #E60023;
    filter:
        drop-shadow(0 0 6px rgba(230, 0, 35, 0.55));
}


/* HOVER */
.rvc-share-btn:hover i {
    transform: scale(1.16);
    filter:
        brightness(1.18)
        drop-shadow(0 0 10px currentColor);
}
























/* =====================================================
   RAGO VIDEO COMPRESSOR
   PREVIEW TOP GAP REMOVE + MONITOR HEIGHT INCREASE
===================================================== */

/* CENTER PREVIEW AREA */
.rvc-preview-section,
.rvc-preview-panel,
.rvc-center-panel {
    padding-top: 0 !important;
}


/* VIDEO TITLE / META TOP ROW — COMPACT */
.rvc-preview-header,
.rvc-video-info-header,
.rvc-video-header {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}


/* REMOVE EXTRA SPACE ABOVE MONITOR */
.rvc-compare-section,
.rvc-compare-wrap,
.rvc-preview-stage,
.rvc-preview-monitor-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ACTUAL MONITOR — BIGGER HEIGHT */
.rvc-compare-monitor,
.rvc-preview-monitor,
.rvc-monitor {
    height: 440px !important;
    min-height: 380px !important;
}


/* ACTUAL MONITOR — BALANCED HEIGHT */
.rvc-compare-monitor,
.rvc-preview-monitor,
.rvc-monitor {
    height: 360px !important;
    min-height: 360px !important;
}


/* LARGE DESKTOP */
@media (min-width: 1400px) {

    .rvc-compare-monitor,
    .rvc-preview-monitor,
    .rvc-monitor {
        height: 380px !important;
        min-height: 380px !important;
    }

}
























/* =====================================================
   RAGO VIDEO COMPRESSOR
   PREVIEW HEADER — SINGLE LINE
===================================================== */

/* TOP HEADER ROW */
.rvc-preview-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;

    width: 100% !important;
    min-height: 44px !important;

    margin: 0 0 10px 0 !important;
    padding: 6px 0 !important;
}


/* LEFT: VIDEO NAME */
.rvc-preview-title,
.rvc-video-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}


/* RIGHT: ALL META IN ONE LINE */
.rvc-preview-meta,
.rvc-video-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}


/* META ITEMS */
.rvc-preview-meta > *,
.rvc-video-meta > * {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;

    margin: 0 !important;
    padding: 0 !important;
}
























/* =====================================================
   RAGO VIDEO COMPRESSOR
   PREMIUM FUTURISTIC PLAYER BAR
===================================================== */

/* MAIN CONTROL BAR */
.rvc-player-controls {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 12px !important;

    width: 100% !important;
    min-height: 64px !important;
    padding: 9px 14px !important;
    margin-top: 10px !important;

    border: 1px solid rgba(139, 92, 246, 0.20) !important;
    border-radius: 16px !important;

    background:
        linear-gradient(
            135deg,
            rgba(14, 20, 38, 0.96),
            rgba(9, 13, 28, 0.98)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 10px 30px rgba(0, 0, 0, 0.20) !important;

    box-sizing: border-box !important;
}


/* =====================================================
   LEFT PLAYBACK AREA
===================================================== */

.rvc-player-buttons,
.rvc-playback-controls,
.rvc-control-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    flex: 0 0 auto !important;
    margin: 0 !important;
}


/* =====================================================
   TIME DISPLAY
===================================================== */

.rvc-player-time,
.rvc-time-display {
    display: inline-flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;
    margin: 0 !important;

    color: #aeb8d0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
}


/* =====================================================
   SEEK BAR — CENTER
===================================================== */

.rvc-player-seek,
.rvc-seek-wrap,
.rvc-progress-wrap {
    display: flex !important;
    align-items: center !important;

    flex: 1 1 auto !important;
    min-width: 160px !important;
    max-width: 460px !important;

    margin: 0 !important;
}


/* =====================================================
   RIGHT PREMIUM ACTION BLOCK
   PUSH TO FAR RIGHT
===================================================== */

.rvc-volume-control,
.rvc-volume-wrap,
.rvc-player-volume {
    margin-left: auto !important;
}


/* VOLUME */
.rvc-volume-control,
.rvc-volume-wrap,
.rvc-player-volume {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    flex: 0 0 auto !important;

    padding: 7px 10px !important;

    border: 1px solid rgba(139, 92, 246, 0.18) !important;
    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            rgba(124, 58, 237, 0.10),
            rgba(76, 29, 149, 0.05)
        ) !important;
}


/* SNAPSHOT + FULLSCREEN GROUP */
.rvc-player-actions,
.rvc-extra-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

    flex: 0 0 auto !important;

    padding: 5px !important;

    border: 1px solid rgba(139, 92, 246, 0.18) !important;
    border-radius: 12px !important;

    background: rgba(5, 8, 18, 0.50) !important;
}


/* =====================================================
   ALL PLAYER BUTTONS
===================================================== */

.rvc-player-controls button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 36px !important;
    height: 36px !important;

    flex: 0 0 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #aeb8d0 !important;

    border: 1px solid transparent !important;
    border-radius: 10px !important;

    background: transparent !important;

    cursor: pointer !important;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease !important;
}


/* BUTTON HOVER */
.rvc-player-controls button:hover {
    color: #ffffff !important;

    border-color:
        rgba(139, 92, 246, 0.48) !important;

    background:
        linear-gradient(
            135deg,
            rgba(124, 58, 237, 0.26),
            rgba(168, 85, 247, 0.12)
        ) !important;

    box-shadow:
        0 0 18px rgba(124, 58, 237, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

    transform: translateY(-1px) !important;
}


/* PLAY BUTTON — PRIMARY */
.rvc-player-controls button:first-child {
    color: #ffffff !important;

    border-color:
        rgba(139, 92, 246, 0.45) !important;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #6d28d9
        ) !important;

    box-shadow:
        0 0 18px rgba(124, 58, 237, 0.30) !important;
}


/* =====================================================
   RANGE SLIDERS
===================================================== */

.rvc-player-controls input[type="range"] {
    height: 5px !important;

    border-radius: 999px !important;

    accent-color: #8b5cf6 !important;

    cursor: pointer !important;
}


/* VOLUME SLIDER */
.rvc-volume-control input[type="range"],
.rvc-volume-wrap input[type="range"],
.rvc-player-volume input[type="range"] {
    width: 92px !important;
}


/* =====================================================
   ICONS
===================================================== */

.rvc-player-controls i {
    font-size: 14px !important;
    line-height: 1 !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .rvc-player-controls {
        min-height: 58px !important;
        gap: 6px !important;
        padding: 7px 8px !important;

        overflow-x: auto !important;
    }

    .rvc-player-controls button {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
    }

    .rvc-volume-control input[type="range"],
    .rvc-volume-wrap input[type="range"],
    .rvc-player-volume input[type="range"] {
        width: 62px !important;
    }

}








/* =====================================================
   RAGO VIDEO COMPRESSOR
   PLAYER CONTROLS — EXACT 3 ZONE LAYOUT
   MATCHED TO CURRENT HTML
===================================================== */


/* MAIN BAR */
#rvcPlayerControls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 72px !important;

    padding: 10px 18px !important;
    gap: 0 !important;

    box-sizing: border-box !important;
}


/* =====================================================
   ZONE 1
   PLAY / RESTART / FORWARD
   LOCK LEFT
===================================================== */

#rvcPlayerControls .rvc-player-left-controls {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =====================================================
   ZONE 2
   TIME
   PUSH CENTER GROUP AWAY FROM LEFT
===================================================== */

#rvcPlayerControls .rvc-player-time {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;

    flex: 0 0 auto !important;

    margin-left: auto !important;
    margin-right: 16px !important;

    white-space: nowrap !important;
}


/* =====================================================
   ZONE 2
   TIMELINE / SEEK BAR
===================================================== */

#rvcPlayerControls .rvc-timeline-wrap {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    flex: 0 0 240px !important;

    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* REAL RANGE */
#rvcPlayerControls .rvc-video-timeline {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
}


/* =====================================================
   ZONE 3
   VOLUME + SNAPSHOT + FULLSCREEN
   PUSH FAR RIGHT
===================================================== */

#rvcPlayerControls .rvc-player-right-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;

    flex: 0 0 auto !important;

    margin-left: auto !important;
    margin-right: 0 !important;

    padding: 0 !important;
}


/* =====================================================
   VOLUME BLOCK
===================================================== */

#rvcPlayerControls .rvc-volume-control {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;

    flex: 0 0 auto !important;

    margin: 0 !important;
}


/* VOLUME SLIDER */
#rvcPlayerControls .rvc-volume-slider {
    width: 105px !important;
    min-width: 105px !important;
    max-width: 105px !important;

    margin: 0 !important;
}


/* =====================================================
   BUTTONS
===================================================== */

#rvcPlayerControls .rvc-player-btn {
    flex: 0 0 auto !important;
}


/* =====================================================
   MOBILE / TABLET SAFETY
===================================================== */

@media (max-width: 900px) {

    #rvcPlayerControls {
        gap: 10px !important;
        overflow-x: auto !important;
    }

    #rvcPlayerControls .rvc-player-time {
        margin-left: 20px !important;
        margin-right: 8px !important;
    }

    #rvcPlayerControls .rvc-timeline-wrap {
        flex-basis: 170px !important;

        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
    }

    #rvcPlayerControls .rvc-player-right-controls {
        margin-left: 20px !important;
    }

    #rvcPlayerControls .rvc-volume-slider {
        width: 75px !important;
        min-width: 75px !important;
        max-width: 75px !important;
    }

}

















/* =====================================================
   RAGO VIDEO COMPRESSOR
   SAFE MONITOR VIDEO FILL FIX
   DOES NOT MOVE PLACEHOLDERS OR BADGES
===================================================== */

/* Monitor boundary */
.rvc-compare-monitor {
    position: relative;
    overflow: hidden;
}

/* Compare layers fill monitor */
.rvc-compare-layer {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ONLY actual video element */
.rvc-compare-layer > .rvc-preview-video {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;
    object-position: center;

    display: block;
}












/* =====================================================
   RAGO VIDEO COMPRESSOR
   MONITOR HEIGHT — COMPACT PREMIUM
===================================================== */

#rvcCompareMonitor,
.rvc-compare-monitor {
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;
}

/* Layers monitor ke andar full fit */
#rvcOriginalLayer,
#rvcCompressedLayer,
.rvc-compare-layer {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

/* Videos full monitor fit */
#rvcOriginalVideo,
#rvcCompressedVideo,
.rvc-preview-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}















/* =====================================================
   RAGO VIDEO COMPRESSOR
   COMPARE MONITOR — PREMIUM BADGE LAYOUT
   SAFE OVERRIDE FOR CURRENT HTML
===================================================== */


/* =====================================================
   1. MONITOR ROOT
===================================================== */

#rvcCompareMonitor {
    position: relative !important;
    overflow: hidden !important;

    width: 100% !important;

    background: #02040a !important;
    border-radius: 18px !important;
}


/* =====================================================
   2. BOTH COMPARE LAYERS
===================================================== */

#rvcCompareMonitor .rvc-compare-layer {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;

    height: 100% !important;

    overflow: hidden !important;
}


/* ORIGINAL = FULL BASE LAYER */

#rvcOriginalLayer {
    left: 0 !important;
    width: 100% !important;

    z-index: 1 !important;
}


/* COMPRESSED = CLIPPED RIGHT SIDE */

#rvcCompressedLayer {
    left: var(--rvc-compare-position, 50%) !important;
    right: 0 !important;

    width: auto !important;

    z-index: 2 !important;
}


/* =====================================================
   3. REAL VIDEOS
===================================================== */

#rvcOriginalVideo,
#rvcCompressedVideo {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;

    background: transparent !important;
}


/*
   IMPORTANT:
   Compressed layer starts from compare position,
   so compressed video must visually remain aligned
   with complete monitor.
*/

#rvcCompressedVideo {
    width: calc(
        100vw
    ) !important;
}


/* =====================================================
   4. PLACEHOLDERS
   ONLY CENTERED EMPTY STATE
===================================================== */

#rvcCompareMonitor .rvc-preview-placeholder {
    position: absolute !important;

    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 24px !important;

    box-sizing: border-box !important;

    z-index: 3 !important;

    background: transparent !important;

    pointer-events: none !important;
}


#rvcCompareMonitor .rvc-preview-placeholder-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}


/* =====================================================
   5. PREMIUM BADGE BASE
===================================================== */

#rvcCompareMonitor .rvc-monitor-badge {
    position: absolute !important;

    top: 16px !important;

    display: inline-flex !important;
    align-items: center !important;

    gap: 10px !important;

    width: auto !important;
    height: 36px !important;

    padding: 0 16px !important;

    margin: 0 !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            180deg,
            rgba(20, 27, 42, 0.94),
            rgba(7, 12, 22, 0.94)
        ) !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    color: #ffffff !important;

    font-size: 12px !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    z-index: 20 !important;

    pointer-events: none !important;
}


/* BADGE STRONG TEXT */

#rvcCompareMonitor .rvc-monitor-badge strong {
    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
}


/* =====================================================
   6. ORIGINAL BADGE
   TOP LEFT
===================================================== */

#rvcCompareMonitor .rvc-original-badge {
    left: 16px !important;
    right: auto !important;
}


#rvcOriginalBadgeSize {
    color: #aab4c8 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
}


/* =====================================================
   7. COMPRESSED BADGE
   TOP RIGHT
===================================================== */

#rvcCompareMonitor .rvc-compressed-badge {
    left: auto !important;
    right: 16px !important;
}


#rvcCompressedBadgeSize {
    color: #25e66b !important;

    font-size: 11px !important;
    font-weight: 800 !important;
}


#rvcCompressedBadgeReduction {
    color: #25e66b !important;

    font-size: 11px !important;
    font-weight: 800 !important;
}




/* =====================================================
   9. MOBILE SAFETY
===================================================== */

@media (max-width: 768px) {

    #rvcCompareMonitor .rvc-monitor-badge {
        top: 10px !important;

        height: 30px !important;

        padding: 0 10px !important;

        gap: 6px !important;

        font-size: 10px !important;
    }


    #rvcCompareMonitor .rvc-original-badge {
        left: 10px !important;
    }


    #rvcCompareMonitor .rvc-compressed-badge {
        right: 10px !important;
    }

}
















/* =====================================================
   RAGO VIDEO COMPRESSOR
   ORIGINAL PLACEHOLDER — FORCE LEFT POSITION
===================================================== */

#rvcCompareMonitor #rvcOriginalPlaceholder {
    position: absolute !important;

    top: 50% !important;
    left: 100px !important;
    right: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-50%) !important;

    display: block !important;

    z-index: 10 !important;

    pointer-events: none !important;
}

#rvcCompareMonitor
#rvcOriginalPlaceholder
.rvc-preview-placeholder-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
    white-space: nowrap !important;
}















/* =====================================================
   REMOVE EXTRA RIGHT WHITE LINE
   KEEP CENTER DIVIDER + PURPLE HANDLE
===================================================== */

#rvcCompareMonitor,
#rvcOriginalLayer,
#rvcCompressedLayer {
    border-right: none !important;
    outline: none !important;
}

/* Kill pseudo-element lines on layer edges */
#rvcOriginalLayer::before,
#rvcOriginalLayer::after,
#rvcCompressedLayer::before,
#rvcCompressedLayer::after {
    content: none !important;
    display: none !important;
}

/* Center divider must remain */
#rvcCompareDivider {
    display: block !important;
}




















/* =====================================================
   RAGO VIDEO COMPRESSOR
   DRAGGABLE BEFORE / AFTER COMPARE HANDLE
===================================================== */

#rvcCompareDivider {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: var(--rvc-compare-position, 50%) !important;

    width: 2px !important;
    height: 100% !important;

    transform: translateX(-50%) !important;

    background: rgba(255, 255, 255, 0.72) !important;

    z-index: 30 !important;
    pointer-events: none !important;
}

#rvcCompareHandle {
    position: absolute !important;

    top: 50% !important;
    left: var(--rvc-compare-position, 50%) !important;

    width: 58px !important;
    height: 58px !important;

    transform: translate(-50%, -50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 3px !important;

    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;

    background: linear-gradient(
        135deg,
        #9b5cff,
        #6d28d9
    ) !important;

    box-shadow:
        0 0 0 6px rgba(139, 92, 246, 0.16),
        0 0 24px rgba(139, 92, 246, 0.55) !important;

    color: #fff !important;

    z-index: 40 !important;

    cursor: grab !important;
    touch-action: none !important;
    user-select: none !important;
}

#rvcCompareHandle:active,
#rvcCompareHandle.is-dragging {
    cursor: grabbing !important;

    transform:
        translate(-50%, -50%)
        scale(1.06) !important;
}


























/* =====================================================
   RAGO VIDEO COMPRESSOR
   MINI TRANSPARENT COMPARE HANDLE
===================================================== */

#rvcCompareHandle {
    width: 58px !important;
    height: 36px !important;

    padding: 0 7px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    border:
        1px solid rgba(255, 255, 255, 0.48) !important;

    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.48),
            rgba(91, 33, 182, 0.34)
        ) !important;

    backdrop-filter:
        blur(8px) !important;

    -webkit-backdrop-filter:
        blur(8px) !important;

    box-shadow:
        0 0 0 3px rgba(139, 92, 246, 0.08),
        0 0 14px rgba(139, 92, 246, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

    color: #ffffff !important;

    cursor: grab !important;

    touch-action: none !important;
    user-select: none !important;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease !important;
}


/* =====================================================
   SMALL RAGO BRAND
===================================================== */

#rvcCompareHandle .rvc-handle-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 10px !important;
    line-height: 1 !important;

    font-weight: 800 !important;
    letter-spacing: -0.2px !important;

    color:
        rgba(255, 255, 255, 0.92) !important;

    white-space: nowrap !important;

    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.25) !important;
}


/* =====================================================
   MINI LEFT / RIGHT ARROWS
===================================================== */

#rvcCompareHandle .rvc-handle-chevron {
    font-size: 8px !important;

    color:
        rgba(255, 255, 255, 0.82) !important;

    flex: 0 0 auto !important;

    transition:
        transform 0.18s ease !important;
}


/* =====================================================
   HOVER
===================================================== */

#rvcCompareHandle:hover {
    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.62),
            rgba(91, 33, 182, 0.46)
        ) !important;

    box-shadow:
        0 0 0 4px rgba(139, 92, 246, 0.10),
        0 0 18px rgba(139, 92, 246, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}


/* LEFT ARROW HINT */

#rvcCompareHandle:hover
.rvc-handle-chevron:first-child {
    transform:
        translateX(-2px) !important;
}


/* RIGHT ARROW HINT */

#rvcCompareHandle:hover
.rvc-handle-chevron:last-child {
    transform:
        translateX(2px) !important;
}


/* =====================================================
   ACTIVE DRAG
===================================================== */

#rvcCompareHandle:active,
#rvcCompareHandle.is-dragging {
    cursor: grabbing !important;

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.72),
            rgba(91, 33, 182, 0.54)
        ) !important;

    box-shadow:
        0 0 0 4px rgba(139, 92, 246, 0.13),
        0 0 22px rgba(139, 92, 246, 0.52) !important;
}































/* =====================================================
   RAGO VIDEO COMPRESSOR
   COMPRESSION RESULT — PREMIUM HORIZONTAL DASHBOARD
   FINAL OVERRIDE
===================================================== */


/* =====================================================
   1. MAIN RESULT PANEL
===================================================== */

#rvcResultPanel {
    width: 100% !important;
    min-width: 0 !important;

    margin: 14px 0 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(13, 20, 38, 0.98),
            rgba(5, 12, 24, 0.99)
        ) !important;

    border:
        1px solid rgba(89, 112, 160, 0.22) !important;

    border-radius: 14px !important;

    overflow: hidden !important;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}


/* =====================================================
   2. RESULT HEADER
===================================================== */

#rvcResultPanel .rvc-result-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    padding: 14px 18px 10px !important;
    margin: 0 !important;

    border: 0 !important;
    background: transparent !important;
}


#rvcResultPanel .rvc-result-title {
    margin: 0 !important;

    color: #f8fafc !important;

    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;

    letter-spacing: 0.02em !important;
}


#rvcResultPanel .rvc-result-details-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    margin: 0 !important;
    padding: 5px 8px !important;

    border: 0 !important;
    background: transparent !important;

    color: #94a3b8 !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    cursor: pointer !important;
}


/* =====================================================
   3. RESULT BODY
===================================================== */

#rvcResultBody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;

    width: 100% !important;

    padding: 0 16px 14px !important;
    margin: 0 !important;
}


/* =====================================================
   4. MAIN METRICS — ONE HORIZONTAL ROW
===================================================== */

#rvcResultPanel .rvc-result-metrics {
    display: grid !important;

    grid-template-columns:
        minmax(110px, 1fr)
        18px
        minmax(110px, 1fr)
        128px
        minmax(110px, 1fr)
        minmax(150px, 1.15fr) !important;

    align-items: stretch !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =====================================================
   5. METRIC CARDS
===================================================== */

#rvcResultPanel .rvc-result-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;
    min-height: 96px !important;

    margin: 0 !important;
    padding: 12px 10px !important;

    background:
        linear-gradient(
            180deg,
            rgba(8, 18, 34, 0.92),
            rgba(4, 12, 24, 0.98)
        ) !important;

    border:
        1px solid rgba(77, 101, 145, 0.22) !important;

    border-radius: 11px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;

    text-align: center !important;
}


#rvcResultPanel .rvc-result-card-label {
    display: block !important;

    margin: 0 0 7px !important;

    color: #a7b0c2 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}


#rvcResultPanel .rvc-result-card-value {
    display: block !important;

    margin: 0 !important;

    color: #f8fafc !important;

    font-size: 19px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;

    white-space: nowrap !important;
}


/* SAVED GREEN */

#rvcResultPanel .rvc-success-value {
    color: #16f45f !important;

    text-shadow:
        0 0 14px rgba(22, 244, 95, 0.18) !important;
}


/* =====================================================
   6. ARROWS
===================================================== */

#rvcResultPanel .rvc-result-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;

    color: #dbe4f0 !important;

    font-size: 14px !important;
}


/* SECOND ARROW BEFORE RING — HIDE
   Reference layout does not need duplicate spacing
===================================================== */

#rvcResultPanel
.rvc-result-arrow:nth-of-type(4) {
    display: none !important;
}


/* =====================================================
   7. REDUCTION RING
===================================================== */

#rvcReductionRing {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 112px !important;
    height: 112px !important;

    min-width: 112px !important;

    margin: auto !important;

    border-radius: 50% !important;

    background:
        conic-gradient(
            #12d95a 0deg 92deg,
            #7c3cff 92deg calc(var(--rvc-reduction) * 3.6deg),
            rgba(49, 64, 94, 0.42)
            calc(var(--rvc-reduction) * 3.6deg)
            360deg
        ) !important;

    box-shadow:
        0 0 24px rgba(124, 58, 237, 0.13) !important;
}


/* INNER CUTOUT */

#rvcReductionRing::before {
    content: "" !important;

    position: absolute !important;
    inset: 8px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(17, 29, 50, 0.98),
            rgba(4, 10, 20, 1) 72%
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(91, 112, 153, 0.18) !important;
}


/* HIDE OLD TRACK / PROGRESS */

#rvcReductionRing
.rvc-reduction-ring-track,

#rvcReductionRing
.rvc-reduction-ring-progress {
    display: none !important;
}


/* CENTER CONTENT */

#rvcReductionRing
.rvc-reduction-ring-center {
    position: relative !important;
    z-index: 2 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    text-align: center !important;
}


#rvcReductionPercent {
    color: #18f05c !important;

    font-size: 26px !important;
    font-weight: 950 !important;
    line-height: 1 !important;

    text-shadow:
        0 0 18px rgba(24, 240, 92, 0.18) !important;
}


#rvcReductionRing
.rvc-reduction-label {
    margin-top: 6px !important;

    color: #cbd5e1 !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    letter-spacing: 0.04em !important;
}


/* =====================================================
   8. QUALITY CARD
===================================================== */

#rvcResultPanel .rvc-quality-card {
    gap: 5px !important;
}


#rvcResultPanel .rvc-quality-stars {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 2px !important;

    margin: 2px 0 0 !important;
}


#rvcResultPanel .rvc-quality-stars i {
    color: #334155 !important;

    font-size: 15px !important;
}


#rvcResultPanel
.rvc-quality-stars i.is-active {
    color: #a238ff !important;

    filter:
        drop-shadow(
            0 0 5px rgba(162, 56, 255, 0.35)
        ) !important;
}


#rvcResultQualityText {
    color: #dce4ef !important;

    font-size: 11px !important;
    font-weight: 700 !important;
}


/* =====================================================
   9. TOTAL SAVED BAR
===================================================== */

#rvcResultPanel .rvc-total-saved {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


#rvcResultPanel .rvc-total-saved-row {
    display: grid !important;

    grid-template-columns:
        95px
        minmax(0, 1fr)
        120px !important;

    align-items: center !important;
    gap: 12px !important;

    width: 100% !important;

    padding: 12px 14px !important;

    background:
        linear-gradient(
            180deg,
            rgba(7, 17, 32, 0.9),
            rgba(4, 12, 24, 0.98)
        ) !important;

    border:
        1px solid rgba(75, 98, 140, 0.2) !important;

    border-radius: 10px !important;
}


#rvcResultPanel .rvc-total-saved-label {
    color: #cbd5e1 !important;

    font-size: 11px !important;
    font-weight: 700 !important;
}


#rvcResultPanel .rvc-total-saved-progress {
    position: relative !important;

    width: 100% !important;
    height: 8px !important;

    overflow: hidden !important;

    background: #111c2f !important;

    border-radius: 999px !important;
}


#rvcTotalSavedFill {
    display: block !important;

    height: 100% !important;

    border-radius: inherit !important;

    background:
        linear-gradient(
            90deg,
            #7c3cff,
            #9b2cff
        ) !important;

    box-shadow:
        0 0 14px rgba(124, 60, 255, 0.38) !important;
}


#rvcTotalSavedValue {
    color: #19ef5b !important;

    font-size: 11px !important;
    font-weight: 900 !important;

    text-align: right !important;
    white-space: nowrap !important;
}


/* =====================================================
   10. OUTPUT TECHNICAL INFO — ONE ROW
===================================================== */

#rvcResultPanel .rvc-output-info {
    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    align-items: stretch !important;
    gap: 0 !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(7, 17, 32, 0.92),
            rgba(4, 12, 24, 0.98)
        ) !important;

    border:
        1px solid rgba(75, 98, 140, 0.2) !important;

    border-radius: 10px !important;

    overflow: hidden !important;
}


#rvcResultPanel .rvc-output-info-item {
    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    min-width: 0 !important;

    padding: 12px 14px !important;

    border-right:
        1px solid rgba(74, 94, 130, 0.16) !important;
}


#rvcResultPanel
.rvc-output-info-item:last-child {
    border-right: 0 !important;
}


#rvcResultPanel .rvc-output-info-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;

    border:
        1px solid rgba(104, 129, 177, 0.25) !important;

    border-radius: 50% !important;

    background:
        rgba(11, 23, 42, 0.9) !important;

    color: #dbe7f5 !important;

    font-size: 13px !important;
}


#rvcResultPanel .rvc-output-info-content {
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;
}


#rvcResultPanel .rvc-output-info-label {
    color: #8f9bb0 !important;

    font-size: 9px !important;
    font-weight: 700 !important;
}


#rvcResultPanel
.rvc-output-info-content strong {
    margin-top: 2px !important;

    color: #e7edf7 !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
}


/* =====================================================
   11. SMART NOTICE
   HIDE FOR CLEAN REFERENCE LAYOUT
===================================================== */

#rvcSmartCompressionNotice {
    display: none !important;
}


/* =====================================================
   12. PREMIUM BANNER
===================================================== */

#rvcPremiumBanner {
    display: grid !important;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto
        28px !important;

    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    background:
        linear-gradient(
            90deg,
            rgba(18, 34, 79, 0.98),
            rgba(24, 15, 65, 0.98)
        ) !important;

    border:
        1px solid rgba(99, 66, 255, 0.7) !important;

    border-radius: 10px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 0 20px rgba(86, 43, 255, 0.08) !important;
}


#rvcPremiumBanner .rvc-premium-banner-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    height: 38px !important;

    color: #38a7ff !important;

    font-size: 23px !important;
}


#rvcPremiumBanner .rvc-premium-banner-content {
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;
}


#rvcPremiumBanner
.rvc-premium-banner-content strong {
    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 900 !important;
}


#rvcPremiumBanner
.rvc-premium-banner-content span {
    margin-top: 2px !important;

    color: #c084fc !important;

    font-size: 9px !important;
    line-height: 1.35 !important;
}


#rvcPremiumBannerBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    min-height: 36px !important;

    padding: 0 18px !important;

    border:
        1px solid rgba(172, 112, 255, 0.7) !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #8b2cff
        ) !important;

    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    cursor: pointer !important;

    box-shadow:
        0 0 18px rgba(124, 58, 237, 0.22) !important;
}


#rvcClosePremiumBannerBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 28px !important;
    height: 28px !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #9aa7ba !important;

    cursor: pointer !important;
}


/* =====================================================
   13. TABLET SAFETY
===================================================== */

@media (max-width: 1100px) {

    #rvcResultPanel .rvc-result-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    #rvcResultPanel .rvc-result-arrow {
        display: none !important;
    }

    #rvcReductionRing {
        grid-column: span 2 !important;
    }

    #rvcResultPanel .rvc-output-info {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

}


/* =====================================================
   14. MOBILE SAFETY
===================================================== */

@media (max-width: 768px) {

    #rvcResultBody {
        padding:
            0 10px 12px !important;
    }


    #rvcResultPanel .rvc-result-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }


    #rvcReductionRing {
        grid-column: span 2 !important;

        width: 100px !important;
        height: 100px !important;

        min-width: 100px !important;
    }


    #rvcResultPanel .rvc-total-saved-row {
        grid-template-columns:
            1fr !important;

        gap: 8px !important;
    }


    #rvcTotalSavedValue {
        text-align: left !important;
    }


    #rvcResultPanel .rvc-output-info {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    #rvcPremiumBanner {
        grid-template-columns:
            38px
            minmax(0, 1fr) !important;
    }


    #rvcPremiumBannerBtn {
        grid-column: 1 / -1 !important;
    }


    #rvcClosePremiumBannerBtn {
        position: absolute !important;
        right: 8px !important;
        top: 8px !important;
    }

}


























/* =====================================================
   RAGO VIDEO COMPRESSOR
   CAMERA BOTTOM DOCK
   SAFE ISOLATED OVERRIDE
===================================================== */

.rvc-app .rvc-camera-dock {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
    min-height: 78px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 10px 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 14px !important;

    background:
        linear-gradient(
            180deg,
            rgba(9, 18, 35, 0.98),
            rgba(4, 12, 25, 0.99)
        ) !important;

    border:
        1px solid rgba(83, 105, 153, 0.28) !important;

    border-radius: 12px !important;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* LEFT CAMERA INFO */

.rvc-app .rvc-camera-dock-left {
    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    flex: 0 0 auto !important;
    min-width: 190px !important;

    padding-right: 14px !important;

    border-right:
        1px solid rgba(92, 112, 151, 0.18) !important;
}


/* LEFT ROUND ICON */

.rvc-app .rvc-camera-dock-icon {
    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            rgba(20, 32, 58, 0.98),
            rgba(8, 18, 35, 0.98)
        ) !important;

    border:
        1px solid rgba(93, 115, 165, 0.30) !important;

    color: #eef2ff !important;

    font-size: 15px !important;
}


/* LEFT TEXT */

.rvc-app .rvc-camera-dock-content {
    display: flex !important;
    flex-direction: column !important;

    gap: 2px !important;

    min-width: 0 !important;
}


.rvc-app .rvc-camera-dock-content strong {
    color: #f8fafc !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;
}


.rvc-app .rvc-camera-dock-content span {
    color: #8f9bb0 !important;

    font-size: 9px !important;

    line-height: 1.25 !important;

    white-space: nowrap !important;
}


/* ACTION STRIP */

.rvc-app .rvc-camera-dock-actions {
    display: flex !important;
    align-items: center !important;

    gap: 6px !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    padding: 4px !important;

    border:
        1px dashed rgba(119, 58, 255, 0.42) !important;

    border-radius: 9px !important;

    background:
        linear-gradient(
            90deg,
            rgba(25, 15, 62, 0.30),
            rgba(4, 15, 30, 0.50)
        ) !important;

    overflow: hidden !important;
}


/* ACTION BUTTONS */

.rvc-app .rvc-camera-dock-actions
.rvc-camera-action-btn {
    min-width: 0 !important;

    min-height: 48px !important;

    flex: 1 1 0 !important;

    padding: 7px 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    border:
        1px solid transparent !important;

    border-radius: 7px !important;

    background:
        transparent !important;

    color: #dce5f3 !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}


/* PRIMARY OPEN CAMERA */

.rvc-app .rvc-camera-dock-actions
.rvc-camera-primary-btn {
    background:
        linear-gradient(
            135deg,
            rgba(101, 38, 255, 0.20),
            rgba(16, 24, 50, 0.36)
        ) !important;

    border-color:
        rgba(139, 74, 255, 0.28) !important;

    color: #f5f3ff !important;
}


/* BUTTON ICON */

.rvc-app .rvc-camera-dock-actions
.rvc-camera-action-btn i {
    flex: 0 0 auto !important;

    color: #c4b5fd !important;

    font-size: 15px !important;
}


/* BUTTON TEXT */

.rvc-app .rvc-camera-dock-actions
.rvc-camera-action-btn span {
    font-size: 10px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
}


/* SETTINGS ICON BUTTON */

.rvc-app .rvc-camera-dock-actions
.rvc-camera-icon-btn {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;

    flex: 0 0 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    border:
        1px solid rgba(92, 112, 151, 0.22) !important;

    border-radius: 8px !important;

    background:
        rgba(12, 22, 40, 0.72) !important;

    color: #cbd5e1 !important;
}


/* TABLET */

@media (max-width: 1100px) {

    .rvc-app .rvc-camera-dock {
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .rvc-app .rvc-camera-dock-left {
        min-width: 180px !important;
    }

    .rvc-app .rvc-camera-dock-actions {
        min-width: 360px !important;
    }
}


/* MOBILE */

@media (max-width: 768px) {

    .rvc-app .rvc-camera-dock {
        padding: 9px !important;
        gap: 10px !important;
    }

    .rvc-app .rvc-camera-dock-left {
        min-width: 160px !important;
    }

    .rvc-app .rvc-camera-dock-actions {
        min-width: 320px !important;
    }
}





































/* =====================================================
   RAGO VIDEO COMPRESSOR
   TABLET + MOBILE RESPONSIVE FIX
   FINAL OVERRIDE

   IMPORTANT:
   - PASTE AT VERY END OF style.css
   - DESKTOP ABOVE 1024px UNTOUCHED
   - ACTUAL MAIN LAYOUT = .rvc-studio
===================================================== */


/* =====================================================
   GLOBAL RESPONSIVE SAFETY
===================================================== */

@media (max-width: 1024px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
    }

    .rvc-app {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow-x: hidden !important;
    }

    .rvc-app *,
    .rvc-app *::before,
    .rvc-app *::after {
        box-sizing: border-box;
    }

    img,
    video,
    canvas {
        max-width: 100%;
    }
}


/* =====================================================
   TABLET
   769px — 1024px
===================================================== */

@media (min-width: 769px) and (max-width: 1024px) {

    /* =============================================
       MAIN APP GRID
    ============================================= */

    .rvc-studio {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 0 !important;

        overflow: visible !important;
    }


    /* =============================================
       PANEL ORDER
    ============================================= */

    .rvc-left-panel {
        order: 1 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        border-right: 0 !important;
        border-bottom:
            1px solid rgba(255, 255, 255, 0.08) !important;
    }


    .rvc-center-workspace,
    .rvc-center-panel,
    .rvc-main-workspace {
        order: 2 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    .rvc-right-panel {
        order: 3 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        border-left: 0 !important;
        border-top:
            1px solid rgba(255, 255, 255, 0.08) !important;
    }


    /* =============================================
       HEADER
    ============================================= */

    .rvc-header {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        grid-template-columns:
            minmax(190px, 0.8fr)
            minmax(300px, 1.4fr)
            auto !important;

        gap: 8px !important;

        padding:
            8px
            12px !important;
    }

    .rvc-tool-subtitle {
        display: none !important;
    }

    .rvc-header-actions {
        min-width: 0 !important;
    }


    /* =============================================
       LEFT IMPORT PANEL
    ============================================= */

    .rvc-import-section,
    .rvc-library-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .rvc-source-tabs,
    .rvc-quick-access-grid {
        width: 100% !important;
    }


    /* =============================================
       CENTER PREVIEW
    ============================================= */

    .rvc-preview-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding:
            14px !important;
    }

    .rvc-preview-header {
        width: 100% !important;
        min-width: 0 !important;

        gap: 10px !important;
    }

    .rvc-preview-file {
        min-width: 0 !important;
    }

    .rvc-preview-file-name {
        max-width: 260px !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .rvc-preview-meta {
        min-width: 0 !important;

        gap: 8px !important;

        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }


    /* =============================================
       COMPARE MONITOR
    ============================================= */

    #rvcCompareMonitor,
    .rvc-compare-monitor {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 16 / 9 !important;

        overflow: hidden !important;

        border-radius: 16px !important;
    }

    #rvcOriginalLayer,
    #rvcCompressedLayer,
    .rvc-compare-layer {
        height: 100% !important;
        max-height: 100% !important;
    }

    #rvcOriginalVideo,
    #rvcCompressedVideo,
    .rvc-preview-video {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
    }


    /* =============================================
       PLAYER
    ============================================= */

    .rvc-player-controls,
    .rvc-video-controls,
    .rvc-preview-controls {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* =============================================
       RESULT
    ============================================= */

    .rvc-result-panel,
    .rvc-compression-result {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* =============================================
       SETTINGS
    ============================================= */

    .rvc-settings-scroll {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    .rvc-preset-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

    .rvc-format-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }

    .rvc-share-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }


    /* =============================================
       BOTTOM CAMERA / WORKFLOW
    ============================================= */

    .rvc-bottom-panel,
    .rvc-bottom-bar,
    .rvc-camera-input-bar,
    .rvc-workflow-bar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
    }
}


/* =====================================================
   MOBILE
   0px — 768px
===================================================== */

@media (max-width: 768px) {

    /* =============================================
       APP ROOT
    ============================================= */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow-x: hidden !important;
    }

    .rvc-app {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 100dvh !important;

        overflow-x: hidden !important;
    }


    /* =============================================
       CRITICAL FIX
       ACTUAL MAIN = .rvc-studio
    ============================================= */

    .rvc-studio {
        display: flex !important;
        flex-direction: column !important;

        grid-template-columns: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 0 !important;

        overflow: visible !important;
    }


    /* =============================================
       MOBILE ORDER
    ============================================= */

    .rvc-left-panel {
        order: 1 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        border-right: 0 !important;
        border-bottom:
            1px solid rgba(255, 255, 255, 0.08) !important;
    }


    .rvc-center-workspace,
    .rvc-center-panel,
    .rvc-main-workspace {
        order: 2 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    .rvc-right-panel {
        order: 3 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        border-left: 0 !important;
        border-top:
            1px solid rgba(255, 255, 255, 0.08) !important;
    }


    /* =============================================
       MOBILE HEADER
    ============================================= */

    .rvc-header {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 8px !important;

        padding:
            8px
            10px !important;
    }

    .rvc-header-brand,
    .rvc-brand-area {
        min-width: 0 !important;
    }

    .rvc-tool-subtitle,
    .rvc-header-subtitle {
        display: none !important;
    }

    .rvc-header-actions {
        min-width: 0 !important;

        gap: 5px !important;
    }

    .rvc-header-btn {
        width: 34px !important;
        min-width: 34px !important;

        height: 34px !important;

        padding: 0 !important;
    }

    .rvc-header-btn span {
        display: none !important;
    }

    .rvc-premium-btn {
        width: 34px !important;
        min-width: 34px !important;

        padding: 0 !important;
    }

    .rvc-premium-btn span {
        display: none !important;
    }


    /* =============================================
       WORKFLOW STEPS
       HORIZONTAL SCROLL
    ============================================= */

    .rvc-workflow,
    .rvc-workflow-steps,
    .rvc-header-workflow {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .rvc-workflow::-webkit-scrollbar,
    .rvc-workflow-steps::-webkit-scrollbar,
    .rvc-header-workflow::-webkit-scrollbar {
        display: none;
    }


    /* =============================================
       IMPORT
    ============================================= */

    .rvc-import-section,
    .rvc-library-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .rvc-source-tabs {
        width: 100% !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .rvc-drop-zone {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 180px !important;
    }

    .rvc-quick-access-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    /* =============================================
       PREVIEW PANEL
    ============================================= */

    .rvc-preview-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding:
            10px !important;
    }


    /* =============================================
       FILE HEADER
    ============================================= */

    .rvc-preview-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        min-width: 0 !important;

        gap: 8px !important;

        margin-bottom:
            10px !important;
    }

    .rvc-preview-file {
        width: 100% !important;
        min-width: 0 !important;
    }

    .rvc-preview-file-name {
        max-width:
            calc(100vw - 70px) !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .rvc-preview-meta {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;

        gap: 7px !important;

        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    .rvc-preview-meta-item {
        min-width: 0 !important;
    }


    /* =============================================
       MOBILE COMPARE MONITOR
       CRITICAL FIX
    ============================================= */

    #rvcCompareMonitor,
    .rvc-compare-monitor {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 16 / 9 !important;

        overflow: hidden !important;

        border-radius:
            14px !important;
    }


    /* =============================================
       COMPARE LAYERS
    ============================================= */

    #rvcOriginalLayer,
    #rvcCompressedLayer,
    .rvc-compare-layer {
        height: 100% !important;

        min-height: 0 !important;
        max-height: 100% !important;
    }

    #rvcOriginalVideo,
    #rvcCompressedVideo,
    .rvc-preview-video {
        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;

        object-fit: contain !important;
    }


    /* =============================================
       BADGES
    ============================================= */

    #rvcCompareMonitor .rvc-monitor-badge {
        top: 8px !important;

        min-height: 26px !important;

        padding:
            0
            8px !important;

        gap: 5px !important;

        font-size:
            9px !important;
    }

    #rvcCompareMonitor .rvc-original-badge {
        left: 8px !important;
    }

    #rvcCompareMonitor .rvc-compressed-badge {
        right: 8px !important;
    }


    /* =============================================
       PLACEHOLDERS
    ============================================= */

    .rvc-preview-placeholder {
        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
    }

    .rvc-preview-placeholder-inner {
        max-width:
            42% !important;

        gap:
            5px !important;

        font-size:
            10px !important;

        text-align:
            center !important;

        line-height:
            1.25 !important;
    }


    /* =============================================
       COMPARE HANDLE
    ============================================= */

    #rvcCompareHandle,
    .rvc-compare-handle {
        min-width:
            48px !important;

        width:
            48px !important;

        height:
            34px !important;

        padding:
            0
            6px !important;

        font-size:
            9px !important;
    }


    /* =============================================
       PLAYER CONTROLS
    ============================================= */

    .rvc-player-controls,
    .rvc-video-controls,
    .rvc-preview-controls {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap:
            6px !important;

        padding:
            8px !important;

        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        scrollbar-width:
            none;
    }

    .rvc-player-controls::-webkit-scrollbar,
    .rvc-video-controls::-webkit-scrollbar,
    .rvc-preview-controls::-webkit-scrollbar {
        display: none;
    }


    /* =============================================
       RESULT PANEL
    ============================================= */

    .rvc-result-panel,
    .rvc-compression-result {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow: hidden !important;
    }

    .rvc-result-grid,
    .rvc-result-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            8px !important;
    }


    /* =============================================
       SETTINGS
    ============================================= */

    .rvc-settings-scroll {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    .rvc-preset-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .rvc-format-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .rvc-share-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }


    /* =============================================
       ACTION AREA
    ============================================= */

    .rvc-action-area {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        max-height: none !important;
    }


    /* =============================================
       BOTTOM CAMERA / WORKFLOW PANEL
    ============================================= */

    .rvc-bottom-panel,
    .rvc-bottom-bar,
    .rvc-camera-input-bar,
    .rvc-workflow-bar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .rvc-bottom-panel::-webkit-scrollbar,
    .rvc-bottom-bar::-webkit-scrollbar,
    .rvc-camera-input-bar::-webkit-scrollbar,
    .rvc-workflow-bar::-webkit-scrollbar {
        display: none;
    }
}


/* =====================================================
   SMALL MOBILE
   0px — 480px
===================================================== */

@media (max-width: 480px) {

    .rvc-preview-panel {
        padding:
            8px !important;
    }

    .rvc-preview-file-name {
        font-size:
            13px !important;
    }

    .rvc-preview-meta {
        font-size:
            9px !important;
    }

    #rvcCompareMonitor,
    .rvc-compare-monitor {
        border-radius:
            12px !important;
    }

    #rvcCompareMonitor .rvc-monitor-badge {
        top:
            6px !important;

        min-height:
            24px !important;

        padding:
            0
            6px !important;

        font-size:
            8px !important;
    }

    #rvcCompareMonitor .rvc-original-badge {
        left:
            6px !important;
    }

    #rvcCompareMonitor .rvc-compressed-badge {
        right:
            6px !important;
    }

    .rvc-preview-placeholder-inner {
        max-width:
            40% !important;

        font-size:
            9px !important;
    }

    #rvcCompareHandle,
    .rvc-compare-handle {
        width:
            44px !important;

        min-width:
            44px !important;

        height:
            32px !important;

        font-size:
            8px !important;
    }

    .rvc-result-grid,
    .rvc-result-cards {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .rvc-share-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap:
            6px !important;
    }
}


/* =====================================================
   ULTRA SMALL MOBILE
   0px — 360px
===================================================== */

@media (max-width: 360px) {

    .rvc-preview-panel {
        padding:
            6px !important;
    }

    .rvc-preview-meta {
        gap:
            5px !important;
    }

    #rvcCompareMonitor .rvc-monitor-badge {
        font-size:
            7px !important;
    }

    .rvc-preview-placeholder-inner {
        font-size:
            8px !important;
    }

    .rvc-preset-grid,
    .rvc-format-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }
}