* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: #50C878; 
    color: #000000; 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
}

.container {    
    background: #FFFFFF; 
    border-radius: 50px; 
    padding: 30px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
    text-align: center; 
    min-width: 300px; 
    max-width: 600px; 
    position: relative; 
}

.header { 
    margin-bottom: 10px; 
}

.title { 
    font-size: 2rem; 
    color: #000000; 
    margin-bottom: 5px; 
}

.subtitle { 
    color: #3B3B3B; 
    font-size: 1rem; 
}

.status { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 5px; 
    margin: 5px 0; 
    font-size: 1rem; 
}

.status-dot { 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    background: #00FF00; 
    animation: pulse 30s infinite; 
}

.status-dot.warning { 
    background: #FFC300; 
    animation: pulse 30s infinite; 
}

.status-dot.error { 
    background: #FF0000; 
    animation: pulse 3s infinite; 
}

@keyframes pulse { 
    0% { opacity: 1; } 
    50% { opacity: 0.5; } 
    100% { opacity: 1; } 
}

.stats-container { 
    margin: 10px 0; 
}

.stat-card { 
    background: #007BFF; 
    color: white; 
    border-radius: 10px; 
    padding: 10px; 
    margin: 10px 0; 
}

#card-unassigned { 
    background: #FFD700; 
    color: black; 
}

.stat-card-green { 
    background: #28a745; 
}

.stat-card-blue { 
    background: #17a2b8; 
}

.stat-number { 
    font-size: 3.5rem; 
    font-weight: 700; 
    margin-bottom: 10px; 
}

.stat-label { 
    font-size: 1.2rem; 
    opacity: 0.9; 
}

.stat-sublabel { 
    font-size: 0.9rem; 
    opacity: 0.7; 
    margin-top: 5px; 
    font-style: italic; 
}

.section-title { 
    font-size: 1.5rem; 
    font-weight: bold; 
    color: #2c3e50; 
    margin: 20px 0 10px 0; 
    text-align: center; 
}

.error { 
    background: #E32636; 
    color: white; 
    padding: 10px; 
    border-radius: 10px; 
    margin: 10px 0; 
}

.last-update { 
    color: black; 
    font-size: 1rem; 
    margin-top: 10px; 
}

.group-name { 
    margin-top: 8px; 
    font-weight: 600; 
}

.month-progress { 
    margin-top: 5px; 
    font-size: 1rem; 
    color: black; 
}

.last-update-spacing { 
    margin-top: 3px; 
}

.staff-section { 
    margin-top: 20px; 
}

.staff-columns { 
    display: flex; 
    gap: 20px; 
    margin-top: 10px; 
}

.staff-column { 
    flex: 1; 
    background: #fff; 
    border-radius: 10px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    padding: 15px; 
}

.staff-column-title { 
    font-size: 1.1rem; 
    font-weight: bold; 
    color: #2c3e50; 
    margin-bottom: 15px; 
    text-align: center; 
    border-bottom: 2px solid #3498db; 
    padding-bottom: 10px; 
}

.staff-list { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
}

.staff-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 10px 15px; 
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); 
    border-radius: 8px; 
    transition: all 0.3s ease; 
}

.staff-item:hover { 
    transform: translateX(5px); 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
}

.staff-name { 
    font-weight: 500; 
    color: #2c3e50; 
}

.staff-count { 
    font-weight: bold; 
    color: #3498db; 
    background: white; 
    padding: 4px 12px; 
    border-radius: 20px; 
    font-size: 0.9rem; 
}

.staff-item-empty { 
    text-align: center; 
    color: #95a5a6; 
    padding: 20px; 
    font-style: italic; 
}

@media (max-width: 768px) {
    body { 
        flex-direction: column; 
        padding: 10px; 
    }
    
    .container { 
        padding: 20px; 
        min-width: auto; 
        width: 100%; 
    }
    
    .staff-columns { 
        flex-direction: column; 
        gap: 15px; 
    }
}