body.app-boot .shell,
body.app-boot .app-footer {
    opacity: 0;
    transform: translateY(8px);
    animation: bootReveal 0s linear 2200ms forwards;
}

body .shell,
body .app-footer {
    transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.app-transitioning .shell,
body.app-transitioning .app-footer {
    opacity: 0.22;
    transform: translateY(4px) scale(0.996);
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(245,247,251,0.92), rgba(236,239,244,0.94));
    transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.page-loader::before {
    content: "";
    position: absolute;
    top: clamp(90px, 20vh, 180px);
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, calc(100vw - 42px));
    height: clamp(120px, 22vh, 180px);
    border-radius: 20px;
    border: 1px solid rgba(7,29,57,0.12);
    background: linear-gradient(110deg, rgba(255,255,255,0.86) 8%, rgba(229,238,249,0.95) 48%, rgba(255,255,255,0.86) 88%);
    background-size: 220% 100%;
    box-shadow: 0 16px 32px rgba(7,29,57,0.12);
    animation: pageShimmer 1.15s linear infinite;
}

body.app-boot .page-loader,
body.app-transitioning .page-loader {
    opacity: 1;
    visibility: visible;
}

body.app-boot .page-loader {
    animation: bootHide 0s linear 2200ms forwards;
}

.btn svg,
.btn i,
.input-icon svg,
.icon-inline svg {
    width: 16px;
    height: 16px;
}

@keyframes pageShimmer {
    0% { background-position: -280px 0; }
    100% { background-position: 280px 0; }
}

@keyframes bootReveal {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes bootHide {
    to {
        opacity: 0;
        visibility: hidden;
    }
}