Modern UI Component
    
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f5f5f5;
        }
        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            padding: 24px;
            max-width: 400px;
            margin: 20px auto;
        }
        .card-header {
            margin-bottom: 16px;
        }
        .card-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #111;
        }
        .card-subtitle {
            color: #666;
            font-size: 0.9rem;
            margin-top: 4px;
        }
        .stats {
            display: flex;
            gap: 16px;
        }
        .stat-item {
            flex: 1;
            background: #f8f9fa;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }
        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #3a86ff;
        }
        .stat-label {
            font-size: 0.75rem;
            color: #666;
            margin-top: 4px;
        }
        .action-btn {
            background: #3a86ff;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 20px;
            font-size: 0.9rem;
            font-weight: 500;
            width: 100%;
            margin-top: 20px;
            cursor: pointer;
            transition: back

// Project Task Manager
class TaskManager {
    constructor() {
        this.tasks = [];
        this.taskId = 1;
    }
    
    addTask(title, priority = 'medium') {
        const newTask = {
            id: this.taskId++,
            title,
            priority,
            status: 'active',
            createdAt: new Date(),
            completedAt: null
        };
        
        this.tasks.push(newTask);
        console.log(`Task created: '${title}' (ID: ${newTask.id})`);
        return newTask;
    }
    
    completeTask(id) {
        const task = this.tasks.find(task => task.id === id);
        
        if (task) {
            task.status = 'completed';
            task.completedAt = new Date();
            console.log(`Task completed: '${task.title}' (ID: ${id})`);
            return true;
        } else {
            console.error(`Task with ID ${id} not found`);
            return false;
        }
    }
    
    deleteTask(id) {
        const initialLength = this.tasks.length;
        this.tasks = this.tasks.filter(task => task.id !== id);
        
        if (this.tasks.length < initialLength) {
            console.log(`Task with ID ${id} deleted`);
            return true;
        } else {
            console.error(`Task with ID ${id} not found`);
            return false;
        }
    }
    
    getTasksByStatus(status) {
        return this.tasks.filter(task => task.status === status);
    }
    
    getStats() {
        const stats = {
            total: this.tasks.length,
            active: this.getTasksByStatus('active').length,
            completed: this.getTasksByStatus('completed').length
        };
        
        console.log('Current sta