body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa;
    padding-top: 56px; /* Adjust for fixed navbar */
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
}

#app {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

#status-indicator .badge {
    transition: all 0.3s ease-in-out;
    font-size: 0.8rem;
    padding: 0.5em 0.75em;
    min-width: 110px;
    text-align: center;
}

.syncing-animation {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(13, 110, 253, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}