@import"https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap";

img[src$=".svg"] {
    display: block;
    max-width: 100%;
    height: auto
}

.main-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000606;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto
}

.bg-elements {
    position: absolute;
    left: 60%;
    top: -11.78%;
    z-index: 1
}

.ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.63vh;
    left: 25.11vw;
    top: 21.45vh;
    background: #03c8ba80;
    filter: blur(21.5vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.ellipse-1 .ellipse-inner,
.ellipse-1 img {
    display: none
}

.ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: .43vh;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.ellipse-2 .ellipse-inner,
.ellipse-2 img {
    display: none
}

.ellipse-3-wrapper {
    position: absolute;
    width: 42.91vw;
    height: 20.01vh;
    left: 29.99vw;
    top: 0;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.08deg) translateZ(0);
    will-change: filter, transform;
    isolation: isolate
}

.ellipse-3-rotate,
.ellipse-3,
.ellipse-3 .ellipse-inner,
.ellipse-3 img {
    display: none
}

.content-container {
    position: absolute;
    background: linear-gradient(to bottom, #00252566, #002a2a66);
    left: 50%;
    transform: translate(-50%);
    border-radius: 1.52rem;
    bottom: 5%;
    width: 88.125%;
    max-width: 705px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding: 2.7rem 6.2rem;
    box-sizing: border-box
}

.vpnus-title {
    font-family: Rubik, sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
    font-size: 5rem;
    color: #fff;
    margin: 5px 0 0;
    padding: 0;
    align-self: flex-start
}

.giveaway-banner-fixed {
    position: absolute;
    top: 1.5rem;
    left: 6%;
    right: 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 2rem;
    background: #02c1b31a;
    border: 1px solid rgba(2, 193, 179, .4);
    border-radius: 1.5rem;
    cursor: pointer;
    z-index: 100
}

.giveaway-banner-fixed:active {
    background: #02c1b31a
}

.giveaway-banner-left {
    display: flex;
    align-items: center;
    gap: 1rem
}

.giveaway-banner-icon {
    font-size: 2.4rem
}

.giveaway-banner-text {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    color: #ffffffe6
}

.giveaway-banner-btn {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: #000404;
    background: #02c1b3;
    border: none;
    border-radius: 1.2rem;
    padding: .8rem 1.5rem;
    cursor: pointer
}

.giveaway-banner-btn:active {
    background: #03d4c5
}

.traffic-section {
    position: absolute;
    right: 6rem;
    top: 3rem;
    width: 36%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem
}

.balance-expire-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-top: 16px
}

.balance-section {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    line-height: normal;
    font-style: normal;
    display: flex;
    flex-direction: column
}

.balance-amount {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 3.97rem;
    color: #fff;
    margin: 0;
    padding: 0
}

.balance-label {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.98rem;
    color: #ffffff80;
    padding: 0
}

.expire-section {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    line-height: normal;
    font-style: normal;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.expire-date {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 3.97rem;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    letter-spacing: -.2rem;
    text-align: right
}

.expire-label {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    color: #f49f23;
    font-size: 2.98rem;
    margin: .5rem 0 0;
    padding: 0;
    white-space: nowrap;
    text-align: right
}

.traffic-progress {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.traffic-amount-container {
    display: flex;
    justify-content: flex-end
}

.traffic-amount {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 2rem;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.traffic-progress-background {
    position: relative;
    background: #ececec;
    height: 1rem;
    width: 100%;
    border-radius: 1.2rem
}

.traffic-label {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 2.4rem;
    color: #ffffff80;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    text-align: right
}

.traffic-progress-fill {
    position: absolute;
    background: #02c1b3;
    height: 1rem;
    left: 0;
    bottom: 0;
    border-radius: 1.2rem;
    transition: width .3s ease
}

.button-purchase {
    background: #02c1b3;
    border: .21rem solid #03c8ba;
    border-radius: 7.04rem;
    width: 100%;
    max-width: 581.56px;
    height: auto;
    aspect-ratio: 581.56 / 96.72;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    margin-top: 5rem;
    align-self: center;
    will-change: transform;
    transform: translateZ(0)
}

.button-purchase .button-inner {
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: inherit;
    width: 100%
}

.button-purchase .button-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    font-style: normal;
    color: #000404;
    font-size: 3.4rem;
    text-align: center;
    top: 30%;
    transform: translate(-50%);
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.button-ellipse {
    position: absolute;
    height: 60.26%;
    left: 17.48%;
    top: 96.82%;
    width: 66.43%
}

.button-ellipse .ellipse-inner {
    position: absolute;
    inset: -153.19% -23.11%
}

.button-ellipse img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.button-icon-left {
    position: absolute;
    left: 6.55%;
    width: 6.18%;
    height: 37.18%;
    top: 31.02%
}

.button-icon-left img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.button-icon-right {
    position: absolute;
    left: 88.72%;
    width: 5.12%;
    height: 30.77%;
    top: 34.62%
}

.button-icon-right img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.button-setup {
    background: #02c1b31a;
    border: .21rem solid #03c8ba;
    border-radius: 7.04rem;
    width: 100%;
    max-width: 581.56px;
    height: auto;
    aspect-ratio: 581.56 / 96.72;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    margin-top: 2rem;
    align-self: center;
    will-change: transform;
    transform: translateZ(0)
}

.button-setup .button-inner {
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: inherit;
    width: 100%
}

.button-setup .button-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    font-style: normal;
    font-size: 3.4rem;
    text-align: center;
    color: #fff;
    top: 30%;
    transform: translate(-50%);
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.setup-icon-1 {
    position: absolute;
    left: 7.41%;
    width: 4.48%;
    height: 32.69%;
    top: 31.02%
}

.setup-icon-1 img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.setup-icon-2 {
    position: absolute;
    left: 88.72%;
    width: 5.12%;
    height: 30.77%;
    top: 34.62%
}

.setup-icon-2 img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.button-whitelist {
    background: #02c1b31a;
    border: .21rem solid #03c8ba;
    border-radius: 7.04rem;
    width: 100%;
    max-width: 581.56px;
    height: auto;
    aspect-ratio: 581.56 / 96.72;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    margin-top: 2rem;
    align-self: center;
    will-change: transform;
    transform: translateZ(0)
}

.button-whitelist .button-inner {
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: inherit;
    width: 100%
}

.button-whitelist .button-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    font-style: normal;
    font-size: 3.4rem;
    text-align: center;
    color: #fff;
    top: 30%;
    transform: translate(-50%);
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-icon-left {
    position: absolute;
    left: 6.04%;
    width: 7.22%;
    height: 43.43%;
    top: 27.92%
}

.whitelist-icon-left img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-icon-right {
    position: absolute;
    left: 90.15%;
    width: 2.66%;
    height: 27.69%;
    top: 35.9%
}

.whitelist-icon-right img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.bottom-buttons-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 2rem;
    gap: 2rem
}

.button-profile {
    background: #02c1b31a;
    border: .21rem solid #03c8ba;
    border-radius: 7.04rem;
    width: 100%;
    max-width: 275.9px;
    height: auto;
    aspect-ratio: 275.9 / 96.72;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    will-change: transform;
    transform: translateZ(0)
}

.button-profile .button-inner-small {
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: inherit;
    width: 100%
}

.button-profile .button-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 55.7%;
    font-style: normal;
    font-size: 3.2rem;
    text-align: center;
    color: #fff;
    top: 30.48%;
    transform: translate(-50%);
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.profile-icon {
    position: absolute;
    left: 14.14%;
    width: 13.94%;
    height: 39.75%;
    top: 30.48%
}

.profile-icon img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.button-support {
    background: #02c1b31a;
    border: .21rem solid #03c8ba;
    border-radius: 7.04rem;
    width: 100%;
    max-width: 275.9px;
    height: auto;
    aspect-ratio: 275.9 / 96.72;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    will-change: transform;
    transform: translateZ(0)
}

.button-support .button-inner-small {
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: inherit;
    width: 100%
}

.button-text-support {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 25.9%;
    font-style: normal;
    font-size: 3.2rem;
    color: #fff;
    top: 30.48%;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.support-icon {
    position: absolute;
    left: 10.31%;
    width: 9.76%;
    height: 27.78%;
    top: 36.68%
}

.support-icon img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.v-logo {
    position: absolute;
    top: 17.36%;
    left: 50%;
    transform: translate(-50%);
    width: 39.29%;
    max-width: 314.32px;
    height: auto;
    aspect-ratio: 314.32 / 159.64;
    z-index: 1000
}

.v-logo img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    filter: brightness(1.5) contrast(1.2);
    opacity: 1;
    object-fit: contain;
    pointer-events: none
}

.button-purchase:hover {
    background: #03d4c5;
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 4px 20px #02c1b366
}

.button-buy-giga {
    margin-top: 2rem
}

.button-buy-giga .button-icon-left img {
    filter: brightness(0)
}

.button-setup:hover,
.button-whitelist:hover,
.button-profile:hover,
.button-support:hover {
    background: #02c1b333;
    transform: translateY(-2px) translateZ(0)
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.profile-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000404;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column
}

.profile-bg-elements {
    position: absolute;
    left: 60%;
    top: -11.35%;
    z-index: 1
}

.profile-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.64vh;
    left: 25.11vw;
    top: 21.03vh;
    background: #03c8ba80;
    filter: blur(21.5vw)
}

.profile-ellipse-1 div,
.profile-ellipse-1 img {
    display: none
}

.profile-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw)
}

.profile-ellipse-2 div,
.profile-ellipse-2 img {
    display: none
}

.profile-ellipse-3-wrapper {
    position: absolute;
    width: 42.9vw;
    height: 20.01vh;
    left: 27.59vw;
    top: -.43vh;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.076deg)
}

.profile-ellipse-3-wrapper div,
.profile-ellipse-3-wrapper img {
    display: none
}

.profile-username {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    line-height: normal;
    left: 50%;
    transform: translate(-50%);
    font-size: 4.96rem;
    color: #fff;
    top: 6.8rem;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    z-index: 10
}

.profile-user-id {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    font-size: 2.8rem;
    color: #ffffff80;
    text-align: center;
    top: 13.1rem;
    transform: translate(-50%);
    margin: 0;
    padding: 0;
    white-space: nowrap;
    z-index: 10
}

.profile-id-copy-icon {
    position: absolute;
    left: 50%;
    top: 13.74rem;
    width: 2.17rem;
    height: 2.17rem;
    cursor: pointer;
    z-index: 20;
    margin-left: 12rem
}

