html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #050914;
    font-family: Inter, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

#app {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 100dvh;
    background: #050914;
}

.splash-screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
            radial-gradient(circle at 50% 35%, rgba(88, 174, 255, 0.12), transparent 35%),
            radial-gradient(circle at 50% 80%, rgba(73, 255, 170, 0.08), transparent 40%),
            linear-gradient(180deg, #08111f 0%, #09182b 40%, #050914 100%);
}

.splash-screen::before,
.splash-screen::after {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
}

.splash-screen::before {
    background:
            radial-gradient(circle at 25% 25%, rgba(255,255,255,0.06) 0, transparent 26%),
            radial-gradient(circle at 75% 70%, rgba(255,255,255,0.04) 0, transparent 28%);
    filter: blur(30px);
    animation: driftGlow 18s ease-in-out infinite;
}

.splash-screen::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 25%, transparent 75%, rgba(255,255,255,0.02));
    mix-blend-mode: screen;
}

.splash-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.06);
}

.panel-grid-back {
    animation: gridFloat 24s ease-in-out infinite;
    transform-origin: center;
}

.panel-grid-front {
    animation: gridPulse 8s ease-in-out infinite;
    transform-origin: center;
}

.loader {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-progress {
    width:110px;
    height:110px;
    transform: rotate(-90deg);
}

.loading-progress circle {
    fill:none;
    stroke-width:6;
}

.loading-progress .track {
    stroke:rgba(255,255,255,0.15);
}

.loading-progress .progress {
    stroke:#4fd1ff;
    stroke-linecap:round;

    stroke-dasharray:
            calc(3.141 * var(--blazor-load-percentage,0%) * 0.8),
            500%;

    transition:stroke-dasharray 0.08s ease-out;

    filter: drop-shadow(0 0 6px rgba(79,209,255,0.6));
}

.loading-progress-text {
    top: 40%;
    left: 33%;
    color: #fff;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

#app.loaded .splash-screen,
#app.loaded .loader {
    opacity: 0;
    visibility: hidden;
    transition:
            opacity 420ms ease,
            visibility 420ms ease;
}

@keyframes driftGlow {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0, -18px, 0) scale(1.04);
    }
}

@keyframes gridFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-12px) scale(1.015);
    }
}

@keyframes gridPulse {
    0%, 100% {
        opacity: 0.82;
    }
    50% {
        opacity: 1;
    }
}