body {
    transition: background 0.3s, color 0.3s;
}

.light-mode {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    color: #333;
}

.dark-mode {
    background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
    color: #e0e0e0;
}

.metric-card {
    transition: transform 0.2s;
}

.metric-card:hover {
    transform: scale(1.05);
}

.fade-in {
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
}

.card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table {
    background: white;
    border-radius: 10px;
    overflow: hidden;
}

.dark-mode .card, .dark-mode .table {
    background: #2d2d3d;
    color: #e0e0e0;
}

.dark-mode .navbar {
    background: linear-gradient(90deg, #3a3a5c 0%, #4a4a6c 100%);
}