.profile-id-copy-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.profile-menu-button {
    position: absolute;
    height: 11.16rem;
    left: 50%;
    transform: translate(-50%);
    overflow: hidden;
    border-radius: 2.48rem;
    width: 100%;
    max-width: 70.56rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    display: flex;
    align-items: center;
    border: none;
    background: linear-gradient(180deg, #00252566, #002a2a66);
    z-index: 10;
    will-change: transform
}

.profile-menu-button:hover {
    background: linear-gradient(180deg, #002a2a80, #002f2f80);
    transform: translate(-50%) translateY(-2px) translateZ(0)
}

.profile-button-payment {
    top: 22.42rem
}

.profile-button-referral {
    top: 35.01rem
}

.profile-button-support {
    top: 47.6rem
}

.profile-button-agreement {
    top: 60.18rem
}

.profile-button-devices {
    top: 75.9rem;
    background: linear-gradient(90deg, #0ac9bb66 0% 100%), linear-gradient(180deg, #00252566, #002a2a66)
}

.profile-button-devices:hover {
    background: linear-gradient(90deg, #0ac9bb80 0% 100%), linear-gradient(180deg, #002a2a80, #002f2f80);
    transform: translate(-50%) translateY(-2px)
}

.profile-button-icon {
    position: absolute;
    width: 3.97rem;
    height: 3.97rem
}

.profile-button-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.profile-button-payment .profile-button-icon {
    left: 3.91rem;
    top: 3.78rem;
    overflow: hidden
}

.profile-payment-icon-vector1 {
    position: absolute;
    left: .25rem;
    top: .74rem;
    width: 3.47rem;
    height: 2.48rem
}

.profile-payment-icon-vector1 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.profile-payment-icon-vector2 {
    position: absolute;
    left: .74rem;
    top: 2.48rem;
    width: 1.24rem;
    height: .25rem
}

.profile-payment-icon-vector2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.profile-button-referral .profile-button-icon {
    left: 4.21rem;
    top: 4.29rem;
    width: 3.54rem;
    height: 2.63rem
}

.profile-button-support .profile-button-icon {
    left: 3.32rem;
    top: 3.6rem
}

.profile-button-agreement .profile-button-icon {
    left: 3.22rem;
    top: 3.42rem;
    width: 4.34rem;
    height: 4.34rem
}

.profile-button-devices .profile-button-icon {
    left: 3.4rem;
    top: 4.4rem;
    width: 3.5rem;
    height: 2.24rem
}

.profile-button-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 3.9rem;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.profile-button-payment .profile-button-text {
    left: 11.1rem;
    top: 3.35rem
}

.profile-button-referral .profile-button-text {
    left: 11.02rem;
    top: 3.69rem
}

.profile-button-support .profile-button-text {
    left: 11.02rem;
    top: 3.3rem
}

.profile-button-agreement .profile-button-text {
    font-size: 3.2rem;
    left: 11.12rem;
    top: 3.72rem
}

.profile-button-devices .profile-button-text {
    font-size: 3.97rem;
    left: 11.1rem;
    top: 3.2rem
}

.profile-button-arrow {
    position: absolute;
    right: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.98rem;
    height: 2.98rem
}

.profile-button-arrow img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.profile-invite-title {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    transform: translate(-50%);
    font-size: 3.47rem;
    color: #fff;
    top: 98rem;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    z-index: 10
}

.profile-referral-field {
    position: absolute;
    background: #02c1b31a;
    height: 9.67rem;
    left: 50%;
    transform: translate(-50%);
    overflow: hidden;
    border-radius: 2.48rem;
    top: 104rem;
    width: 100%;
    max-width: 71.18rem;
    cursor: pointer;
    transition: background .2s ease;
    border: none;
    display: flex;
    align-items: center;
    z-index: 10
}

.profile-referral-field:hover {
    background: #02c1b333
}

.profile-referral-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    font-size: 3.4rem;
    color: #fff;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0 5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%
}

.profile-referral-copy-icon {
    position: absolute;
    right: 4.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.47rem;
    height: 3.47rem
}

.profile-referral-copy-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.profile-connected-devices-button {
    position: absolute;
    background: #02c1b333;
    height: 9.67rem;
    left: 50%;
    transform: translate(-50%);
    overflow: hidden;
    border-radius: 2.48rem;
    top: 116.8rem;
    width: 100%;
    max-width: 71.18rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    border: none;
    display: flex;
    align-items: center;
    z-index: 10;
    will-change: transform
}

.profile-connected-devices-button:hover {
    background: #02c1b34d;
    transform: translate(-50%) translateY(-2px) translateZ(0)
}

.profile-connected-devices-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 5.39rem;
    font-size: 3.47rem;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.profile-connected-devices-icon {
    position: absolute;
    right: 4.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.47rem;
    height: 2.29rem
}

.profile-connected-devices-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.device-dialog-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 100vh;
    background: #000404;
    overflow-y: hidden;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box
}

.device-dialog-bg-elements {
    position: absolute;
    left: 357.12px;
    top: -147.56px;
    z-index: 1
}

.device-dialog-ellipse-1 {
    position: absolute;
    width: 556.14px;
    height: 554.28px;
    left: 200.88px;
    top: 273.42px;
    background: #03c8ba80;
    filter: blur(279px);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.device-dialog-ellipse-1 div,
.device-dialog-ellipse-1 img {
    display: none
}

.device-dialog-ellipse-2 {
    position: absolute;
    width: 957.9px;
    height: 954.8px;
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(341px);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.device-dialog-ellipse-2 div,
.device-dialog-ellipse-2 img {
    display: none
}

.device-dialog-ellipse-3-wrapper {
    position: absolute;
    width: 343.236px;
    height: 260.163px;
    left: 220.72px;
    top: -5.58px;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(186px);
    transform: rotate(29.076deg) translateZ(0);
    will-change: filter, transform;
    isolation: isolate
}

.device-dialog-ellipse-3-wrapper div,
.device-dialog-ellipse-3-wrapper img {
    display: none
}

.device-dialog-title {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    line-height: normal;
    font-size: clamp(2.5rem, 6.2vw, 49.6px);
    color: #fff;
    text-align: center;
    margin: clamp(3rem, 11.5vh, 6rem) auto clamp(1rem, 2vh, 2rem);
    padding: 0;
    white-space: nowrap;
    z-index: 10;
    width: 100%;
    margin-top: 30px
}

.device-dialog-subtitle {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    font-size: clamp(1.5rem, 3.72vw, 29.76px);
    color: #ffffff80;
    text-align: center;
    margin: 0 auto clamp(2rem, 4vh, 4rem);
    padding: 0;
    width: 75%;
    max-width: 600px;
    z-index: 10
}

.device-dialog-buttons-container {
    position: relative;
    width: 88.2%;
    max-width: 705.56px;
    margin: clamp(2rem, 4vh, 4rem) auto 0;
    padding: 0 6.35%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vh, 2rem)
}

@media (min-width: 768px) {
    .device-dialog-buttons-container {
        gap: 2rem
    }
}

.device-dialog-os-button {
    position: relative;
    height: clamp(70px, 8.6vh, 111.6px);
    width: 100%;
    overflow: hidden;
    border-radius: clamp(15px, 3.1vw, 24.8px);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    display: flex;
    align-items: center;
    border: none;
    background: linear-gradient(180deg, #00252566, #002a2a66);
    z-index: 10;
    will-change: transform;
    transform: translateZ(0)
}

.device-dialog-os-button:hover {
    background: linear-gradient(180deg, #002a2a80, #002f2f80);
    transform: translateY(-2px) translateZ(0)
}

.device-dialog-button-icon {
    position: absolute;
    left: 5.6%;
    width: clamp(25px, 4.96vw, 39.68px);
    height: clamp(25px, 4.96vw, 39.68px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #02c1b3
}

.device-dialog-button-icon svg {
    width: 100%;
    height: 100%
}

.device-dialog-button-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 15.7%;
    font-size: clamp(1.8rem, 4.875vw, 39px);
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.device-dialog-button-arrow {
    position: absolute;
    right: 5.6%;
    width: clamp(18px, 3.72vw, 29.76px);
    height: clamp(18px, 3.72vw, 29.76px);
    color: #ffffff80
}

.device-dialog-button-arrow svg {
    width: 100%;
    height: 100%
}

.device-dialog-close-button {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 5vh;
    width: 88.2%;
    max-width: 705.56px;
    height: clamp(60px, 7.44vh, 96.72px);
    background: #02c1b31a;
    border-radius: clamp(15px, 3.1vw, 24.8px);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    will-change: transform;
    transform: translate(-50%) translateZ(0)
}

.device-dialog-close-button:hover {
    background: #02c1b333;
    transform: translate(-50%) translateY(-2px) translateZ(0)
}

.device-dialog-close-button-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    font-size: clamp(1.6rem, 4.34vw, 34.72px);
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-setup-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000606;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column
}

.whitelist-setup-bg-elements {
    position: absolute;
    left: 60%;
    top: -11.35%;
    z-index: 1
}

.whitelist-setup-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.63vh;
    left: 25.11vw;
    top: 21.03vh;
    background: #03c8ba80;
    filter: blur(21.5vw)
}

.whitelist-setup-ellipse-1 div,
.whitelist-setup-ellipse-1 img {
    display: none
}

.whitelist-setup-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw)
}

.whitelist-setup-ellipse-2 div,
.whitelist-setup-ellipse-2 img {
    display: none
}

.whitelist-setup-ellipse-3-wrapper {
    position: absolute;
    width: 42.91vw;
    height: 20.01vh;
    left: 27.59vw;
    top: -.43vh;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.08deg)
}

.whitelist-setup-ellipse-3-wrapper div,
.whitelist-setup-ellipse-3-wrapper img {
    display: none
}

.whitelist-setup-content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    z-index: 10;
    padding: 8vh 2rem 2rem
}

.whitelist-setup-shield-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 46.7rem;
    flex-shrink: 0;
    aspect-ratio: 466.98 / 570.19;
    pointer-events: none
}

.whitelist-setup-bottom-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 3.5rem;
    padding-bottom: 8rem
}

.whitelist-setup-shield-vector {
    position: absolute;
    width: 100%;
    height: 100%
}

.whitelist-setup-shield-vector img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-setup-shield-vector2 {
    position: absolute;
    width: 69.63%;
    height: 69.57%;
    top: 15.77%;
    left: 15.27%
}

.whitelist-setup-shield-vector2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-setup-shield-vector3 {
    position: absolute;
    width: 86.19%;
    height: 86.1%;
    top: 6.97%;
    left: 6.87%
}

.whitelist-setup-shield-vector3 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-setup-download-icon {
    position: absolute;
    width: 12rem;
    height: 12rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20
}

.whitelist-setup-download-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-setup-text-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    width: 100%;
    max-width: 62.5rem
}

.whitelist-setup-title {
    font-family: Author, sans-serif;
    font-weight: 400;
    line-height: normal;
    font-size: 4.96rem;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-setup-subtitle {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    font-size: 2.98rem;
    color: #ffffff80;
    text-align: center;
    margin: 0;
    padding: 0;
    max-width: 43.1rem
}

.whitelist-setup-buttons-container {
    position: relative;
    display: flex;
    gap: 2.8rem;
    width: 100%;
    max-width: 70rem;
    justify-content: center
}

.whitelist-setup-button-install {
    position: relative;
    background: #02c1b3;
    border: none;
    height: auto;
    aspect-ratio: 344 / 97;
    border-radius: 6.2rem;
    flex: 1;
    max-width: 35rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 .8rem #03c8ba40;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0)
}

.whitelist-setup-button-install:hover {
    background: #03d4c5;
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 0 0 .8rem #03c8ba40, 0 4px 20px #02c1b366
}

.whitelist-setup-button-install-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    color: #000404;
    font-size: 3.47rem;
    text-align: center;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-setup-button-next {
    position: relative;
    background: #02c1b31a;
    height: auto;
    aspect-ratio: 344.1 / 96.72;
    overflow: visible;
    border-radius: 6.2rem;
    flex: 1;
    max-width: 35rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0)
}

.whitelist-setup-button-next:hover {
    background: #02c1b333;
    transform: translateY(-2px) translateZ(0)
}

.whitelist-setup-button-next-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative
}

.whitelist-setup-button-next-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    font-size: 3.47rem;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-setup-button-next-icon {
    width: 2.98rem;
    height: 2.98rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.whitelist-setup-button-next-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-subscription-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000606;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column
}

.whitelist-subscription-bg-elements {
    position: absolute;
    left: 44.65%;
    top: -11.35%;
    z-index: 1
}

.whitelist-subscription-ellipse-1 {
    position: absolute;
    width: 69.54vw;
    height: 42.65vh;
    left: 25.12vw;
    top: 21.04vh;
    background: #03c8ba80;
    filter: blur(21.5vw)
}

.whitelist-subscription-ellipse-1 div,
.whitelist-subscription-ellipse-1 img {
    display: none
}

.whitelist-subscription-ellipse-2 {
    position: absolute;
    width: 119.77vw;
    height: 73.47vh;
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw)
}

.whitelist-subscription-ellipse-2 div,
.whitelist-subscription-ellipse-2 img {
    display: none
}

.whitelist-subscription-ellipse-3-wrapper {
    position: absolute;
    width: 42.92vw;
    height: 20.02vh;
    left: 27.6vw;
    top: -.43vh;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.08deg)
}

.whitelist-subscription-ellipse-3-wrapper div,
.whitelist-subscription-ellipse-3-wrapper img {
    display: none
}

.whitelist-subscription-content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    z-index: 10;
    padding: 8vh 2rem 2rem
}

.whitelist-subscription-shield-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 46.7rem;
    flex-shrink: 0;
    aspect-ratio: 466.98 / 570.19;
    pointer-events: none
}

.whitelist-subscription-bottom-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 2.5rem;
    padding-bottom: 8rem
}

.whitelist-subscription-shield-vector {
    position: absolute;
    width: 100%;
    height: 100%
}

.whitelist-subscription-shield-vector img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-subscription-shield-vector2 {
    position: absolute;
    width: 69.63%;
    height: 69.57%;
    top: 15.77%;
    left: 15.27%
}

.whitelist-subscription-shield-vector2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-subscription-shield-vector3 {
    position: absolute;
    width: 86.19%;
    height: 86.1%;
    top: 6.97%;
    left: 6.87%
}

.whitelist-subscription-shield-vector3 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-subscription-cloud-icon {
    position: absolute;
    width: 12rem;
    height: 12rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20
}

.whitelist-subscription-cloud-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-subscription-text-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 70rem
}

