:root {
    --aurora-bg: #0D0E1B;
    --aurora-track: rgba(0, 0, 0, 0.25);
    --aurora-track-border: rgba(255, 255, 255, 0.1);
    --aurora-thumb: linear-gradient(135deg, #cf008a, #e6007e);
    --aurora-text-idle: #7D8799;
    --aurora-text-active: #FFFFFF;
    --aurora-active-glow: #00A2FF;
    --aurora-connecting-glow: #FFD700;
    --aurora-fill-gradient: linear-gradient(90deg, #00A2FF, #A200FF);
}

@keyframes aurora-charging {
    0% {
        box-shadow: 0 0 10px 2px var(--aurora-connecting-glow);
    }

    50% {
        box-shadow: 0 0 25px 5px var(--aurora-connecting-glow);
    }

    100% {
        box-shadow: 0 0 10px 2px var(--aurora-connecting-glow);
    }
}

body {
    justify-content: center;
    align-items: center;
    background: var(--aurora-bg);
    animation: none;
    font-family: 'Vazir', sans-serif;
}

#setting-app>div:not(#main),
.box-select-server,
.box-select-server-mini,
#Logs,
#ip-ping,
.connected-box,
h1 {
    display: none !important;
}

#menu>div:nth-child(-n+5):not(#menu-exit) {
    display: none !important;
}

.connection {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-grow: 1;
}

.connection::after {
    content: "Slide to Activate";
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--aurora-text-idle);
    transition: all 0.5s ease;
    order: -1;
}

.connection:has(#ChangeStatus.connecting)::after {
    content: "Establishing Connection...";
    color: var(--aurora-connecting-glow);
    letter-spacing: 1px;
}

.connection:has(#ChangeStatus.connected)::after {
    content: "Connection Secured";
    color: var(--aurora-text-active);
    text-shadow: 0 0 10px var(--aurora-active-glow);
}

#ChangeStatus {
    width: 250px;
    height: 90px;
    background: var(--aurora-track);
    border: 2px solid var(--aurora-track-border);
    border-radius: 45px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
    transform: none !important;
    transition: all 0.5s ease;
    cursor: pointer;
    position: relative;
}

#ChangeStatus:hover {
    border-color: var(--aurora-active-glow);
}

#ChangeStatus svg {
    display: none;
}

/* Power Fill Effect */
#ChangeStatus::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--aurora-fill-gradient);
    border-radius: 45px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* The Slider Thumb */
#ChangeStatus::before {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    background: var(--aurora-thumb);
    border-radius: 35px;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
    z-index: 2;
    opacity: 1;
}

#ChangeStatus.connecting {
    animation: aurora-charging 1.5s infinite ease-in-out;
    rotate: 0deg !important;
}

#ChangeStatus.connecting::after {
    animation: none;
    border-radius: 25px;
    inset: 0;
}

#ChangeStatus.connected {
    border-color: var(--aurora-active-glow);
    box-shadow: 0 0 20px var(--aurora-active-glow);
}

#ChangeStatus.connected::after {
    opacity: 1;
}

#ChangeStatus.connected::before {
    background: #fff;
    transform: translate(158px, -50%);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}