:root {
    --bg-gradient: linear-gradient(135deg, #0b4fbc, #9A14F8);
    --text-main: #ffffff;
    --text-sub: #223043;
    --progress-bg: #ffffff;
    --progress-border: rgba(255,255,255,0.1);
    --progress-fill: linear-gradient(90deg, #0b4fbc, #9A14F8);
}

html, body {margin: 0; padding: 0; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; height: 100%;}

body {font-family: system-ui, -apple-system, "Segoe UI", sans-serif;}

body.is-loading {overflow: hidden; touch-action: none;}

body.is-loading * {pointer-events: none !important;}

body.is-loading .loading-page-main,
body.is-loading .loading-page-main * {pointer-events: auto !important;}

.loading-page-main {position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; will-change: transform; transform: translateZ(0);
    background: var(--bg-gradient); color: var(--text-main); user-select: none; transition: opacity 400ms ease, transform 400ms ease;}

.loading-page-main.slade-up {opacity: 0; transform: scale(1.05);}

.loading-page-layout {display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 100%; height: 100%;}

.loading-page-head {display: flex; flex-direction: column; align-items: center;}

.loading-page-logo {width: 200px; margin-bottom: 30px;}

.loading-page-brand {font-size: 50px; font-weight: bold; margin-bottom: 15px;}

.loading-page-text {margin-top: -10px; font-size: 20px; color: var(--text-sub);}

.loading-page-body {width: 25%; display: flex; flex-direction: column; gap: 10px;}

.loading-icon {display: flex; justify-content: space-between; font-size: 13px;}

.loading-number {transition: .3s ease;}

.loading-bar {width: 100%; height: 15px; border-radius: 10px; overflow: hidden; background: var(--progress-bg); border: 1px solid var(--progress-border); box-shadow: 0 0 10px rgba(0,0,0,0.2);}

.bar { width: 0%; height: 100%; background: var(--progress-fill); border-radius: 10px; transition: width .25s ease-out;}

.loading-page-id-version { display: flex; flex-direction: column; align-items: center; gap: 5px; font-weight: 600;}

.fa-arrows-rotate {display: inline-block; animation: rotate 1.5s linear infinite;}

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

@media (max-width: 1000px) {
    .loading-page-logo {width: 130px; margin-bottom: 0px;}
    .loading-page-brand {font-size: 45px; margin-bottom: 10px;}
    .loading-page-body {width: 75%;}
}