.whitelist-subscription-title {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 4.96rem;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-subscription-subtitle {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    font-size: 2.98rem;
    color: #ffffff80;
    text-align: center;
    margin: 0;
    padding: 0;
    max-width: 48.7rem
}

.whitelist-subscription-url-field {
    position: relative;
    background: #02c1b31a;
    height: auto;
    aspect-ratio: 711.938 / 96.744;
    overflow: visible;
    border-radius: 6.2rem;
    width: 100%;
    max-width: 70rem;
    cursor: pointer;
    transition: background .2s ease;
    border: none;
    display: flex;
    align-items: center;
    padding: 0 4.5rem
}

.whitelist-subscription-url-field:hover {
    background: #02c1b333
}

.whitelist-subscription-url-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 2.8rem;
    color: #fff;
    margin: 0;
    padding: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.whitelist-subscription-copy-icon {
    width: 3.47rem;
    height: 3.47rem;
    margin-left: 2rem;
    flex-shrink: 0
}

.whitelist-subscription-copy-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-subscription-buttons-container {
    position: relative;
    display: flex;
    gap: 2.8rem;
    width: 100%;
    max-width: 70rem;
    justify-content: center
}

.whitelist-subscription-button-add {
    position: relative;
    background: #02c1b3;
    border: none;
    height: auto;
    aspect-ratio: 344 / 97;
    border-radius: 6.2rem;
    flex: 1;
    max-width: 35rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 .8rem #03c8ba40;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0)
}

.whitelist-subscription-button-add:hover {
    background: #03d4c5;
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 0 0 .8rem #03c8ba40, 0 4px 20px #02c1b366
}

.whitelist-subscription-button-add-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    color: #000404;
    font-size: 3.47rem;
    text-align: center;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-subscription-button-next {
    position: relative;
    background: #02c1b31a;
    height: auto;
    aspect-ratio: 344.186 / 96.744;
    overflow: visible;
    border-radius: 6.2rem;
    flex: 1;
    max-width: 35rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0)
}

.whitelist-subscription-button-next:hover {
    background: #02c1b333;
    transform: translateY(-2px) translateZ(0)
}

.whitelist-subscription-button-next-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative
}

.whitelist-subscription-button-next-text {
    font-family: Author, sans-serif;
    font-weight: 400;
    line-height: 1;
    font-size: 3.47rem;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-subscription-button-next-icon {
    width: 2.98rem;
    height: 2.98rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.whitelist-subscription-button-next-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-success-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000606;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column
}

.whitelist-success-bg-elements {
    position: absolute;
    left: 60%;
    top: -11.35%;
    z-index: 1
}

.whitelist-success-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.63vh;
    left: 25.11vw;
    top: 21.03vh;
    background: #03c8ba80;
    filter: blur(21.5vw)
}

.whitelist-success-ellipse-1 div,
.whitelist-success-ellipse-1 img {
    display: none
}

.whitelist-success-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw)
}

.whitelist-success-ellipse-2 div,
.whitelist-success-ellipse-2 img {
    display: none
}

.whitelist-success-ellipse-3-wrapper {
    position: absolute;
    width: 42.9vw;
    height: 20.01vh;
    left: 27.59vw;
    top: -.43vh;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.076deg)
}

.whitelist-success-ellipse-3-wrapper div,
.whitelist-success-ellipse-3-wrapper img {
    display: none
}

.whitelist-success-content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    z-index: 10;
    padding: 8vh 2rem 2rem
}

.whitelist-success-shield-check {
    position: relative;
    width: 100%;
    max-width: 40rem;
    flex-shrink: 0;
    aspect-ratio: 402.481 / 491.02;
    z-index: 20;
    margin-top: 3.5rem
}

.whitelist-success-bottom-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 3.5rem;
    padding-bottom: 8rem
}

.whitelist-success-shield-check img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-success-text-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    width: 100%;
    max-width: 62.5rem
}

.whitelist-success-title {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 4.96rem;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-success-subtitle {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    font-size: 2.98rem;
    color: #ffffff80;
    text-align: center;
    margin: 0;
    padding: 0;
    max-width: 50rem
}

.whitelist-success-button-finish {
    position: relative;
    background: #02c1b3;
    border: none;
    height: auto;
    aspect-ratio: 665.88 / 96.72;
    border-radius: 6.2rem;
    width: 100%;
    max-width: 66.59rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 .8rem #03c8ba40;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0)
}

.whitelist-success-button-finish:hover {
    background: #03d4c5;
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 0 0 .8rem #03c8ba40, 0 4px 20px #02c1b366
}

.whitelist-success-button-finish-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    color: #000404;
    font-size: 3.47rem;
    text-align: center;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.manual-setup-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000404;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 10rem;
    box-sizing: border-box
}

.manual-setup-bg-elements {
    position: absolute;
    left: 50%;
    top: -11.35vh;
    transform: translate(-50%);
    z-index: 1;
    will-change: filter;
    transform: translate(-50%) translateZ(0);
    isolation: isolate
}

.manual-setup-ellipse-1 {
    position: absolute;
    width: clamp(300px, 69.5vw, 556.14px);
    height: clamp(300px, 69.3vw, 554.28px);
    left: clamp(100px, 25.1vw, 200.88px);
    top: clamp(150px, 21.4vh, 273.42px);
    background: #03c8ba80;
    filter: blur(clamp(150px, 34.9vw, 279px));
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.manual-setup-ellipse-1 div,
.manual-setup-ellipse-1 img {
    display: none
}

.manual-setup-ellipse-2 {
    position: absolute;
    width: clamp(500px, 119.7vw, 957.9px);
    height: clamp(500px, 119.4vw, 954.8px);
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(clamp(180px, 42.6vw, 341px));
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.manual-setup-ellipse-2 div,
.manual-setup-ellipse-2 img {
    display: none
}

.manual-setup-ellipse-3-wrapper {
    position: absolute;
    width: clamp(180px, 42.9vw, 343.236px);
    height: clamp(140px, 32.5vw, 260.163px);
    left: clamp(110px, 27.6vw, 220.72px);
    top: clamp(-3px, -.43vh, -5.58px);
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(clamp(100px, 23.3vw, 186px));
    transform: rotate(29.076deg) translateZ(0);
    will-change: filter, transform;
    isolation: isolate
}

.manual-setup-ellipse-3-wrapper div,
.manual-setup-ellipse-3-wrapper img {
    display: none
}

.manual-setup-title {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    line-height: normal;
    font-size: clamp(2.5rem, 6.2vw, 49.6px);
    color: #fff;
    text-align: center;
    margin: clamp(2rem, 3vh, 40px) auto clamp(1.5rem, 2.3vh, 30px);
    padding: 0;
    white-space: nowrap;
    z-index: 10;
    width: 100%
}

.manual-setup-subtitle {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    left: 400px;
    font-size: 29.76px;
    color: #ffffff80;
    text-align: center;
    top: 160px;
    transform: translate(-50%);
    margin: 0;
    padding: 0;
    width: 600px;
    z-index: 10
}

.manual-setup-instructions {
    position: relative;
    width: 88.2%;
    max-width: 665.88px;
    margin: 0 auto;
    padding: 0;
    z-index: 10;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

.manual-setup-instructions::-webkit-scrollbar {
    width: 0px;
    background: transparent
}

.manual-setup-step {
    background: linear-gradient(180deg, #00252566, #002a2a66);
    border-radius: clamp(12px, 2.5vw, 20px);
    padding: clamp(1rem, 2.2vw, 18px) clamp(1.2rem, 3vw, 24px);
    margin-bottom: clamp(.6rem, 1.5vw, 12px);
    min-height: auto;
    display: flex;
    align-items: flex-start
}

.manual-setup-step-number {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: clamp(1.3rem, 3.2vw, 26px);
    color: #02c1b3;
    margin-right: clamp(.6rem, 1.5vw, 12px);
    flex-shrink: 0;
    min-width: clamp(1.8rem, 4.5vw, 36px)
}

.manual-setup-step-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: clamp(1.3rem, 3.2vw, 26px);
    color: #fff;
    line-height: 1.25;
    margin: 0;
    padding-top: 2px;
    flex: 1
}

.manual-setup-step-text p {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: clamp(1.3rem, 3.2vw, 26px);
    color: #fff;
    line-height: 1.25;
    margin: 0
}

.manual-setup-step-text a {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: clamp(1.3rem, 3.2vw, 26px);
    transition: color .2s ease, opacity .2s ease
}

.manual-setup-step-text a:hover {
    color: #03d4c5;
    opacity: .8
}

.manual-setup-url-container {
    position: relative;
    width: 88.2%;
    max-width: 665.88px;
    margin: clamp(1rem, 1.5vh, 20px) auto clamp(1rem, 1.5vh, 20px);
    padding: 0;
    z-index: 10
}

.manual-setup-url-label {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: clamp(1.3rem, 3.2vw, 26px);
    color: #fff;
    margin: 0 0 clamp(.5rem, 1.2vw, 10px) 0;
    padding: 0
}

.manual-setup-url-field {
    background: #02c1b31a;
    height: clamp(50px, 6.2vh, 80px);
    border-radius: clamp(12px, 2.5vw, 20px);
    width: 100%;
    cursor: pointer;
    transition: background .2s ease;
    border: none;
    display: flex;
    align-items: center;
    padding: 0 clamp(1.5rem, 4vw, 32px)
}

.manual-setup-url-field:hover {
    background: #02c1b333
}

.manual-setup-url-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: clamp(1.2rem, 3vw, 24px);
    color: #fff;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.manual-setup-copy-icon {
    width: clamp(22px, 4.34vw, 34.72px);
    height: clamp(22px, 4.34vw, 34.72px);
    margin-left: clamp(1rem, 2.5vw, 20px);
    flex-shrink: 0;
    color: #02c1b3
}

.manual-setup-copy-icon svg {
    width: 100%;
    height: 100%
}

.manual-setup-done-button {
    position: relative;
    width: 88.2%;
    max-width: 665.88px;
    height: clamp(50px, 6.2vh, 80px);
    margin: clamp(.8rem, 1.2vh, 16px) auto clamp(1.5rem, 2.3vh, 30px);
    background: #02c1b3;
    border-radius: clamp(2.5rem, 6.5vw, 52px);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 0 0 clamp(.4rem, .8vw, 6px) #03c8ba40;
    will-change: transform;
    transform: translateZ(0)
}

.manual-setup-done-button:hover {
    background: #03d4c5;
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 0 0 8px #03c8ba40, 0 4px 20px #02c1b366
}

.manual-setup-done-button-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    font-size: clamp(1.4rem, 3.6vw, 29px);
    color: #000404;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.manual-setup-back-button {
    position: absolute;
    left: 50.84px;
    width: 705.56px;
    height: 96.72px;
    background: #02c1b31a;
    border-radius: 24.8px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    will-change: transform;
    transform: translateZ(0)
}

.manual-setup-back-button:hover {
    background: #02c1b333;
    transform: translateY(-2px) translateZ(0)
}

.manual-setup-back-button-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    font-size: 34.72px;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.devices-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000606;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column
}

.devices-screen-container .devices-bg-elements {
    position: absolute;
    left: 60%;
    top: -11.78%;
    z-index: 1
}

.devices-screen-container .devices-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.64vh;
    left: 25.11vw;
    top: 21.45vh;
    background: #03c8ba80;
    filter: blur(21.5vw)
}

.devices-screen-container .devices-ellipse-1 .ellipse-inner,
.devices-screen-container .devices-ellipse-1 img {
    display: none
}

.devices-screen-container .devices-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: .43vh;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw)
}

.devices-screen-container .devices-ellipse-2 .ellipse-inner,
.devices-screen-container .devices-ellipse-2 img {
    display: none
}

.devices-screen-container .devices-ellipse-3-wrapper {
    position: absolute;
    width: 42.91vw;
    height: 20.01vh;
    left: 27.59vw;
    top: 0;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.08deg)
}

.devices-screen-container .devices-ellipse-3-rotate,
.devices-screen-container .devices-ellipse-3,
.devices-screen-container .devices-ellipse-3 .ellipse-inner,
.devices-screen-container .devices-ellipse-3 img {
    display: none
}

.devices-content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    z-index: 10;
    padding: 8vh 2rem 2rem
}

.devices-shield-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 46.7rem;
    flex-shrink: 0;
    aspect-ratio: 466.98 / 570.19;
    pointer-events: none
}

.devices-bottom-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 3.5rem;
    padding-bottom: 8rem
}

.devices-text-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    width: 100%;
    max-width: 62.5rem
}

.devices-screen-container .devices-title {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 4.96rem;
    text-align: center;
    color: #fff;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap
}

.devices-screen-container .devices-subtitle {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 2.98rem;
    text-align: center;
    color: #ffffff80;
    white-space: nowrap;
    margin: 0 !important;
    padding: 0 !important
}

.devices-screen-container .devices-subtitle p:first-child {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important
}

.devices-screen-container .devices-subtitle p:last-child {
    margin: 0 !important;
    padding: 0 !important
}

.devices-buttons-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.8rem;
    width: 100%;
    max-width: 66.59rem
}

.devices-screen-container .devices-button-primary {
    position: relative;
    background: #02c1b3;
    border: none;
    height: auto;
    aspect-ratio: 665.88 / 96.72;
    overflow: hidden;
    border-radius: 6.2rem;
    width: 100%;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 .8rem #03c8ba40;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0)
}

.devices-screen-container .devices-button-primary:hover {
    background: #03d4c5;
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 0 0 .8rem #03c8ba40, 0 4px 20px #02c1b366
}

