body { 
    font-family: 'Segoe UI', Arial, sans-serif; 
    background-color: #212529; 
    color: #ffffff; 
    text-align: center; 
    padding: 25px; 
}

h1 { 
    margin-bottom: 25px; 
    font-weight: 600; 
}

.grid-container { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
    max-width: 1100px; 
    margin: 0 auto 20px auto; 
}

.card { 
    background-color: #495057; 
    padding: 20px; 
    border-radius: 8px; 
    border: 1px solid #6c757d; 
}

.card h2 { 
    margin: 0 0 10px 0; 
    font-size: 1.2rem; 
    font-weight: 400; 
    color: #e9ecef; 
}

.val { 
    font-size: 2.8rem; 
    font-weight: bold; 
}

.motion-card { 
    max-width: 1100px; 
    margin: 0 auto 20px auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background-color: #495057; 
    padding: 18px 30px; 
    border-radius: 8px; 
    border: 1px solid #6c757d; 
}

.badge { 
    padding: 8px 24px; 
    border-radius: 6px; 
    font-size: 1.4rem; 
    font-weight: bold; 
}

.badge-no { 
    background-color: #343a40; 
    color: #adb5bd; 
}

.badge-yes { 
    background-color: #dc3545; 
    color: #ffffff; 
    animation: blinker 1s linear infinite; 
}

@keyframes blinker { 
    50% { opacity: 0.5; } 
}

/* Side-by-Side Chart and Table Container */
.bottom-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 20px; 
    max-width: 1100px; 
    margin: 0 auto; 
    text-align: left; 
}

.chart-card, .table-card { 
    background-color: #495057; 
    padding: 20px; 
    border-radius: 8px; 
    border: 1px solid #6c757d; 
}

.table-card h3 { 
    margin-top: 0; 
    color: #e9ecef; 
    text-align: center; 
}

table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 0.9rem; 
    text-align: center; 
}

th, td { 
    padding: 8px 6px; 
    border-bottom: 1px solid #6c757d; 
}

th { 
    background-color: #343a40; 
    color: #00e676; 
}