.card {
    background-color: var(--card-bg);
    border-left: 6px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    padding: 16px;
    cursor: pointer;
}

.card:hover {
    background-color: var(--card-bg-hover);
    border-left: 6px solid var(--card-border-hover);
}

.card-unread {
    background-color: var(--card-unread-bg);
    border-left: 6px solid var(--card-unread-border);
}

.card-favorite {
    background-color: var(--card-favorite-bg);
    border-left: 6px solid var(--card-favorite-border);
}

.card-content h4 {
    margin: 0;
    font-size: 1.25rem;
}

.card-content p {
    font-size: 0.875rem;
    color: var(--card-fg);
    margin-top: 8px;
}

.card-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 16px;
}

.card-btn {
    cursor: pointer;
    background: none;
    color: #333;
    border: none;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.card-btn:hover {
    color: var(--card-btn-hover-fg);
}