.devices-screen-container .devices-button-primary-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    color: #000404;
    font-size: 3.47rem;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap
}

.devices-screen-container .devices-button-whitelist {
    position: relative;
    background: #02c1b3;
    border: none;
    height: auto;
    aspect-ratio: 665.88 / 96.72;
    overflow: hidden;
    border-radius: 6.2rem;
    width: 100%;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 .8rem #03c8ba40;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0)
}

.devices-screen-container .devices-button-whitelist:hover {
    background: #03d4c5;
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 0 0 .8rem #03c8ba40, 0 4px 20px #02c1b366
}

.devices-screen-container .devices-button-whitelist-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    color: #000404;
    font-size: 3.47rem;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap
}

.devices-screen-container .devices-button-secondary {
    position: relative;
    background: #02c1b31a;
    border: none;
    height: auto;
    aspect-ratio: 665.88 / 96.72;
    overflow: hidden;
    border-radius: 6.2rem;
    width: 100%;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    display: flex;
    align-items: center;
    will-change: transform;
    transform: translateZ(0);
    justify-content: center
}

.devices-screen-container .devices-button-secondary:hover {
    background: #02c1b333;
    transform: translateY(-2px) translateZ(0)
}

.devices-screen-container .devices-button-secondary-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    font-size: 3.47rem;
    text-align: center;
    color: #fff;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap
}

.devices-screen-container .devices-shield-vector {
    position: absolute;
    width: 100%;
    height: 100%
}

.devices-screen-container .devices-shield-vector img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.devices-screen-container .devices-shield-vector2 {
    position: absolute;
    width: 69.63%;
    height: 69.57%;
    top: 15.77%;
    left: 15.27%
}

.devices-screen-container .devices-shield-vector2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.devices-screen-container .devices-shield-vector3 {
    position: absolute;
    width: 86.19%;
    height: 86.1%;
    top: 6.97%;
    left: 6.87%
}

.devices-screen-container .devices-shield-vector3 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.devices-screen-container .devices-connect-icon {
    position: absolute;
    width: 12rem;
    height: 12rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20
}

.devices-screen-container .devices-connect-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.payment-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000404;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto
}

.payment-bg-elements {
    position: absolute;
    left: 60%;
    top: -11.78%;
    z-index: 1;
    isolation: isolate;
    transform: translateZ(0);
    will-change: transform
}

.payment-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.63vh;
    left: 25.11vw;
    top: 21.45vh;
    background: #03c8ba80;
    filter: blur(80px);
    transform: translateZ(0);
    will-change: auto
}

.payment-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: .43vh;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(100px);
    transform: translateZ(0);
    will-change: auto
}

.payment-ellipse-3-wrapper {
    position: absolute;
    width: 42.91vw;
    height: 20.01vh;
    left: 27.59vw;
    top: 0;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(60px);
    transform: rotate(29.08deg) translateZ(0);
    will-change: auto
}

.payment-v-logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 6.27%;
    width: 12.17%;
    max-width: 97.36px;
    height: auto;
    aspect-ratio: 97.36 / 39.45;
    z-index: 1000
}

.payment-v-logo img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    filter: brightness(1.5) contrast(1.2);
    opacity: 1;
    object-fit: contain;
    pointer-events: none
}

.payment-content-section {
    position: absolute;
    left: 8.375%;
    top: 13.92%;
    width: 83.25%;
    display: flex;
    flex-direction: column;
    z-index: 10
}

.payment-header {
    position: relative;
    width: 54.875%;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    margin-bottom: 3rem
}

.payment-title {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 4.96rem;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.payment-subtitle {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.98rem;
    color: #ffffff80;
    margin: 1.2rem 0 0;
    padding: 0
}

.tariffs-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 0rem
}

.payment-bottom-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem
}

.payment-devices-count {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.98rem;
    color: #fff;
    margin: 0;
    padding: 0
}

.tariff-button {
    position: relative;
    background: #02c1b31a;
    border: .19rem solid transparent;
    height: auto;
    aspect-ratio: 666.05 / 133.95;
    border-radius: 12.4rem;
    width: 100%;
    max-width: 666.05px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
    overflow: hidden;
    flex-shrink: 0;
    transform: translateZ(0);
    will-change: border-color, background-color
}

.tariff-button:hover {
    background: #02c1b333
}

.tariff-button.selected {
    border-color: #03c8ba;
    will-change: auto
}

.tariff-price {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 3.97rem;
    text-align: right;
    color: #fff;
    top: 33.3%;
    right: 13.2%;
    margin: 0;
    padding: 0
}

.tariff-info {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 10.9rem;
    top: 3.22rem;
    width: 23.3rem;
    height: 7.1rem
}

.tariff-period {
    position: absolute;
    left: 5rem;
    font-size: 2.98rem;
    color: #fff;
    top: .2rem;
    margin: 0;
    padding: 0
}

.tariff-number {
    position: absolute;
    font-size: 5.95rem;
    color: #fff;
    top: 0;
    margin: 0;
    padding: 0;
    left: 0
}

.tariff-per-month {
    position: absolute;
    left: 5rem;
    font-size: 2.98rem;
    color: #ffffff80;
    top: 3.5rem;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.tariff-with-badge {
    position: relative;
    width: 100%
}

.popular-badge {
    position: absolute;
    background: #02c1b3;
    height: auto;
    aspect-ratio: 150.08 / 33.49;
    left: 50%;
    transform: translate(-50%) translateY(50%);
    overflow: hidden;
    border-radius: 6.2rem;
    bottom: 0;
    width: 18.76%;
    max-width: 150.08px;
    z-index: 10
}

.popular-badge-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #000404;
    font-size: 1.49rem;
    text-align: center;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.device-slider-wrapper {
    position: relative;
    height: auto;
    aspect-ratio: 666.05 / 56.43;
    width: 100%;
    max-width: 666.05px;
    margin-top: 1rem;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background: #011d1b;
    border-radius: 6.2rem
}

.device-ellipse {
    position: absolute;
    width: 2.67rem;
    height: 2.67rem;
    border-radius: 50%;
    background: #03c8ba4d;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
    transition: opacity .2s ease
}

.device-ellipse:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6rem;
    height: 6rem;
    border-radius: 50%
}

.device-ellipse.hidden {
    opacity: 0;
    pointer-events: none
}

.device-ellipse-pos1 {
    left: 8%;
    transform: translate(-50%, -50%)
}

.device-ellipse-pos2 {
    left: 29%;
    transform: translate(-50%, -50%)
}

.device-ellipse-pos3 {
    left: 50%;
    transform: translate(-50%, -50%)
}

.device-ellipse-pos4 {
    left: 71%;
    transform: translate(-50%, -50%)
}

.device-ellipse-pos5 {
    left: 92%;
    transform: translate(-50%, -50%)
}

.device-ellipse-bg {
    position: absolute;
    width: 5.64rem;
    height: 5.64rem;
    border-radius: 50%;
    background: #03c8ba80;
    top: 0;
    transform: translate(-50%);
    pointer-events: none;
    z-index: 2;
    transition: left .6s cubic-bezier(.34, 1.56, .64, 1);
    will-change: left
}

.device-ellipse-bg.dragging {
    transition: none;
    will-change: left
}

.device-ellipse-bg:not(.dragging) {
    will-change: auto
}

.device-ellipse-active {
    position: absolute;
    width: 2.67rem;
    height: 2.67rem;
    border-radius: 50%;
    background: #03c8ba;
    box-shadow: 0 0 10px #03c8ba99;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    z-index: 3;
    transition: left .6s cubic-bezier(.34, 1.56, .64, 1);
    will-change: left
}

.device-ellipse-active:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12rem;
    height: 12rem;
    border-radius: 50%
}

.device-ellipse-active:active {
    cursor: grabbing
}

.device-ellipse-active.dragging {
    transition: none;
    cursor: grabbing;
    will-change: left
}

.device-ellipse-active:not(.dragging) {
    will-change: auto
}

.payment-button {
    position: relative;
    background: #02c1b3;
    height: auto;
    aspect-ratio: 666.05 / 96.74;
    overflow: hidden;
    border-radius: 6.2rem;
    width: 100%;
    max-width: 666.05px;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    border: none;
    margin-top: 2.5rem;
    transform: translateZ(0)
}

.payment-button:hover {
    background: #03d4c5;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px #02c1b366
}

.payment-button:disabled {
    background: #02c1b380;
    cursor: not-allowed;
    transform: none
}

.payment-button-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    transform: translate(-50%);
    font-size: 3.5rem;
    color: #000;
    text-align: center;
    top: 27.9%;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.payment-dialog-overlay {
    position: fixed;
    inset: 0;
    background: #000000b3;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn .2s ease;
    transform: translateZ(0)
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.payment-dialog-container {
    background: #000404;
    border-radius: 2rem;
    width: 90%;
    max-width: 500px;
    padding: 3rem 2.5rem;
    animation: slideUp .3s cubic-bezier(.34, 1.56, .64, 1);
    box-shadow: 0 0 40px #03c8ba33;
    border: .15rem solid rgba(3, 200, 186, .2)
}

@keyframes slideUp {
    0% {
        transform: translateY(50px);
        opacity: 0
    }

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

.payment-dialog-header {
    margin-bottom: 2.5rem
}

.payment-dialog-title {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 3.2rem;
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 0
}

.payment-methods-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem
}

.payment-method-button {
    background: #02c1b31a;
    border: .15rem solid transparent;
    border-radius: 1.5rem;
    padding: 2rem 2.5rem;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
    position: relative;
    overflow: hidden;
    transform: translateZ(0)
}

.payment-method-button:hover {
    background: #02c1b333;
    border-color: #03c8ba;
    transform: translateY(-2px)
}

.payment-method-button:active {
    transform: translateY(0)
}

.payment-method-content {
    position: relative;
    z-index: 1
}

.payment-method-title {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.4rem;
    color: #fff;
    margin: 0 0 .5rem;
    padding: 0
}

.payment-method-subtitle {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    color: #ffffff80;
    margin: 0;
    padding: 0
}

.payment-dialog-cancel {
    width: 100%;
    background: transparent;
    border: .15rem solid rgba(255, 255, 255, .2);
    border-radius: 1.5rem;
    padding: 1.8rem;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
    transform: translateZ(0)
}

.payment-dialog-cancel:hover {
    background: #ffffff0d;
    border-color: #fff6
}

.payment-dialog-cancel-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.2rem;
    color: #fff;
    margin: 0;
    padding: 0;
    text-align: center
}

.referral-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000404;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column
}

.referral-bg-elements {
    position: absolute;
    left: 60%;
    top: -11.35%;
    z-index: 1
}

.referral-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.64vh;
    left: 25.11vw;
    top: 21.03vh;
    background: #03c8ba80;
    filter: blur(21.5vw)
}

.referral-ellipse-1 div,
.referral-ellipse-1 img {
    display: none
}

.referral-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw)
}

.referral-ellipse-2 div,
.referral-ellipse-2 img {
    display: none
}

.referral-ellipse-3-wrapper {
    position: absolute;
    width: 42.9vw;
    height: 20.01vh;
    left: 27.59vw;
    top: -.43vh;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.076deg)
}

.referral-ellipse-3-wrapper div,
.referral-ellipse-3-wrapper img {
    display: none
}

.referral-title {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    line-height: normal;
    left: 50%;
    transform: translate(-50%);
    font-size: 4.96rem;
    color: #fff;
    top: 6.8rem;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    z-index: 10
}

.referral-menu-button {
    position: absolute;
    height: 11.16rem;
    left: 50%;
    transform: translate(-50%);
    overflow: hidden;
    border-radius: 2.48rem;
    width: 100%;
    max-width: 70.56rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: none;
    z-index: 10
}

