/* --- SKELETON LOADING STYLES --- */
:root {
    --skeleton-bg: #1c1c21;
    --skeleton-highlight: #2c2c2c;
}

.skeleton-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0f0f12; /* Match project's dark background */
    z-index: 10000;
    overflow: hidden;
    transition: opacity 0.4s ease-out, visibility 0.4s;
}

.skeleton-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.skeleton {
    background: var(--skeleton-bg);
    background: linear-gradient(110deg, var(--skeleton-bg) 8%, var(--skeleton-highlight) 18%, var(--skeleton-bg) 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    border-radius: 12px;
}

.skeleton-title {
    height: 48px;
    width: 40%;
    max-width: 400px;
}

.skeleton-subtitle {
    height: 20px;
    width: 25%;
    max-width: 200px;
}

.skeleton-card {
    height: 180px;
    width: 100%;
    margin-bottom: 20px;
}

.skeleton-text {
    height: 14px;
    width: 100%;
    margin-bottom: 12px;
}

.skeleton-button {
    height: 45px;
    width: 120px;
}

.skeleton-circle {
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

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

/* Ensure content doesn't jump when skeleton hides */
body.loading {
    overflow: hidden;
}