#loading-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #020202; z-index: 99999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: 0.6s ease;
}

.loader-rings { position: relative; width: 80px; height: 80px; margin-bottom: 30px; }
.ring { position: absolute; border-radius: 50%; border: 3.5px solid transparent; }

.ring-outer {
    width: 100%; height: 100%; border-top-color: #00e5ff; border-bottom-color: #00e5ff;
    animation: spinStop 2s ease-in-out infinite;
}
.ring-inner {
    width: 54px; height: 54px; top: 13px; left: 13px;
    border-left-color: #bf00ff; border-right-color: #bf00ff;
    animation: spinStopReverse 2s ease-in-out infinite;
}

@keyframes spinStop {
    0% { transform: rotate(0deg); }
    45% { transform: rotate(360deg); }
    55% { transform: rotate(360deg); }
    100% { transform: rotate(720deg); }
}
@keyframes spinStopReverse {
    0% { transform: rotate(0deg); }
    45% { transform: rotate(-360deg); }
    55% { transform: rotate(-360deg); }
    100% { transform: rotate(-720deg); }
}

.loading-text { color: #00e5ff; font-size: 14px; font-weight: 600; letter-spacing: 2px; margin-bottom: 15px; }
.progress-container { width: 200px; height: 24px; background: rgba(255, 255, 255, 0.05); border: 1.5px solid #00e5ff; border-radius: 12px; position: relative; overflow: hidden; }
.progress-bar { height: 100%; width: 0%; background: rgba(0, 229, 255, 0.3); box-shadow: inset 0 0 10px #00e5ff; }
#progress-text { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 700; }