.referral-button-analytics {
    top: 15rem;
    background: linear-gradient(90deg, #0ac9bb66 0% 100%), linear-gradient(180deg, #00252566, #002a2a66)
}

.referral-button-analytics:active {
    background: linear-gradient(90deg, #0ac9bb80 0% 100%), linear-gradient(180deg, #002a2a80, #002f2f80)
}

.referral-button-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 3.97rem;
    color: #fff;
    margin: 0;
    padding: 0;
    left: 3.4rem;
    top: 50%;
    transform: translateY(-50%)
}

.referral-button-arrow {
    position: absolute;
    right: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.98rem;
    height: 2.98rem
}

.referral-button-arrow img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.referral-stats-card {
    position: absolute;
    background: linear-gradient(180deg, #00252566, #002a2a66);
    height: 13rem;
    left: 50%;
    transform: translate(-50%);
    overflow: hidden;
    border-radius: 2.48rem;
    width: 100%;
    max-width: 70.56rem;
    z-index: 10
}

.referral-stats-card-2 {
    top: 28rem
}

.referral-stats-card-3 {
    top: 43rem
}

.referral-stats-label {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 3rem;
    font-size: 2.8rem;
    color: #ffffffb3;
    top: 2.5rem;
    margin: 0;
    padding: 0
}

.referral-stats-value {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    line-height: normal;
    left: 3rem;
    font-size: 4.8rem;
    color: #fff;
    top: 6rem;
    margin: 0;
    padding: 0
}

.referral-section-title {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    transform: translate(-50%);
    font-size: 3.47rem;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    z-index: 10
}

.referral-link-title {
    top: 62rem
}

.referral-info-title {
    top: 83rem
}

.referral-link-field {
    position: absolute;
    background: #02c1b31a;
    height: 9.67rem;
    left: 50%;
    transform: translate(-50%);
    overflow: hidden;
    border-radius: 2.48rem;
    top: 67.7rem;
    width: 100%;
    max-width: 71.18rem;
    cursor: pointer;
    transition: background .2s ease;
    border: none;
    display: flex;
    align-items: center;
    z-index: 10
}

.referral-link-field:hover {
    background: #02c1b333
}

.referral-link-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    font-size: 3rem;
    color: #fff;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0 5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%
}

.referral-link-copy-icon {
    position: absolute;
    right: 4.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.47rem;
    height: 3.47rem
}

.referral-link-copy-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.referral-info-card {
    position: absolute;
    background: linear-gradient(180deg, #00323299, #00373799);
    height: 11.16rem;
    left: 50%;
    transform: translate(-50%);
    overflow: hidden;
    border-radius: 2.48rem;
    width: 100%;
    max-width: 70.56rem;
    z-index: 10;
    border: .1rem solid rgba(2, 193, 179, .2)
}

.referral-info-card-1 {
    top: 88.7rem
}

.referral-info-card-2 {
    top: 101.3rem
}

.referral-info-card-3 {
    top: 113.9rem
}

.referral-info-card-inactive {
    opacity: .5
}

.referral-info-card-active {
    opacity: 1;
    background: linear-gradient(90deg, #0ac9bb66, #0ac9bb4d), linear-gradient(180deg, #00323299, #00373799);
    border: .1rem solid rgba(2, 193, 179, .5);
    box-shadow: 0 0 20px #02c1b34d
}

.referral-info-icon {
    position: absolute;
    left: 3rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4.8rem
}

.referral-info-title-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    line-height: normal;
    left: 10rem;
    font-size: 3.2rem;
    color: #fff;
    top: 2rem;
    margin: 0;
    padding: 0
}

.referral-info-description {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 10rem;
    font-size: 2.6rem;
    color: #fff9;
    top: 6.2rem;
    margin: 0;
    padding: 0;
    right: 3rem
}

.analytics-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000404;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column
}

.analytics-bg-elements {
    position: absolute;
    left: 60%;
    top: -11.35%;
    z-index: 1
}

.analytics-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.64vh;
    left: 25.11vw;
    top: 21.03vh;
    background: #03c8ba80;
    filter: blur(21.5vw)
}

.analytics-ellipse-1 div,
.analytics-ellipse-1 img {
    display: none
}

.analytics-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw)
}

.analytics-ellipse-2 div,
.analytics-ellipse-2 img {
    display: none
}

.analytics-ellipse-3-wrapper {
    position: absolute;
    width: 42.9vw;
    height: 20.01vh;
    left: 27.59vw;
    top: -.43vh;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.076deg)
}

.analytics-ellipse-3-wrapper div,
.analytics-ellipse-3-wrapper img {
    display: none
}

.analytics-title {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    line-height: normal;
    left: 50%;
    transform: translate(-50%);
    font-size: 4.96rem;
    color: #fff;
    top: 6.8rem;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    z-index: 10
}

.analytics-stats-card {
    position: absolute;
    background: linear-gradient(180deg, #00252566, #002a2a66);
    height: 12rem;
    left: 50%;
    transform: translate(-50%);
    overflow: hidden;
    border-radius: 2.48rem;
    width: 100%;
    max-width: 70.56rem;
    z-index: 10
}

.analytics-stats-card-1 {
    top: 15rem
}

.analytics-stats-card-2 {
    top: 28.5rem
}

.analytics-stats-card-3 {
    top: 42rem
}

.analytics-stats-card-4 {
    top: 55.5rem
}

.analytics-stats-card-5 {
    top: 69rem
}

.analytics-stats-card-6 {
    top: 82.5rem
}

.analytics-stats-label {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 3rem;
    font-size: 2.6rem;
    color: #ffffffb3;
    top: 2rem;
    margin: 0;
    padding: 0
}

.analytics-stats-value {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    line-height: normal;
    left: 3rem;
    font-size: 4.2rem;
    color: #fff;
    top: 5rem;
    margin: 0;
    padding: 0
}

.analytics-withdraw-button {
    position: absolute;
    height: 11.16rem;
    left: 50%;
    transform: translate(-50%);
    overflow: hidden;
    border-radius: 2.48rem;
    width: 100%;
    max-width: 70.56rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    z-index: 10;
    top: 97rem
}

.analytics-withdraw-button-active {
    background: linear-gradient(90deg, #0ac9bb80 0% 100%), linear-gradient(180deg, #00252566, #002a2a66)
}

.analytics-withdraw-button-active:active {
    background: linear-gradient(90deg, #0ac9bb99 0% 100%), linear-gradient(180deg, #002a2a80, #002f2f80)
}

.analytics-withdraw-button-disabled {
    background: linear-gradient(180deg, #0025254d, #002a2a4d);
    cursor: not-allowed;
    opacity: .6
}

.analytics-withdraw-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 3.2rem;
    color: #fff;
    margin: 0;
    padding: 0;
    text-align: center
}

@font-face {
    font-family: Author;
    font-style: normal;
    font-weight: 400;
    src: local("Author Regular"), local("Author-Regular");
    font-display: swap
}

@font-face {
    font-family: Author;
    font-style: normal;
    font-weight: 500;
    src: local("Author Medium"), local("Author-Medium");
    font-display: swap
}

.whitelist-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000606;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column
}

.whitelist-screen-container .bg-elements {
    position: absolute;
    left: 60%;
    top: -11.78%;
    z-index: 1
}

.whitelist-screen-container .ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.64vh;
    left: 25.11vw;
    top: 21.45vh;
    background: #03c8ba80;
    filter: blur(21.5vw)
}

.whitelist-screen-container .ellipse-1 .ellipse-inner,
.whitelist-screen-container .ellipse-1 img {
    display: none
}

.whitelist-screen-container .ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: .43vh;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw)
}

.whitelist-screen-container .ellipse-2 .ellipse-inner,
.whitelist-screen-container .ellipse-2 img {
    display: none
}

.whitelist-screen-container .ellipse-3-wrapper {
    position: absolute;
    width: 42.91vw;
    height: 20.01vh;
    left: 27.59vw;
    top: 0;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.08deg)
}

.whitelist-screen-container .ellipse-3-rotate,
.whitelist-screen-container .ellipse-3,
.whitelist-screen-container .ellipse-3 .ellipse-inner,
.whitelist-screen-container .ellipse-3 img {
    display: none
}

.whitelist-screen-container .v-logo {
    position: absolute;
    top: 17.36%;
    left: 50%;
    transform: translate(-50%);
    width: 39.29%;
    max-width: 314.32px;
    height: auto;
    aspect-ratio: 314.32 / 159.64;
    z-index: 1000
}

.whitelist-screen-container .v-logo img {
    display: block;
    width: 100%;
    height: 100%;
    filter: brightness(1.5) contrast(1.2);
    opacity: 1;
    object-fit: contain;
    pointer-events: none
}

.whitelist-screen-container .content-container {
    position: absolute;
    background: linear-gradient(to bottom, #00252566, #002a2a66);
    border-radius: 2.48rem;
    width: calc(100% - 4rem);
    max-width: 70.56rem;
    left: 50%;
    transform: translate(-50%);
    top: 45vh;
    bottom: 8rem;
    z-index: 10;
    padding: 5rem 6.5rem 6rem;
    display: flex;
    flex-direction: column;
    gap: 0
}

.whitelist-screen-container .vpnus-title {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: normal;
    font-size: 6.8rem;
    color: #fff;
    margin: 0;
    padding: 0;
    align-self: flex-start
}

.whitelist-screen-container .balance-expire-wrapper {
    position: relative;
    width: 100%;
    margin-top: 2rem
}

.whitelist-screen-container .balance-expire-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%
}

.whitelist-screen-container .balance-section {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    line-height: normal;
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.whitelist-screen-container .balance-amount {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 3.97rem;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-screen-container .balance-label {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.98rem;
    color: #ffffff80;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-screen-container .expire-section {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    line-height: normal;
    font-style: normal;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem
}

.whitelist-screen-container .expire-date {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 3.97rem;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    letter-spacing: -.2rem
}

.whitelist-screen-container .expire-label {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    color: #ffffff80;
    font-size: 2.98rem;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-screen-container .traffic-section {
    position: absolute;
    right: 6rem;
    top: 3rem;
    width: 36%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem
}

.whitelist-screen-container .traffic-progress {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.whitelist-screen-container .traffic-amount-container {
    display: flex;
    justify-content: flex-end
}

.whitelist-screen-container .traffic-amount {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 2rem;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-screen-container .traffic-progress-background {
    position: relative;
    background: #ececec;
    height: 1rem;
    width: 100%;
    border-radius: 1.2rem
}

.whitelist-screen-container .traffic-label {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 2.4rem;
    color: #ffffff80;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    text-align: right
}

.whitelist-screen-container .traffic-progress-fill {
    position: absolute;
    background: #02c1b3;
    height: 1rem;
    left: 0;
    bottom: 0;
    border-radius: 1.2rem;
    width: 93%
}

.whitelist-screen-container .button-purchase {
    background: #02c1b3;
    border: .21rem solid #03c8ba;
    border-radius: 7.04rem;
    width: 100%;
    max-width: 581.56px;
    height: auto;
    aspect-ratio: 581.56 / 96.72;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    margin-top: 3rem;
    align-self: center;
    will-change: transform;
    transform: translateZ(0)
}

.whitelist-screen-container .button-purchase .button-inner {
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: inherit;
    width: 100%
}

.whitelist-screen-container .button-purchase .button-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    font-style: normal;
    color: #000404;
    font-size: 3.4rem;
    text-align: center;
    top: 30%;
    transform: translate(-50%);
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-screen-container .button-ellipse {
    position: absolute;
    height: 60.26%;
    left: 17.48%;
    top: 96.82%;
    width: 66.43%
}

.whitelist-screen-container .button-ellipse .ellipse-inner {
    position: absolute;
    inset: -153.19% -23.11%
}

.whitelist-screen-container .button-ellipse img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-screen-container .button-icon-left {
    position: absolute;
    left: 6.55%;
    width: 6.18%;
    height: 37.18%;
    top: 31.02%
}

.whitelist-screen-container .button-icon-left img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-screen-container .button-icon-right {
    position: absolute;
    left: 88.72%;
    width: 5.12%;
    height: 30.77%;
    top: 34.62%
}

.whitelist-screen-container .button-icon-right img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-screen-container .button-connect {
    background: #02c1b31a;
    border: .21rem solid #03c8ba;
    border-radius: 7.04rem;
    width: 100%;
    max-width: 581.56px;
    height: auto;
    aspect-ratio: 581.56 / 96.72;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    margin-top: 2.5rem;
    align-self: center;
    will-change: transform;
    transform: translateZ(0)
}

.whitelist-screen-container .button-connect .button-inner {
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: inherit;
    width: 100%
}

.whitelist-screen-container .button-connect .button-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    font-style: normal;
    font-size: 3.4rem;
    text-align: center;
    color: #fff;
    top: 30%;
    transform: translate(-50%);
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-screen-container .connect-icon-1 {
    position: absolute;
    left: 7.41%;
    width: 4.48%;
    height: 32.69%;
    top: 31.02%
}

.whitelist-screen-container .connect-icon-1 img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-screen-container .connect-icon-2 {
    position: absolute;
    left: 90.15%;
    width: 2.66%;
    height: 27.69%;
    top: 35.9%
}

.whitelist-screen-container .connect-icon-2 img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-screen-container .small-buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 2.5rem;
    gap: 2rem
}

.whitelist-screen-container .button-profile {
    background: #02c1b31a;
    border: .21rem solid #03c8ba;
    border-radius: 7.04rem;
    width: 100%;
    max-width: 275.9px;
    height: auto;
    aspect-ratio: 275.9 / 96.72;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    will-change: transform;
    transform: translateZ(0)
}

.whitelist-screen-container .button-profile .button-inner-small {
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: inherit;
    width: 100%
}

.whitelist-screen-container .button-profile .button-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 55.7%;
    font-style: normal;
    font-size: 3.2rem;
    text-align: center;
    color: #fff;
    top: 30.48%;
    transform: translate(-50%);
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-screen-container .profile-icon {
    position: absolute;
    left: 14.14%;
    width: 13.94%;
    height: 39.75%;
    top: 30.48%
}

.whitelist-screen-container .profile-icon img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-screen-container .button-support {
    background: #02c1b31a;
    border: .21rem solid #03c8ba;
    border-radius: 7.04rem;
    width: 100%;
    max-width: 275.9px;
    height: auto;
    aspect-ratio: 275.9 / 96.72;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    will-change: transform;
    transform: translateZ(0)
}

.whitelist-screen-container .button-support .button-inner-small {
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: inherit;
    width: 100%
}

.whitelist-screen-container .button-text-support {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 25.9%;
    font-style: normal;
    font-size: 3.2rem;
    color: #fff;
    top: 30.48%;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-screen-container .support-icon {
    position: absolute;
    left: 10.31%;
    width: 9.76%;
    height: 27.78%;
    top: 36.68%
}

.whitelist-screen-container .support-icon img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.whitelist-screen-container .button-purchase:hover {
    background: #03d4c5;
    transform: translateY(-2px)
}

.whitelist-screen-container .button-connect:hover,
.whitelist-screen-container .button-profile:hover,
.whitelist-screen-container .button-support:hover {
    background: #02c1b333;
    transform: translateY(-2px)
}

.whitelist-purchase-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000404;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto
}

.whitelist-purchase-container .bg-elements {
    position: absolute;
    left: 60%;
    top: -11.78%;
    z-index: 1;
    pointer-events: none
}

.whitelist-purchase-container .ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.63vh;
    left: 25.11vw;
    top: 21.45vh;
    background: #03c8ba66;
    filter: blur(50px)
}

.whitelist-purchase-container .ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: .43vh;
    background: #03c8ba66;
    mix-blend-mode: plus-lighter;
    filter: blur(60px)
}

.whitelist-purchase-container .ellipse-3-wrapper {
    position: absolute;
    width: 42.91vw;
    height: 20.01vh;
    left: 27.59vw;
    top: 0;
    background: #fff6;
    mix-blend-mode: plus-lighter;
    filter: blur(40px);
    transform: rotate(29.08deg)
}

.whitelist-purchase-container .v-logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 6.27%;
    width: 12.17%;
    max-width: 97.36px;
    height: auto;
    aspect-ratio: 97.36 / 39.45;
    z-index: 1000
}

.whitelist-purchase-container .v-logo img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    filter: brightness(1.5) contrast(1.2);
    opacity: 1;
    object-fit: contain;
    pointer-events: none
}

