/* CODSHIPX R118-R8-R9-R4 PREMIUM ADD-ONS */

/* WhatsApp remains in Connections */
.r7-addons-page .cx-addon-whatsapp{
    display:none !important;
}

/* two premium products */
.r7-addons-page .cx-addon-grid{
    width:min(100%,1080px) !important;
    margin:22px auto 34px !important;

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

    gap:24px !important;
    align-items:stretch !important;
}

.r7-addons-page .cx-addon-grid > div{
    display:none !important;
}

/* shared card */
.r7-addons-page .cx-addon-codi,
.r7-addons-page .cx-addon-voice{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    box-sizing:border-box !important;

    width:100% !important;
    min-width:0 !important;

    min-height:595px !important;
    height:100% !important;

    display:flex !important;
    flex-direction:column !important;

    padding:29px 28px 25px !important;

    border-radius:29px !important;

    color:#fff !important;

    animation:
        cxAddOnEnter .68s
        cubic-bezier(.2,.82,.22,1)
        both !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}

.r7-addons-page .cx-addon-voice{
    animation-delay:.09s !important;
}

.r7-addons-page .cx-addon-codi:hover,
.r7-addons-page .cx-addon-voice:hover{
    transform:
        translateY(-6px)
        scale(1.006) !important;
}

/* Codi */
.r7-addons-page .cx-addon-codi{
    background:#05090c !important;

    border:
        1px solid rgba(160,239,91,.82) !important;

    box-shadow:
        0 27px 60px rgba(3,17,8,.27),
        0 0 0 2px rgba(154,238,81,.12),
        0 0 34px rgba(128,230,66,.16) !important;
}

/* Voice */
.r7-addons-page .cx-addon-voice{
    background:#0747bd !important;

    border:
        1px solid rgba(103,200,255,.96) !important;

    box-shadow:
        0 27px 60px rgba(0,42,137,.29),
        0 0 0 2px rgba(58,169,255,.18),
        0 0 35px rgba(41,154,255,.21) !important;
}

/* animated solid ambient forms */
.r7-addons-page .cx-addon-codi::before,
.r7-addons-page .cx-addon-voice::before{
    content:"" !important;

    position:absolute !important;

    width:345px !important;
    height:250px !important;

    top:-145px !important;
    right:-110px !important;

    border-radius:50% !important;

    background:
        rgba(255,255,255,.065) !important;

    z-index:0 !important;
    pointer-events:none !important;

    animation:
        cxAddOnAmbient
        6.4s ease-in-out infinite !important;
}

.r7-addons-page .cx-addon-codi::after,
.r7-addons-page .cx-addon-voice::after{
    content:"" !important;

    position:absolute !important;

    width:68px !important;
    height:820px !important;

    top:-120px !important;
    left:-180px !important;

    transform:rotate(28deg) !important;

    background:
        rgba(255,255,255,.045) !important;

    z-index:1 !important;
    pointer-events:none !important;

    animation:
        cxAddOnSweep
        8.5s ease-in-out infinite !important;
}

.r7-addons-page .cx-addon-codi > *,
.r7-addons-page .cx-addon-voice > *{
    position:relative !important;
    z-index:2 !important;
}

/* product badges */
.r7-addons-page .cx-addon-card .section-kicker{
    position:absolute !important;

    top:35px !important;
    right:28px !important;

    width:auto !important;

    display:inline-flex !important;
    align-items:center !important;

    padding:10px 18px !important;

    border-radius:999px !important;

    color:#fff !important;

    font-size:10px !important;
    font-weight:900 !important;
    line-height:1 !important;

    letter-spacing:.075em !important;

    white-space:nowrap !important;
}

.r7-addons-page .cx-addon-codi .section-kicker{
    background:#285623 !important;

    border:
        1px solid rgba(188,255,124,.94) !important;

    box-shadow:
        0 0 19px rgba(158,242,84,.29) !important;
}

.r7-addons-page .cx-addon-voice .section-kicker{
    background:#105bd2 !important;

    border:
        1px solid rgba(164,225,255,.98) !important;

    box-shadow:
        0 0 19px rgba(72,181,255,.33) !important;
}

/* main icons */
.r7-addons-page .commerce-icon{
    width:76px !important;
    height:76px !important;
    min-width:76px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:21px !important;

    animation:
        cxAddOnIcon
        4.7s ease-in-out infinite !important;
}

/* Codi branded icon */
.r7-addons-page .cx-addon-codi .commerce-icon{
    background:#14281b !important;

    border:
        1px solid rgba(158,241,89,.56) !important;

    box-shadow:
        0 0 20px rgba(142,232,74,.16) !important;
}

.r7-addons-page
.cx-addon-codi .commerce-icon > *{
    display:none !important;
}

.r7-addons-page
.cx-addon-codi .commerce-icon::before{
    content:"" !important;

    width:55px !important;
    height:55px !important;

    border-radius:16px !important;

    background:
        url("/brand/codshipx-ai-icon.jpeg")
        center/cover no-repeat !important;
}

/* Voice microphone */
.r7-addons-page .cx-addon-voice .commerce-icon{
    position:relative !important;

    background:#1262d8 !important;

    border:
        1px solid rgba(145,219,255,.82) !important;

    box-shadow:
        0 0 22px rgba(67,182,255,.25) !important;
}

.r7-addons-page
.cx-addon-voice .commerce-icon > *{
    display:none !important;
}

.r7-addons-page
.cx-addon-voice .commerce-icon::before{
    content:"" !important;

    width:18px !important;
    height:31px !important;

    border:3px solid #fff !important;
    border-radius:13px !important;

    box-sizing:border-box !important;
}

.r7-addons-page
.cx-addon-voice .commerce-icon::after{
    content:"" !important;

    position:absolute !important;

    left:21px !important;
    top:28px !important;

    width:31px !important;
    height:26px !important;

    border-left:3px solid #fff !important;
    border-right:3px solid #fff !important;
    border-bottom:3px solid #fff !important;

    border-radius:0 0 17px 17px !important;
}

/* card heading */
.r7-addons-page
.cx-addon-card > .commerce-icon + div{
    padding-right:150px !important;
}

.r7-addons-page .cx-addon-card h2{
    margin:19px 0 8px !important;

    color:#fff !important;

    font-size:40px !important;
    line-height:.98 !important;

    font-weight:950 !important;
    letter-spacing:-.055em !important;

    white-space:nowrap !important;
}

.r7-addons-page .cx-addon-card p{
    width:min(100%,390px) !important;

    min-height:47px !important;

    margin:0 !important;

    color:
        rgba(255,255,255,.80) !important;

    font-size:14px !important;
    line-height:1.42 !important;
}

/* premium 2x2 features */
.r7-addons-page .cx-addon-feature-list{
    width:100% !important;

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

    gap:10px !important;

    margin:22px 0 0 !important;
}

.r7-addons-page
.cx-addon-feature-list > span{
    min-width:0 !important;
    min-height:82px !important;

    display:grid !important;

    grid-template-columns:
        42px minmax(0,1fr) !important;

    grid-template-rows:
        auto auto !important;

    column-gap:10px !important;

    align-items:center !important;
    align-content:center !important;

    padding:12px !important;

    border-radius:15px !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    background:
        rgba(255,255,255,.075) !important;

    color:#fff !important;

    font-size:11px !important;
    line-height:1.15 !important;

    font-weight:850 !important;

    white-space:normal !important;

    transition:
        transform .2s ease,
        background .2s ease !important;
}

.r7-addons-page
.cx-addon-feature-list > span:hover{
    transform:
        translateY(-3px) !important;

    background:
        rgba(255,255,255,.115) !important;
}

