html,
body {
    margin: 0;
    min-height: 100%;
    background: #f2f5ef;
    color: #0a0a0a;
}

#app {
    min-height: 100vh;
}

#app-boot-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-content: center;
    gap: 0.85rem;
    background:
        radial-gradient(circle at 20% 20%, rgba(204, 243, 47, 0.35), transparent 48%),
        radial-gradient(circle at 82% 8%, rgba(10, 10, 10, 0.08), transparent 32%),
        linear-gradient(160deg, #edf2e9 0%, #dfead5 100%);
    transition: opacity 340ms ease, visibility 340ms ease;
}

#app-boot-loader.boot-loader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.boot-pill {
    width: min(66vw, 320px);
    height: 11px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(10, 10, 10, 0.12) 22%, rgba(10, 10, 10, 0.28) 50%, rgba(10, 10, 10, 0.12) 78%);
    background-size: 220% 100%;
    animation: boot-shimmer 1.1s linear infinite;
}

.boot-label {
    font: 600 11px/1.2 "DM Sans", sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.78;
    text-align: center;
}

@keyframes boot-shimmer {
    from {
        background-position: -120% 0;
    }

    to {
        background-position: 120% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .boot-pill {
        animation: none;
    }
}