.status-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    background-color: #28a745; /* Green for light theme */
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    
    transition: 0.3s ease;

    /* animation: blink 1.5s ease-in-out infinite;
    animation-delay: 0.5s; */
}

.center.loaded .status-dot {
    opacity: 1;
    /* animation: insideToOut 0.5s ease-out forwards; */
    animation: insideToOut 0.5s ease-out forwards, blink 1.5s ease-in-out infinite;
    transform: scale(1);

    animation-delay: 0s, 0.5s;
}

body.dark .status-dot {
    background-color: #34c759; /* Lighter green for dark theme */
}

.status-dot::before {
    content: '';
    position: absolute;
    top: -16.5%;
    left: -16.7%;
    width: 17px; /* 4px larger than dot */
    height: 17px;
    border: 1px solid #28a745; /* Match dot color */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: border-color 0.3s ease;
}

.center.loaded .status-dot::before {
    opacity: 1;
    animation: insideToOut 0.5s ease-out forwards, blink 1.5s ease-in-out infinite;
    transform: translate(-50%, -50%) scale(1);
    animation-delay: 0s, 0.5s;
}
body.dark .status-dot::before {
    border-color: #34c759; /* Match dot color in dark theme */
}



@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}