.r7-addons-page
.cx-addon-feature-list > span i{
    grid-column:1 !important;
    grid-row:1 / 3 !important;

    width:39px !important;
    height:39px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:12px !important;

    font-size:0 !important;
    font-style:normal !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span i{
    background:#214926 !important;
    color:#d6ffae !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span i{
    background:#1764d3 !important;
    color:#fff !important;
}

.r7-addons-page
.cx-addon-feature-list > span i::before{
    font-size:19px !important;
    line-height:1 !important;

    font-weight:900 !important;
}

/* Codi symbols */
.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(1) i::before{
    content:"✦" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(2) i::before{
    content:"▦" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(3) i::before{
    content:"▥" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(4) i::before{
    content:"◆" !important;
}

/* Voice symbols */
.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(1) i::before{
    content:"●" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(2) i::before{
    content:"⌁" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(3) i::before{
    content:"⚡" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(4) i::before{
    content:"≋" !important;
}

/* secondary descriptions */
.r7-addons-page
.cx-addon-feature-list > span::after{
    grid-column:2 !important;
    grid-row:2 !important;

    margin-top:5px !important;

    color:
        rgba(255,255,255,.63) !important;

    font-size:9.4px !important;
    line-height:1.16 !important;

    font-weight:500 !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(1)::after{
    content:"One AI for your entire business" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(2)::after{
    content:"Insights from your workspace data" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(3)::after{
    content:"Turn data into decisions" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(4)::after{
    content:"All Codi capabilities included" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(1)::after{
    content:"Talk to your business naturally" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(2)::after{
    content:"Update, search and create by voice" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(3)::after{
    content:"Get things done faster" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(4)::after{
    content:"All voice features included" !important;
}

/* price panel */
.r7-addons-page .v1b4-addon-price{
    width:100% !important;

    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;

    visibility:visible !important;
    opacity:1 !important;

    min-height:88px !important;

    margin:21px 0 0 !important;
    padding:17px 19px 14px !important;

    border-radius:
        18px 18px 0 0 !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    border-bottom:0 !important;

    background:
        rgba(255,255,255,.085) !important;
}

.r7-addons-page
.v1b4-addon-price strong{
    color:#fff !important;

    font-size:30px !important;
    line-height:1 !important;

    font-weight:950 !important;
    letter-spacing:-.04em !important;

    white-space:nowrap !important;
}

.r7-addons-page
.v1b4-addon-price small{
    margin-top:9px !important;

    color:
        rgba(255,255,255,.69) !important;

    font-size:11px !important;
}

/* status panel */
.r7-addons-page .v1b1-addon-status{
    position:relative !important;

    width:100% !important;

    box-sizing:border-box !important;

    min-height:84px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    margin:0 0 18px !important;

    padding:
        15px 84px 15px 62px !important;

    border-radius:
        0 0 18px 18px !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    border-top:
        1px solid rgba(255,255,255,.07) !important;

    background:
        rgba(255,255,255,.058) !important;
}

.r7-addons-page
.v1b1-addon-status > span{
    color:#fff !important;

    font-size:15px !important;
    font-weight:900 !important;
}

.r7-addons-page
.v1b1-addon-status > small{
    margin-top:7px !important;

    color:
        rgba(255,255,255,.67) !important;

    font-size:10px !important;
}

/* active indicator */
.r7-addons-page
.v1b1-addon-status > span::before{
    content:"" !important;

    position:absolute !important;

    left:24px !important;
    top:50% !important;

    width:18px !important;
    height:18px !important;

    transform:
        translateY(-50%) !important;

    border-radius:50% !important;
}

.r7-addons-page
.cx-addon-codi
.v1b1-addon-status > span.active::before{
    background:#baff5b !important;

    box-shadow:
        0 0 0 8px rgba(158,239,79,.11),
        0 0 19px rgba(178,255,91,.62) !important;

    animation:
        cxGreenState
        2.7s ease-in-out infinite !important;
}

.r7-addons-page
.cx-addon-voice
.v1b1-addon-status > span.active::before{
    background:#79ddff !important;

    box-shadow:
        0 0 0 8px rgba(82,190,255,.12),
        0 0 19px rgba(79,195,255,.67) !important;

    animation:
        cxBlueState
        2.7s ease-in-out infinite !important;
}

.r7-addons-page
.v1b1-addon-status > span.inactive::before{
    background:#9ba7b8 !important;
}

/* Codi included badge */
.r7-addons-page
.cx-addon-codi
.v1b1-addon-status:has(> span.active)::after{
    content:"Included" !important;

    position:absolute !important;

    right:17px !important;
    top:50% !important;

    transform:
        translateY(-50%) !important;

    padding:
        9px 17px !important;

    border-radius:999px !important;

    background:#c7fa83 !important;
    color:#123b15 !important;

    font-size:10px !important;
    font-weight:900 !important;
}

/* CTA */
.r7-addons-page
.cx-addon-card .button{
    width:100% !important;

    min-height:59px !important;

    margin-top:auto !important;

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

    gap:17px !important;

    border-radius:17px !important;

    font-size:13px !important;
    font-weight:950 !important;

    transition:
        transform .2s ease,
        filter .2s ease !important;
}

.r7-addons-page
.cx-addon-card .button.primary::after{
    content:"→" !important;

    font-size:21px !important;

    transition:
        transform .2s ease !important;
}

.r7-addons-page
.cx-addon-card .button.primary:hover::after{
    transform:
        translateX(5px) !important;
}

.r7-addons-page
.cx-addon-codi .button.primary{
    background:#a6ee20 !important;
    color:#051106 !important;

    border:
        1px solid #d9ff9e !important;

    box-shadow:
        0 0 24px rgba(155,237,43,.30) !important;
}

.r7-addons-page
.cx-addon-voice .button.primary{
    background:#fff !important;
    color:#0742ad !important;

    border:
        1px solid #fff !important;

    box-shadow:
        0 0 23px rgba(255,255,255,.17) !important;
}

.r7-addons-page
.cx-addon-card .button.primary:hover{
    transform:
        translateY(-2px) !important;

    filter:
        brightness(1.04) !important;
}

/* inactive purchase states */
.r7-addons-page
.cx-addon-codi .button.soft,
.r7-addons-page
.cx-addon-codi .button:disabled{
    background:#17261a !important;

    color:
        rgba(255,255,255,.80) !important;

    border:
        1px solid rgba(160,240,87,.28) !important;

    opacity:1 !important;
}

.r7-addons-page
.cx-addon-voice .button.soft,
.r7-addons-page
.cx-addon-voice .button:disabled{
    background:#1653bc !important;

    color:
        rgba(255,255,255,.84) !important;

    border:
        1px solid rgba(255,255,255,.22) !important;

    opacity:1 !important;
}

/* animation */
@keyframes cxAddOnEnter{
    from{
        opacity:0;
        transform:
            translateY(24px)
            scale(.977);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes cxAddOnAmbient{
    0%,100%{
        transform:
            rotate(-14deg)
            translate3d(0,0,0);

        opacity:.70;
    }

    50%{
        transform:
            rotate(-9deg)
            translate3d(-14px,12px,0);

        opacity:1;
    }
}

@keyframes cxAddOnSweep{
    0%,58%{
        transform:
            translateX(0)
            rotate(28deg);

        opacity:0;
    }

    66%{
        opacity:1;
    }

    82%,100%{
        transform:
            translateX(1450px)
            rotate(28deg);

        opacity:0;
    }
}

@keyframes cxAddOnIcon{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-5px);
    }
}

@keyframes cxGreenState{
    0%,100%{
        box-shadow:
            0 0 0 8px rgba(158,239,79,.10),
            0 0 16px rgba(178,255,91,.50);
    }

    50%{
        box-shadow:
            0 0 0 11px rgba(158,239,79,.16),
            0 0 27px rgba(178,255,91,.80);
    }
}

@keyframes cxBlueState{
    0%,100%{
        box-shadow:
            0 0 0 8px rgba(82,190,255,.10),
            0 0 16px rgba(79,195,255,.52);
    }

    50%{
        box-shadow:
            0 0 0 11px rgba(82,190,255,.16),
            0 0 27px rgba(79,195,255,.82);
    }
}

/* responsive */
@media(max-width:1000px){

    .r7-addons-page .cx-addon-grid{
        width:min(100%,920px) !important;
        gap:18px !important;
    }

    .r7-addons-page
    .cx-addon-codi,
    .r7-addons-page
    .cx-addon-voice{
        padding:24px 22px 22px !important;
    }

    .r7-addons-page
    .cx-addon-card h2{
        font-size:34px !important;
    }

    .r7-addons-page
    .cx-addon-card .section-kicker{
        right:22px !important;

        padding:
            9px 13px !important;

        font-size:9px !important;
    }

    .r7-addons-page
    .cx-addon-card > .commerce-icon + div{
        padding-right:120px !important;
    }
}

/* stack only on narrow screens */
@media(max-width:720px){

    .r7-addons-page .cx-addon-grid{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        gap:18px !important;
    }

    .r7-addons-page
    .cx-addon-codi,
    .r7-addons-page
    .cx-addon-voice{
        min-height:0 !important;
        height:auto !important;
    }
}

@media(max-width:520px){

    .r7-addons-page
    .cx-addon-codi,
    .r7-addons-page
    .cx-addon-voice{
        padding:21px !important;
        border-radius:24px !important;
    }

    .r7-addons-page
    .cx-addon-feature-list{
        grid-template-columns:
            1fr !important;
    }

    .r7-addons-page
    .cx-addon-card > .commerce-icon + div{
        padding-right:0 !important;
    }
}

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

    .r7-addons-page *,
    .r7-addons-page *::before,
    .r7-addons-page *::after{
        animation:none !important;
        transition:none !important;
    }
}

/* CODSHIPX R118-R8-R10 USER-PROVIDED CARD BACKGROUNDS */
.r7-addons-page .cx-addon-grid{width:min(100%,1080px)!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important;align-items:stretch!important}
.r7-addons-page .cx-addon-codi,.r7-addons-page .cx-addon-voice{position:relative!important;isolation:isolate!important;overflow:hidden!important;min-height:610px!important;height:100%!important;background-repeat:no-repeat!important;background-size:116% auto!important;background-position:50% 50%!important;border-radius:29px!important}
.r7-addons-page .cx-addon-codi{background-color:#020603!important;background-image:url('/brand/addons/codi-premium-bg.webp')!important;border:1px solid rgba(169,255,69,.92)!important;box-shadow:0 26px 58px rgba(4,20,5,.30),0 0 0 2px rgba(155,240,37,.16),0 0 32px rgba(137,242,25,.25)!important;animation:cxAddOnEnter .68s cubic-bezier(.2,.82,.22,1) both,cxUserGreenBg 14s ease-in-out infinite,cxUserGreenGlow 3.8s ease-in-out infinite!important}
.r7-addons-page .cx-addon-voice{background-color:#03163f!important;background-image:url('/brand/addons/voice-premium-bg.webp')!important;border:1px solid rgba(68,203,255,.96)!important;box-shadow:0 26px 58px rgba(0,41,139,.31),0 0 0 2px rgba(25,159,255,.18),0 0 34px rgba(0,174,255,.28)!important;animation:cxAddOnEnter .68s cubic-bezier(.2,.82,.22,1) .08s both,cxUserBlueBg 14s ease-in-out infinite .08s,cxUserBlueGlow 3.8s ease-in-out infinite .08s!important}
.r7-addons-page .cx-addon-codi::before,.r7-addons-page .cx-addon-voice::before{content:""!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;top:0!important;right:0!important;bottom:0!important;left:0!important;border-radius:inherit!important;transform:none!important;animation:none!important;pointer-events:none!important;z-index:0!important}
.r7-addons-page .cx-addon-codi::before{background:rgba(0,7,2,.24)!important}.r7-addons-page .cx-addon-voice::before{background:rgba(0,12,45,.16)!important}
.r7-addons-page .cx-addon-codi::after,.r7-addons-page .cx-addon-voice::after{content:""!important;position:absolute!important;width:62px!important;height:900px!important;top:-160px!important;left:-220px!important;right:auto!important;bottom:auto!important;border-radius:0!important;transform:rotate(28deg)!important;background:rgba(255,255,255,.035)!important;opacity:.7!important;pointer-events:none!important;z-index:1!important;animation:cxUserSheen 9s ease-in-out infinite!important}
.r7-addons-page .cx-addon-codi>*,.r7-addons-page .cx-addon-voice>*{position:relative!important;z-index:2!important}
.r7-addons-page .cx-addon-codi .cx-addon-feature-list>span{background:rgba(5,18,8,.68)!important;border-color:rgba(126,237,67,.30)!important;backdrop-filter:blur(7px)!important}
.r7-addons-page .cx-addon-voice .cx-addon-feature-list>span{background:rgba(4,45,122,.61)!important;border-color:rgba(97,203,255,.34)!important;backdrop-filter:blur(7px)!important}
.r7-addons-page .cx-addon-codi .v1b4-addon-price,.r7-addons-page .cx-addon-codi .v1b1-addon-status{background:rgba(5,20,8,.69)!important;border-color:rgba(134,239,72,.30)!important;backdrop-filter:blur(8px)!important}
.r7-addons-page .cx-addon-voice .v1b4-addon-price,.r7-addons-page .cx-addon-voice .v1b1-addon-status{background:rgba(4,46,125,.63)!important;border-color:rgba(101,207,255,.34)!important;backdrop-filter:blur(8px)!important}
.r7-addons-page .cx-addon-codi .section-kicker{background:rgba(27,76,8,.84)!important;border-color:rgba(188,255,96,.95)!important;backdrop-filter:blur(8px)!important}
.r7-addons-page .cx-addon-voice .section-kicker{background:rgba(10,74,187,.86)!important;border-color:rgba(137,220,255,.98)!important;backdrop-filter:blur(8px)!important}
.r7-addons-page .cx-addon-codi .commerce-icon{background:rgba(5,20,8,.78)!important;backdrop-filter:blur(8px)!important}.r7-addons-page .cx-addon-voice .commerce-icon{background:rgba(9,80,194,.82)!important;backdrop-filter:blur(8px)!important}
@keyframes cxUserGreenBg{0%,100%{background-position:48% 48%;background-size:116% auto}50%{background-position:52% 52%;background-size:121% auto}}
@keyframes cxUserBlueBg{0%,100%{background-position:50% 47%;background-size:116% auto}50%{background-position:54% 52%;background-size:121% auto}}
@keyframes cxUserGreenGlow{0%,100%{box-shadow:0 26px 58px rgba(4,20,5,.30),0 0 0 2px rgba(155,240,37,.14),0 0 28px rgba(137,242,25,.21)}50%{box-shadow:0 30px 64px rgba(4,20,5,.34),0 0 0 2px rgba(171,255,44,.24),0 0 42px rgba(146,255,24,.34)}}
@keyframes cxUserBlueGlow{0%,100%{box-shadow:0 26px 58px rgba(0,41,139,.31),0 0 0 2px rgba(25,159,255,.16),0 0 29px rgba(0,174,255,.23)}50%{box-shadow:0 30px 64px rgba(0,41,139,.36),0 0 0 2px rgba(66,205,255,.27),0 0 44px rgba(0,187,255,.38)}}
@keyframes cxUserSheen{0%,58%{transform:translateX(0) rotate(28deg);opacity:0}66%{opacity:.7}82%,100%{transform:translateX(1500px) rotate(28deg);opacity:0}}
@media(max-width:720px){.r7-addons-page .cx-addon-grid{grid-template-columns:1fr!important}.r7-addons-page .cx-addon-codi,.r7-addons-page .cx-addon-voice{background-size:cover!important}}
@media(prefers-reduced-motion:reduce){.r7-addons-page .cx-addon-codi,.r7-addons-page .cx-addon-voice,.r7-addons-page .cx-addon-codi::after,.r7-addons-page .cx-addon-voice::after{animation:none!important}}

/* =========================================================
   CODSHIPX R118-R8-R11-R1
   TRUE COMPACT FIT USING ACTUAL DOM CLASSES
   ========================================================= */

/* bring the card row closer to the page header */
.r7-addons-page .cx-addon-grid{
    width:min(100%,980px) !important;

    margin:
        8px auto 24px !important;

    gap:18px !important;

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

    align-items:stretch !important;
}

/* actual semantic cards */
.r7-addons-page .cx-addon-codi,
.r7-addons-page .cx-addon-voice{
    min-height:535px !important;
    height:535px !important;

    padding:
        17px 20px 18px !important;

    border-radius:
        25px !important;

    background-size:
        112% auto !important;

    background-position:
        center 48% !important;
}

/* kill the large empty top zone */
.r7-addons-page
.cx-addon-card > .commerce-icon{
    width:60px !important;
    height:60px !important;
    min-width:60px !important;

    margin:0 0 8px !important;

    border-radius:
        17px !important;
}

/* smaller Codi brand graphic */
.r7-addons-page
.cx-addon-codi
.commerce-icon::before{
    width:44px !important;
    height:44px !important;

    border-radius:
        12px !important;
}

/* resize Voice mic geometry with smaller icon */
.r7-addons-page
.cx-addon-voice
.commerce-icon::before{
    width:14px !important;
    height:25px !important;

    border-width:
        2.5px !important;
}

.r7-addons-page
.cx-addon-voice
.commerce-icon::after{
    left:17px !important;
    top:22px !important;

    width:25px !important;
    height:21px !important;

    border-left-width:
        2.5px !important;

    border-right-width:
        2.5px !important;

    border-bottom-width:
        2.5px !important;
}

/* badge comes higher and tighter */
.r7-addons-page
.cx-addon-card .section-kicker{
    top:19px !important;
    right:19px !important;

    padding:
        8px 14px !important;

    font-size:
        9px !important;
}

/* remove the old huge reserved header room */
.r7-addons-page
.cx-addon-card > .commerce-icon + div{
    padding-right:
        115px !important;
}

.r7-addons-page
.cx-addon-card h2{
    margin:
        7px 0 5px !important;

    font-size:
        33px !important;

    line-height:
        1 !important;
}

.r7-addons-page
.cx-addon-card p{
    min-height:
        37px !important;

    margin:
        0 !important;

    font-size:
        12.5px !important;

    line-height:
        1.30 !important;

    max-width:
        95% !important;
}

/* compact 2x2 feature area */
.r7-addons-page
.cx-addon-feature-list{
    margin:
        13px 0 0 !important;

    gap:
        8px !important;
}

.r7-addons-page
.cx-addon-feature-list > span{
    min-height:
        66px !important;

    grid-template-columns:
        35px minmax(0,1fr) !important;

    column-gap:
        8px !important;

    padding:
        8px 9px !important;

    border-radius:
        13px !important;

    font-size:
        10px !important;

    line-height:
        1.10 !important;
}

.r7-addons-page
.cx-addon-feature-list > span i{
    width:
        32px !important;

    height:
        32px !important;

    border-radius:
        10px !important;
}

.r7-addons-page
.cx-addon-feature-list > span i::before{
    font-size:
        16px !important;
}

.r7-addons-page
.cx-addon-feature-list > span::after{
    margin-top:
        3px !important;

    font-size:
        8.5px !important;

    line-height:
        1.12 !important;
}

/* price block */
.r7-addons-page
.v1b4-addon-price{
    min-height:
        68px !important;

    margin:
        13px 0 0 !important;

    padding:
        12px 15px 10px !important;

    border-radius:
        15px 15px 0 0 !important;
}

.r7-addons-page
.v1b4-addon-price strong{
    font-size:
        24px !important;
}

.r7-addons-page
.v1b4-addon-price small{
    margin-top:
        6px !important;

    font-size:
        9.5px !important;
}

/* status block */
.r7-addons-page
.v1b1-addon-status{
    min-height:
        63px !important;

    margin:
        0 0 12px !important;

    padding:
        10px 72px 10px 52px !important;

    border-radius:
        0 0 15px 15px !important;
}

.r7-addons-page
.v1b1-addon-status > span{
    font-size:
        13px !important;
}

.r7-addons-page
.v1b1-addon-status > small{
    margin-top:
        4px !important;

    font-size:
        8.5px !important;
}

.r7-addons-page
.v1b1-addon-status > span::before{
    left:
        20px !important;

    width:
        14px !important;

    height:
        14px !important;
}

.r7-addons-page
.cx-addon-codi
.v1b1-addon-status:has(> span.active)::after{
    right:
        13px !important;

    padding:
        7px 12px !important;

    font-size:
        9px !important;
}

/* compact CTA */
.r7-addons-page
.cx-addon-card .button{
    min-height:
        46px !important;

    border-radius:
        14px !important;

    font-size:
        11.5px !important;

    gap:
        10px !important;
}

.r7-addons-page
.cx-addon-card .button.primary::after{
    font-size:
        17px !important;
}

/* keep artwork visible but not oversized */
.r7-addons-page .cx-addon-codi{
    background-position:
        center 48% !important;
}

.r7-addons-page .cx-addon-voice{
    background-position:
        center 48% !important;
}

/* slightly calmer sheen on the smaller cards */
.r7-addons-page
.cx-addon-codi::after,
.r7-addons-page
.cx-addon-voice::after{
    width:
        48px !important;
}

/* mobile */
@media(max-width:720px){

    .r7-addons-page
    .cx-addon-grid{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        margin-top:
            8px !important;
    }

    .r7-addons-page
    .cx-addon-codi,
    .r7-addons-page
    .cx-addon-voice{
        height:auto !important;
        min-height:0 !important;

        padding:
            18px !important;

        background-size:
            cover !important;
    }
}

/* =========================================================
   CODSHIPX R126-R1-B
   CODI DASHBOARD PREMIUM LIVE REACTOR
   ========================================================= */

/* whole visual */
.cx-dv2-codi-visual{
    isolation:isolate !important;

    transition:
        box-shadow .35s ease,
        border-color .35s ease,
        filter .35s ease !important;

    box-shadow:
        inset 0 0 0 1px rgba(111,221,255,.08),
        inset 0 0 55px rgba(10,101,182,.10),
        0 14px 36px rgba(1,31,67,.10) !important;

    animation:
        cxCodiVisualBreath
        5.8s ease-in-out infinite !important;
}

.cx-dv2-codi-visual:hover{
    box-shadow:
        inset 0 0 0 1px rgba(144,239,92,.17),
        inset 0 0 72px rgba(22,117,190,.14),
        0 18px 44px rgba(1,31,67,.14) !important;
}

/* ---------------------------------------------------------
   ORBIT SYSTEM
   No layout transforms changed.
   --------------------------------------------------------- */

.cx-dv2-codi-visual .cx-dv2-orbit{
    border-color:
        rgba(112,222,255,.18) !important;

    box-shadow:
        0 0 15px rgba(68,189,255,.06),
        inset 0 0 16px rgba(68,189,255,.04) !important;

    animation:
        cxCodiOrbitPulse
        4.6s ease-in-out infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit.orbit-b{
    animation-delay:
        -1.55s !important;

    border-color:
        rgba(157,227,31,.20) !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit.orbit-c{
    animation-delay:
        -3.05s !important;
}

/* orbit points */
.cx-dv2-codi-visual .cx-dv2-orbit-dot{
    background:
        #8eea2c !important;

    box-shadow:
        0 0 0 4px rgba(142,234,44,.07),
        0 0 16px rgba(142,234,44,.68) !important;

    animation:
        cxCodiSignalDot
        2.8s ease-in-out infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit-dot.dot-b{
    animation-delay:
        -.9s !important;

    background:
        #45ccff !important;

    box-shadow:
        0 0 0 4px rgba(69,204,255,.07),
        0 0 16px rgba(69,204,255,.66) !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit-dot.dot-c{
    animation-delay:
        -1.8s !important;
}

/* ---------------------------------------------------------
   SPARKLES
   --------------------------------------------------------- */

.cx-dv2-codi-visual .cx-dv2-codi-spark{
    color:
        #b8ff59 !important;

    filter:
        drop-shadow(0 0 7px rgba(184,255,89,.62)) !important;

    animation:
        cxCodiSpark
        2.5s ease-in-out infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-codi-spark.spark-b{
    color:
        #5dd6ff !important;

    filter:
        drop-shadow(0 0 7px rgba(93,214,255,.64)) !important;

    animation-delay:
        -1.15s !important;
}

/* ---------------------------------------------------------
   CODI CORE / LOGO
   Animate image only so existing positioning remains intact.
   --------------------------------------------------------- */

.cx-dv2-codi-core{
    box-shadow:
        0 0 0 1px rgba(158,227,31,.18),
        0 0 0 7px rgba(158,227,31,.035),
        0 0 30px rgba(93,214,255,.15) !important;

    transition:
        box-shadow .3s ease !important;
}

.cx-dv2-codi-core img{
    transform-origin:
        center center !important;

    filter:
        drop-shadow(0 5px 12px rgba(0,0,0,.22))
        drop-shadow(0 0 8px rgba(157,227,31,.14)) !important;

    animation:
        cxCodiLogoFloat
        3.8s ease-in-out infinite !important;
}

.cx-dv2-codi-visual:hover
.cx-dv2-codi-core{
    box-shadow:
        0 0 0 1px rgba(175,248,67,.29),
        0 0 0 8px rgba(158,227,31,.055),
        0 0 38px rgba(122,231,48,.22) !important;
}

/* ---------------------------------------------------------
   ONLINE BADGE
   --------------------------------------------------------- */

.cx-dv2-codi-online{
    transition:
        box-shadow .25s ease,
        border-color .25s ease !important;
}

.cx-dv2-codi-online.online{
    border-color:
        rgba(160,239,48,.36) !important;

    box-shadow:
        0 8px 22px rgba(47,111,15,.12),
        0 0 20px rgba(158,227,31,.08) !important;

    animation:
        cxCodiOnlineBadge
        3.5s ease-in-out infinite !important;
}

.cx-dv2-codi-online.online i{
    background:
        #9de31f !important;

    box-shadow:
        0 0 0 4px rgba(157,227,31,.10),
        0 0 14px rgba(157,227,31,.72) !important;

    animation:
        cxCodiLiveDot
        2.2s ease-in-out infinite !important;
}

.cx-dv2-codi-online.checking i{
    background:
        #55cfff !important;

    box-shadow:
        0 0 13px rgba(85,207,255,.62) !important;
}

.cx-dv2-codi-online.offline i{
    background:
        #9aa8b9 !important;
}

/* ---------------------------------------------------------
   STATUS GLASS CARD
   --------------------------------------------------------- */

.cx-dv2-codi-status{
    border-color:
        rgba(121,199,255,.17) !important;

    box-shadow:
        0 14px 32px rgba(1,26,55,.17),
        inset 0 0 0 1px rgba(255,255,255,.025) !important;

    transition:
        box-shadow .3s ease,
        border-color .3s ease,
        filter .3s ease !important;

    animation:
        cxCodiStatusBreath
        5.1s ease-in-out infinite !important;
}

.cx-dv2-codi-status:hover{
    border-color:
        rgba(157,227,31,.26) !important;

    box-shadow:
        0 18px 38px rgba(1,26,55,.22),
        0 0 22px rgba(157,227,31,.07),
        inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.cx-dv2-codi-status.online strong{
    color:
        #ffffff !important;

    text-shadow:
        0 0 16px rgba(158,227,31,.10) !important;
}

.cx-dv2-codi-status.online > span > i{
    background:
        #9de31f !important;

    box-shadow:
        0 0 0 4px rgba(157,227,31,.08),
        0 0 12px rgba(157,227,31,.70) !important;

    animation:
        cxCodiLiveDot
        2.2s ease-in-out infinite !important;
}

.cx-dv2-codi-status.checking > span > i{
    background:
        #55cfff !important;

    box-shadow:
        0 0 12px rgba(85,207,255,.62) !important;
}

.cx-dv2-codi-status.offline > span > i{
    background:
        #98a5b5 !important;
}

/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes cxCodiVisualBreath{
    0%,100%{
        filter:
            brightness(1)
            saturate(1);
    }

    50%{
        filter:
            brightness(1.025)
            saturate(1.06);
    }
}

@keyframes cxCodiOrbitPulse{
    0%,100%{
        opacity:.42;

        box-shadow:
            0 0 12px rgba(68,189,255,.04),
            inset 0 0 12px rgba(68,189,255,.025);
    }

    50%{
        opacity:.85;

        box-shadow:
            0 0 22px rgba(78,202,255,.10),
            inset 0 0 18px rgba(157,227,31,.035);
    }
}

@keyframes cxCodiSignalDot{
    0%,100%{
        opacity:.48;
        filter:brightness(.92);
    }

    50%{
        opacity:1;
        filter:brightness(1.25);
    }
}

@keyframes cxCodiSpark{
    0%,100%{
        opacity:.30;
        filter:
            brightness(.95)
            drop-shadow(0 0 4px currentColor);
    }

    50%{
        opacity:1;
        filter:
            brightness(1.35)
            drop-shadow(0 0 10px currentColor);
    }
}

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

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

@keyframes cxCodiOnlineBadge{
    0%,100%{
        filter:
            brightness(1);
    }

    50%{
        filter:
            brightness(1.08);
    }
}

@keyframes cxCodiLiveDot{
    0%,100%{
        opacity:.75;

        box-shadow:
            0 0 0 3px rgba(157,227,31,.07),
            0 0 8px rgba(157,227,31,.46);
    }

    50%{
        opacity:1;

        box-shadow:
            0 0 0 7px rgba(157,227,31,.035),
            0 0 18px rgba(157,227,31,.90);
    }
}

@keyframes cxCodiStatusBreath{
    0%,100%{
        filter:
            brightness(1);
    }

    50%{
        filter:
            brightness(1.025);
    }
}

/* accessibility */
@media(prefers-reduced-motion:reduce){

    .cx-dv2-codi-visual,
    .cx-dv2-codi-visual *,
    .cx-dv2-codi-visual *::before,
    .cx-dv2-codi-visual *::after{
        animation:none !important;
        transition:none !important;
    }
}

/* END R126-R1-B */

/* =========================================================
   R126-R1-C — CODI AI REACTOR V2
   ========================================================= */

/* remove the cheap inner square/frame */
.cx-dv2-codi-visual{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    width:100% !important;
    min-height:290px !important;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    filter:none !important;
    animation:none !important;
}

/* soft AI energy field */
.cx-dv2-codi-visual::before{
    content:"" !important;

    position:absolute !important;

    width:190px !important;
    height:190px !important;

    left:35% !important;
    top:46% !important;

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

    border-radius:50% !important;

    background:rgba(72,202,255,.08) !important;

    box-shadow:
        0 0 38px rgba(73,205,255,.18),
        0 0 72px rgba(157,227,31,.12) !important;

    filter:blur(12px) !important;

    pointer-events:none !important;

    animation:
        cxReactorAura
        4.2s ease-in-out infinite !important;

    z-index:0 !important;
}

/* secondary glow */
.cx-dv2-codi-visual::after{
    content:"" !important;

    position:absolute !important;

    width:105px !important;
    height:105px !important;

    left:35% !important;
    top:46% !important;

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

    border-radius:50% !important;

    background:rgba(157,227,31,.07) !important;

    box-shadow:
        0 0 34px rgba(157,227,31,.24) !important;

    pointer-events:none !important;

    animation:
        cxReactorCoreGlow
        2.8s ease-in-out infinite !important;

    z-index:0 !important;
}

/* =========================================================
   ORBIT SYSTEM
   ========================================================= */

.cx-dv2-codi-visual .cx-dv2-orbit{
    position:absolute !important;

    left:35% !important;
    top:46% !important;

    border-radius:50% !important;

    background:transparent !important;

    pointer-events:none !important;

    transform-origin:center !important;

    z-index:1 !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit.orbit-a{
    width:150px !important;
    height:150px !important;

    margin-left:-75px !important;
    margin-top:-75px !important;

    border:
        1px solid rgba(105,213,255,.31) !important;

    box-shadow:
        0 0 20px rgba(73,205,255,.09) !important;

    animation:
        cxOrbitA
        8s linear infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit.orbit-b{
    width:205px !important;
    height:205px !important;

    margin-left:-102.5px !important;
    margin-top:-102.5px !important;

    border:
        1px dashed rgba(157,227,31,.26) !important;

    box-shadow:
        0 0 22px rgba(157,227,31,.07) !important;

    animation:
        cxOrbitB
        12s linear infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit.orbit-c{
    width:264px !important;
    height:264px !important;

    margin-left:-132px !important;
    margin-top:-132px !important;

    border:
        1px solid rgba(89,181,255,.14) !important;

    box-shadow:
        inset 0 0 28px rgba(54,163,255,.035) !important;

    animation:
        cxOrbitC
        16s linear infinite !important;
}

/* =========================================================
   SIGNAL PARTICLES
   ========================================================= */

.cx-dv2-codi-visual .cx-dv2-orbit-dot{
    position:absolute !important;

    width:7px !important;
    height:7px !important;

    margin:0 !important;

    border-radius:50% !important;

    z-index:4 !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit-dot.dot-a{
    left:15% !important;
    top:66% !important;

    background:#54e4ff !important;

    box-shadow:
        0 0 0 5px rgba(84,228,255,.08),
        0 0 16px rgba(84,228,255,.90) !important;

    animation:
        cxSignalA
        2.5s ease-in-out infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit-dot.dot-b{
    left:58% !important;
    top:18% !important;

    background:#9de31f !important;

    box-shadow:
        0 0 0 5px rgba(157,227,31,.07),
        0 0 16px rgba(157,227,31,.78) !important;

    animation:
        cxSignalB
        3.1s ease-in-out infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit-dot.dot-c{
    left:61% !important;
    top:71% !important;

    background:#68d7ff !important;

    box-shadow:
        0 0 14px rgba(104,215,255,.72) !important;

    animation:
        cxSignalC
        3.6s ease-in-out infinite !important;
}

/* =========================================================
   SPARKS
   ========================================================= */

.cx-dv2-codi-visual .cx-dv2-codi-spark{
    position:absolute !important;

    margin:0 !important;

    z-index:5 !important;

    filter:
        drop-shadow(0 0 8px currentColor) !important;
}

.cx-dv2-codi-visual .cx-dv2-codi-spark.spark-a{
    left:11% !important;
    top:27% !important;

    color:#b9ff47 !important;

    animation:
        cxSparkA
        3.2s ease-in-out infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-codi-spark.spark-b{
    left:62% !important;
    top:29% !important;

    color:#5fddff !important;

    animation:
        cxSparkB
        2.7s ease-in-out infinite !important;
}

/* =========================================================
   BIG CODI CORE
   ========================================================= */

.cx-dv2-codi-visual .cx-dv2-codi-core{
    position:absolute !important;

    left:35% !important;
    top:46% !important;

    width:112px !important;
    height:112px !important;

    margin:0 !important;

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

    display:grid !important;
    place-items:center !important;

    border-radius:30px !important;

    background:
        #071636 !important;

    border:
        1px solid rgba(145,232,255,.33) !important;

    box-shadow:
        0 0 0 6px rgba(76,201,255,.055),
        0 0 0 12px rgba(157,227,31,.025),
        0 15px 35px rgba(0,15,45,.30),
        0 0 40px rgba(65,205,255,.17) !important;

    animation:
        cxCoreFloat
        4s ease-in-out infinite !important;

    z-index:6 !important;
}

.cx-dv2-codi-visual
.cx-dv2-codi-core img{
    width:82px !important;
    height:82px !important;

    max-width:none !important;

    object-fit:cover !important;

    border-radius:22px !important;

    transform:none !important;

    animation:
        cxLogoEnergy
        3.4s ease-in-out infinite !important;

    filter:
        drop-shadow(0 7px 14px rgba(0,0,0,.30))
        drop-shadow(0 0 10px rgba(157,227,31,.18)) !important;
}

/* =========================================================
   ONLINE BADGE — separate from status card
   ========================================================= */

.cx-dv2-codi-visual .cx-dv2-codi-online{
    position:absolute !important;

    left:35% !important;
    top:73% !important;

    transform:
        translateX(-50%) !important;

    margin:0 !important;

    min-width:112px !important;

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

    gap:7px !important;

    padding:
        8px 13px !important;

    border-radius:999px !important;

    background:
        rgba(4,30,51,.94) !important;

    border:
        1px solid rgba(157,227,31,.27) !important;

    box-shadow:
        0 10px 26px rgba(0,15,40,.22),
        0 0 18px rgba(157,227,31,.10) !important;

    color:#bfff55 !important;

    font-size:9px !important;
    font-weight:900 !important;
    letter-spacing:.055em !important;

    white-space:nowrap !important;

    z-index:8 !important;

    animation:
        cxOnlineFloat
        3.8s ease-in-out infinite !important;
}

.cx-dv2-codi-visual
.cx-dv2-codi-online i{
    width:8px !important;
    height:8px !important;

    margin:0 !important;

    border-radius:50% !important;

    background:#9de31f !important;

    box-shadow:
        0 0 0 4px rgba(157,227,31,.09),
        0 0 13px rgba(157,227,31,.92) !important;

    animation:
        cxLivePulseV2
        1.9s ease-in-out infinite !important;
}

/* =========================================================
   STATUS CARD — completely separated to the right
   ========================================================= */

.cx-dv2-codi-visual .cx-dv2-codi-status{
    position:absolute !important;

    right:4.5% !important;
    top:50% !important;

    left:auto !important;
    bottom:auto !important;

    width:184px !important;
    min-width:184px !important;

    margin:0 !important;

    transform:
        translateY(-50%) !important;

    box-sizing:border-box !important;

    padding:
        18px 18px 16px !important;

    border-radius:
        20px !important;

    background:
        rgba(5,31,65,.94) !important;

    border:
        1px solid rgba(94,194,255,.20) !important;

    box-shadow:
        0 20px 42px rgba(0,13,35,.27),
        0 0 0 1px rgba(255,255,255,.02),
        0 0 26px rgba(71,192,255,.07) !important;

    backdrop-filter:
        blur(12px) !important;

    filter:none !important;

    z-index:9 !important;

    animation:
        cxStatusFloatV2
        4.6s ease-in-out infinite !important;
}

.cx-dv2-codi-visual
.cx-dv2-codi-status small{
    display:block !important;

    margin:0 0 8px !important;

    color:
        #89a7c7 !important;

    font-size:
        9px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .11em !important;
}

.cx-dv2-codi-visual
.cx-dv2-codi-status strong{
    display:block !important;

    margin:0 !important;

    color:#fff !important;

    font-size:
        18px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.02em !important;
}

.cx-dv2-codi-visual
.cx-dv2-codi-status > span{
    display:flex !important;

    align-items:center !important;

    gap:8px !important;

    margin-top:12px !important;

    color:
        #bfd0e1 !important;

    font-size:
        10px !important;

    line-height:
        1.2 !important;
}

.cx-dv2-codi-visual
.cx-dv2-codi-status > span > i{
    width:8px !important;
    height:8px !important;

    flex:
        0 0 8px !important;

    border-radius:50% !important;

    background:#9de31f !important;

    box-shadow:
        0 0 0 4px rgba(157,227,31,.08),
        0 0 13px rgba(157,227,31,.76) !important;

    animation:
        cxLivePulseV2
        1.9s ease-in-out infinite !important;
}

/* hover: reactor becomes more alive */
.cx-dv2-codi-visual:hover
.cx-dv2-codi-core{
    box-shadow:
        0 0 0 7px rgba(76,201,255,.075),
        0 0 0 14px rgba(157,227,31,.035),
        0 18px 42px rgba(0,15,45,.34),
        0 0 52px rgba(91,218,255,.24) !important;
}

.cx-dv2-codi-visual:hover
.cx-dv2-codi-status{
    border-color:
        rgba(157,227,31,.24) !important;

    box-shadow:
        0 22px 46px rgba(0,13,35,.31),
        0 0 28px rgba(157,227,31,.08) !important;
}

/* =========================================================
   ANIMATION ENGINE
   ========================================================= */

@keyframes cxReactorAura{
    0%,100%{
        transform:
            translate(-50%,-50%)
            scale(.92);

        opacity:.55;
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.12);

        opacity:1;
    }
}

@keyframes cxReactorCoreGlow{
    0%,100%{
        transform:
            translate(-50%,-50%)
            scale(.92);

        opacity:.55;
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.08);

        opacity:1;
    }
}

@keyframes cxOrbitA{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes cxOrbitB{
    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }
}

@keyframes cxOrbitC{
    0%,100%{
        transform:
            scale(.97);

        opacity:.36;
    }

    50%{
        transform:
            scale(1.03);

        opacity:.74;
    }
}

@keyframes cxCoreFloat{
    0%,100%{
        transform:
            translate(-50%,-50%)
            translateY(0);
    }

    50%{
        transform:
            translate(-50%,-50%)
            translateY(-6px);
    }
}

@keyframes cxLogoEnergy{
    0%,100%{
        transform:
            scale(1);
    }

    50%{
        transform:
            scale(1.045);
    }
}

@keyframes cxOnlineFloat{
    0%,100%{
        transform:
            translateX(-50%)
            translateY(0);
    }

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

@keyframes cxStatusFloatV2{
    0%,100%{
        transform:
            translateY(-50%)
            translateX(0);
    }

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

@keyframes cxLivePulseV2{
    0%,100%{
        opacity:.66;

        box-shadow:
            0 0 0 3px rgba(157,227,31,.06),
            0 0 8px rgba(157,227,31,.48);
    }

    50%{
        opacity:1;

        box-shadow:
            0 0 0 7px rgba(157,227,31,.03),
            0 0 18px rgba(157,227,31,.96);
    }
}

@keyframes cxSignalA{
    0%,100%{
        transform:
            translateY(0)
            scale(.82);

        opacity:.45;
    }

    50%{
        transform:
            translateY(-7px)
            scale(1.2);

        opacity:1;
    }
}

@keyframes cxSignalB{
    0%,100%{
        transform:
            translateX(0)
            scale(.82);

        opacity:.48;
    }

    50%{
        transform:
            translateX(7px)
            scale(1.18);

        opacity:1;
    }
}

@keyframes cxSignalC{
    0%,100%{
        transform:
            translateY(0);

        opacity:.35;
    }

    50%{
        transform:
            translateY(6px);

        opacity:.88;
    }
}

@keyframes cxSparkA{
    0%,100%{
        transform:
            translateY(0)
            rotate(0deg)
            scale(.82);

        opacity:.35;
    }

    50%{
        transform:
            translateY(-7px)
            rotate(15deg)
            scale(1.16);

        opacity:1;
    }
}

@keyframes cxSparkB{
    0%,100%{
        transform:
            translateY(0)
            scale(.82);

        opacity:.30;
    }

    50%{
        transform:
            translateY(6px)
            scale(1.18);

        opacity:.92;
    }
}

/* responsive */
@media(max-width:1050px){

    .cx-dv2-codi-visual
    .cx-dv2-codi-status{
        width:165px !important;
        min-width:165px !important;

        right:2.5% !important;

        padding:
            15px !important;
    }

    .cx-dv2-codi-visual
    .cx-dv2-codi-core{
        left:33% !important;
    }

    .cx-dv2-codi-visual::before,
    .cx-dv2-codi-visual::after,
    .cx-dv2-codi-visual .cx-dv2-orbit{
        left:33% !important;
    }

    .cx-dv2-codi-visual
    .cx-dv2-codi-online{
        left:33% !important;
    }
}

/* accessibility */
@media(prefers-reduced-motion:reduce){

    .cx-dv2-codi-visual,
    .cx-dv2-codi-visual *,
    .cx-dv2-codi-visual::before,
    .cx-dv2-codi-visual::after{
        animation:none !important;
        transition:none !important;
    }
}

/* END R126-R1-C */

/* =========================================================
   R126-R1-D — CODI HOLOGRAPHIC CORE V3
   Completely isolated by .cx-codi-holo-v3
   ========================================================= */

/* HARD RESET THE OLD RECTANGULAR VISUAL */
html body
.cx-dv2-codi-visual.cx-codi-holo-v3{
    position:relative !important;

    width:100% !important;
    max-width:none !important;

    height:100% !important;
    min-height:330px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    border:0 !important;
    outline:0 !important;

    border-radius:0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    filter:none !important;

    isolation:isolate !important;

    animation:none !important;
}

/* Ambient holographic field — NO rectangular frame */
html body
.cx-dv2-codi-visual.cx-codi-holo-v3::before{
    content:"" !important;

    position:absolute !important;

    left:43% !important;
    top:49% !important;

    width:350px !important;
    height:350px !important;

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

    border:0 !important;
    outline:0 !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(73,214,255,.15) 0%,
            rgba(49,154,255,.075) 27%,
            rgba(157,227,31,.035) 44%,
            transparent 70%
        ) !important;

    box-shadow:none !important;

    filter:
        blur(5px) !important;

    pointer-events:none !important;

    z-index:0 !important;

    animation:
        cxHoloField
        4.8s ease-in-out infinite !important;
}

/* small LIVE AI chip */
html body
.cx-dv2-codi-visual.cx-codi-holo-v3::after{
    content:"●  CODI AI · LIVE" !important;

    position:absolute !important;

    right:-10px !important;
    top:24px !important;

    width:auto !important;
    height:auto !important;

    padding:
        8px 12px !important;

    border-radius:
        999px !important;

    background:
        rgba(3,25,55,.70) !important;

    border:
        1px solid rgba(92,211,255,.18) !important;

    color:
        #8fe8ff !important;

    font-size:
        8px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .10em !important;

    line-height:
        1 !important;

    box-shadow:
        0 10px 26px rgba(0,11,31,.20),
        0 0 18px rgba(67,204,255,.08) !important;

    backdrop-filter:
        blur(12px) !important;

    pointer-events:none !important;

    z-index:12 !important;

    animation:
        cxLiveChip
        3.2s ease-in-out infinite !important;
}

/* =========================================================
   CORE
   ========================================================= */

html body
.cx-codi-holo-v3
.cx-dv2-codi-core{
    position:absolute !important;

    left:42% !important;
    top:49% !important;

    width:136px !important;
    height:136px !important;

    margin:0 !important;
    padding:0 !important;

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

    display:grid !important;
    place-items:center !important;

    border-radius:
        38px !important;

    background:
        rgba(4,18,45,.88) !important;

    border:
        1px solid rgba(106,223,255,.38) !important;

    outline:0 !important;

    box-shadow:
        0 0 0 7px rgba(76,203,255,.055),
        0 0 0 14px rgba(157,227,31,.028),
        0 22px 46px rgba(0,12,37,.34),
        0 0 50px rgba(68,210,255,.20) !important;

    z-index:8 !important;

    animation:
        cxHoloCoreFloat
        4.1s ease-in-out infinite !important;
}

/* rotating luminous ring */
html body
.cx-codi-holo-v3
.cx-dv2-codi-core::before{
    content:"" !important;

    position:absolute !important;

    inset:-19px !important;

    border-radius:
        47px !important;

    border:
        1px solid transparent !important;

    border-top-color:
        rgba(92,226,255,.88) !important;

    border-right-color:
        rgba(157,227,31,.74) !important;

    border-bottom-color:
        rgba(80,163,255,.20) !important;

    box-shadow:
        0 0 22px rgba(77,214,255,.11) !important;

    pointer-events:none !important;

    animation:
        cxCoreRingSpin
        7.5s linear infinite !important;
}

/* pulse halo */
html body
.cx-codi-holo-v3
.cx-dv2-codi-core::after{
    content:"" !important;

    position:absolute !important;

    inset:-40px !important;

    border-radius:50% !important;

    border:
        1px solid rgba(157,227,31,.13) !important;

    box-shadow:
        0 0 34px rgba(157,227,31,.08) !important;

    pointer-events:none !important;

    animation:
        cxCoreHalo
        3.2s ease-in-out infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-core img{
    width:94px !important;
    height:94px !important;

    max-width:none !important;

    object-fit:cover !important;

    border-radius:
        28px !important;

    transform:none !important;

    box-shadow:
        0 10px 26px rgba(0,0,0,.24) !important;

    filter:
        drop-shadow(0 0 11px rgba(157,227,31,.20))
        drop-shadow(0 0 18px rgba(74,206,255,.12)) !important;

    animation:
        cxLogoAlive
        3s ease-in-out infinite !important;
}

/* =========================================================
   ORBITS
   ========================================================= */

html body
.cx-codi-holo-v3
.cx-dv2-orbit{
    position:absolute !important;

    left:42% !important;
    top:49% !important;

    margin:0 !important;

    border-radius:50% !important;

    background:
        transparent !important;

    box-shadow:none !important;

    pointer-events:none !important;

    transform-origin:
        center !important;

    z-index:2 !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-orbit.orbit-a{
    width:190px !important;
    height:190px !important;

    border:
        1px solid rgba(87,215,255,.27) !important;

    animation:
        cxOrbitOne
        8s linear infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-orbit.orbit-b{
    width:250px !important;
    height:250px !important;

    border:
        1px dashed rgba(157,227,31,.24) !important;

    animation:
        cxOrbitTwo
        13s linear infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-orbit.orbit-c{
    width:318px !important;
    height:318px !important;

    border:
        1px solid rgba(95,171,255,.105) !important;

    animation:
        cxOrbitThree
        5s ease-in-out infinite !important;
}

/* =========================================================
   MOVING SIGNAL POINTS
   ========================================================= */

html body
.cx-codi-holo-v3
.cx-dv2-orbit-dot{
    position:absolute !important;

    width:7px !important;
    height:7px !important;

    margin:0 !important;

    border-radius:50% !important;

    z-index:6 !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-orbit-dot.dot-a{
    left:15% !important;
    top:66% !important;

    background:
        #59e5ff !important;

    box-shadow:
        0 0 0 5px rgba(89,229,255,.07),
        0 0 18px rgba(89,229,255,.95) !important;

    animation:
        cxDataNodeA
        2.8s ease-in-out infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-orbit-dot.dot-b{
    left:56% !important;
    top:18% !important;

    background:
        #9de31f !important;

    box-shadow:
        0 0 0 5px rgba(157,227,31,.07),
        0 0 18px rgba(157,227,31,.88) !important;

    animation:
        cxDataNodeB
        3.2s ease-in-out infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-orbit-dot.dot-c{
    left:69% !important;
    top:70% !important;

    background:
        #69cfff !important;

    box-shadow:
        0 0 16px rgba(105,207,255,.80) !important;

    animation:
        cxDataNodeC
        3.8s ease-in-out infinite !important;
}

/* =========================================================
   SPARKLES
   ========================================================= */

html body
.cx-codi-holo-v3
.cx-dv2-codi-spark{
    position:absolute !important;

    margin:0 !important;

    z-index:7 !important;

    filter:
        drop-shadow(0 0 9px currentColor) !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-spark.spark-a{
    left:11% !important;
    top:27% !important;

    color:#bcff4f !important;

    animation:
        cxHoloSparkA
        2.8s ease-in-out infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-spark.spark-b{
    left:67% !important;
    top:29% !important;

    color:#66ddff !important;

    animation:
        cxHoloSparkB
        3.3s ease-in-out infinite !important;
}

/* =========================================================
   CODI ONLINE CHIP
   ========================================================= */

html body
.cx-codi-holo-v3
.cx-dv2-codi-online{
    position:absolute !important;

    left:42% !important;
    top:78% !important;

    transform:
        translateX(-50%) !important;

    margin:0 !important;

    min-width:
        118px !important;

    padding:
        8px 14px !important;

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

    gap:8px !important;

    border-radius:
        999px !important;

    background:
        rgba(3,27,48,.83) !important;

    border:
        1px solid rgba(157,227,31,.26) !important;

    color:
        #baff4c !important;

    font-size:
        9px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .055em !important;

    white-space:
        nowrap !important;

    box-shadow:
        0 12px 26px rgba(0,12,32,.23),
        0 0 20px rgba(157,227,31,.08) !important;

    backdrop-filter:
        blur(12px) !important;

    z-index:10 !important;

    animation:
        cxOnlineHover
        3.6s ease-in-out infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-online i{
    width:8px !important;
    height:8px !important;

    margin:0 !important;

    border-radius:
        50% !important;

    background:
        #9de31f !important;

    box-shadow:
        0 0 0 4px rgba(157,227,31,.08),
        0 0 13px rgba(157,227,31,.90) !important;

    animation:
        cxOnlinePulse
        1.8s ease-in-out infinite !important;
}

/* =========================================================
   CONNECTED STATUS — compact capsule, not a big box
   ========================================================= */

html body
.cx-codi-holo-v3
.cx-dv2-codi-status{
    position:absolute !important;

    right:-28px !important;
    top:50% !important;

    left:auto !important;
    bottom:auto !important;

    width:172px !important;
    min-width:172px !important;

    min-height:72px !important;

    margin:0 !important;

    transform:
        translateY(-50%) !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    box-sizing:
        border-box !important;

    padding:
        14px 16px 14px 43px !important;

    border-radius:
        24px !important;

    background:
        rgba(4,27,60,.72) !important;

    border:
        1px solid rgba(101,211,255,.17) !important;

    outline:0 !important;

    box-shadow:
        0 18px 40px rgba(0,10,30,.28),
        0 0 25px rgba(66,200,255,.06) !important;

    backdrop-filter:
        blur(18px) !important;

    filter:none !important;

    z-index:11 !important;

    animation:
        cxStatusCapsule
        4.4s ease-in-out infinite !important;
}

/* remove the bulky CODI STATUS label */
html body
.cx-codi-holo-v3
.cx-dv2-codi-status > small{
    display:none !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-status > strong{
    display:block !important;

    margin:0 !important;

    color:#fff !important;

    font-size:
        15px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.015em !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-status > span{
    display:block !important;

    margin-top:
        6px !important;

    color:
        #b7cce0 !important;

    font-size:
        9px !important;

    line-height:
        1.1 !important;
}

/* large glowing status node */
html body
.cx-codi-holo-v3
.cx-dv2-codi-status > span > i{
    position:absolute !important;

    left:17px !important;
    top:50% !important;

    width:12px !important;
    height:12px !important;

    transform:
        translateY(-50%) !important;

    margin:0 !important;

    border-radius:
        50% !important;

    background:
        #9de31f !important;

    box-shadow:
        0 0 0 6px rgba(157,227,31,.075),
        0 0 18px rgba(157,227,31,.90) !important;

    animation:
        cxOnlinePulse
        1.8s ease-in-out infinite !important;
}

/* =========================================================
   INTERACTION
   ========================================================= */

html body
.cx-codi-holo-v3:hover
.cx-dv2-codi-core{
    box-shadow:
        0 0 0 8px rgba(76,203,255,.075),
        0 0 0 16px rgba(157,227,31,.035),
        0 25px 52px rgba(0,12,37,.38),
        0 0 62px rgba(68,210,255,.28) !important;
}

html body
.cx-codi-holo-v3:hover
.cx-dv2-codi-status{
    border-color:
        rgba(157,227,31,.27) !important;

    box-shadow:
        0 20px 44px rgba(0,10,30,.31),
        0 0 28px rgba(157,227,31,.07) !important;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes cxHoloField{
    0%,100%{
        transform:
            translate(-50%,-50%)
            scale(.88);

        opacity:.55;
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.12);

        opacity:1;
    }
}

@keyframes cxLiveChip{
    0%,100%{
        opacity:.68;
        transform:translateY(0);
    }

    50%{
        opacity:1;
        transform:translateY(-2px);
    }
}

@keyframes cxHoloCoreFloat{
    0%,100%{
        transform:
            translate(-50%,-50%)
            translateY(0);
    }

    50%{
        transform:
            translate(-50%,-50%)
            translateY(-7px);
    }
}

@keyframes cxCoreRingSpin{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes cxCoreHalo{
    0%,100%{
        transform:scale(.90);
        opacity:.35;
    }

    50%{
        transform:scale(1.10);
        opacity:.90;
    }
}

@keyframes cxLogoAlive{
    0%,100%{
        transform:scale(1);
        filter:
            drop-shadow(0 0 8px rgba(157,227,31,.18));
    }

    50%{
        transform:scale(1.055);
        filter:
            drop-shadow(0 0 17px rgba(157,227,31,.31));
    }
}

@keyframes cxOrbitOne{
    from{
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }
}

@keyframes cxOrbitTwo{
    from{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }
}

@keyframes cxOrbitThree{
    0%,100%{
        transform:
            translate(-50%,-50%)
            scale(.96);

        opacity:.28;
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.05);

        opacity:.68;
    }
}

@keyframes cxDataNodeA{
    0%,100%{
        transform:
            translate3d(0,0,0)
            scale(.75);

        opacity:.35;
    }

    50%{
        transform:
            translate3d(11px,-9px,0)
            scale(1.25);

        opacity:1;
    }
}

@keyframes cxDataNodeB{
    0%,100%{
        transform:
            translate3d(0,0,0)
            scale(.80);

        opacity:.42;
    }

    50%{
        transform:
            translate3d(9px,7px,0)
            scale(1.20);

        opacity:1;
    }
}

@keyframes cxDataNodeC{
    0%,100%{
        transform:
            translate3d(0,0,0);

        opacity:.30;
    }

    50%{
        transform:
            translate3d(-9px,9px,0);

        opacity:.90;
    }
}

@keyframes cxHoloSparkA{
    0%,100%{
        transform:
            translateY(0)
            rotate(0deg)
            scale(.75);

        opacity:.25;
    }

    50%{
        transform:
            translateY(-10px)
            rotate(25deg)
            scale(1.25);

        opacity:1;
    }
}

@keyframes cxHoloSparkB{
    0%,100%{
        transform:
            translateY(0)
            rotate(0deg)
            scale(.75);

        opacity:.20;
    }

    50%{
        transform:
            translateY(9px)
            rotate(-20deg)
            scale(1.20);

        opacity:.90;
    }
}

@keyframes cxOnlineHover{
    0%,100%{
        transform:
            translateX(-50%)
            translateY(0);
    }

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

@keyframes cxOnlinePulse{
    0%,100%{
        opacity:.65;

        box-shadow:
            0 0 0 3px rgba(157,227,31,.06),
            0 0 8px rgba(157,227,31,.48);
    }

    50%{
        opacity:1;

        box-shadow:
            0 0 0 8px rgba(157,227,31,.025),
            0 0 20px rgba(157,227,31,1);
    }
}

@keyframes cxStatusCapsule{
    0%,100%{
        transform:
            translateY(-50%)
            translateX(0);
    }

    50%{
        transform:
            translateY(-50%)
            translateX(-5px);
    }
}

/* responsive */
@media(max-width:1050px){

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-core,

    html body
    .cx-codi-holo-v3
    .cx-dv2-orbit,

    html body
    .cx-dv2-codi-visual.cx-codi-holo-v3::before{
        left:39% !important;
    }

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-online{
        left:39% !important;
    }

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-status{
        right:-14px !important;

        width:160px !important;
        min-width:160px !important;
    }
}

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

    html body
    .cx-codi-holo-v3,
    html body
    .cx-codi-holo-v3 *,
    html body
    .cx-codi-holo-v3::before,
    html body
    .cx-codi-holo-v3::after{
        animation:none !important;
        transition:none !important;
    }
}

/* END R126-R1-D */