.whitelist-purchase-container .content-section {
    position: absolute;
    left: 8.375%;
    top: 13.92%;
    width: 83.25%;
    display: flex;
    flex-direction: column;
    z-index: 10
}

.whitelist-purchase-container .header-container {
    position: relative;
    width: 54.875%;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    margin-bottom: 3rem
}

.whitelist-purchase-container .header-title {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 4.96rem;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-purchase-container .header-subtitle {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.98rem;
    color: #ffffff80;
    margin: 1.2rem 0 0;
    padding: 0
}

.whitelist-purchase-container .tariffs-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 0
}

.whitelist-purchase-container .tariff-card {
    position: relative;
    background: #02c1b31a;
    border: .19rem solid transparent;
    height: auto;
    aspect-ratio: 666.05 / 133.95;
    border-radius: 12.4rem;
    width: 100%;
    max-width: 666.05px;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box
}

.whitelist-purchase-container .tariff-card.selected {
    border-color: #03c8ba;
    background: #02c1b333
}

.whitelist-purchase-container .tariff-card-inner {
    position: relative;
    width: 100%;
    height: 100%
}

.whitelist-purchase-container .plan-container {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 3.5rem;
    top: 3.22rem;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    height: 7.1rem
}

.whitelist-purchase-container .tariff-amount {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 5.95rem;
    color: #fff;
    margin: 0;
    padding: 0;
    width: 9rem;
    text-align: right;
    line-height: 1
}

.whitelist-purchase-container .tariff-labels {
    display: flex;
    flex-direction: column
}

.whitelist-purchase-container .tariff-label {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.98rem;
    color: #fff;
    margin: 0;
    padding: 0;
    line-height: 1.2
}

.whitelist-purchase-container .tariff-price-per-gb {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.98rem;
    color: #ffffff80;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    white-space: nowrap
}

.whitelist-purchase-container .tariff-price {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 3.97rem;
    text-align: right;
    color: #fff;
    top: 33.3%;
    right: 13.2%;
    margin: 0;
    padding: 0
}

.whitelist-purchase-container .tariff-with-badge {
    position: relative;
    width: 100%
}

.whitelist-purchase-container .popular-badge {
    position: absolute;
    background: #02c1b3;
    height: auto;
    aspect-ratio: 150.08 / 33.49;
    left: 50%;
    transform: translate(-50%) translateY(50%);
    overflow: hidden;
    border-radius: 6.2rem;
    bottom: 0;
    width: 18.76%;
    max-width: 150.08px;
    z-index: 10
}

.whitelist-purchase-container .popular-badge-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #000404;
    font-size: 1.49rem;
    text-align: center;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-purchase-container .bottom-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem
}

.whitelist-purchase-container .balance-info {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 3.8rem;
    color: #fff;
    margin: 0;
    padding: 0
}

.whitelist-purchase-container .payment-method-hint {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.98rem;
    color: #ffffff80;
    margin: 0;
    padding: 0
}

.whitelist-purchase-container .payment-button {
    position: relative;
    background: #02c1b3;
    height: auto;
    aspect-ratio: 666.05 / 96.74;
    overflow: hidden;
    border-radius: 6.2rem;
    width: 100%;
    max-width: 666.05px;
    cursor: pointer;
    border: none;
    margin-top: 2.5rem
}

.whitelist-purchase-container .payment-button.disabled {
    opacity: .6;
    pointer-events: none
}

.whitelist-purchase-container .payment-button-text {
    position: absolute;
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    left: 50%;
    transform: translate(-50%);
    font-size: 3.5rem;
    color: #000;
    text-align: center;
    top: 27.9%;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.whitelist-purchase-container .payment-dialog-overlay {
    position: fixed;
    inset: 0;
    background: #000000b3;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000
}

.whitelist-purchase-container .payment-dialog-container {
    background: #000404;
    border-radius: 2rem;
    width: 90%;
    max-width: 500px;
    padding: 3rem 2.5rem;
    box-shadow: 0 0 40px #03c8ba33;
    border: .15rem solid rgba(3, 200, 186, .2)
}

.whitelist-purchase-container .payment-dialog-header {
    margin-bottom: 2.5rem
}

.whitelist-purchase-container .payment-dialog-title {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 3.2rem;
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 0
}

.whitelist-purchase-container .payment-methods-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem
}

.whitelist-purchase-container .payment-method-button {
    background: #02c1b31a;
    border: .15rem solid transparent;
    border-radius: 1.5rem;
    padding: 2rem 2.5rem;
    cursor: pointer
}

.whitelist-purchase-container .payment-method-content {
    position: relative;
    z-index: 1
}

.whitelist-purchase-container .payment-method-title {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.4rem;
    color: #fff;
    margin: 0 0 .5rem;
    padding: 0
}

.whitelist-purchase-container .payment-method-subtitle {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    color: #ffffff80;
    margin: 0;
    padding: 0
}

.whitelist-purchase-container .payment-dialog-cancel {
    width: 100%;
    background: transparent;
    border: .15rem solid rgba(255, 255, 255, .2);
    border-radius: 1.5rem;
    padding: 1.8rem;
    cursor: pointer
}

.whitelist-purchase-container .payment-dialog-cancel-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.2rem;
    color: #fff;
    margin: 0;
    padding: 0;
    text-align: center
}

.user-agreement-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000404;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    padding-bottom: 10rem
}

.user-agreement-container::-webkit-scrollbar {
    width: 0px;
    background: transparent
}

.user-agreement-bg-elements {
    position: fixed;
    left: 60%;
    top: -11.35%;
    z-index: 1;
    pointer-events: none
}

.user-agreement-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.64vh;
    left: 25.11vw;
    top: 21.03vh;
    background: #03c8ba80;
    filter: blur(21.5vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.user-agreement-ellipse-1 div,
.user-agreement-ellipse-1 img {
    display: none
}

.user-agreement-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.user-agreement-ellipse-2 div,
.user-agreement-ellipse-2 img {
    display: none
}

.user-agreement-ellipse-3-wrapper {
    position: absolute;
    width: 42.9vw;
    height: 20.01vh;
    left: 27.59vw;
    top: -.43vh;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.076deg) translateZ(0);
    will-change: filter, transform;
    isolation: isolate
}

.user-agreement-ellipse-3-wrapper div,
.user-agreement-ellipse-3-wrapper img {
    display: none
}

.user-agreement-title {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: clamp(3.2rem, 5.5vw, 4.4rem);
    color: #fff;
    text-align: center;
    margin: 0;
    padding: clamp(6rem, 10vh, 8rem) clamp(3rem, 6.25vw, 5rem) clamp(3rem, 5vh, 4rem) clamp(3rem, 6.25vw, 5rem);
    z-index: 10;
    line-height: 1.2
}

.user-agreement-content {
    position: relative;
    z-index: 10;
    padding: 0 clamp(2rem, 7.5vw, 6rem);
    color: #fff;
    max-width: 80rem;
    margin: 0 auto
}

.user-agreement-section {
    margin-bottom: clamp(3rem, 6.25vh, 5rem)
}

.user-agreement-section h2 {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    color: #02c1b3;
    margin: 0 0 clamp(1.5rem, 2.5vh, 2rem) 0;
    padding: 0;
    line-height: 1.3
}

.user-agreement-section h3 {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.25vw, 2.6rem);
    color: #ffffffe6;
    margin: clamp(2rem, 3.125vh, 2.5rem) 0 clamp(1.2rem, 1.875vh, 1.5rem) 0;
    padding: 0;
    line-height: 1.3
}

.user-agreement-section p {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: #fffc;
    line-height: 1.6;
    margin: 0 0 clamp(1.2rem, 2vh, 1.6rem) 0;
    padding: 0
}

.user-agreement-section ul {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: #fffc;
    line-height: 1.6;
    margin: clamp(1.2rem, 1.875vh, 1.5rem) 0;
    padding-left: clamp(2rem, 3.75vw, 3rem)
}

.user-agreement-section li {
    margin-bottom: clamp(.8rem, 1.25vh, 1rem)
}

.user-agreement-section a {
    color: #02c1b3;
    text-decoration: none;
    border-bottom: 1px solid rgba(2, 193, 179, .4);
    padding-bottom: .1rem;
    transition: color .2s ease, border-color .2s ease
}

.user-agreement-section a:hover,
.user-agreement-section a:focus-visible {
    color: #6ff0e7;
    border-color: #6ff0e7b3
}

.user-agreement-footer {
    font-size: clamp(1.6rem, 2.75vw, 2.2rem) !important;
    color: #ffffff80 !important;
    text-align: center;
    margin-top: clamp(3rem, 5vh, 4rem) !important;
    padding-bottom: clamp(1.5rem, 2.5vh, 2rem)
}

.device-management-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    background: #000404;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    padding-bottom: 10rem
}

.device-management-container::-webkit-scrollbar {
    width: 0px;
    background: transparent
}

.device-management-bg-elements {
    position: fixed;
    left: 60%;
    top: -11.35%;
    z-index: 1;
    pointer-events: none
}

.device-management-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.64vh;
    left: 25.11vw;
    top: 21.03vh;
    background: #03c8ba80;
    filter: blur(21.5vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.device-management-ellipse-1 div,
.device-management-ellipse-1 img {
    display: none
}

.device-management-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.device-management-ellipse-2 div,
.device-management-ellipse-2 img {
    display: none
}

.device-management-ellipse-3-wrapper {
    position: absolute;
    width: 42.9vw;
    height: 20.01vh;
    left: 27.59vw;
    top: -.43vh;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.076deg) translateZ(0);
    will-change: filter, transform;
    isolation: isolate
}

.device-management-ellipse-3-wrapper div,
.device-management-ellipse-3-wrapper img {
    display: none
}

.device-management-title {
    position: relative;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 4.4rem;
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 7rem 5rem 3rem;
    z-index: 10;
    line-height: 1.2
}

.device-management-counter {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-bottom: 3rem
}

.device-management-counter-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.8rem;
    color: #02c1b3;
    margin: 0;
    padding: 0
}

.device-management-devices-list {
    position: relative;
    z-index: 10;
    padding: 0 2rem;
    margin-bottom: 3rem;
    max-width: 70.56rem;
    margin-left: auto;
    margin-right: auto
}

