:root {
    --skel-base: #e9edf2;
    --skel-surface: #ffffff;
    --skel-border: rgba(15, 23, 42, 0.08);
    --skel-shadow: 0 10px 26px rgba(2, 6, 23, 0.06);

    --skel-blue-1: rgba(0, 122, 255, 0.00);
    --skel-blue-2: rgba(0, 122, 255, 0.18);
    --skel-blue-3: rgba(0, 122, 255, 0.35);

    --skel-radius: 16px;
}

#app-content.spa-loading {
    position: relative;
}

.spa-skeleton-overlay {
    position: absolute;
    inset: 0;
    padding: 16px 18px 24px 18px;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
}

@keyframes skelShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

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


.skel-cards-wrap {
    max-width: 100%;
    margin: 0 auto;
}

.skel-search {
    height: 44px;
    border-radius: 999px;
    margin: 10px 0 22px 0;

    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #a8c7f1 21%, #ececec 60%);
    background-size: 200% 100%;
    animation: 1s shine linear infinite;
    color: transparent !important;
}

.skel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 18px;
}

@media (max-width: 1100px) {
    .skel-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 680px) {
    .skel-grid {
        grid-template-columns: 1fr;
    }
}

.skel-card {
    background: var(--skel-surface);
    border: 1px solid var(--skel-border);
    border-radius: 18px;
    box-shadow: var(--skel-shadow);
    padding: 18px 18px 16px 18px;
    height: 148px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.skel-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin: 8px auto 14px auto;
    opacity: 0.95;

    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #a8c7f1 21%, #ececec 60%);
    background-size: 200% 100%;
    animation: 1s shine linear infinite;
    color: transparent !important;
}

.skel-line {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #a8c7f1 21%, #ececec 60%);
    background-size: 200% 100%;
    animation: 1s shine linear infinite;
    color: transparent !important;
    border-radius: 10px;

    display: block;
    height: 16px;
    margin: 2px 0;
    width: 100%;
}

.skel-line-2 {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #a8c7f1 21%, #ececec 60%);
    background-size: 200% 100%;
    animation: 1s shine linear infinite;
    color: transparent !important;
    border-radius: 10px;

    display: block;
    height: 16px;
    margin: 2px 0;
    width: 100%;
}

@keyframes shine {
    to {
        background-position-x: -188%;
    }
}

.skel-search-card {
    background: #ffffff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 18px;
    padding: 22px 18px;
    margin: 16px 0 22px;
    box-shadow:
        0 14px 30px rgba(16, 24, 40, 0.08),
        0 2px 6px rgba(16, 24, 40, 0.05);
}

.skel-search {
    height: 54px;
    border-radius: 28px;
    width: 100%;
}