.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    border-color: rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .card {
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .card:hover {
    box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.18);
}