.device-management-device-card {
    position: relative;
    background: linear-gradient(180deg, #00252566, #002a2a66);
    border-radius: 2.48rem;
    padding: 2.5rem 3rem;
    margin-bottom: 2rem;
    min-height: 12rem;
    display: flex;
    align-items: center;
    transition: background .2s ease, transform .2s ease;
    will-change: transform;
    transform: translateZ(0)
}

.device-management-device-card:hover {
    background: linear-gradient(180deg, #002a2a80, #002f2f80);
    transform: translateY(-2px) translateZ(0)
}

.device-management-empty-slot {
    opacity: .5;
    border: .2rem dashed rgba(2, 193, 179, .3);
    background: linear-gradient(180deg, #00252533, #002a2a33)
}

.device-management-empty-slot:hover {
    background: linear-gradient(180deg, #00252533, #002a2a33);
    transform: none
}

.device-management-device-number {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 3.6rem;
    color: #02c1b3;
    margin-right: 2.5rem;
    min-width: 5rem;
    text-align: center
}

.device-management-device-info {
    flex: 1;
    margin-right: 2rem
}

.device-management-device-name {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 2.8rem;
    color: #fff;
    margin: 0 0 1.2rem;
    padding: 0;
    line-height: 1.2
}

.device-management-device-price {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.2rem;
    color: #02c1b3
}

.device-management-device-key {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2rem;
    color: #ffffffb3;
    margin: 0;
    padding: 0;
    word-break: break-all;
    line-height: 1.4
}

.device-management-copy-button {
    position: relative;
    background: #02c1b333;
    border: none;
    border-radius: 1.2rem;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    margin-right: 1rem;
    color: #02c1b3;
    will-change: transform;
    transform: translateZ(0)
}

.device-management-copy-button:hover {
    background: #02c1b34d;
    transform: scale(1.05) translateZ(0)
}

.device-management-copy-button svg {
    width: 2.4rem;
    height: 2.4rem
}

.device-management-copied-tooltip {
    position: absolute;
    bottom: -3.5rem;
    left: 50%;
    transform: translate(-50%);
    background: #02c1b3;
    color: #000404;
    padding: .5rem 1.2rem;
    border-radius: .8rem;
    font-family: Rubik, sans-serif;
    font-size: 1.4rem;
    white-space: nowrap;
    font-weight: 400
}

.device-management-delete-button {
    background: #ff3b3033;
    border: none;
    border-radius: 1.2rem;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    color: #ff3b30;
    will-change: transform;
    transform: translateZ(0)
}

.device-management-delete-button:hover {
    background: #ff3b304d;
    transform: scale(1.05) translateZ(0)
}

.device-management-delete-button svg {
    width: 2.4rem;
    height: 2.4rem
}

.device-management-add-button {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 66.59rem;
    min-height: 9.67rem;
    background: #02c1b31a;
    border-radius: 2.48rem;
    border: none;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    margin: 0 auto 3rem;
    padding: 2rem;
    will-change: transform;
    transform: translateZ(0)
}

.device-management-add-button:hover {
    background: #02c1b333;
    transform: translateY(-2px) translateZ(0)
}

.device-management-add-icon {
    margin-right: 1.5rem;
    color: #fff;
    width: 3.2rem !important;
    height: 3.2rem !important;
    flex-shrink: 0
}

.device-management-add-button-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem
}

.device-management-add-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 3.47rem;
    color: #fff;
    margin: 0;
    padding: 0;
    line-height: 1
}

.device-management-add-price {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.2rem;
    color: #ffffffb3;
    margin: 0;
    padding: 0;
    line-height: 1
}

.device-management-info-box {
    position: relative;
    z-index: 10;
    background: linear-gradient(180deg, #00252566, #002a2a66);
    border-radius: 2.48rem;
    padding: 3rem;
    margin: 0 2rem 3rem;
    max-width: 70.56rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.device-management-info-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.4rem;
    color: #fffc;
    margin: 0 0 1.5rem;
    padding: 0;
    line-height: 1.4
}

.app-selector {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
    align-items: center
}

.app-selector-toggle {
    display: flex;
    gap: 2.8rem;
    justify-content: center;
    width: 100%
}

.app-selector-toggle-btn {
    flex: 1;
    height: 9.7rem;
    padding: 0 2rem;
    border-radius: 6.2rem;
    border: none;
    background: #02c1b31a;
    color: #ffffffb3;
    font-family: Rubik, sans-serif;
    font-size: 3.47rem;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem
}

.app-selector-toggle-btn-active {
    background: #02c1b366;
    color: #fff
}

.app-selector-star {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain
}

.app-selector-download-buttons {
    display: flex;
    gap: 2.8rem;
    width: 100%;
    justify-content: center
}

.app-selector-download-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    height: 9.7rem;
    border-radius: 6.2rem;
    background: #02c1b3;
    color: #000404;
    font-family: Rubik, sans-serif;
    font-size: 2.8rem;
    font-weight: 300;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 .8rem #03c8ba40
}

.app-selector-download-btn:hover {
    background: #03d4c5;
    box-shadow: 0 0 0 .8rem #03c8ba40, 0 4px 20px #02c1b366
}

.app-selector-download-btn-single {
    font-size: 3.47rem
}

.app-selector-download-btn-region {
    line-height: 1.1
}

.app-selector-download-icon {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: contain
}

.setup-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000606;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column
}

.setup-bg-elements {
    position: absolute;
    left: 60%;
    top: -11.35%;
    z-index: 1
}

.setup-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.63vh;
    left: 25.11vw;
    top: 21.03vh;
    background: #03c8ba80;
    filter: blur(21.5vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.setup-ellipse-1 div,
.setup-ellipse-1 img {
    display: none
}

.setup-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.setup-ellipse-2 div,
.setup-ellipse-2 img {
    display: none
}

.setup-ellipse-3-wrapper {
    position: absolute;
    width: 42.91vw;
    height: 20.01vh;
    left: 27.59vw;
    top: -.43vh;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.08deg) translateZ(0);
    will-change: filter, transform;
    isolation: isolate
}

.setup-ellipse-3-wrapper div,
.setup-ellipse-3-wrapper img {
    display: none
}

.setup-content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    z-index: 10;
    padding: 8vh 2rem 2rem
}

.setup-shield-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 46.7rem;
    flex-shrink: 0;
    aspect-ratio: 466.98 / 570.19;
    pointer-events: none
}

.setup-bottom-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 88.125%;
    gap: 2.5rem;
    padding-bottom: 4rem
}

.setup-shield-vector {
    position: absolute;
    width: 100%;
    height: 100%
}

.setup-shield-vector img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.setup-shield-vector2 {
    position: absolute;
    width: 69.63%;
    height: 69.57%;
    top: 15.77%;
    left: 15.27%
}

.setup-shield-vector2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.setup-shield-vector3 {
    position: absolute;
    width: 86.19%;
    height: 86.1%;
    top: 6.97%;
    left: 6.87%
}

.setup-shield-vector3 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.setup-download-icon {
    position: absolute;
    width: 12rem;
    height: 12rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20
}

.setup-download-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.setup-text-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    width: 100%;
    max-width: 62.5rem
}

.setup-title {
    font-family: Author, sans-serif;
    font-weight: 400;
    line-height: normal;
    font-size: 4.96rem;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.setup-subtitle {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    font-size: 2.98rem;
    color: #ffffff80;
    text-align: center;
    margin: 0;
    padding: 0;
    max-width: 43.1rem
}

.setup-buttons-container {
    position: relative;
    display: flex;
    gap: 2.8rem;
    width: 100%;
    justify-content: center
}

.setup-button-install {
    position: relative;
    background: #02c1b3;
    border: none;
    height: auto;
    aspect-ratio: 344 / 97;
    border-radius: 6.2rem;
    flex: 1;
    max-width: 35rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 .8rem #03c8ba40;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0)
}

.setup-button-install:hover {
    background: #03d4c5;
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 0 0 .8rem #03c8ba40, 0 4px 20px #02c1b366
}

.setup-button-install-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    color: #000404;
    font-size: 3.47rem;
    text-align: center;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.setup-button-next {
    position: relative;
    background: #02c1b31a;
    height: 9.7rem;
    overflow: visible;
    border-radius: 6.2rem;
    flex: 1;
    cursor: pointer;
    transition: background .2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center
}

.setup-button-next:hover {
    background: #02c1b333;
    transform: translateY(-2px) translateZ(0)
}

.setup-button-next-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative
}

.setup-button-next-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    font-size: 3.47rem;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.setup-button-next-icon {
    width: 2.98rem;
    height: 2.98rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.setup-button-next-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.subscription-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000606;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column
}

.subscription-bg-elements {
    position: absolute;
    left: 44.65%;
    top: -11.35%;
    z-index: 1
}

.subscription-ellipse-1 {
    position: absolute;
    width: 69.54vw;
    height: 42.65vh;
    left: 25.12vw;
    top: 21.04vh;
    background: #03c8ba80;
    filter: blur(21.5vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.subscription-ellipse-1 div,
.subscription-ellipse-1 img {
    display: none
}

.subscription-ellipse-2 {
    position: absolute;
    width: 119.77vw;
    height: 73.47vh;
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.subscription-ellipse-2 div,
.subscription-ellipse-2 img {
    display: none
}

.subscription-ellipse-3-wrapper {
    position: absolute;
    width: 42.92vw;
    height: 20.02vh;
    left: 27.6vw;
    top: -.43vh;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.08deg) translateZ(0);
    will-change: filter, transform;
    isolation: isolate
}

.subscription-ellipse-3-wrapper div,
.subscription-ellipse-3-wrapper img {
    display: none
}

.subscription-content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    z-index: 10;
    padding: 8vh 2rem 2rem
}

.subscription-shield-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 46.7rem;
    flex-shrink: 0;
    aspect-ratio: 466.98 / 570.19;
    pointer-events: none
}

.subscription-bottom-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 2.5rem;
    padding-bottom: 8rem
}

.subscription-shield-vector {
    position: absolute;
    width: 100%;
    height: 100%
}

.subscription-shield-vector img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.subscription-shield-vector2 {
    position: absolute;
    width: 69.63%;
    height: 69.57%;
    top: 15.77%;
    left: 15.27%
}

.subscription-shield-vector2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.subscription-shield-vector3 {
    position: absolute;
    width: 86.19%;
    height: 86.1%;
    top: 6.97%;
    left: 6.87%
}

.subscription-shield-vector3 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.subscription-cloud-icon {
    position: absolute;
    width: 12rem;
    height: 12rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20
}

.subscription-cloud-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.subscription-text-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 70rem
}

.subscription-title {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 4.96rem;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.subscription-subtitle {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    font-size: 2.98rem;
    color: #ffffff80;
    text-align: center;
    margin: 0;
    padding: 0;
    max-width: 48.7rem
}

.subscription-url-field {
    position: relative;
    background: #02c1b31a;
    height: auto;
    aspect-ratio: 711.938 / 96.744;
    overflow: visible;
    border-radius: 6.2rem;
    width: 100%;
    max-width: 70rem;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    padding: 0 4.5rem
}

.subscription-url-field:hover {
    background: #02c1b333
}

.subscription-url-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 2.8rem;
    color: #fff;
    margin: 0;
    padding: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.subscription-copy-icon {
    width: 3.47rem;
    height: 3.47rem;
    margin-left: 2rem;
    flex-shrink: 0
}

.subscription-copy-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.subscription-buttons-container {
    position: relative;
    display: flex;
    gap: 2.8rem;
    width: 100%;
    max-width: 70rem;
    justify-content: center
}

.subscription-button-add {
    position: relative;
    background: #02c1b3;
    border: none;
    height: auto;
    aspect-ratio: 344 / 97;
    border-radius: 6.2rem;
    flex: 1;
    max-width: 35rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 .8rem #03c8ba40;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0)
}

.subscription-button-add:hover {
    background: #03d4c5;
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 0 0 .8rem #03c8ba40, 0 4px 20px #02c1b366
}

.subscription-button-add-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    color: #000404;
    font-size: 3.47rem;
    text-align: center;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.subscription-button-next {
    position: relative;
    background: #02c1b31a;
    height: auto;
    aspect-ratio: 344.186 / 96.744;
    overflow: visible;
    border-radius: 6.2rem;
    flex: 1;
    max-width: 35rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0)
}

.subscription-button-next:hover {
    background: #02c1b333;
    transform: translateY(-2px) translateZ(0)
}

.subscription-button-next-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative
}

.subscription-button-next-text {
    font-family: Author, sans-serif;
    font-weight: 400;
    line-height: 1;
    font-size: 3.47rem;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.subscription-button-next-icon {
    width: 2.98rem;
    height: 2.98rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.subscription-button-next-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.subscription-copied-tooltip {
    position: absolute;
    bottom: -3.5rem;
    left: 50%;
    background: #02c1b3;
    color: #000404;
    padding: .5rem 1.2rem;
    border-radius: .8rem;
    font-family: Rubik, sans-serif;
    font-size: 1.4rem;
    white-space: nowrap;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
    will-change: opacity, transform;
    transform: translate(-50%) translateY(-.5rem);
    pointer-events: none;
    z-index: 100
}

.subscription-copied-tooltip-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%) translateY(0)
}

.success-screen-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000606;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column
}

.success-bg-elements {
    position: absolute;
    left: 60%;
    top: -11.35%;
    z-index: 1
}

.success-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.63vh;
    left: 25.11vw;
    top: 21.03vh;
    background: #03c8ba80;
    filter: blur(21.5vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.success-ellipse-1 div,
.success-ellipse-1 img {
    display: none
}

.success-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: 0;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.success-ellipse-2 div,
.success-ellipse-2 img {
    display: none
}

.success-ellipse-3-wrapper {
    position: absolute;
    width: 42.9vw;
    height: 20.01vh;
    left: 27.59vw;
    top: -.43vh;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.076deg) translateZ(0);
    will-change: filter, transform;
    isolation: isolate
}

.success-ellipse-3-wrapper div,
.success-ellipse-3-wrapper img {
    display: none
}

.success-content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    z-index: 10;
    padding: 8vh 2rem 2rem
}

.success-shield-check {
    position: relative;
    width: 100%;
    max-width: 40rem;
    flex-shrink: 0;
    aspect-ratio: 402.481 / 491.02;
    z-index: 20;
    margin-top: 3.5rem
}

.success-bottom-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 3.5rem;
    padding-bottom: 8rem
}

.success-shield-check img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.success-text-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    width: 100%;
    max-width: 62.5rem
}

.success-title {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: normal;
    font-size: 4.96rem;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.success-subtitle {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    font-size: 2.98rem;
    color: #ffffff80;
    text-align: center;
    margin: 0;
    padding: 0;
    max-width: 50rem
}

.success-button-finish {
    position: relative;
    background: #02c1b3;
    border: none;
    height: auto;
    aspect-ratio: 665.88 / 96.72;
    border-radius: 6.2rem;
    width: 100%;
    max-width: 66.59rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 .8rem #03c8ba40;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0)
}

.success-button-finish:hover {
    background: #03d4c5;
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 0 0 .8rem #03c8ba40, 0 4px 20px #02c1b366
}

.success-button-finish-text {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    line-height: 1;
    color: #000404;
    font-size: 3.47rem;
    text-align: center;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.giveaway-screen-container {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #000606;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 10rem 6%;
    box-sizing: border-box;
    gap: 2.5rem
}

.giveaway-bg-elements {
    position: absolute;
    left: 60%;
    top: -11.78%;
    z-index: 0;
    pointer-events: none
}

.giveaway-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.63vh;
    left: 25.11vw;
    top: 21.45vh;
    background: #03c8ba80;
    filter: blur(21.5vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.giveaway-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: .43vh;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.giveaway-ellipse-3 {
    position: absolute;
    width: 42.91vw;
    height: 20.01vh;
    left: 29.99vw;
    top: 0;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.08deg) translateZ(0);
    will-change: filter, transform;
    isolation: isolate
}

.giveaway-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: Rubik, sans-serif;
    font-size: 2.4rem;
    z-index: 10
}

.giveaway-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    z-index: 1;
    flex-shrink: 0
}

.giveaway-header-icon {
    font-size: 4rem
}

.giveaway-title {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 3.8rem;
    color: #fff;
    margin: 0
}

.giveaway-prize {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 1;
    flex-shrink: 0
}

.giveaway-prize-label {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.4rem;
    color: #ffffffb3
}

.giveaway-prize-amount {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 3.5rem;
    color: #02c1b3
}

.giveaway-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    background: #ffc10726;
    border: 1px solid rgba(255, 193, 7, .3);
    border-radius: 1.5rem;
    padding: 1rem 2rem;
    z-index: 1;
    flex-shrink: 0;
    align-self: center
}

.giveaway-timer-icon {
    font-size: 2rem
}

.giveaway-timer-text {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 2.2rem;
    color: #ffc107
}

.giveaway-user-stats {
    display: flex;
    gap: 2rem;
    width: 100%;
    z-index: 1;
    flex-shrink: 0
}

.giveaway-stat-card {
    flex: 1;
    background: #02c1b31a;
    border: 1px solid rgba(2, 193, 179, .2);
    border-radius: 1.5rem;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem
}

.giveaway-stat-value {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 3rem;
    color: #fff;
    margin: 0
}

.giveaway-stat-label {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2rem;
    color: #fff9;
    margin: 0
}

.giveaway-leaderboard {
    width: 100%;
    flex: 1;
    min-height: 0;
    background: #02c1b30d;
    border: 1px solid rgba(2, 193, 179, .15);
    border-radius: 2rem;
    padding: 1.2rem;
    z-index: 1;
    display: flex;
    flex-direction: column
}

.giveaway-leaderboard-title {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 2.4rem;
    color: #fff;
    margin: 0 0 1rem;
    text-align: center;
    flex-shrink: 0
}

.giveaway-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    overflow-y: auto;
    flex: 1;
    padding-right: .5rem
}

.giveaway-leaderboard-list::-webkit-scrollbar {
    width: 3px
}

.giveaway-leaderboard-list::-webkit-scrollbar-track {
    background: #ffffff1a;
    border-radius: 2px
}

.giveaway-leaderboard-list::-webkit-scrollbar-thumb {
    background: #02c1b380;
    border-radius: 2px
}

.giveaway-leaderboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 1.2rem;
    background: #ffffff08;
    border-radius: 1rem;
    flex-shrink: 0
}

.giveaway-leaderboard-item-current {
    background: #02c1b333;
    border: 1px solid rgba(2, 193, 179, .4)
}

.giveaway-leaderboard-rank {
    display: flex;
    align-items: center;
    gap: .8rem
}

.giveaway-leaderboard-icon {
    font-size: 1.8rem
}

.giveaway-leaderboard-position {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: #ffffffe6
}

.giveaway-leaderboard-invites {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 1.8rem;
    color: #fff
}

.giveaway-bottom-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    z-index: 1;
    flex-shrink: 0
}

.giveaway-details-link {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 2.2rem;
    color: #02c1b3;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    align-self: center
}

.giveaway-details-link:active {
    opacity: .7
}

.giveaway-referral-link {
    position: relative;
    background: #02c1b31a;
    height: auto;
    aspect-ratio: 711.938 / 96.744;
    overflow: visible;
    border-radius: 6.2rem;
    width: 100%;
    max-width: 70rem;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    padding: 0 4.5rem
}

.giveaway-referral-link:active {
    background: #02c1b333
}

.giveaway-referral-url {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.8rem;
    color: #fff;
    margin: 0;
    padding: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.giveaway-referral-copy {
    width: 3.47rem;
    height: 3.47rem;
    margin-left: 2rem;
    flex-shrink: 0
}

.giveaway-referral-copy img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.giveaway-copied-tooltip {
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translate(-50%);
    background: #02c1b3;
    color: #000404;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    padding: .6rem 1.5rem;
    border-radius: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    white-space: nowrap
}

.giveaway-copied-tooltip-visible {
    opacity: 1
}

.giveaway-invite-btn {
    width: 100%;
    background: #02c1b3;
    border: none;
    border-radius: 5rem;
    padding: 1.8rem;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 2.6rem;
    color: #000404;
    cursor: pointer;
    box-shadow: 0 0 0 .6rem #03c8ba40
}

.giveaway-invite-btn:active {
    background: #03d4c5
}

.contest-screen-container {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #000606;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 10rem 6%;
    box-sizing: border-box;
    gap: 2.5rem
}

.contest-bg-elements {
    position: absolute;
    left: 60%;
    top: -11.78%;
    z-index: 0;
    pointer-events: none
}

.contest-ellipse-1 {
    position: absolute;
    width: 69.52vw;
    height: 42.63vh;
    left: 25.11vw;
    top: 21.45vh;
    background: #03c8ba80;
    filter: blur(21.5vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.contest-ellipse-2 {
    position: absolute;
    width: 119.74vw;
    height: 73.45vh;
    left: 0;
    top: .43vh;
    background: #03c8ba80;
    mix-blend-mode: plus-lighter;
    filter: blur(26.2vw);
    will-change: filter;
    transform: translateZ(0);
    isolation: isolate
}

.contest-ellipse-3 {
    position: absolute;
    width: 42.91vw;
    height: 20.01vh;
    left: 29.99vw;
    top: 0;
    background: #ffffff80;
    mix-blend-mode: plus-lighter;
    filter: blur(14.3vw);
    transform: rotate(29.08deg) translateZ(0);
    will-change: filter, transform;
    isolation: isolate
}

.contest-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: Rubik, sans-serif;
    font-size: 2.4rem;
    z-index: 10
}

.contest-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    z-index: 1;
    flex-shrink: 0
}

.contest-header-icon {
    font-size: 4rem
}

.contest-title {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 3.8rem;
    color: #fff;
    margin: 0
}

.contest-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    background: #ffc10726;
    border: 1px solid rgba(255, 193, 7, .3);
    border-radius: 1.5rem;
    padding: 1rem 2rem;
    z-index: 1;
    flex-shrink: 0;
    align-self: center
}

.contest-timer-icon {
    font-size: 2rem
}

.contest-timer-text {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 2.2rem;
    color: #ffc107
}

.contest-stats {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    z-index: 1;
    flex-shrink: 0
}

.contest-stat-card {
    flex: 1;
    background: #02c1b31a;
    border: 1px solid rgba(2, 193, 179, .2);
    border-radius: 1.5rem;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: .5rem
}

.contest-stat-value {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 3.6rem;
    color: #fff;
    margin: 0
}

.contest-stat-chance {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 2rem;
    color: #02c1b3;
    margin: auto 0 0;
    text-align: center;
    line-height: 1.2;
    flex: 1;
    display: flex;
    align-items: center
}

.contest-stat-label {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2rem;
    color: #fff9;
    margin: 0;
    text-align: center
}

.contest-leaderboard {
    width: 100%;
    background: #02c1b30d;
    border: 1px solid rgba(2, 193, 179, .15);
    border-radius: 2rem;
    padding: 1.8rem;
    z-index: 1;
    display: flex;
    flex-direction: column
}

.contest-leaderboard-title {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 2.8rem;
    color: #fff;
    margin: 0 0 1.5rem;
    text-align: center;
    flex-shrink: 0
}

.contest-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: .8rem
}

.contest-leaderboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    background: #ffffff08;
    border-radius: 1.2rem;
    flex-shrink: 0
}

.contest-leaderboard-item-current {
    background: #02c1b333;
    border: 1px solid rgba(2, 193, 179, .4)
}

.contest-leaderboard-left {
    display: flex;
    align-items: center;
    gap: 1rem
}

.contest-leaderboard-icon {
    font-size: 2.2rem
}

.contest-leaderboard-position {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    color: #ffffffe6
}

.contest-leaderboard-prize {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 2.2rem;
    color: #02c1b3
}

.contest-leaderboard-tickets {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 2.2rem;
    color: #fff;
    white-space: nowrap
}

.contest-leaderboard-divider {
    height: 1px;
    background: #02c1b333;
    margin: .4rem 0
}

.contest-bottom-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    z-index: 1;
    flex-shrink: 0;
    margin-top: auto
}

.contest-details-link {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 2.2rem;
    color: #02c1b3;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    align-self: center
}

.contest-details-link:active {
    opacity: .7
}

.contest-referral-link {
    position: relative;
    background: #02c1b31a;
    height: auto;
    aspect-ratio: 711.938 / 96.744;
    overflow: visible;
    border-radius: 6.2rem;
    width: 100%;
    max-width: 70rem;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    padding: 0 4.5rem
}

.contest-referral-link:active {
    background: #02c1b333
}

.contest-referral-url {
    font-family: Rubik, sans-serif;
    font-weight: 300;
    font-size: 2.8rem;
    color: #fff;
    margin: 0;
    padding: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.contest-referral-copy {
    width: 3.47rem;
    height: 3.47rem;
    margin-left: 2rem;
    flex-shrink: 0
}

.contest-referral-copy img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.contest-copied-tooltip {
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translate(-50%);
    background: #02c1b3;
    color: #000404;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    padding: .6rem 1.5rem;
    border-radius: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    white-space: nowrap
}

.contest-copied-tooltip-visible {
    opacity: 1
}

.contest-invite-btn {
    width: 100%;
    background: #02c1b3;
    border: none;
    border-radius: 5rem;
    padding: 1.8rem;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 2.6rem;
    color: #000404;
    cursor: pointer;
    box-shadow: 0 0 0 .6rem #03c8ba40
}

.contest-invite-btn:active {
    background: #03d4c5
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 1.25vw
}

body {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #000606;
    width: 100%;
    min-height: 100vh;
    color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0
}

#root {
    width: 100vw;
    min-height: 100vh;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    background: #000606
}

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

::-webkit-scrollbar-track {
    background: #ffffff0d;
    border-radius: 4px
}

::-webkit-scrollbar-thumb {
    background: #d4a57480;
    border-radius: 4px
}

::-webkit-scrollbar-thumb:hover {
    background: #d4a574b3
}